fbpx

Ecommerce Guidelines: Content Menu (usability)

Guidelines 65-67

Ecommerce Best Practices » Homepage & Sitewide » Usability » Content Menu

The content menu consists of items users access when they need help or more information. Typical elements of a content menu include the shopping cart, default language, customer service information, return and privacy policies, shipping information, and FA0s.

The content menu is a major usability factor in that users access it when they need information. If they can’t find what they’re looking for in the content menu, or can’t find the content menu at all, this can be a huge deterrence that could ultimately lead to site abandonment.

3 guidelines for ecommerce content menu:

  1. Content menu items can be designed as a secondary navigation bar in the top right corner or in the footer.
  2. If you sell to multiple countries, denote language and currency in the top right corner.
  3. The shopping cart icon should indicate number of items in the cart and total price.

Guideline #65. Content menu items can be designed as a secondary navigation bar in the top right corner or preferably in the footer.

While the content menu should be visually distinct, it should also be in a familiar place.

Most large ecommerce websites operate complex organizations with many departments and customer service policies. Thus, it makes sense to have a site-wide footer for all these links. People are used to it being there and it isn’t a prime real estate location.

If you don’t have tons of policies and links to worry about, it’s perfectly acceptable to place the content menu in the top right corner of the homepage. This is another conventional spot that users will have no trouble locating.

How to do it RIGHT

REI

The conventional placement and high visibility of the content menu in the top right corner have been perfectly executed for high usability.

On a UX benchmark analysisREI ranked at the top with a 89% score on the UX dimension “Usability”.

Vitamin Shoppe

This conventional content menu is found in the footer.

On a UX benchmark analysisVitamin Shopperanked at the top with a 78% score on the UX dimension “Usability”.

How NOT to do it

Pequannock Feed

The content menu is in an unconventional location (it’s mixed in with the transactional menu) and takes up more space than it deserves according to the rules of visual hierarchy.

On a UX benchmark analysisREI ranked at the very bottom with a 3% score on the UX dimension “Usability”.

Guideline #66. If you sell to multiple countries, denote language and currency in the top right corner.

Providing the option to display your site for multiple languages and countries naturally leads to more sales.

Generally, indication of language and currency options are found in the top right menu area of a website. It’s here that a foreign visitor would look first to find out that there’s going to be a simple buying process with no hassle of manual currency calculations or customer service discussions about shipping options.

If you conduct business across many countries, then a splash page might be appropriate. A splash page precedes the homepage and it’s where a visitor selects their country from many options before entering into a customized experience for that country. It’s important that the splash page doesn’t look like a popup or advertisement however, as we know people are blind to these types of interactions and will simply close it before making the right decision.

That said, some users don’t like splash pages.

I would let the site use my IP address to determine the appropriate site to direct me to, and then provide the option to access other HM sites if for some reason it places me in the wrong country.

How to do it RIGHT

Bodybuilding.com

Notice the ‘United States’ indicator in the upper right.

On a UX benchmark analysis, Bodybuilding.com ranked at the very top with a 95% score on the UX dimension “Usability”.

H&M

This is the splash page first time visitors see. After the first visit, the location will remain the same as the original selection (unless the user manually changes it).

On a UX benchmark analysisH&M ranked with a 70% score on the UX dimension “Usability”.

Guideline #67. The shopping cart icon should indicate number of items in the cart and total price.

The cart is the first step of the checkout process. It’s the first serious signal that the user is getting ready to make a purchase.

It’s easy to track a person’s cart items if they leave the site. Retaining cart items, and signaling that the items are waiting in the cart, is important. It just makes things easy for the user, which is what reducing friction is all about.

Also, when you’re shopping on a website, it’s easy to get distracted and forget about items in your cart. With average industry cart abandonment rates so high, you don’t want to give users any more reasons to abandon. So make sure that the number of items is prominent and obvious, so users know they’re leaving stuff behind if they bounce.

From a UX perspective, it’s just good practice for these reasons:

  • Provides feedback to confirm that when a user tries to add something to the cart that it was successful.
  • Feedback for what is in the cart….they know that they put an item in there so know what that ‘number’ represents.
  • A nudge. They’ve committed to a certain degree by placing something in the cart, and that number is a reminder of that commitment.

How to do it RIGHT

REI

Notice the cart symbol with indication of the number of items within.

On a UX benchmark analysisREI ranked at the top with a 89% score on the UX dimension “Usability”.

How NOT to do it

Hatland

The shopping cart never shows the number of items in the cart, or whether there are any items in the cart at all.

On a UX benchmark analysisREI ranked at the very bottom with a 5% score on the UX dimension “Usability”.

Continue to the next section:

Ecommerce Best Practices » Homepage & Sitewide » Usability » Transactional Menu