Guideline 55-64
In case you’re wondering, the entire homepage is a navigation page. Sure, it should also relate the benefit of the site and explain why to buy from it instead of a competitor, but one of the basic functions is to get a visitor deeper into site to buy something.
When it comes to design, homepage navigation is one element that benefits from familiarity and convention. Users don’t want to spend time trying to find fancy, quasi-hidden menus and deciphering weird icons.
Conventional navigation organization increases usability. Putting the most important elements in familiar places increases navigation efficiency.
Common user answers to the question: “What did you like about the site?”:
Extremely easy to navigate, super-responsive
Easy to find the stuff and organized
the site is easy to navigate. It has clear categorization and so easy to chose for what I am looking for
10 guidelines for ecommerce navigation:
- When you have to use icons, use widely accepted symbols (i.e a shopping cart icon, a magnifying glass for search box).
- Links should change in appearance when hovered and/or clicked.
- The logo should be clickable and lead to the homepage.
- Place logo in top left side of the page.
- Place main navigation horizontally across top of the page or vertically down left of page.
- The main navigation bar should be sticky.
- Limit numbers of menu items to increase clarity and focus.
- Limit ecommerce navigation option to one or two words each.
- Make dropdown menus easy to manipulate and to scan.
- Content menus and transactional menus should be visually distinct.
Guideline #55. When you have to use icons, use widely accepted symbols (e.g. a shopping cart icon, a magnifying glass for search,).
Look everywhere around the internet and you’ll find icons. From Facebook to the dark web, icons will be there. They replace text, which takes more time for our brains to process. That’s good, right? For the most part. If icons are unfamiliar, however, they become a hassle.
There are familiar ones, like the magnifying glass for search. But there are others that don’t speak to everyone, and those will lose people.
If you work in Industry A and I work in Industry B, a single icon could mean two different things. You could see the icon and think “contact page,” and I could see the icon and think “pricing page.”
Before using an icon, be aware of how it’s used on other sites or in other apps. How likely are your visitors to use those other sites and apps? To summarize, here are your icon recognition options:
- Universal. Everyone recognizes and comprehends this icon.
- Multi-Use. Most people recognize it, but it has multiple possible meanings.
- Unknown. Few people recognize or comprehend this icon.
Universal is safe, multi-use is risky without extensive research, and unknown is just plain silly.
If your icon doesn’t clearly symbolize what will happen when it’s clicked, most people won’t bother finding out. Even if they do, they’ll get frustrated and leave the site.
How NOT to do it
Gertens
The outdated “Hot Deals” flame graphic at first seems like the heading for the products below it. However, it’s actually a link to a page with popular products. This graphic is highly unconventional. Most users will never know they’re supposed to click it.
Guideline #56. Links should change in appearance when hovered over and/or clicked on.
It seems almost impossible to violate this fundamental guideline, but we found many sites that did.
There are common changes to use when hovering over a link: A changed background color, a removed underline, turning the mouse arrow into a hand, or a changed text color.
According to Smashing Magazine:
Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again. Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.
This is a really easy fix, and it helps usability because it is the prototypical way of doing things.
How to do it RIGHT
REI
The category “Paddle” turns green when moused over.
How NOT to do it
Pequannock Feed
Noticed that the links for this site don’t change in appearance when moused over.
Guideline #57. The logo should be clickable and lead to homepage.
Check out this Internet Wayback Machine archive of Yahoo’s site back in 1996. Notice the logo is clickable. Conventions are self-perpetuating.
It has become an industry standard for logos to redirect a user to a website’s homepage. People expect it and will be thrown off if this common functionality is not there.
While it’s true that some people look for a “Home” link or button, most internet users rely on the logo to take them back to the homepage.
This is another easy fix with absolutely no downside. Just do it. You can also see if it’s a particular problem on your site by checking out a click map. If people are clicking your (unclickable) logo, then you should definitely make it clickable.
Guideline #58. Place logo in top left of page.
There’s a July 2016 NNgroup research study titled “Centered Logos Hurt Website Navigation” stating that getting back to the homepage is about six times harder when the logo is placed in the center of a page compared to when it’s in the top-left corner.
Additionally, participants of the study remembered the brand name more often when it was displayed on the left side. In fact, the brand recall lift was 89% when the logo was on the left versus the right.
But why? This likely has something to do with the way most brains process information. If you speak a left-to-right language, like English, research suggests you will instinctively look to (and focus on) the left side of the screen first. Thus, you are more likely to remember what’s on the left-side of a site.
Also, it’s about convention and what people are used to. Sometimes the best optimization is just to match customers’ expectations. Make it easy to shop and use the site. Change things up and people will get lost.
How NOT to do it
Hatland
The “HATLAND.com” website title is also the logo. Because it looks nothing like a typical logo, it’s likely that many users aren’t going to know they can click this button to return to the homepage. Perhaps if it were in the very top-,left corner this would be more clearly communicated.
Guideline #59. Place main navigation horizontally across top of page or vertically down left side of page.
Familiarly placed navigation is crucial. In the infamous words of Steve Krug, “Don’t make me think.”
Users need to quickly see where to go from the homepage, and the top-level navigation is where this starts. The top, horizontal area of the screen is where most people typically look first. See the CXL Institute research study “User Reading Patterns.”
Ideally, a visitor should arrive on your site and not have to think consciously about where they should look or click. They should immediately see what they’re looking for (or at least how to get there).
Should the main menu be horizontal or vertical? While there’s a strong case against the left vertical menus, two older studies (2003 and 2004) actually claim it’s better. Opt for a horizontal menu whenever possible, but go for the left vertical menu if you’ve got a ton of menu items (Amazon!).
This eyetracking study says that the top menu is easier to use, but there’s only so much space there. If you do use vertical menus, make sure they’re aligned left. Right-aligned menus impede scanability.
People buy only what they can find. There are a number of studies that show websites are losing money because the navigation system has failed, and user can’t find the product they are interested in. Check out this Jakob Nielsen article on costly content organization and navigation mistakes.
I also would like to see the menu items to be more open. I felt it was a little difficult for me to find the printer section. If the menu navigation was on the top and open I think that would help me.
I liked how the website showed the categories on the top
Instead of putting all the categories, like Men’s, Women’s, Children’s at the very bottom of the page it would be easier to see them as tabs at the very top of the page. I don’t like to have to scroll all the way to the bottom of the webpage for that info, it should be right at the top—the first thing you see
How NOT to do it
Gertens
There is a navigation menu across the top of this page, but it contains links that few people ever look for. These links should be exchanged for the main product categories.
Guideline #60. The main navigation bar should be sticky.
Sticky (or fixed) navigation is when the menu, typically the top menu, is locked into place. It doesn’t disappear on scrolling, so it’s accessible no matter where a user is on the page.
Sticky navigation bars are quicker to navigate. They simply make browsing faster and easier, especially when a website has a lot of information.
Smashing Magazine conducted a study to find out whether sticky ecommerce navigation bars were really better. They found that Sticky menus were 22% quicker to navigate. If a user spent five minutes on a website, sticky navigation saved them an average of 36 seconds. Keep in mind that these 36 seconds wouldn’t have been spent enjoying site content but having to navigate the website.
What’s more, the study found that all of the participants preferred sticky navigation. Most times, they didn’t even know what the difference between the two sites was, they just knew they preferred the site that had a sticky navigation bar.
That said, there are some downsides to a sticky navigation bar. Mainly, it can be tricky to implement. Since there are design limitations, it can be perceived as intrusive and bulky at times.
Again, this is most important for pages with lots of information, so it might not apply to a typical ecommerce homepage. It also might be more useful (usable) in product category pages, where transactional navigation menus get larger.
Wondering how to set up sticky navigation on your site? Read Smashing Magazine’s full article here.
How to do it RIGHT
Bodybuilding.com
As you can see, the black top navigation bar remains apparent as you scroll down the page.
Guideline #61. Limit numbers of menu items to increase clarity and focus.
More choices equal more freedom, right? For the most part yes, but there is a good body of evidence that the more choices we are presented, the less happy we are with the one we make.
The most famous, and possibly first, study that pointed to the adverse effects of choice was conducted in 2000, and the subject was jam. Researchers found that more people purchased jam when there were fewer options available.
Since then, other studies have supported this phenomenon, with subjects ranging from chocolates to 401(k) plans. Most of them have supported the notion that more options debilitates consumers from making decisions.
What this comes down to is a balance of distraction from the primary, and most profitable, avenues for a customer to get into your site and find what they’re looking for. As always, knowing your customer and what they want should be the basis for what the homepage presents.
I liked the menu across the top, with a reasonable number of main categories.
The site is easy to navigate. It has clear categorization and so easy to chose for what I am looking for
I felt like some of the menus were pointlessly long and repetitive, and it makes things harder to find, not easier.
How to do it RIGHT
GNC
Instead of overwhelming visitors with a list of all goals, GNC shows 12 of the top health goals on their homepage.
I like how everything was laid out and easy to understand … It was clearly labeled.
User quote on GNC
How NOT to do it
Hatland.com
The number of navigation options to start browsing hats on this homepage is seriously overwhelming.
Guideline #62. Limit ecommerce navigation options to one or two words each.
Cognitive fluency applies here. It’s human nature to prefer familiarity and easily understandable options. Our brain prefers easy. For marketers, this means the easier to understand your offer is, the more likely people are to buy it.
Psychologists have determined, for example, that shares in companies with easy-to-pronounce names do indeed significantly outperform those with hard-to-pronounce names. Coincidence? Nope.
Help yourself, and your users, out by keeping navigation options as simple as possible. Don’t distract users with long, difficult words or multiple words. Be as simple as possible.
How to do it RIGHT
Crutchfield
This site nicely breaks down their thousands of products into simple-to-understand categories.
Home Depot
Home Depot’s “Top Selling Categories” are also well organized. The thumbnails help with more nuanced categories, too.
How NOT to do it
GO Electronic
The vertical navigation menu on the left side of this homepage is anything but simple.
Guideline #63. Make drop-down menus easy to use and scan.
If you have a lot of categories, subcategories, and sub-subcategories, then menu management is difficult—yet crucial—to get right.
Avoid a long vertical drop-down that goes below the fold so that users don’t see all the options. Users also prefer long lists in smaller chunks, organized logically. Who wants to read a long list of items with no apparent order?
Jacob Nielsen did a drop-down menus study and found that when there are lots of options, large two-dimensional drop-down panels that group options can help users avoid scrolling. The use of typography, icons, and tooltips can then help with users’ exploration and discovery of what the site has to offer.
The sub-menus seemed to overlap the main menu. So, for example, if I’d hover over “Accessories,” that sub menu would overlap the main list of menus.
The only part that I found to be frustrating was that I couldn’t use the menu navigation very well. I felt it was sort of hard as there were too many items to use that navigation
How to do it RIGHT
Petsmart
This drop-down menu is cleanly broken up into three columns: Food & Care, Supplies, and Featured Shops. What’s more, each parent category (e.g. Dog, Cat, Fish, etc.) is organized into these same three groups.
I like how everything was laid out and you didn’t have to go around guessing where things were.
User quote on Petsmart
How NOT to do it
Outdoor Action
There are two mistakes being made here. First, the “Womens Clothing” subcategory should be broken up into sub-subcategories. There are too many options as is. Second, the drop-down menu disappears below the fold.
Guideline #64. Content menus and transactional menus should be visually distinct.
This usability guideline is an extension of the visual hierarchy principle. What’s more important for a first time visitor, seeing where the company headquarters is located or browsing products?
Don’t confuse users by combining the two menus. They have different purposes and should be visually represented to communicate that.
You’ll want to emphasize your transactional menu, of course. How you do that is up to you, and it’s subject to your own context. But make sure that your transactional menu looks different than the rest of the page, and especially that it looks different than your content menu.
The menu on the left was distracting. While there was a small gutter between the menu and the item, I felt like there needed to be a better separation between the two.
The sub-headers within the menu really blended in and did not stand out. The sub-headers would have been helpful if I would have realized they were there from the beginning, but since they blended in I didn’t notice them at first.
How to do it RIGHT
Lowe’s
The top horizontal content menu is visually distinct from the vertical transactional menu on the left.
the navigation was easy and made sense where to find items.
User quote on Lowe’s
How NOT to do it
Pequannock Feed
The products for sale on this site are hidden under one tab on the horizontal navigation menu. The rest of the menu includes other random links, like a link to a blog, that absolutely do not deserve equal attention to products for sale.
