Justin

User Experience (UX) and The Importance of Proper Navigation and Guides

Author: Justin Conklin on 01/23/2015

When was the last time you were lost?

Not just a little misguided, or even just slightly disoriented, needing only to quickly look around in order to regain your bearings. No, what we’re talking about is being truly and utterly lost.

Imagine for a moment that you’re driving in a foreign country and find that you’ve lost your way. All of the road signs are in a language you don’t understand, the mile markers seem as though they’re out of order, there no recognizable landmarks to help guide your way, and sadly - the GPS is broken. You’re completely and hopelessly lost.

This frustrated feeling of being lost is the same one which users browsing websites without helpful navigation are bound to experience if you don’t ask yourself these three questions prior to building a website.

The three UX questions to ask for a frustration free experience

Building a website with excellent navigation should answer three question a user may need to ask:

Where am I? Where have I been? Where can I go?

These should be answered quickly, or else you may be leaving them with a frustrating experience. The following are just a few ways to quickly answer these questions, and the best practices for presenting them to your audience.

Primary Navigation

The primary navigation is the strongest piece of your website that users will rely on in order to navigate it. It’s where the user starts to make initial decisions on whether they are hitting the back button or progressing further into the content of your website. The primary navigation should take minimal effort to locate and have a strong position over your content. It’s best placed in the header of your website.

Have a link to your homepage

You should already have your logo link back to your homepage, but also have a Home link in your navigation. There is no disadvantage to this Home link, so it is imperative to ensure it is included.

Put padding on links

Some extra padding on text links will help the user get the click they wanted. Padding refers to the space around the link. Not everybody is a sharpshooter with the mouse, so you need to give the user a little room for error.

Clearly label links

Icons are cool and they look great, but sometimes their meaning can be a mystery. You may use icons, but you should also be labeling the links with what the icons mean. Users want to see things quickly, don’t make them work any harder than they need to just to learn how to browse your website.

Highlight a user’s current location

You can use CSS to highlight the current active page in the navigation. This will allow a user to instantly notice what part of the website they are currently looking at.

Do not put external links in your primary navigation

Links within your primary navigation should always send users to pages on your own website. Use another section of your website to link externally. The primary navigation’s goal is to assist the user on that website specifically, not send them to a different website with a different navigation menu.  

Less is more

As previously stated, you want to avoid overwhelming visitors, so the fewer links you can get away with in the primary navigation the better.  It’s best to either have flat or deep navigation. Flat navigation is when you have a variety of links at the top of your hierarchy and less pages below them. While deep navigation is where you have less at the top and more below them.

flatnav-deepnav.jpg

Submenus

Submenus are usually located on a sidebar or in the body of a website. They are a list of pages below the one a user is currently on. It is important to keep your submenu at the same place on every page. Once they have located it a user will expect it there every time .

Don’t jam pack your sub menu with a bunch of links, this isn’t the place to do so - keep it high level and funnel your users to the sections they need to go. Remember, you can provide a submenu for each level so strong site map architecture is necessary for constructing good submenus that keep a user directed to the right places.

Breadcrumbs

breadcrumbs.JPG

Breadcrumbs are great because they will knock out two of the three questions very quickly for your users. The term breadcrumb stems from the classic fairy tale, Hansel and Gretel, in which two children drop breadcrumbs to make a trail back to their home. They are used similarly in websites to show the user the trail back to the homepage. Each level a user gets deeper into your website, the importance and usefulness of breadcrumbs multiplies exponentially.

The breadcrumbs should be placed above the content your page is displaying. This quickly tells your user where they are (and sometimes where they’ve been). It should never be your primary navigation, just a convenient secondary navigation to assist the user. Some quick tips on using breadcrumbsl

Are breadcrumbs always necessary?

No, they are not. Pages with single or dual level navigation usually won’t benefit from breadcrumbs because the user won’t be getting as deep into the website to get lost within. They are primarily necessary on websites where content is nested three or more levels deep. A great way to assess if your website will need breadcrumbs is to assemble a sitemap and see how deep your hiearchy reaches.

The benefits of breadcrumbs

  • Convenient for the user

The primary goal is to let the user know where they currently are and how they got there. This is also a secondary navigation to browse the website with.

  • Reduce steps back to higher level pages

If a user wants to go back two levels deep, they can simply click the link in the breadcrumb. Otherwise, you’re asking the user to hit the back button twice. Reducing clicks to other parts of your website is always optimal for user experience.

  • Reduce bounce rates and increase exposure to the rest of your content

Like previously mentioned, breadcrumbs will decrease clicks which also decreases loading times. Loading times are notorious for quickly bouncing users right off of websites. They also provide exposure to other parts of your website. If a user lands on a deep page from a search engine, they may see higher levels in the hierarchy they want to explore and read.

The search bar

Sites that are content heavy and deep will benefit from a search bar. Some users coming to your website may not know what they are looking for. However, others will know exactly what they want. The latter are the perfect candidates for the search bar. Furthermore, if a user does get lost in your website the search feature provides them assistance to search for what they originally came for.

Footer navigation

The footer is a great place to display a wider range of links within your website. We noted earlier that less is more for the primary navigation, the opposite can be said for the footer. The footer navigation should also include copyright, privacy policy, terms of service, and a way to contact you. You may also provide a link to your sitemap here as well. Keep the footer navigation clean and simple. For footers remember; no flashy graphics, no drop down menus - just standard text links. The footer needs to be designed and coded in a way that it will look great on every page of your website.

Summary

Having logical navigation is a core principle to reducing bounce rates and increasing conversions. Feel free to be innovative with your navigation, but don’t stray away from the core fundamentals and expectations of your users. Not only will your users enjoy browsing your website, but they also won’t be so eager to leave it as soon as they arrive.

What are your tips and tricks for ensuring that your site’s navigation is frustration free?