If you walk into a steakhouse, order steak and get served spaghetti, what would you think? Maybe you did not explain yourself correctly, so you order again and hope a thick, juicy steak greets you the second time around. Yet again they bring you a plate of spaghetti – and it’s cold. How long before you realize this may not be the best place to order steak? Your expectations were not met, there was no way to get what you needed, and it took multiple tries to not get the results you were looking for. Simply put, this was a horrible user experience.
This day and age is all about high expectations, expediency and efficiency. We don’t wait for dial-up tones and have much less patience and time to spend on gathering information. With this in mind, every website strategy should cater to these values: give users what they want and – equally important – what they expect with as little effort from their end; this is the ultimate user experience.
Let’s put our attention to two factors that heavily influence User Experience, or UX: navigation and readability. Navigation takes the user through your website, while readability helps them understand and digest the content on the screen. What are the best ways to deliver optimal navigation and readability?
Optimal Navigation
Navigation goes hand-in-hand with content. The goal is to strategize, organize and build-out content that is important to your company and its audience, then create a menu to direct users to that content. Before you even begin building out your navigation, have these factors in mind:
Information Architecture: Organizing Content
After gathering the content, we need to organize it for the navigation. This is referred to as information architecture. At this stage, we’re asking what pages should be on the first level of the navigation menu, the next, etc. Do we need a simple menu or should it be complex?
This is an example of how a chart of this process looks. Organize your navigation to reflect the most important pages for your users – this includes what pages are listed first to last on each level.
Also consider different users. Will your site attract different groups? Will there need to be menu options that vary based on user, such as logged in individuals or new vs. repeat visitors? Frontier Communications has audience-based navigation options:
Frontier Communications has a different navigation menu for Residential, Small Business and Enterprise visitors to the site. Even their logo changes for the Small Business and Enterprise categories.
The end result of this stage is a sitemap – a list of every page on the site.
Labels: Naming Each Page
Make sure each page on your navigation is named logically and in a way that will gain the best SEO value out of your site. For example, labeling a menu item as “Products” is logical. The average user understands what a product is, but the best SEO value may be a more descriptive label, such as “Hair Products” or “Healthcare Products.”
Design: Menu Layout and Aesthetics
Should it be horizontal or vertical? Both? Will I use icons on my navigation? Should I make my navigation stand out or keep it simple? Should I use the footer for more menu options? Layout and design are just as important to UX navigation as organization and labeling.
Layout
Your layout is heavily influenced by content and the sitemap. Your navigation should not distract from the content; it should help users easily get to it.
Most sites use a horizontal menu at the top and sometimes a vertical menu on the side to show more categories/pages on the site.
Alibaba’s US website has both a horizontal menu that highlights key pages and a vertical menu on the left that features product categories.
For complex sitemaps with many levels, long labels, etc., a horizontal layout (columns as an option) may work best. Horizontal menus are more common as the primary navigation and offer a little more flexibility should you need to add/remove items from the menu.
Wells Fargo has a deep sitemap. Their menu, along with being organized by audience, features sublevel items grouped into categories.
Not every website has to use the same layout or focus their sitemap in the same way. For Amazon – arguably one of the largest websites – important menu items, like the login and shopping cart, play a secondary role to the huge search bar. Should users want to browse, “Shop by Department” opens a menu with multiple options.
Category pages feature richly dense vertical menus.
Design
Design your navigation to fit the brand, but more importantly to guide the user. The design can be bold or minimal, take up a lot of space or just enough for the main items, but it should always serve as a guide for the user – not an obstacle.
Icons and Varying Menu Styles: Savannah College of Art and Design (SCAD)
The Savannah College of Art and Design (SCAD) uses icons for each dropdown item in the main navigation and for the vertical menu. The vertical menus serve to direct users to three areas most commonly searched for on a college website: programs, application and a virtual tour.
Fun Navigation: Discover Tennessee
Discover Tennessee has a fun design with navigation that supports the user in multiple ways:
- The main navigation has descriptive labels.
- There are city options listed in the dropdown for “Discover Trails” and each city features an image for individual trails and byways.
- Beyond just the main navigation, the site uses the content area to direct users with the “Here’s How to Get Started” section that carries users through a simple, step-by-step process of how they can discover Tennessee.
Interactive Navigation: Central Park Real Estate
Central Park Real Estate makes navigation fun, highly visual and more importantly effective. Aside from the standard horizontal navigation at the top, users can hover over a building to see the location. Click on a building and immediately see:
- The building name
- An excerpt about the building
- How many units are available for sale and for renting
Visitors to the site can also use the compass to see different views of the building and click on the park itself to see what is taking place that day!
Regardless of your goal – more sales, to educate/inform your user, garner more donations, etc. – make sure your navigation provides users with the right path to get there.