<--Home

Contents | Background | Process | Concepts | Elements | Design

Designing the User Interface

Display Things | Capture Things | Navigate | Panel Layout

Navigate


The advantage of having multiple windows available to the user also creates the challenge of navigating from one to another without getting lost or confused. There are many guidelines that can make navigation easy and convenient.

First consider some things that should be avoided. There are a wide variety of events that can initiate navigation from one panel to another, but certain design elements should not be used to accomplish this. Radio buttons and check boxes should never be used to initiate navigation. These are explicitly for capturing information and setting values. Also, a single click on an element in a scrolling list should never initiate navigation. A double click on an element should be used to combine the making of a selection and the initiation of navigation, as this indicates that some action should be taken in addition to the fact that a selection has been made. A single click implies no such indication and should be used only to capture information or set a value.


Avoid navigation: expand the window

Sometimes the need to navigate to another window can be avoided altogether by simply expanding the window that is in use. Including an icon that will effect the expansion is all that is needed.

top


Navigate from one panel to another within the same window

The most simple form of navigation is when there is one window which can display a number of panels. There are a variety of ways in which this can be accomplished.

A frequently used metaphor in this situation is with a rolodex or stack of files. The panels are drawn with labeled tabs at the top, and clicking on a particular tab will cause that panel to be visible.

see pictures

Another method is to have a scrolling list along one side that indicates the various panels available, optionally with some sort of icon. Clicking the particular element in the list will cause the desired panel to appear.

see pictures

Yet a third option is to have a popup list that will change from one panel to the other. This saves a lot of space, and the popup list also serves as the label for each individual panel.

see pictures

Note that in all of the previous examples a series of buttons appears consistently along the bottom of the window on all panels.

top


Navigate from window to window

All but the most simple applications will be broken down into many windows. Just moving from one window to another is trivial, as it can be accomplished by push buttons, clickable icons, or pull down menus. But formulating an overall approach for navigation throughout an application that prevents users from getting confused or lost is a much more complicated process. This requires thinking of the windows as parts of an integrated whole, not as stand-alone dialog boxes.

The first step in establishing a navigation scheme is to plan out exactly what windows will be needed and what each one will contain. Once these have been established the navigation "paths" from one window to another can be plotted. The better organized the windows are the easier the task of navigation will be.

The selection of windows and the navigation paths should map back to the conceptual data model that was generated as part of the conceptual design phase. The users think of their application in terms of the conceptual data entities, either consciously or subconsciously, and they will have an innate familiarity with the application if the windows are organized in this way.

Each window should correspond to a conceptual data entity, and the navigation from one window to the next should at the very least follow the path of relationships from one entity to the next. Caution should be used in having multiple conceptual data entities in one window or one conceptual entity spread over multiple windows as this can be cumbersome and confusing to the users. If a conceptual data entity is too complex to be represented in one window or if a window becomes cluttered or busy, consider having an expanding window or having multiple panels in the same window.

There should be one particular window that functions as the users' "home," which would be the first window they see when entering the system (after the splash screen, if there is one). The users will quickly grow accustomed to this window and will feel that it is a comfortable and safe place. Every panel in the application should provide a permanent object that is a direct path back to the home window. In this way the users will always have a "way out" if they get lost or confused.

The home window should correspond to the dominant logical data entity (i.e. the entity to which the greatest number of other entities relate), or to the entity that marks the genesis of the workflow. If no entity meets these criteria, an entity should be arbitrarily chosen. In any event, the home window should be a productive dialog, not just a list of directory buttons.

In addition to the home window, there should be a number of "core" windows that correspond to the entities that are related directly to the home entity. There should always be a direct path from any one core window to any other, and, of course, a direct path back to the home window. The home window and core windows should constitute the bulk of the application.

Each core window could then have a number of "satellite" windows, which correspond to conceptual data entities that have relationships with the core entity. There should be a direct path from any core window to each of its satellite windows.

One overriding principle is that whatever path is provided from one window to the next, there should ALWAYS be a direct way to get back to the window that the users just came from. In this way if users poke around and explore, they should be able to backtrack as if they'd left a trail of crumbs. It is also good to provide redundancy in navigation. It could be that the users could get from point A to point B by clicking on a push button on the screen or by selecting an entry from a pull-down menu, or even by additional means. It is important to strike a good balance, however. Too many choices or irrelevant choices can cause confusion. A variety of choices can allow different users with different tastes and preferences to navigate as they like.

top