Browse Prior Art Database

A method to evaluate and visualize the tab navigation quality of a user interface Disclosure Number: IPCOM000193473D
Original Publication Date: 2010-Feb-25
Included in the Prior Art Database: 2010-Feb-25
Document File: 5 page(s) / 118K

Publishing Venue



A method to evaluate and visualize the tab navigation quality of a user interface

This text was extracted from a PDF file.
At least one non-text object (such as an image or picture) has been suppressed.
This is the abbreviated version, containing approximately 38% of the total text.

Page 1 of 5

A method to evaluate and visualize the tab navigation quality of a user interface

Assessing the usability of a user interface is subjective and reliant on the skills of a usability expert. Some tasks can be automated but in reality a lot of the time checking things such as how easy it is to navigate a screen can be very manual.

    One usability aspect of UI design is that of keyboard (and specifically tab key) navigation. The order in which elements of the screen are navigated needs to be in an expected order. An example order is the 'Z' pattern. This means first navigating from left to right and then top to bottom. This pattern is also true of the elements of a screen's sub components such as a panel. In this case, navigation between the panels themselves would also be in this expected order. The usability of the keyboard navigation of a user interface can be tested hands on. The tester uses the keyboard (and often specifically the tab key) to check how the cursor/position context moves around the screen.

    In a badly implemented interface the navigation might go through the first couple of buttons at the top of the screen, then hop to a button at the bottom and then back to one near the top of the screen, before going back to the bottom. In a well implemented user interface the cursor/position context should flow smoothly through the user interface.

Fig 1: Example of a bad tab navigation.. probably based on the creation order, or caused by evolution changes of the dialog box contents.

    This article proposes an automated way of testing for good implementation of screen navigation. We also extend this idea to presenting the current and optimal navigations superimposed over the existing interface.

[This page contains 1 picture or other non-text object]

Page 2 of 5

Fig 2: Current navigation superimposed. Note this display could animate instead of all being present at once; imagine arrows appearing one after the other in order.

Fig 3: Optimal navigation superimposed; again this could animate.

    The core idea is to identify all the navigable elements of the display, identify the navigation order of these elements (sometimes known as the tab order, though in reality other keys such as the arrow keys can be used), and to compare the navigation order with a navigation profile that represents the most effective navigation route. A numeric score that indicates how well the actual navigation pattern matches the reference pattern can be determined. The reference pattern and the actual pattern of navigation could be superimposed on the display to visually highlight the areas of difference and identify where the interface can be improved.

The approach is applicable to sub-sections of the display to get a more fine


[This page contains 2 pictures or other non-text objects]

Page 3 of 5

grained score for distinct regions of the display.

    A general reference pattern for 'good' navigation would typically be to have a 'Z' traversal of elements on the displa...