Better User Orientation through Navigation

Users are constantly orienting themselves on your site. How can you help?

Users surfing the Internet orient themselves not unlike migrating birds. Each species of bird has her own special way of orienting, building a mental map of where she is and where she wants to go. Some, like pigeons, rely heavily on magnetic fields. Others that migrate at night use the stars. Day-movers use the position of the sun. But few of them rely on just one marker.

What if there were interference, like a cloudy day that blotted out celestial signs? That’s why many birds have backup navigation. If the sun is blotted out, she can always feel out the magnetic field that points homeward or recognize physical landmarks that dot the route.


What to say?

Users are the same way. They may be search-navigators or link-clickers, but they all have additional mental systems in place that keep them aware of where they are on the site map. That is, if you put the proper markers in place. Without proper beacons to home in on, users will quickly become disoriented and start flying into electrical wires–I mean leaving your site.

If you implement the following tips, not only will your users be able to mentally picture where they are when they crash-land on any of your site’s pages, but they’ll be aware of the many other things around them in relation to the site’s structure. Keep in mind that what you really want is to always show the visitor where they’ve been, where they are, and where they can go. Let’s get started!

  • Keep a clearly marked home link on all interior pages. If you want to use a logo as the home link, that can also work, but it is usually most intuitive for users if it’s in the upper left corner of the page.
  • Always clearly label your navigation. Do not rely on mouseover effects or clever icons. This is now known as “mystery meat navigation,” a term coined by Vincent Flanders of Web Pages that Suck, and a more detailed discussion of whysuch frou-frou navigation is so bad for usability can be found on his site. Just remember that your navigation is there to serve your visitors first and foremost, not just to look pretty. There is always a way to satisfy the demands of style and good design without shortchanging your visitors.
  • Do not mix internal with external links in the same navigation feature. It’s confusing when you expect that clicking on a link is going to take you to another page within the site, but instead it takes you to a completely different site. Users don’t like to feel tricked. For instance, on a personal site, put links to your blog, twitter and other social networking sites in a “social networking” block rather than in your main navigation.
    Tips:

    • Consider eliminating your external links, or restructure your navigation into two groups, one for internal and one for external links.
    • The external link group can be made more obvious as such to users by making them feel like call outs, advertisements, or even just labeling them up front, like “Other Sites” or “Social Networking”.
    • If you feel like you have to trick users into following an external link by making it look like it is internal, stop, and reevaluate what you are doing. You are being tricksy.

  • Wikipedia.org‘s External Links
  • External links in general should be marked as such. Wikipedia adds a little icon to the end of their external links to let users know, “Hey, this is taking you away from the site… You might want to open it in a new tab or something…”
  • Let users open links how they want to. Most users know how to open a page in a new tab (and at least how to use a back button). So let go of the Javascript tricks and stop using target=”_blank” (which is totally not compliant with strict doctypes) to force links into new tabs and windows. You may be hesitant to reliquish that amount of control, but imagine how frustrating, how alarming, and how annoying it must be to a user when a link suddenly opens its own window, which they then have to laboriously close if they weren’t that serious about following it to begin with. It can be very disorienting, especially if they already have a glut of windows/tabs already open. The user has to reorient, close the window/tab, and then find where they used to be, hoping that none of your other links will pull a trick like that. In fact, they may be less likely to click links on your site if they fear that more uninvited tabs/windows are going to pop open. I have watched my mother surfing the Internet, going through this process, and it is painful to watch. Just let her have the back button already! If you mark your external links as outlined above, users have all the advance warning they need to open the link how they choose, thus reducing unhappy squinting and glaring and mousing and muttering, “Where was I?”Remember, a user can never decide to open a ‘target=”_blank”‘ link within their current window/tab.
  • Use breadcrumbs. Breadcrumbs are small navigational links at the top of a page that show the user where they are in the great scheme of the site’s map by leaving a little trail of links back to where they’ve been. Well, that’s assuming they started on the home page and drilled down from the there. If a user lands on a page deep within a site, those breadcrumbs help them climb back up the ladder to other important sections. A user can automatically follow their position on any website with these babies in place.
    Tips:
    Steven Krug in Don’t Make Me Think gave an excellent formula for an idiot-proof breadcrumb.

    • Breadcrumbs should be as close to the very top of the page as possible, out of the way.
    • The font should be small in size.
    • They should begin with “You are here:”
    • Each link that follows should be underlined (to indicate that users can click it) and followed by a “>”.
    • At the very end should come the unlinked, bold title of the page.
    • See the image below for an example from my site, ThePinkCrow.com.

  • ThePinkCrow.com Breadcrumbs
  • Highlight the user’s location in the navigation. Use CSS to highlight their position in the navigation and let them know where they are. You can see an example of this in the above image, where the navigation link, “Articles,” is noticeably offset from the rest of the links by having a black background, thus alerting the user, at least subconsciously, that they are somewhere in that neck of the woods.
  • Include “back” and “forward” buttons on multipart forms. When filling out a form, users are uneasy about using the browser’s back button to go back to an earlier part of the form to change information. There is always that dreaded chance that they’ll have to re-enter everything or worse, be taken back to the beginning of the form rather than the previous page. Relieve their anxieties by inviting them to move around laterally as much as they want.
  • Always include a search option. Many users primarily use searches to navigate a site when given the option. Additionally, think of search functions as a safety net. If a user gets lost, they can always search for what they came for.
  • Use a sitemap. Sitemaps are a great way to show a user an overview of your site’s content and structure. It is also one of the first places a lost user will run to before giving up and leaving your site. Do them a favor and put one up.

