Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 Link

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.

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

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

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.

4-preview-opt12
Three horizontal lines is frequently used for responsive navigation menus. (Source: Nokia13) (View large version14)

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.

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

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-opt20
An accompanying label would clarify the purpose of the three lines. (Source: Kiwibank21) (View large version22)

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.

consistent_symbols23
Inconsistent symbols lead to confusion. (Source: Starbucks24) (View large version25)

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.

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

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.

Footnotes Link

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

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.

↑ Back to top Tweet itShare on Facebook

Advertisement

I am a freelance user interface designer based in Greece. Having studied Social Sciences and Philosophy, I believe that a proper philosophy of language is crucial to any well-designed social or digital information system. My main areas of expertise are: Interaction Design, Information Architecture, Empathy, Usability, Nomenclature.

  1. 1

    I don’t think I completely agree with your thoughts on the now infamous burger icon, in as much as that I believe what has been attempted is a new symbol which denotes access to some form of navigation – it is not directly referring to the construct of said menu.

    In itself, there are, as you’ve pointed out some major flaws with the design, it has been synonymous with a bullet list, or justified text since the icon development set for Microsoft Word. But it’s at least a good start, and face it, that icon has now been in circulation for a good 5 years and become recognisable lexicon.

    3
    • 2

      Hi Andy,

      I would argue that many users are not as familiar with the three lines as, for example, web designers. Also, I would not say that it is as old as responsive web design or even as established.

      http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design

      Apart from that, consider that the downward triangle has been around and known to drop down navigation menus in both web sites and especially applications for a few decades now, not just five years. So, users already know what a triangle does. No need to learn something new.

      But you are right that it is becoming more and more established as a navigation icon. And it is a good thing that responsive web designers try to establish standards in interaction design. I agree, for example, with clicking as an interaction event, which is currently a trend. The three lines as a standard icon, however, never looked good to me.

      4
      • 3

        Completely true about that “hamburger” icon. Some of us take it for a given, but I’d like to remind you the “my mother” rule.

        “Can my mother handle this without me explaining how it works?”

        If the answer is “no” … then we’re back to the drawing board :)

        8
        • 4

          Don’t forget though, that even mothers have access to Facebook, Google Chrome, and various other news apps (on their tablets and/or mobile devices) that heavily rely on the hamburger. A sideways triangle (pointing left) is universally known as a “play” icon…a square = Stop. That’s not inherent knowledge, it’s taught and learned over time.

          It’s great to keep a contrasting ‘voice’ or perspective in the back of your mind, however the point of the article is that many of these symbols have simply become the norm. Pluses, minuses, triangles and lines now indicate interaction. We all know this from experiencing it.

          People may not inherently understand what’s going on, but you can almost guarantee they’ll be able to use another site/app/device just because they’ve understood this new wave of UI/UX trends. Sometimes It’s about conditioning them (users) to understand as much as it’s about them figuring it out.

          If we tried to implement and design a baseline for ALL levels of understanding we’d never have bothered with HTML5, or CSS3. Some users will just have to adapt and learn or get left behind…. Or you can spend an extra few months trying to code to accommodate everyone, all the time.

          0
      • 6

        Web navigation should always be visible to a user (as outlined by Neilsen). The 3 line burger hides the menu, resulting in a ‘click to show’ by the user. This works for mobile as it optimises for the screen but it’s not needed for web as screen sizes are large enough to show navigation.

        0
  2. 7

    Absolutely right about the issue with proximity. Look at that Starbucks example with the navigation and menu icon.

    0
  3. 8

    Evert Albers (@evert_)

    September 18, 2014 4:05 pm

    Not that I’m a hardcore breadcrumb fan, but it should be noted that more and more browsers don’t show the url anymore.

    2
  4. 10

    It would be great for my user experience if there was a printable version of all five pages of this article.

    2
  5. 12

    I’ve read the whole article, then I felt a little betrayed because the summary with fewer examples would have been a better worth of my time.

    This post looked like a very serious case study at least because of the fact that it is five pages, but it is nothing but a check list of what some people do and others don’t.

    I didn’t find any of the simplifying and interaction design points to be well discussed and backed up by real data (obviously you can’t have user data for all the web sites mentioned).

    I see you’ve done a lot of work there, and I don’t argue that. Yet there isn’t any single point of data that would prove one thing you say is better than another one and how it would affect conversion and user behavior.

    11
    • 13

      Hi Martin,

      actually, I would argue it is the other way around. At first glance, the article may look like a checklist with a few pictures but at a second look, it is actually a most detailed discussion of virtually every aspect of interacting with navigation menus.

      The reason the article is not even longer is that I try to be as succinct and to the point as possible. That is, of course, without sacrificing crucial arguments in the process.

      Take, for example, my discussion about hovering and clicking. Instead of reiterating the history of interaction events, I get straight to listing and discussing the benefits and problems of hovering and clicking, even in the form of bullet points. And in the end I make a clear recommendation as to what is the best thing to do.

      If you read the passage again, you will notice that every sentence is stripped of any unnecessary bloat to just give you the pure essence of an argument. But, of course, if you have found a more detailed discussion about hovering and clicking as an interaction event, with more points and counter points than I have, then, honestly, it would be great if you could post a link to it.

      It may be just my style that makes my article look like a checklist but not my actual content. In fact, I claim you will not find a single statement or recommendation that is just an assumption without at least one clear argument, probably more, and one or more examples to back it up.

      The fact that you mention quantified data is understandable but I have explained elsewhere why having all this data not only may not be feasible, as you mention yourself, but that it could also be misleading:

      https://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/#comment-201925

      So, instead I try to convince by using clear arguments and pictures. Take, for example, my statement that removing levels in navigation menus can hurt rather than help users. There is no data that will tell you how many exact entries a menu should have. But at some point it becomes too many.

      So, I use a picture comparison to raise awareness for this. First, by showing the Microsoft menu with all levels, then the very same menu without the last level and then even a mock-up, which is unusual, to make my point. I use the same technique in other sections as well. The fact that I sometimes even use mock-ups proves that this is not just a list of what people do but that I always say and show what should be done.

      And finally, just to illustrate that a clear argument can be worth more than quantified data, consider mega-sites. There is no data that will tell you how to design a mega-site. In fact, mega-sites are such huge and complex buildings that statisticians would be reluctant to gather and process any data related to them.

      So, instead, I offer a simple rule of thumb: “While the interaction should be as consistent as possible, the visual design can be as unique as you like.” And to back this up I just use a simple argument: “Everybody knows a medical school looks different from a law school. But there is no reason why the contact details should be in a different corner for each department.”

      I would argue that this is more helpful than pretending any given number can solve your problems with mega-sites.

      Hope this helps.

      0
      • 14

        Hi,

        while I agree with you regarding everything you say and point as common sense – I am strongly against making decisions based solely on it.

        I do design sites getting into the category of “mega-sites”. Most of my work is based around sports betting and how it would work/look on all kinds of devices. The sheer amount of dynamic data there is even frightening sometimes. In the context of this I must say the designing for user interaction must always be backed up by UAT and processed data showing you how people find their way around your software.

        In that sense when I say the article looks more like a check list – I mean that no matter if I agree or no, there is no data on the efficiency of the design patterns you discuss.

        This is more like a personal opinion + common sense than the case study I hoped it would be. Don’t get me wrong, the article is not bad, and it is very well written. My case is that it was looking like something else to me and I was disappointed after I read it.


        “And finally, just to illustrate that a clear argument can be worth more than quantified data, consider mega-sites. There is no data that will tell you how to design a mega-site. In fact, mega-sites are such huge and complex buildings that statisticians would be reluctant to gather and process any data related to them.”
        -> I have 11 years worth of data to work with. What do you mean there is no data?

        Thank you for the comment!

        0
        • 15

          Hi Martin,

          I meant there is no study that evaluates several mega-sites, each of which typically have their very own navigation philosophies, in a way that allows an even remotely meaningful comparison. But even if I just take the data from your own mega-site, it basically comes down to what I responded in another comment, see link above.

          Statistics should always be taken with a grain a salt and what worked for you need not work for someone else. Common sense, however, beats testing. Just one example, to be short.

          We can agree that user annoyance can worsen conversion rates. Now, I made the statement that hovering creates more user mistakes than clicking. Quite frankly, I would never recommend a client to test that, simply, because it would be a waste of money. In what kind of world and interface does clicking create more mistakes than hovering? Indeed, this is something I would just check off my list and move on.

          But I am not saying that testing does not make sense and, indeed, in certain situations it can and has provided invaluable information. It is just that, personally, I would be very careful with testing results, and I would rather base a decision on common sense. That is all.

          1
  6. 16

    Thank you for this great overview! As mentionne before, there is a lack of data but I assume it’s hard to collect and analyze them massively. So I’m gonna bookmark this article as a perfect reminder to experiment things rather than a strict guide about do’s and don’ts. But what I appreciate above all is how such an article arouses questions and drives tests. And that is very good.

    About breadcrumbs, as people don’t all behave the same way, I guess this is the reason why Express has combined breadcrumbs with a two-level navigation system.

    Sometimes usability is not how to bring the best experience for everyone but for each one of them.

    1
  7. 17

    I say approach dropdown menus with multi-levels of flyouts with caution.
    It entirely depends on the context. It can work well for ‘catalogue’ websites, yet it’s not easy to scale down to smaller screen resolutions!

    For existing non-catalogue style websites, for instance, a corporate site, the first port of call should be the analytics. Where are people currently going? Why are they going there? Where would you like them to go?

    My experience is that, for many sites, no more than 10% of the content gets 99% of the traffic. This either means your complex dropdown/flyout menus are redundant OR you are not flagging up user journeys correctly.

    It’s all about the journey, the ‘narrative’ – and multi-level menus are generally only useful for users familiar with a site.

    So often, I’ve worked with stakeholders when building websites who assume that because multi-tiered taxonomy works for *them*, as they’ve *designed* it, it will work for everyone. You have to put yourself in the position of a visitor/customer – get your pitch correct. Get a user to that point of sale or contact intuitively. Complex multi-level dropdown menus are rarely intuitive and are more often than not, a taxonomy hack job.

    As for the infamous ‘burger’ icon, I see no reason to put the word ‘Menu’ on it. Rather, it needs to be in a logical place – never assume the user is clueless.

    0
    • 18

      Hi Matthew,

      some good points but I would actually suggest to assume your users are clueless. Not that they are – but it is a better strategy. As you mentioned yourself, just because you and your clients understand a certain icon or taxonomy, does not mean the users will. And unless the other buttons in your navigation bar, such as home, account, cart, etc…, occupy too much space, which is unlikely, there is nothing wrong with adding the label “Menu” to your navigation icon.

      Secondly, I would not advice to determine the users journey but to make it easy for them to reach any part of your content. The figure you mentioned does make sense to me as some products and services on a site can be more popular than others. But this can also be due to how the designers, with or without the clients suggestion, constructed the menu to lead them to certain items.

      Instead, if you want to emphasize certain items, be aware that the first thing users notice, before they even consider the navigation menu, is the home or landing page they arrive on. It is the most spacious and prominent place to offer shortcuts to items you want your users to see. If, however, they do not care about these items, they will access the navigation menu, in which case the menu should not again lead them to the same items but allow to easily access other content as well.

      And lastly, your concerns about complex multi-level dropdowns are understandable. But I would argue the culprit is the information architecture or taxonomy hack job, as you called it, not the dropdowns. The main reason users get lost in a navigation system is that the category they selected does not contain the information they were expecting. A problem that is aggravated when users have to go through multiple levels to find what they want.

      This is why your statement – to put oneself in the users position – is spot on. As a result, designers should work hard to find out what their targeted users would expect to find in a certain category and, if necessary, rearrange the content or add pictures and descriptions to the category labels in order to minimize misunderstandings.

      0
  8. 19

    First of all: Amazing article covering all these aspects! Hats off for that.

    There’s one particular thing (or flaw) that grabbed my attention though when it comes to ‘Clicking to open a drop-down menu’ which you think should be the default interaction event. There are many sites where the top menu item of a dropdown list is a page in itself as well. Ofcourse you can sometimes solve this by restructuring the sites content to get rid of that often unnecessary toplevel contentpage, but this is often not possible or something the client insists on having. Also, many times the user also expects that menu item to be a page and is surprised that clicking on it doesn’t bring him to a certain page even if a triangle is clearly visible. This dilemma is a real pain in the ass on many occasions.

    1
    • 20

      Hi Pieter,

      I assume you mean when to use index pages, which show all items within a category. Their usage depends on the amount of items within a category and whether the category is crucial to the target audience or not.

      For example, it is unlikely users want to see all 10.000 products of a retailer at a glance. So, you categorize the items into the crucial category “type of products”, such as computers, clothes, furniture, etc… However, this may still not be enough as there are different types of computers, such as laptops, tablets, desktops, etc… and chances are users will not want any type of computer but a specific one. Of course, if the site has no more than a dozen computers, you can drop the subcategories and just show all computers right away.

      Now, if you are not sure whether to use an index page, there are two options: One, when users click on “Computers”, the subcategories are shown but also an entry called “All Computers”. This way, users understand they are given the option of an index page, in case they do not care about subcategories.

      And two, you can drop the subcategories altogether and only offer an index page “Computers” but with dynamic filters to allow users to narrow down their choices.

      I discuss these points in more detail in the first part of this article series. If you do not want to read the entire article, you can read the summary at the end called “Structuring The Content”.

      Hope this helps.

      0
  9. 21

    Going awesome so far. Up for next.

    0

↑ Back to top