When developing a new website or redesigning your current website, it’s almost impossible to not consider your site’s navigation. However, you don’t want to sacrifice user experience (UX) for search engine friendliness or vice versa. If you think website navigation is just about drop down menus, think again. Here’s a look at how your website’s navigation can be used to improve UX while still being optimized for search engines too.
Navigation in a Nutshell
Having navigation on your site is a lot like having a directory at your mall. Sure, you may bring in visitors who want to go to one particular page (just as a shopper might be interested in just visiting one shop), but what if your visitors are looking for other related pages (other shops)? Creating an intuitive navigation not only improves your website’s user experience, but if implemented properly, can also improve your site’s conversion rate as well. Having clear calls to action working in tandem with a user-friendly navigation can help make it easier to drive your visitors through the goal funnels and prevent frustration for visitors who have to take unnecessary steps to get to their final destination.
The most common forms of website navigation are employed within the top of the webpage (header) or on a sidebar. However, you can have navigational links in your footer or in breadcrumbs (assuming your website structure is layered/hierarchical) or just within the links within the content on your webpages. The benefit of having your navigation above the fold will help ensure that your visitors are presented with options when the page loads without having to scroll lower on the page.
For many users, scrolling up and down is easier than scrolling left and right, which would help support having your navigation on the top as opposed to the sides. However, with the ubiquity of touch screens and track pads, this isn’t as much of a restriction for some users. You can also mix things up by adjusting the scrolling function on your website to scroll left to right instead of up to down like PosicionamientoWeb did, but before you rock the boat too much, you should consider the demographic of your users and whether or not they’d find the horizontal scrolling to be more of a frustration. Being memorable is helpful, but that doesn’t always drive your users through your conversion funnel. For that, you’ll also need an intuitive navigation structure that is still search engine friendly.
Think of the User First
As tempting as it may be to try to stuff your navigation with a ton of links containing keyword-stuffed anchor text in the hopes of improving your SEO, this is not always a user-friendly approach, so don’t harm your site’s UX in your SEO efforts. Your navigation should always have the user’s experience in mind first. User experience is an important element that should always be integrated into any web design/development project but there’s no reason you can’t make it a win-win by having intuitive navigation that is also search engine friendly.
According to Google, “The navigation of a website is important in helping visitors quickly find the content they want. It can also help search engines understand what content the webmaster thinks is important. One of the best practices in website navigation is to avoid using image-based navigation. If you truly cannot remove your image-based navigation (particularly if it interferes with your site’s user experience), make sure you implement alt attributes with the desired text so that search engines (and even browsers) understand the context of that image. Using alt attributes in place of actual anchor text may not pass as much link value as regular text so it’s best to only use alt attributes if you can’t amend your navigation to a text-based structure. Having alt attributes for your site’s images affects user experience when making your site ADA/508 compliant as well. So I guess you could say that it’d be user unfriendly not to use text-based navigation (or at least alt attributes as a last resort).
SEO Should Always Be (Human) User Focused
Having your site well optimized makes your site more user friendly for the search engines too, so there’s really no reason that SEO and UX can’t go hand in hand when it comes to navigation. If the end result of SEO is to make your site more visible to users, that still counts as being more user friendly (even if it means having to consider how the search engine spiders see it first).
There are a number of ways to implement navigational elements in your site. As Magdalena Georgieva explains in her Key Components of a User-Friendly Website Navigation post, there are three main types of navigation systems that are most commonly utilized: global, local, and contextual.
The first and perhaps most common approach for navigation is through internal linking. This would fall under the “contextual” category. Internal linking is one of the easiest ways to help a visitor navigate to another page. The linking can be done from within your page’s content or within your page’s header or sidebar. If you are including internal linking, it’s best to use anchor text that is relevant to where the user is being taken. According to Google: “This text tells users and Google something about the page you’re linking to.” You may often see “click here” links within the content of sites, and although it is better than no link, it is a good practice to change the anchor text (and the surrounding content so the sentence makes sense) to something more relevant. Don’t go overboard with trying to stuff keywords in your links’ anchor text, but try not to use generic anchor text across your site either.
Another form of contextual (and local) navigation that some websites utilize to help users navigate to specific areas on their site is through named anchors. Named anchors are a bit like labels that you can create through the code of your web page that you can reference in a link. If you have a page with a lot of content (particularly something that requires a table of contents), using a named anchor allows you to provide links to various portions of the content on that page, as well as linking back to the top of the page. You often see these in place in Wikipedia pages (like this one) where the “Contents” menu points you to various named anchors (which are found in the headings) on the same page.
Global navigation helps in a few ways, mostly in providing a consistent layout across an entire site for visitors, but it can also help reduce the amount of manual labor needed in the web development process because the global navigation can be edited from one source (instead of having to update each page across an entire site). However, according to Moz and a few other sources, links that are found within unique content (like that of the contextual navigation) pass more link value than those from footers/sidebars/navigation. So, although it’s good to have intuitive, consistent global navigation, it is still a good idea to utilize contextual navigation elements in addition to global navigation elements.
Much like a drop-down menu, a “flyout” menu works in a similar fashion where instead of the additional menus dropping down, the menu items extend on the horizontal axis. This is commonly used when space is limited in drop-down menus. You can see this in action on Intel’s website.
Another way to either replace or augment your site’s header navigation is to employ the use of a sidebar navigation. You can see examples of these on large e-commerce sites that have a plenitude of categories or departments and sub-categories or sub-departments. A couple of good examples of sidebar navigation can be found on eBay and Amazon.
Breadcrumbs are a great example of usability and link building working hand in and. Breadcrumb navigation not only allows visitors to back track to higher-level category pages, but since it is linking to each level’s URL, it allows for more internal links too. An example of breadcrumb navigation can be found at Home Depot’s website under the “Show by Department” menu.
Other Navigational Elements to Consider
Hierarchical URL Structure
Another way to help improve your visitor’s ability to navigate to other pages within your site is to create a URL structure that allows visitors to visit higher-level directories by removing parts of the URL. An example would be if you had a product page URL of http://www.ecommerce.com/category/brand/product-name/, but you couldn’t access the brand or category pages by going to http://www.ecommerce.com/category/brand/ or http://www.ecommerce.com/category/ respectively, this could cause annoyance for some visitors (albeit probably few since this isn’t a very common practice especially if breadcrumbs and other navigational elements are in place). Having a URL structure that is also hierarchical not only helps in the case of “URL subtraction,” but it can also provide opportunity to include keywords within the URLs (though according to a study from Search Metrics, this isn’t as much of a ranking factor as it used to be).
When it comes to sitemaps, the two most prominent are often found in either HTML or XML format. The latter is more commonly associated with SEO as it is formatted for search engines to crawl more easily. However, if you feel compelled to provide an HTML sitemap as well, this can be done in conjunction with the XML sitemap. An HTML sitemap does create some additional internal linking opportunities but this shouldn’t make up the whole of your link building efforts. An example of an HTML sitemap can be found at Rotten Tomatoes.
No One-Size-Fits-All Navigation Structure
Although Amazon’s navigation makes the most sense for Amazon, that doesn’t necessarily mean you have to copy their format. Nielsen Norman Group points out how some of Amazon’s elements aren’t the most ideal for all e-commerce websites. E-commerce sites may benefit from mega menus but that doesn’t necessarily mean that you have to implement them. Another important thing to consider with regard to navigation is your mobile users. Extensive mega menus are probably not going to be helpful to mobile visitors that have limited screen sizes so you might need to consider developing a design/structure that works for both mobile and desktop browsers or use responsive design to adjust according to the device. Having a mobile-friendly version of your site allows you to provide a custom experience for mobile users who would otherwise have a harder time navigating through the standard desktop layout.
Examples of Useful Navigation
- Simple – http://www.bestrank.com/
- The drop-down menus are single level (no additional layers of flyout or drop-down menus within each section).
- Informational – http://www.reuters.com/
- ECommerce – http://www.backcountry.com/
- Uses a mega (drop-down) menu with images (note the additional promotions in the far right side of the mega menu).
- Mobile – http://www.starbucks.com
- Though Starbucks uses a mega menu for desktop browsers, their mobile experience is a lot less intense. Check out Starbucks’ mobile navigation with this Screenfly emulation.