What is navigation design in HCI?

Navigation in human–computer interaction (HCI) allows users to move from one part of the interface to another. It also concerns the ability of users to locate where they are in an interface. Navigation is aided by navigation controls, such as menus and links to other screens.

Navigation design

Navigation design refers to organizing an interface's navigation to enable users to seamlessly go from one point to another. It provides users with knowledge of where they are in the interface, how they reached there, and where they can go from there.

The user interface (UI) designer should design the navigation in a user-centered way. In other words, it should not be the user's duty to figure out where the interface's features are, as the navigation should walk the user through the system itself.

Structure of navigation design

The UI designer must consider the interface's structure to organize the navigation. The structure is of two main types:

• Local structure

• Global structure

Let's look at how the navigational structures should be designed.

Local structure

Local structure refers to a single screen or page in an interface. A single screen's navigation should tell the user about the following things:

• Where they are: The screen should give enough information to the users about their current location in the interface, and the current state of their goal. For example, a page title shows the users where they currently are in the interface.

• What they can do: All the possible navigation options from the current screen should be clearly visible to the user. Any links or buttons to other pages should be highlighted to communicate their purpose to the user, so they know where they can go further in the interface.

• What will happen: Navigation options should clearly indicate to the user what will happen once they click on them. For example, when icons are used for navigation, they should be accompanied by some explanation or labels. This way, the user does not have to test where it goes by clicking on it, and later be frustrated when the result is not as expected.

• Where they have been: Users must be given enough feedback about the screens they have visited, and the tasks they have completed, so they don't feel lost. One way designers do this is by displaying breadcrumbs, which show the path of arriving at the current page.

Global structure

Global structure refers to how all the screens in an interface link together. There are two ways to organize the global structure:

• Hierarchical organization: The whole system is functionally decomposed into logical groups. This hierarchy helps define the menu options of an interface. An example of such a hierarchy is shown below:

• Network diagram: A network diagram is essential to show links between pages that might not be grouped together in a hierarchical organization. This technique is more task-oriented than a hierarchy. An example of a network of screens is shown below:

Conclusion

Navigation design is one crucial part of the interface that can make or break the user experience. Therefore, we should design the navigation thoroughly, using navigational conventions and best practices.