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:
- target areas,
- interaction event,
- 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.
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 Link
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.
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.
The Plus Symbol Link
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”).
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 Link
A third symbol often used to indicate a navigation menu, especially on responsive websites, is three horizontal lines.
Note a couple of things. First, three lines, like a grid15 and a bullet list16 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.
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.
Consistent Use Of Symbols Link
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.
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.
This leads to a couple of problems. First, using arrows for regular links — whether to create the illusion of space29 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.
- 1 https://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
- 2 https://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/
- 3 https://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
- 4 https://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
- 5 http://www.cbs.com/shows/bad-teacher/
- 6 https://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
- 7 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
- 8 http://www.currys.co.uk/gbuk/index.html
- 9 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
- 10 https://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
- 11 https://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
- 12 https://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
- 13 http://nokia.com
- 14 https://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
- 15 https://www.smashingmagazine.com/wp-content/uploads/2013/08/grid.jpg
- 16 https://www.smashingmagazine.com/wp-content/uploads/2013/08/bullet_list.jpg
- 17 https://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
- 18 http://2012.dconstruct.org
- 19 https://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
- 20 https://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
- 21 http://kiwibank.co.nz/
- 22 https://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
- 23 https://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
- 24 http://www.starbucks.com/menu/catalog/product?drink=bottled-drinks#view_control=product
- 25 https://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
- 26 https://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
- 27 http://www.baristaprima.ca/
- 28 https://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
- 29 http://baymard.com/blog/ux-illusion-of-space
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.