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!