Webmasters Gallery

Having addressed the information architecture¹ and the various systems² 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 techniques³ 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.

⁴
A downward triangle next to the menu label is the most reliable way to indicate a drop-down. (Source: CBS⁵) (View large version⁶)

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.

⁷
A triangle or arrow pointing in the right direction is the most reliable way to indicate a fly-out menu. (Source: Currys⁸) (View large version⁹)

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”).

¹⁰
Some websites use a “+” to drop down or fly out menus. (Source: Nike¹¹) (View large version¹²)

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.

¹³
Three horizontal lines is frequently used for responsive navigation menus. (Source: Nokia¹⁴) (View large version¹⁵)

Note a couple of things. First, three lines, like a grid¹⁶ and a bullet list¹⁷ 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.

¹⁸
Three lines do not work well if the menu items are not stacked vertically. (Source: dConstruct 2012¹⁹) (View large version²⁰)

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.

²¹
An accompanying label would clarify the purpose of the three lines. (Source: Kiwibank²²) (View large version²³)

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.

²⁴
Inconsistent symbols lead to confusion. (Source: Starbucks²⁵) (View large version²⁶)

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.

²⁷
Using a triangle or arrow for anything other than a drop-down or fly-out menu can cause confusion. (Source: Barista Prima²⁸) (View large version²⁹)

This leads to a couple of problems. First, using arrows for regular links — whether to create the illusion of space³⁰ 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

The post Efficiently Simplifying Navigation, Part 3: Interaction Design appeared first on Smashing Magazine.