Some other user-friendly things to keep in mind when designing navigation:

  • Dropdowns and flyouts should linger. It’s annoying when you accidentally move your mouse to the side and that huge dropdown menu you were drilling down through disappears. Don’t punish users for their shaky hands! Use some Javascript to delay the dispersal of such elements.
  • Give small links extra padding. Adding extra padding to small links, like numbers or icons, increases the links’ live area, the area around a link that can be clicked to activate it.

So, how do you help orient users? Please share your thoughts below, and thank you for reading!

About the Author

Rachel Nabors

Rachel Nabors is an in-house front end designer in Raleigh, North Carolina.She devotes her spare time to drawing comics and educating the masses on the principles of semantic markup and solid CSS. You can find her at ThePinkCrow.com and on Twitter as CrowChick.

http://thepinkcrow.com/

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. All very good points. Love the idea regarding marking external links.

  2. Some nice points here. Persistent home links are a must, and sometimes overlooked.

    But as for users knowing how to open links in new tabs, I would say that most users certainly do not. There are still a shocking number people are still typing URLs into the Google search box and double-clicking links on web sites.

    Also, I believe you meant *its* here: “suddenly opens it’s own window”

  3. Good article!many thanks for your tips and advices. I’v submitted a link of this article to our website WebmasterClip in order to share it with more ppl.

  4. woodztream May 5, 2009

    Great post, I should really get more user friendly =P

    /w

  5. Chris May 5, 2009

    Usability tests with our Joomla! CMS and our customer service department, as opposed to our more technically minded tech support side, has revealed that sometimes users, often important users, have no idea how to open new tabs.

  6. Great article!

    But could have used a proof-read through…

    Nevertheless, and interesting read although the “let users open a link how they want to” may be debatable.

  7. It is too true that a segment of users don’t know how to open new tabs or windows, but such users are also likely to be confused when some links open in new windows and others don’t. Such users also usually know how to use a back button! I prefer letting them use that at their own discretion rather than risk confusing them with forced multiple windows. Plus, ‘target=”_blank”‘ is not XHTML Strict compliant thanks to its alliance with the dreaded frames, making it something progressive developers should try to move away from.

    Personally, I support abandoning the concept of opening links in new windows in favor of alternative methods of display, lightboxes for instance, or firm demarcations between which links are on-site and which lead off-site. But it’s up to your own judgment whether or not you choose to pop links open in new windows/tabs. I’ve heard many persuasive arguments on a case-by-case basis for why that functionality would be needed. But I can also say that a good deal of those cases, with a little evaluation and cleverness, could have their needs fulfilled in another way.

    And I’m sorry about the odd spelling error! I unable to procure a proof reader at the last minute and have no way of editing the post once it’s up. But I assure you I will try harder to find a second pair of eyes next time, even if I have to randomly abduct English majors from the coffee shop down the street :)

    Thank you all for very much for your thoughtful comments!

  8. Good article, but you need to be careful about breadcrumbs here:

    Breadcrumbs are small navigational links at the top of a page that show the user where they are in the great scheme of the site’s map by leaving a little trail of links back to where they’ve been.

    You’re on the mark when you mention breadcrumbs reveal “where they are in the great scheme”, but they don’t necessarily show where they’ve been. Now more than ever, readers find pages through a variety of other sources other than the home page or even primary navigation, so breadcrumbs rarely accurately reflect where they’ve been, just where they are.

  9. Good article… not sure I agree with everything though.

  10. nice article, thanks for tips..

  11. Ido Schacham May 11, 2009

    Excellent post! This will be very useful to some folks at my work place. Thanks crow!

  12. Very complete list of some important usability aspects and well written too! Good work, thumbs up!

  13. Interesting that you argue against target=blank in this site, which uses it! Ironic!

  14. “Most users know how to open a page in a new tab”

    I do not agree either, tech crowd + power user know how, general web users mostly not know how.

  15. interesante aporte

  16. Keep on the good job! Some nice points here. Persistent home links are a must, and sometimes overlooked.

Related Posts