Ideas for Improved Within-Page Navigation

by Jakob Nielsen on February 1, 1997

Sidebar to Jakob Nielsen 's column on WebTV usability .

WebTV screen with horizontal bar indicating relative position of the viewport on the page WebTV is the first Web user interface for which I have discovered a serious need for navigational aids within the page.

The top figure shows one idea for helping users avoid getting lost on the page: using a semi-transparent blue overlay to add a "thumb" in the title field similar to that used in scrollbars in traditional GUIs. The length of the blue bar would indicate the relative proportion of the page currently seen: thus, in the example, the user would know that the current page was very long. Also, the position of the blue bar within the titlebar would indicate the part of the page currently seen: thus, in the example, the user would know that he or she was slightly below the middle of the page.

Obviously, it would be better to use a vertical bar for this purpose, but I didn't want to redesign the entire WebTV user interface for this exercise.

WebTV screen with outline of the page table of contents Furthermore, users need help with understanding the structure of the page when they are confined to looking at a very small piece at a time. Luckily, a properly constructed HTML page has an inherent structure in the form of nested headings (H1, H2, H3, etc.). The bottom figure shows my first sketch for a table of contents overlay used to facilitate an understanding of the user's current location within the page. The yellow triangle points to the first heading on the screen (or the last heading above the screen if no headings are visible), and the user can move to another heading by moving the triangle and clicking the action button (actually, selection should probably be indicated by an area cursor for the sake of consistency, but I didn't like its looks in this design).

In this design, the user would activate a special command to make the ToC overlay visible. Presumably, it would be too confusing to have it permanently visible, though it would be interesting to experiment with various transparency effects to see whether an acceptable design could be found.

 


Share this article: Twitter | LinkedIn | Google+ | Email