Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Elements Of Navigation + 6 Design Guidelines

When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”. [Links checked February/11/2017]

After a couple of seconds of scanning this article, and maybe reading parts of the introduction, you may have started to ask yourself whether the information that you’re consuming at the moment is actually relevant to you—the user. Unfortunately (and as certain as death and taxes), if users cannot find the information they are looking for, chances are they will abandon their track, never to return.

Further Reading on SmashingMag: Link

Being the compassionate human being that I am, I’ll try to explain to you what this article is about, so you can make your choice either to continue reading, or not. This article is not about where you should place the menu of your website or mobile application, or about the number of options a menu should contain. It is also not about how you visually enforce the perceived affordance of a user-interface element, and why that is so important.

This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. This is the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.

Words, Words, Words Link

The first thing I do when I start to sketch out the information architecture of a digital product based on the requirements at hand is to blatantly label stuff. This is nothing unique—I simply need to formulate a label (most of the time accompanied by a short description) of all the possible information entities I discover to be able to reveal taxonomy and relationships between them. You might have a similar approach, using tools like post-its, whiteboards or even some digital application created for this purpose. This can be the inception of small problems that will constantly grow over time if we do not assess them correctly and in a timely manner: the labels are yours, and yours alone.

“Locate store” is your label of something that enables the users to find physical stores in a mobile application. “Commodities” is your label of a view that enlists all the goods your client wants to retail on an e-commerce site. “Start” is your label on the landing-page of a website. From a linguistic point-of-view, you can analyze the meaning of sentences, words and letters in different context for hours on end.

You can look at the structure in terms of morphology, syntax and phonology, or why not look at the meaning in terms of semantics and pragmatics. Fortunately, in most cases you do not have reach as far as asking a linguistic researcher about your labeling—people in your target audience will do just fine.

Navigation - Start
“This might be a good start!”

User-Testing Labels Link

So what is the easiest way of doing a sanity check of the way you express the information space? A really cheap and well-proven technique is Card Sorting5. By using card sorting, you can transform your early taxonomy prognoses into folksonomy6. Card sorting not only helps you to create an informed information architecture, it also enables you to get an insight to what keywords users relate to different activities in your product.

