Effective Presentation of a Website’s Navigation

Users obtain information on the web in one of two ways: searching or browsing. Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy. This article discusses two techniques to that end.

There’s a great line in the Postal Service song, This Place is a Prison, that states, “It’s not a party if it happens every night.” Although the singer specifically refers to a life of too much partying, it’s a good reminder that anything that happens too regularly loses its significance.

A copier's start button appears larger than its neighboring buttons

This same concept holds true in our navigation. As humans, our brains are wired to notice contrast, things that stand out from the norm. It’s why photocopiers employ big, green start buttons. It’s also the reason that the interface on my smartphone offers a collection of colorful icons instead of just text links.

When looking for Yelp on my iPhone, I’m not scanning for the word “Yelp;” I’m scanning for a red square. This is a much faster mental calculation than exhaustively reading each application’s name. It’s clear in both cases that the designers have put prioritization and visual language to work.

Defining our terms

Prioritization is the act of giving an element prominence relative to its importance in a (navigational) hierarchy. With regards to a navigational hierarchy, this is done by first considering each element’s relationship to its user’s goals.

Prioritization is the reason why items like “Settings” or “Profile” are typically less noticeable than the primary actions on a site or application. It can be communicated in a variety of ways, but essentially prioritization means that items of more importance should call more attention to themselves.

A screenshot of harvest.com

Harvest App prioritizes more regularly used links (Reports and Timesheets) over others (My Profile)

Visual language, on the other hand, involves using visual elements to convey meaning. Often times this is done through illustration or iconography, though any visual cue that reinforces the function of an element contributes to that application’s visual language.

By way of contrast, consider text-only navigation structures – especially those that use the same font size. Without introducing/incorporating a rich visual language, these structures don’t reach their fullest communication potential. Simple visual cues go a long way towards helping users parse information because they facilitate recognition over recall.

Some well-known sites and applications make use of the calendar icon.

Hobgoblins

Unfortunately, designers often do the exact opposite in their designs. In their desire for consistency they often force users to carefully scan each item until they find what they’re looking for. Emerson once termed this kind of foolish consistency “the hobgoblin of little minds.”

Let’s take a look at a few bad examples:

Craigslist

Craigslist offers both little prioritization and a non-existent visual language. Users are required to read nearly each entry on the home page before finding the link they’re looking for.

A screenshot of craislist.org

Jimmy John’s Website

Every time I order a sandwich on the Jimmy John’s website, I find myself carefully re-reading each navigation item. For the sake of consistency, every navigation item looks the same: red, black, and white. The sandwiches at Jimmy John’s are great; the navigation, less so.

A screenshot of Jimmyjohns.com

Microsoft Metro UI

One of my favorite recent violators is the Microsoft Metro UI. This has been out for some time in the Windows Phone interface and will be arriving soon on the desktop with Windows 8. By making the home screen tiles all the same color with white lettering and white icons, the user has to read each tile instead of responding to unique icons and colors. (John C. Dvorak recently wrote a great piece about this in PC Magazine.)

Rdio iPhone App

The Rdio iPhone App interface makes the same mistake as the Microsoft Metro UI. While they do incorporate iconography, the consistency of color and size of the icons forces the user to closely scan each item. In an otherwise beautiful and successful app, I find myself repeatedly scanning the home screen options to find my desired action.

Apple iTunes

In Apple’s iTunes 10 (as well as its Finder), the sidebar items were converted from color to grayscale. In bringing consistency, Apple removed the contrast between each entry, thus requiring users to scan more closely and read labels to find the desired content. Previously, if you were looking for podcasts, you scanned for the purple icon. Now you have to scan for the word “Podcasts” because the icons run together.

Screenshots of iTunes 9 and iTunes 10

iTunes 9 appears on the left and iTunes 10 appears on the right.

Path Sliding Menu

The Path iPhone app uses a similar sliding navigation to that found in Facebook app. There is one important difference, however, in that Path does not use icons with labels whereas Facebook does. Each time I open the Path navigation, I have to read each entry until I find the one I want. With Facebook, I’m reacting to the visual patterns and selection is much faster with less cognitive load.

Screenshots of both Path and Facebook's iPhone apps

Learning by example

So now that we’ve seen them, can we avoid these hobgoblins of consistency and create more effective navigation structures? Let’s look at some good examples:

Mint

Mint has long been viewed as an exemplary user experience and they have some nice touches in areas that use highly visual navigation. The “Ways To Save” tab in particular relies on a thoughtful collection of icons for navigating.

Screenshot of mint.com

