hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Efficiently Simplifying Navigation, Part 3: Interaction Design

Efficiently Simplifying Navigation, Part 3: Interaction Design

Having addressed the information architecture1 and the various systems2 of navigation in the first two articles of this series, the last step is to efficiently simplify the navigation experience — specifically, by carefully designing interaction with the navigation menu.

When designing interaction with any type of navigation menu, we have to consider the following six aspects:

  • symbols,
  • target areas,
  • interaction event,
  • layout,
  • levels,
  • functional context.

It is possible to design these aspects in different ways. Designers often experiment with new techniques3 to create a more exciting navigation experience. And looking for new, more engaging solutions is a very good thing. However, most users just want to get to the content with as little fuss as possible. For those users, designing the aforementioned aspects to be as simple, predictable and comfortable as possible is important.

Symbols

Users often rely on small visual clues, such as icons and symbols, to guide them through a website’s interface. Creating a system of symbolic communication throughout the website that is unambiguous and consistent is important.

The first principle in designing a drop-down navigation menu is to make users aware that it exists in the first place.

The Triangle Symbol

A downward triangle next to the corresponding menu label is the most familiar way to indicate a drop-down menu and distinguish it from regular links.

1-preview-opt4
A downward triangle next to the menu label is the most reliable way to indicate a drop-down. (Source: CBS5) (View large version6)

If a menu flies out, rather than drops down, then the triangle or arrow should point in the right direction. The website below is exemplary because it also takes into account the available margin and adjusts the direction in which the menu unfolds accordingly.

2-preview-opt7
A triangle or arrow pointing in the right direction is the most reliable way to indicate a fly-out menu. (Source: Currys8) (View large version9)

The Plus Symbol

Another symbol that is used for opening menus is the plus symbol (“+”). Notice that the website below mixes symbols: an arrow for the top navigation menu and a “+” for the dynamic navigation menu to the left (although an arrow is used to further expand the dynamic menu — for example, to show “More sports”).

3-preview-opt10
Some websites use a “+” to drop down or fly out menus. (Source: Nike11) (View large version12)

Mixing symbols can be problematic, as we’ll see below. So, if you ever add functionality that enables users to add something (such as an image, a cart or a playlist), then “+” would not be ideal for dropping down or flying out a menu because it typically represents adding something.

The Three-Line Symbol

A third symbol often used to indicate a navigation menu, especially on responsive websites, is three horizontal lines.

4-preview-opt13
Three horizontal lines is frequently used for responsive navigation menus. (Source: Nokia14) (View large version15)

Note a couple of things. First, three lines, like a grid16 and a bullet list17 icon, communicate a certain type of layout — specifically, a vertical stack of entries. The menu’s layout should be consistent with the layout that the icon implies. The website below, for example, lists items horizontally, thus contradicting the layout indicated by the menu symbol.

5-preview-opt18
Three lines do not work well if the menu items are not stacked vertically. (Source: dConstruct 201219) (View large version20)

The advantage of the more inclusive triangle symbol and the label “Menu” is that they suit any layout, allowing you to change the layout without having to change the icon.

Secondly, even though three lines are becoming more common, the symbol is still relatively new, and it is more ambiguous, possibly representing more than just a navigation menu. Therefore, a label would clarify its purpose for many users.

6-preview-opt21
An accompanying label would clarify the purpose of the three lines. (Source: Kiwibank22) (View large version23)

Consistent Use Of Symbols

While finding symbols that accurately represent an element or task is important, also carefully plan their usage throughout the website to create a consistent appearance and avoid confusion.

Notice the inconsistent use of symbols in the screenshot below. The three lines in the upper-right corner drop down the navigation menu. The three lines in the center indicate “View nutrition info.” The “Location” selector uses a downward triangle, while the “Drinks” and “Food” menus, which drop down as well, use a “+” symbol.

consistent_symbols24
Inconsistent symbols lead to confusion. (Source: Starbucks25) (View large version26)

While using multiple symbols for a drop-down menu is inconsistent, using arrows for anything other than a drop-down menu causes problems, too. As seen below, all options load a new page, rather than fly out or drop down a menu.

arrow27
Using a triangle or arrow for anything other than a drop-down or fly-out menu can cause confusion. (Source: Barista Prima28) (View large version29)

This leads to a couple of problems. First, using arrows for regular links — whether to create the illusion of space30 or for other reasons — puts pressure on you to consistently do the same for all links. Otherwise, users could be surprised, not knowing when to expect a link to load a simple menu or a new page altogether. Secondly, a single-level item, such as “Products”, could conceivably be expanded with subcategories in the future. A triangle could then be added to indicate this and distinguish it from single-level entries, such as the “About” item.

Users generally interpret an arrow to indicate a drop-down or fly-out menu. And they don’t have any problem following a link with no arrow, as long as it looks clickable. It is best not to mix these two concepts.

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
  2. 2 http://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/
  3. 3 http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  5. 5 http://www.cbs.com/shows/bad-teacher/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  8. 8 http://www.currys.co.uk/gbuk/index.html
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  11. 11 http://www.nike.com/us/en_us/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  14. 14 http://nokia.com
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/08/grid.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/08/bullet_list.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  19. 19 http://2012.dconstruct.org
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  22. 22 http://kiwibank.co.nz/
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  25. 25 http://www.starbucks.com/menu/catalog/product?drink=bottled-drinks#view_control=product
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  28. 28 http://www.baristaprima.ca/
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  30. 30 http://baymard.com/blog/ux-illusion-of-space

↑ Back to topShare on Twitter

Article source: http://www.smashingmagazine.com/2014/09/18/efficiently-simplifying-navigation-interaction-design/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.