Another test is a Word Association7 game. Take all potential labelings of your navigation design and try them out on users asking them to “say the first thing that comes to mind” (in regard of what they believe to be found beneath such a navigation option—call it Think-Aloud Protocol8 with a twist. For example, you could say “Products” and the participant might respond with “Price, description, information, stock”. Market researchers have used this technique for decades to ensure that the right message is conveyed by their target audience when promoting products.

Two important questions that you need to find to an answer to at this stage are:

  1. Can the users relate the labels in the navigation design to their explicit goals of exploring your digital product?
  2. Are the meaning of the words metaphorically and visually separated enough not to be confused with each other?

Navigation - Change
“Ok, so let’s change ‘Commodities’ to ‘Our Products’ and ‘Locate store’ to ‘Our Stores’.”

Removing Redundancy and Lowering the Reaction Time Link

In his masterpiece “Don’t make me think9”, Steve Krug writes, “When I look at most Web pages, I’m struck by the fact that most of the words I see are just taking up space, because no one is ever going to read them.” The more information we cram into our navigation, the harder it becomes for the users to quickly grasp the different options.

In 1935, the American psychologist John Ridley Stroop published “Studies of interference in serial verbal reactions” along with the now renowned “Stroop effect10”. Stroop had found that given the task of naming the color a word was written in, took longer and was more prone to error if the word itself was the name of a different color (e.g. the word “Blue” written in the color red).

What we can learn from Stroops discovery is that we have a hard time not reading words—even though we are given a task explicitly instructing us not to. Have a quick look at the navigation in your design and ask yourself what can be removed without losing its meaning.

Navigation - Change
“It seems I really donʼt need the word ‘Our’ in front of ‘Products’ and ‘Stores’.”

What Did Product ‘A’ Do In Situation ‘B’? Link

If you still have not managed to convince your employer that early user testing will pay off in the long run, you should at least have the courtesy to look at the benchmark. In what way have others solved their navigation design? Just spending some time looking at what others have done will help you reach valuable conclusions. This can be really time efficient and a good way to increase product usability, since users will be able to use previously acquired knowledge by simply recognizing similar terminology11 used in other products.

Navigation - Contact
“It does seem like all other websites in our business area have their contact information beneath an option labeled ‘Contact’. I better change ‘Reach us’.”

Symbols, Pictograms & Icons Link

Symbols, pictograms and icons in digital user interfaces are long gone from luxury to necessity. They contribute to signature, personality, recognition, and abstraction in our visual language. Furthermore, studies have given evidence suggesting that user interfaces have less favorable perceptions of usability and usefulness when only relying on textual expressions.

Why did I willfully write “Symbols, pictograms and icons” and not just “Icons” as we all love to call them? Before I start to use only the word “Icon”, I want to make sure we are all on board as to the differences (without digging too deep into the perilous depths of semiotic science12).

What Is What Link

A symbol is typically defined as an abstract representation that requires conventional knowledge amongst the users for them to fully understand their meaning. People in some cultures have learnt that the meaning of an octagon shaped sign in a tone of red communicates “Stop.” So a symbol earns meaning over time through conventional use.

A pictogram on the other hand is usually defined as simplified pictorial representation. Pictograms—or pictographs—are, as far as possible, self-explanatory and most often do not require any deep previous learnings to make any sense. You often see pictograms (and ideograms) on signposts and in environmental design since they are least contingent to produce cultural misunderstandings. For example, a sign with an arrow indicating a direction.

The definition of the word “Icon” can be a bit vague depending on the context of use, but I like to say that an icon can be a sign, symbol, picture or image that stands for or represents an object in its resemblance as an analogy for it.

Whether you should use a symbol, a pictogram, an icon or a combination of all three to help you communicate information, all depends on the situation you find yourself in. Disregarding what we use, there is some common knowledge and analysis we can use to make sure that the receivers (i.e. our users) actually understand what we are trying to convey with our design.

User-testing Icons Link

There is an abundance of ways to perform user testing and peer reviews of iconography. My two absolute favorites are what I have come to call “tag-that-icon” and “connect-the-dots” mainly because they are quick to perform and they give great insights into users’ spontaneous opinions (plus, they are actually quite fun to prepare and execute).

You can perform tag-that-icon in one of two ways:

  • Method 1:
    Give several icon suggestions to the participants and ask them to tag them with whatever comes to mind within three minutes.
  • Method 2:
    Randomly show the participants one icon at a time during a day and ask them to come up with tags for each icon during 20-30 seconds.

The latter has most probably proven itself to be really good and better for testing different metaphors for one specific icon when the number of participants are low.

When you have a set of icons and labels that are closing in on finalization, you can then do connect-the-dots testing. All you need to for the test are printouts with one section of all your suggested icons (in a random order) and one section with all your labels (in a different random order). Then, give the printouts to the participants and ask them to draw a line between an icon and the label they think it is coupled with.

Navigation - Test
“At least I can be certain that all my suggested icons works for the ‘Directions’ menu option.”

Removing Redundancy Re-Visited Link

Just as with labels, avoiding redundant information in the icons is just as important. This is of course quite a bold statement from a designer, but there are many cases out there in the wild that simply add so many details to an icon that it starts to disrupt the users’ ability to interpret and differentiate them. This becomes most evident when you have common shapes in the icons that affects their intergroup saliency13 (i.e. the quality by which an object stands out relative to its neighbors).

Navigation - Circles
“Do I really need the circles? If I look at them briefly or squint, they all look the same—I better change that!”

Picture/Word Interference Link

Given a set of lined drawings of simple objects coupled with distractor words, humans show a clear effect of increased response time in naming the drawn object. This is also known as Picture Word Interference14 (PWI). What PWI can be interpreted to mean is that when an icon is paired with a label in a way that the user does not connect together, it becomes much harder for them to work out the intended meaning.

For humans, a label with “Banana” coupled with a cucumber icon would be unclear as to what it is. What makes matters even worse for users in a navigation context is; “What should I really follow—your icons or your labels?” Avoid creating distracting stimulus through semantic interference between your icons and labels.

Looking at contextual consistency and standards in regards to iconography can really help you. There are some really great resources out there for finding inspiration, but you can also use them as a source of knowledge in finding trends and standards in iconography. If 9 out of 10 result with the term “Favorites” on Iconfinder.net15 that contain a star or a heart-shaped icon, then that may probably be a good starting point for your “Favorites” icon as well.

Navigation - Icons
“I have no idea what I was thinking. I think I have to throw away all of these, restart all over again and do some more user testing.”

Six Navigation Design Guidelines Link

After reading all of the above, you should have a good foundation to take your navigation design to the next level and place it in its intended environment along with the rest of the design and perform controlled user testing and see how they interplay. Here are 6 navigation design guidelines for you to consider as you embark the journey of designing the navigation of your upcoming project:

  • Clarity:
    Make sure that your navigation has a linguistic and semantic clarity that communicates to your users in an direct, efficient and adequate way.
  • Simplicity:
    Avoid using technical labels and icons that no one recognizes. Speak the language of the user rather than using complex terms and form factors unfamiliar to your users.
  • Saliency:
    Avoid having redundant and repetitive terms and shapes in your labels and icons that affects their intergroup saliency. This can easily influence your users ability to differentiate and interpret them as a whole.
  • Context:
    Look at the consistency and standards for labels and iconography used in the context that you are designing for. It is more efficient for your users to recognize rather than needing to interpret information that is unfamiliar to them.
  • Correlation:
    Avoid creating distracting stimulus through semantic interference between labels and icons. Reduce uncertainty and make sure that they clearly communicates one message as they are put together.
  • Tonality:
    Ensure that the tonality of the message is still consistent at the end of the design work. Colors, typography and form heavily affect the way your audience conceive and interprets the information.

Of course, not all types of navigation design contain both labels and icons. Some just use icons and some just use labels. you have roughly three cues for guiding your users: One factual (the label), one helpful (the icon) and then—the sometimes subliminal—character (color, typography and form). They do not always need to co-exist since different context requires different solutions. But your message can easily become blurred the fewer of them you use.

So ask yourself this: Can I afford to be vague in the way I communicate and help my users to reach their goal? (Hint: No!)


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15

↑ Back to top Tweet itShare on Facebook

Interaction designer from Stockholm, who loves to create digital experience — designed around, with and for the user. Twitter (psilfver), Blog (

  1. 1

    Akshay Mhatre

    March 20, 2012 8:20 am

    Cool. Nicely done :)

  2. 2

    Have a quick look at the navigation in your design and ask yourself can be removed without losing its meaning.

    I looked at that sentence and thought “What?”

    Then I looked closely at it and realized that “what” is what’s missing. It should read “what can be removed.”

    Either that’s a typo, or you’re being clever. Either way, working out what the missing word was thoroughly distracted me from reading the article. Irony!

    • 3

      Vitaly Friedman

      March 20, 2012 9:52 am

      Thank you, Will, the mistake is fixed now. Sorry for any inconvenience caused!

  3. 4

    Great article.

  4. 5

    “Given a set of lined drawings of simple objects coupled with distractor words, humans show an clear effect of reduced response time in naming the drawn object.”

    I’m guessing this should read “increased response time”. Otherwise, great article!

  5. 6

    Nice article! Great insights shared.

  6. 7

    Really good article, thank you!

  7. 8

    Drisan James

    March 20, 2012 4:11 pm

    Awesome article definitely enjoyed the insight.

  8. 9

    Spot on, guys. Best article I’ve read on here in a while (they’re all pretty good). Thanks for posting.

  9. 10

    SenthilKumar Rajendran

    March 20, 2012 10:57 pm

    Got more inputs. Worth Reading. :)

  10. 11

    This is good article, you concern on really specific field

  11. 12

    Awesome article! Thanks

  12. 13

    Nathan Uphoff

    March 21, 2012 5:28 am

    Interesting subject first of all, also the summary is a helpful guide. Second the article to me could either be a lot shorter to make the point. I’m also curious how to implement this on a broader scale. How can I reduce the amount of links in my navigation? How many links could one use until clarity reduces? At what amount of links is the use of icons creating visual clutter? How does this all apply to sub navigation?

    These questions come to mind to give the article more depth.

  13. 14

    I am not sure if the icons were meant to be wrong examples, because they are really bad. Also I am not that keen on Stores vs say Locations. Stores is vague – is it a description of what I can find in your stores? Locations is more precise.

  14. 15

    This is a really great and useful article. Regarding the question of Nathan, about the amount of links, and the meaning of this in subnavigation… I think the first paragraph talk’s about it. It depends on your goals trying to accomplish, and the kind of information you are trying to display.

    As any article, approaches the issue in an abstract way, don’t try to fit this guideline into every design…..

    Excuse my English, I know isn’t that good and I don’t mean to sound rude, I comment I usually get when writing in English…


  15. 16

    Awesome article

  16. 17

    Tim from IntuitionHQ

    March 21, 2012 2:07 pm

    Great article. Very insightful. Thanks.

  17. 18

    “Here are 6 navigation design guidelines for you to consider as you embark the journey of designing the navigation of your upcoming project:”

    I think was supposed to read: “as you embark on the journey…”?

    This was a superb article! I’m glad this topic was mentioned as I believe there’s a gaping hole in the web where smart iconography, symbology and pictography should be filling the space.

  18. 19

    Andreas Ibsen

    March 24, 2012 9:30 am

    Good article.

    I have 3 points concerning the headline, the definition on icons and the user testing of icons:

    #1) A more appropriate headline might have been something like “Navigation: Phrasing of labels and design of icons” – considering the article’s own emphasis on being succinct.
    As I read “The Elements Of Navigation” I thought it would cover more or less everything about navigation, including labeling and iconography but also placement, number of items and levels, graphical design, hit areas and so on.

    #2) Your definition of an icon:

    “an icon can be a sign, symbol, picture or image that stands for or represents an object in its resemblance as an analogy for it.”

    …in my view, lacks the crucial dimension that an icon often represents an action or state rather than an object per se, e.g. Send mail, Paste text, Toggle Edit-mode, Delete items, etc.

    #3) Regarding the user testing of icons I’ve tried a closed card sort with unlabeled icons on one side and terms on the other side. It was quite an interesting exercise!

  19. 20

    Great article, I agree with icons representing text. The icon and text should read exactly the same.

  20. 21

    Jerrold Manapat

    March 28, 2012 12:32 am

    Great article! Thanks for posting.

    • 22

      I believe the key is in being painossate about what you write, being focused, and being dedicated to get the work done. Of course, you an write about pretty much any topic, but you need to have faith and ability to get the job done.

  21. 23

    Jiri Jerabek

    March 28, 2012 8:50 am

    I recommend to read about “Information Foraging Theory” to anyone who might be interested in the theoretical cognitive psychology background of the information search.

  22. 24

    Well, a lot of client’s are not open to simple, elegant and minimalistic designs. They just clutter everything with their comments and the designer either has to choose to confront them and spend hours of precious time or simply do what they say. It sucks! seriously.

    Graphic Designer.

  23. 25

    What are your thoughts on navigation menus with descriptive labels underneath them (generally less than 5 words)? From your article, I would gather that this method increases reaction time and is redundant. But I’ve seen it on many sites when the navigation label can’t be said in 1 or 2 words.

  24. 26

    A short message to say thank you for this great article !

  25. 27

    I love it! The next time I’m creating a menu I’ll use this information, thanks!

  26. 28

    Thanks, really useful sum-up of guidelines! :)

  27. 29

    Great article. What’s the general consensus on replacing the horizontal navigation (across all devices) with a single ‘menu tab’, much like the ones used in responsive design?
    How would this effect user experience and would there be a knock on effect (good or bad) for SEO?


↑ Back to top