ESPN

The ESPN site has a variety of different navigation styles throughout, but I find the hover state for the primary navigation items to be particularly effective with its combination of photos, videos, and various text weights.

Screenshot of espn.com

Volkswagen of America

When browsing the vehicle model options on the Volkswagen of America website, the dropdown navigation menu combines prioritization – Sedans before Convertibles – with visual language – an iconic version of each vehicle in varying colors.

Screenshot of vw.com

Twitter Web App

The Twitter web app has a very simple interface with only a handful of links, but each is accompanied by a distinct and meaningful icon to set it apart and the most important action, composing a new tweet, is set apart in bright blue.

Screenshot of twitter.com

Instagram iPhone app

The buttons on the Instagram app effectively combine both prioritization and visual language. Each button is identified by its associated icon and the most important one (the camera) is centered and stands out with a blue background.

Screenshot of Instagram's iPhone app

EPB Fiber Optics

The EPB Fiber Optics website makes good use of varying levels of priority within the top level navigation. The primary navigation items are all in black with the most important option (“Order Now”) set off in blue.

Screenshot of epbfi.com

Guidelines for success

We’ve seen examples both good and bad, now let’s try to generalize a bit. The following guidelines can help us create more prioritized, visual navigation schemes:

  1. Pay attention to User Goals and/or Conversions

    When trying to determine how to prioritize and bring meaning to your navigation, think in terms of your users’ primary goals and/or site conversions. Make those elements prominent and easy-to-understand.

  2. Be Inconsistent

    Take inspiration from the photocopier: instead of striving to give all navigation items the same size and appearance, leverage inconsistency in your design so that the most important items receive the most visibility.

  3. Use Visual Language, not just Textual

    Where it makes sense, use icons and other visual cues to bring additional meaning to your navigation instead of using only text. This will allow the user’s brain to process more quickly by relying on pattern recognition instead of reading.

  4. Size (and Color) Matters

    Use size and color distinctions to differentiate more important links or buttons.

Final thoughts

With so many aspects to consider when designing navigation, it can be easy to fall back on convention and create more work for your users as a consequence. While there will always be situations where using these techniques doesn’t make sense, keep in mind that differentiation can be a powerful tool.

Not all navigation is created equal. By employing prioritization and visual language in your navigational elements, you’ll help users forget the navigation altogether. They way they can focus on the content they’re really after.

About the Author

Andy Montgomery

