Best UI design pattern for Affording Fluid Navigation

The Design Problem

You are dealing with a multi-level site, system, application, dialog box, panel or window and you want to allow users to navigate to these various levels from one point on the user interface. Each level contains different sets of contents that need to be grouped together a) so the user knows they are connected b) to prevent the potential confusion from having unconnected options arranged together c) so they can compare their options before making a selection and d) so the user can go straight to a specific set of options according to their current aims and objectives.

 

Why choose a tabbed document interface?

The main navigational reasons for implementing tabbed document interfaces in user interface design are as follows:

 

They are common within many web, system, and application designs so users will almost certainly have come across one and know how they work and how they must interact to reach their navigation options.

 

By grouping contents or links into separate tabs you are categorizing information and navigation points within the user interface, so the user always knows where they must go if they want to jump to another level within a design.

 

The user can compare connected links to determine where to go next. For example, if a capriciousness.com user wants to find information on a certain international player they can view the list of countries and choose the target nationality.

 

Tabs represent the broadest set of navigation points in the architecture of a design. Therefore, they help to establish a visual hierarchy, so the user knows where to start their search process.

In web designs, tabbed document interfaces provide a form of progressive disclosure, where the user can drill-down into progressively more specific and detailed lists of links or contents, as and when they want to.

By placing sets of links or contents into separate tabs the user only has to attend to options relevant to their current task(s). If the links and contents from different sets or categories were all placed together the user would have to scan through a much longer list of potential selections, which would take longer and slow down the user’s productivity.

 

Tabs are all arranged together along the top of a window, panel, dialog box or region of the user interface, which enables the user to quickly navigate from one set of content or links to another, without having to move to another part of the overall site, system or application design.

 

When content can be fit into individual tabs – without sacrificing the organization of information or affecting the user’s ability to compare different data sets – they allow the user to navigate between groups of contents without the need for new windows or pages which take time to load. Therefore, they can help to reduce the amount of time the user has to spend switching between information contained within a site, application or system.