How to make easy to use navigation

Even though we create a perfectly designed site with clever IA and high taxonomy, with SEO-keywords and pure screens - this site can be easily turned into the worst site if there is no navigation.

Why navigation architecture matters so much? Why should the designer be a guide guy for users? Which elements are basic and how to create an easy-to-use navigation for a website, mobile application, SCADA-system, social network or CRM? We will figure it out in this article. But first, let's start from the very beginning of navigation.

Function of Navigation

...well-designed navigation can be an effective way to instruct users about what is available to them, which is certainly much more aligned with their goals. (1)

One of the best definitions of navigation was made in a book of Alan Cooper, Robert Reimann, David Cronin. “About Face 3: The Essentials of Interaction Design” and it sounds like this: any action that takes a user to a new part of the interface or which requires him to locate objects, tools, or data. Navigation is everything that can answer the question that starts from  “where”:

  • Where to go
  • Where to click
  • Where to drag
  • Where to scroll
  • Where to zoom

The term stems from the 1530s, from Latin navigationem (nom. navigatio), from navigatus, pp. of navigare "to sail, sail over, go by sea, steer a ship," from navis "ship" and the root of agere "to drive". So if we will imagine our website like a sea and our user as the captain of the ship - no doubt he needs a map to find a treasure. But the task of navigating a website is a bit complicated because we have a lot of captains and different goods that they entered our waters for that. Also, their ships have different possibility to move on - some of them can go only in a shoal. And the rest are used to deep water. And what should we do with the submarine? Oh Gosh!


Navigation architecture is as interesting as complicated. It is a set of user interface (UI) elements that allows a visitor to find and get specific information on a web resource, engage in marketing interaction, make a conversion action. Everything that lets you go out, go back, turn left or go deeper - is navigation architecture. Pages of the site are defined by sitemap (Information Architecture). And the way people will use to get on that pages is NA. Every website consists of such navigation areas as: main navigation, service navigation, footer navigation, universe navigation. (2)

The main navigation is mostly task- and activity oriented. Service navigation containing selected links that aren’t represented at the first level of the main navigation and functionality like login/register, language, and search. In many cases, footer navigation is duplicating the main navigation but footer also consists of additional information that can save time. There can be copyright, sitemap, privacy policy, terms of use, contact, address and link to map / directions, navigation, social media icons, email signup, login, press, site search tool,  branding, mission, keywords for search, engine optimization, awards and certifications, association memberships, testimonials, latest articles, upcoming events and of course one more call-to-action. (3)

Navigation through software occurs at multiple levels:

  • among multiple windows, views, or pages
  • among panes or frames within a window, view, or page
  • among tools, commands, or menus
  • within information displayed in a pane or frame (for example: scrolling, panning, zooming, following links)

The main goal of a designer is to provide a user with a clear navigation and to avoid navigation trauma. Navigation trauma is a worse experience of the user that got lost in the interface. If user is losing time for figuring out where is he and how to go back - it means he is lost. Who loves to get lost in a new city? And who has been lost in their own sity? It`s really stressful. It brings us into sad emotional condition. A user with navigation trauma probably will close the window and will find another solution. And the solution will be very close - at your competitor's website. Actually, navigation trauma is the most stressful user experience that drives users to go out of website. The user can forgive you old-style design but he will never forgive a lack of navigation or badly constructed informational architecture. The best example is a book. Would you like to read a book that has no page numbers? Or would you like to read a book where all page numbers are mixed and not organized? If you will read this book you can read only one page without continuing. If you are a big fan of reading probably you will figure out a genre, stylistics and author's ability to make metaphors. But you will not be able to read a whole book and get the main idea.

Components of Navigation System

Every NA consists of three main components: Current Locator, Navigation method, Trace Route and search.

Current locator, that provides a user with an obvious statement where he is now. Current locator can be different with shape or type of change. The most popular is changing opacity or selection of current page name in navigation bar.

Navigation method is very close and dependent to information architecture. Will we organize content with the hierarchy or will we collect it by creating categories? Navigation method is the reflection of user way of thinking - how will user collect all items?

Trace Route is a home link that is needed for every user to have an ability to go back to that place where he started.

Search is a part of website functionality and it is the most popular way to find a highly specific information. (4)

Types of navigation

For better understanding how your data can be organized you are using some categorization. Designers are using the same instrument to figure out how to place information. Navigation types are different and very dependent on content and current state of workflow processing or current user location. There are three main types of navigation: Global navigation, Local Navigation and Contextual Navigation.

To understand it better we will use a world-example

Example: our site is our World. The Goal of a user is to try an original japan dessert in Kyoto.

Global navigation is main navigation of site or system. It helps our user to define a path or case that he is going to launch on our site. It is like choosing the main feature. Of course, every feature has a lot of subfeatures and can look like really a big tree of hierarchy. But if we have a global navigation it means that we will know what main feature or page we are going to explore.

Example: Here we are choosing a country - Japan.

Local Navigation is a logical next step after defining the main feature. Local navigation helps user to understand a particular subfeature or subsection.

Example: here we are choosing a city - Kyoto.

Contextual navigation is all that we can do in a particular subsection. It also has name “utility navigation” Better to explain it by the example:

We have already chosen the city and now we have variables what to do - to visit a cafe, to go to a theater, to rent a car and so on. Contextual navigation shows us all variables of actions and places. Our goal is a desert so we will look for tea houses.  After we have choosed place we want to see a price and order a dessert. If there is a list of deserts will we filter all by some categories? For example, we will sort by criteria “original dessert”. Contextual utility navigation consists of list of filters, categories, price ranges and all possible parameters that are needed. The greatest requirement for this navigation is intelligence, visual purity, the sequence of actions and quality of workflow. The most important concept of navigation organization process is a limitation of actions that are available for a user.


Next article will be about Content Strategy and main idea of your messages to your user. Stay with us to become more confident in business development!


References:

  1. Alan Cooper, Robert Reimann, David Cronin.About Face 3: The Essentials of Interaction Design. More details here: https://fall14se.files.wordpress.com/2017/04/about_face_3__the_essentials_of_interaction_design.pdf
  2. Bjorn Amherd.The difference between information architecture (IA), sitemap, and navigation. more info here: https://medium.com/@amherd/the-difference-between-information-architecture-ia-sitemap-and-navigation-64eba19296c
  3. ANDY CRESTODINA.Website Footer Design Best Practices: 27 Things to Put at the Bottom. More info here: https://www.orbitmedia.com/blog/website-footer-design-best-practices/
  4. Magdalena Georgieva.The Key Components of a User-Friendly Website Navigation. more info here: https://blog.hubspot.com/blog/tabid/6307/bid/33536/the-key-components-of-a-user-friendly-website-navigation.aspx