Andy is a user experience designer with Viget in Boulder, CO and has a varied background in the industry including work as a programmer, interactive director, and digital product strategist. When he's not solving user experience challenges, he's often found at the local tap room "experiencing" microbrews. You can follow him on twitter at @mntgmry.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Jurij Burkanov May 8, 2012

    Totally disagree about text / visual part. Open a file with 3.000 icons and try to find the one you want just visually. Now compare it with finding the right word – you’ll achieve it 100 times faster. Pictures are important, when there is no other way to transfer the information, like the list of cars (who remembers the titles of the models? We remember the shape and the look). And I can say as well, that in the Facebook App I feel to be only disturbed by unnecessary symbols, while Path interface is simpler, cleaner and easier to understand.

    • A good example of a site that has removed the use of icons is Google’s search. If you recall, their old design included both icons and text for the left nav: http://devilsworkshop.org/files/2010/05/Google_search_new_layout.png

      However, their new redesign does not include any icons: http://imm.io/oHYs

    • Any extreme is difficult to parse: excessive icons or excessive text. However, words are just as recognizable as icons. It is quite possible, and we do quite often, to recognize words simply by their shape as word, and not reading them as a combination of letters.

      Maybe not the best example, but take the word “submit.” We see it at the end of countless forms (whether or not we should is another matter). When we fill out a form and look for the button to hit, we’re just as much drawn to the brightly colored call to action as we the button that recognize contains the shape “Submit.”

    • “who remembers the titles of the models? We remember the shape and the look”
      I agree with you
      after all an image is worth of thousand words

  2. Fraser May 8, 2012

    Interesting collection. Wilson Miner (formally at Rdio) is joining the Facebook design team. Wonder if their mobile interface will shift back to the icon driven landing page

  3. Interesting piece, I agree that human mind prefers contrast for preference but it is also key that the contrast colour or shape is in line with the overall theme of the page.

  4. I enjoyed reading this article. The only point I’d add is that although visual icons help with recognition, this relies firstly on the user learning what the icons represent. So I do agree they can make interaction faster when their meaning has already been learnt, but for first time use, they can be a problem for users. Eg, Whenever I have to use my OHs iPhone I end up just staring at the screen looking through all the icons for ages. Then I get fed up, pass him the phone complaining that what I’m looking for isn’t there, only for him to point out that it was right there in front of me all along. Mind you Apple’s icons aren’t always the best – the icon for the web (Safari) is a classic!

  5. Interesting perspective indeed! I agree that if design ‘inconsistency’ is used wisely and with precision, it may be helpful in Conversion factors. I also liked the example of photo-copier. I think it would work well if there is only one specific thing that needs special attention. Not sure if it would be wise to try and introduce multiple contrasting items on single page. It may appear ‘itchy’.

    Also, I too believe ‘visual language’ is important for success of web-page.

  6. Good case studies and I generally agree with your recommendation on prioritization and visual elements. However, I concur with Lisa’s comment – icons are not always the better choice. People do adopt new behaviors but it’s a slow progress and mostly subconscious. I’ve seen a few mobile apps that try to introduce complex icons instead of texts, first-time users get very confused and drop off immediately. Aligning UI design with usability principles & UX strategy is the way to go!

  7. Megan Coatley May 8, 2012

    Thoughtful piece with great examples and non-examples. Having spent most of my career in the field of evidence-based learning, I’ve used inconsistency to teach students discrimination between pictures, text, icons, etc. Behavioral research has shown that people learn to identify objects and pictures much more quickly when the samples they’re scanning are very dissimilar (in color, size, shape). I agree that the information on a website should be in keeping with the particular theme of that site. But, if you want your users to DO something with that information (e.g., click a But It Now link), then it is wise to make that function highly visible and distinctive.

  8. Personally, one of the worst ideas that Apple did was to remove the colour icons on iTunes 10. If you want users to think a section looks like its been disabled they certainly went the right way about it. In contrast, anyone who has used a WP7 device knows that its very easy to distinguish between tiles as you are using it on a regular basis. If you have a well designed application/website and it uses icons and text, users will inevitably get used to the way its laid out and if its successful its guaranteed you will see similar ones popping up. See Pinterest as a perfect example.

    Ultimately, just because an interface doesn’t look the same as everything else doesn’t mean its not going to work just as well. People don’t like change, but if change occurs because the company has listend to their user base – and it works, thats what really matters.

  9. Being user experience designer myself it’s hard for me to admit that genuine user interest always will win over visual language, prioritization, proximity, contrast, etc. We as designers tend to over complicate things despite our desire to make interface easier to use. We often think of users as entities incapable of learning and making corrections to their behavior as needed. Despite perceived “bad” design Craigslist rules as it offers a meaningful advantages to it’s users who will know after a first couple of visits the location of all links they are interested in. It’s a similar behavioral pattern to typing up a password – your fingers have memory and hit the keys accordingly without you necessarily reading.

  10. Angel May 10, 2012

    As much as I like to look of them, I have a problem with too much reliance on icons. “Icon” is not a standardized language, which means learning a new set for each site. Even on sites I visit frequently I have to hover over options to find out what some particular tiny picture is supposed to mean.

  11. Great article. I love the new Twitter UI as well, my only gripe with it is how they now disclose your Twitter account picture inside of the interface. If you have multiple accounts, you have to click it each time to verify the account.

  12. The best sites are the ones with one-click navigation: Visitors are impatient, they want the right document imediately.

  13. This was a great read. Thanks!

  14. Good article but the sandwiches at jimmy johns are worst than the website. Seriously. They are terrible.

  15. The usability and navigational structure of the website is something that matters a lot to your website success.
    Thanks to the writer who has written this great piece of stuff along with great presentation!

  16. Nice point Lisa.

    I do agree that Icons and visual language have to be meaningful and accurately represent what users will associated with the task in order to be effective. And the best way to get it fixed it by combining and associating text and imagery. I hope you could write some stuff on HTML 5 and its implications on web-designing.

  17. Jim Bob May 15, 2012

    It’s all about language recognition. Some symbols make sense, some cues make sense, words are just symbols and often recognizable for meaning. If you properly make a word visible it has more meaning than another symbol.

  18. I love the new Twitter UI as well, my only gripe with it is how they now disclose your Twitter account picture inside of the interface.

  19. Another point to remember is the likely age and possibly gender of your readers. My site has readers almost entirely over age 35, with the majority over 55. Many are not real techy. Therefore, many icons just don’t mean anything to them — or they don’t realize the benefit of clicking on them. I got far more FB Fans after I included a brief description of what they’d get, for example. No one clicked on that cute little icon by itself!

Related Posts