Your Site's Navigation is More Than Just Drop-Down Menus

gen-internet-mkgt

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

How do your users navigate your site?

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.

Search-Engine-Friendly Considerations

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).

Navigational Elements

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.

Internal Linking

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.

Named Anchors

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.

Tabbed Navigation

In some cases, named anchors are utilized with another form of navigation: tabbed navigation. Though this is more often used in e-commerce sites where product spec and/or ratings can be listed, this provides the option of allowing the content to display on the page but helps limit what content is shown by default. This doesn’t always have to utilize named anchors though. Tabs can also be generated through the use of JavaScript as well but it’s still a best practice to include the content in basic HTML. Sometimes giving your visitors fewer choices can help guide them through your conversion funnels since it reduces the potential confusion that can result from having too many choices. An example of tabbed navigation can be found on a Craftsman product page like this one.

Global Navigation

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.

Drop-Down Menus

A common way to maximize the number of links in your navigation is through the use of drop-down menus. Though these can also be generated using JavaScript, you can also control this through basic HTML and CSS. Not all drop downs are the same though. In a study conducted by Nielsen Norman Group, some drop-down menus actually cause annoyance for users whereas mega menus (2-dimensional drop-down panels that display several navigation options) can actually be more user friendly.

“Flyout” Menu

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.

Sidebar Navigation

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

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).

Sitemap

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

Amanda Thomas

Amanda Thomas

SEO Manager
Amanda is the SEO Manager for BRIM and is responsible for assisting the project managers with the daily tasking to the SEO team.
Amanda Thomas
Amanda Thomas
«

Comments

  1. The search algorithms take many factors into consideration, including the usability of the site. There’s no point in spending lots of time and resources on SEO if it points to a site that isn’t user friendly.

  2. An excellent resource to provide our small business owners who are somewhat opposed to re-structuring a website or changing the entire look and navigation of their sites due to uncertainty or the unknown!

    Thanks!

  3. These are really great tips. Considering that poor navigation can cause users to leave the site and not convert. In the end optimizing a site is more than just about bringing more traffic to the site. It is about creating a proper navigation for those visitors. Thanks for these tips.

  4. Nice post on UI and navigation, I’m subscribing.

    I’ll have to write a post myself sometime about UI, conversion rates and ranking correlations, but I need to get around to pulling data together first. Time on site/bounce rate is a search factor though that’s being taken into account more and more, stemming from user experience.

Leave a Reply

Your email address will not be published. Required fields are marked *