Sitemaps and Navigation

Hierarchical Tree

A common type of layout for applications with lots of content. Users choose a “bucket” from the navigation selected then drill down to more specific information. The downside is that it forces users to make choices from large amount of links.

01-hierarchical-tree-opt-500.jpg

Nested Doll

This type of structure is ideal for small screens and often used with a swipe left or right interaction. Can also be helpful for adding some interactivity to a form application.

02-nested-doll-opt-500.png

Hub and Spoke

Utilizes a central “launch screen” in which the user has to navigate back to in order to access other parts of the application. This eliminates the need for global navigation. This type of content navigation is good for task based applications with a small amount of unique screens.

03-hub-spoke-opt-500.png

Bento Box

Commonly used in a “dashboard” type application where the users interact with elements on a single page. Selecting an element on the page will reveal more information or navigation structures.

04-bento-box-opt-500.png

Filtered View

Ideal for applications that deal with a single data set or functionality. This allows the user to quickly select a view from a list to manipulate the content, such as a music application that allows you to search by artist, album or genera etc.

05-filtered-view-opt-500.png

Combing Systems

Sometimes one navigation structure isn’t enough to meet the needs of the content and the user. If this is the case the designer can consider combining one or more navigation structures. For example you could have a Nested Doll structure as the enrollment process on a larger Hierarchical Tree website or application. This allows you to use the best structure and create the best experience for the user.

06-mixed-ia-models-opt-500.jpg

Things to consider when designing a navigation system.

  • Fitts' Law: states that it's faster to hit larger targets closer to you than it is to hit smaller targets further away from you. This pertains to navigation elements that’s are given larger fonts, or significant whitespace to indicate importance.
  • 7 plus or minus 2 for navigation links. Our brains typically can remember and process beteeen 5 and 9 items at a time. If your navigation exceeds 9 items, consider creating a sub menu and group your content accordingly.
  • 3 clicks or less fallacy. Some people stress that it is universally better to have less clicks on an application than more clicks. This isn’t always the case. It is better to have multiple confident clicks than 2 un-confident clicks. In other words, the confidence of the user must be taken into account when designing the application. It is more important that the user feels confident that they are “in the right place” than strictly designing for the least number-of-clicks.

Sources:

https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/