Designers try to bring as much offline experience into online world whenever possible to ensure the ease of use. However, when speaking of navigation, the experience in brick-and-mortar store and online store are quite different. Have you ever noticed how they place the bread section you aim for somewhere at the end of the shop to make you spend more time and buy some other (not necessarily required stuff) on the way? It’s not the case with online stores: once a customer feels disoriented — they close the site and go elsewhere.

Standard Magento navigation is pretty well designed. It is easy to use, predictable and consistent. Built-in navigation includes the logo linked to the homepage, clickable user account and cart elements, top navigation bar with categories, breadcrumbs, layered navigation, footer navigation and sitemap.We have already posted articles about navigation issues and usability tips for navigation in online stores. This time we will cover the navigation on Magento websites: what’s in the box and how standard Magento functionality may be improved — everything generously spiced with examples from successful online stores.

Navigation on the category page

Navigation on the category page

With the LOGO, everything is pretty clear. It’s the north star of any Magento website, the most prominent element that leads you to the home page no matter how deep into a website you’ve gone.

MY ACCOUNT and MY CART elements are found at the top right of the page. Site visitors  can easily access the account links and the shopping cart pages anytime they need it.

MAIN MENU in Magento (the first top horizontal row of links) usually contains categories, subcategories and sub-subcategories — as many as you wish. They are easily created and managed in the backend of the site.

Category creation in Magento

If the category tree gets too big, there are two ways to go: simplify the structure or implement the mega-menu. We will never get tired of praising mega-menu because it’s the best way to show your stuff in a very nice and compact way. In addition, it allows you to promote your products and include images to attract attention.

Look at the way mega-menu is done at Made: neat, clean and precise. In addition to subcategories they introduce the designers and product types available in the category to help the customer get the idea:

Mega menu Made

Paul Smith have an extremely neat design. They show the main departments of their store in the main navigation bar which reveals all the subcategories on-click:

Mega menu Paul Smith

If you want to incorporate mega-menu into your website (which you absolutely should do!) — an extension like Magestore Mega Menu can help.

Main navigation bar in a standard Magento store is placed at the top. But if you look at the sites of such leading ecommerce companies like Amazon and eBay, you will see that they have the vertical main navigation. Yeah, it’s a trend. No doubt. But, also it’s a very convenient way to display product categories, when you have a very extensive product catalog or need to feature links to other important pages at the top of the site.

In this case, Vertical Menu extension could be pretty handy. But do not expect a lot from this module — its functionality is very limited. Except the sidebar placement, you won’t get any bonuses.

However, if you want some, the VERTICAL MENU SOLUTION we have been working on could be a nice option for you.  It’s a highly customizable mega-menu extension including a lot of great features: easy configuration of horizontal and vertical menu items, ability to add category icons, multiple menu layouts, promotion management and many more nice features. You will be able to enjoy the comfort of this extension very soon. 😉

Vertical mega-menu

What is also worth mentioning when it comes to main menu design  — so-called hamburger  menu hiding navigation options off the screen. It has been widely adopted on many websites. However, being a vital solution for mobile sites, it still attracts criticism when used on desktop devices. Though users become more and more familiar with this navigation element, it is not considered to be a good practice for ecommerce sites.

Such big brands like Fred Perry, that have a very specific up-market target audience and don’t really need to follow any best practices for usability, do as they please: huge photo of Bradley Wiggins on the first screen, hamburger  menu on the left displaying the main departments. But, if you are not a well-known brand, think twice before implementing hamburger navigation on your site.

Navigation Fred Perry

Such a tiny but very important feature as BREADCRUMBS shows your customers the exact place of your site they are in. It’s a standard feature for Magento and in addition to usability it’s also good for SEO. However, there is always room for perfection: use Advanced Breadcrumbs extension to allow store visitors to see the full path in breadcrumbs panel even if they come to the product pages by a direct link.

Breadcrumbs

LAYERED NAVIGATION is another built-in Magento option you should make best use of. In other words — it’s a filtering feature that is placed on the category page. You can’t even imagine how it can reduce the pain of finding the right product especially when you have hundreds of products in your categories. In most of the cases it doesn’t require any fine-tuning, so there is no excuse for not using it. Let’s look how some businesses have implemented this feature on their sites.

Amara sell thousands of products with hundreds of parameters, and they do the right thing showing just the most used/most popular options in the layered navigation. Customers do not need to scan through the long lists and they always can see all options by clicking a “More options” link:

Layered navigation Amara

And again Amara are doing a great job by indicating exactly how many more options are hidden!

By default Magento reloads the page every time you select an option in the filters, but there are many extensions for improved layered navigation that load the items with Ajax technology.

A not so improved layered navigation is used at Cowshed but the way they name the filtering parameters is lovely: instead of boring “Product type” label they use something much more natural and friendly:

Filtering Cowshed

Horizontal layered navigation at Warby Parker crowns our layered navigation review. It’s not a conventional place for filters but it’s always right in front of your eyes:

Horizontal layered navigation

The extension developed by MANAdev team allows you to display layered navigation horizontally. Utilize and enjoy! If you want to create an outstanding customer experience for store visitors, learn from Astley Clarke! Provide the user with more than one layered navigation option. In addition to layered navigation on the category page they have placed a gift finder on the homepage. The only thing that we find inconvenient is that the finder doesn’t display what options you selected, it just highlights the parameter in a different color suggesting that you’ve already made your selection.

Gift finder Astley Clarke

One more tip how standard Magento layered navigation may be improved: make the filter URL’s more SEO-friendly with  Improved layered navigation extension by Amasty.

The online store FOOTER is another place where users are looking for something they didn’t find in the primary navigation. Make use of footer space and place there less essential but still important things like terms and conditions, policies, that your customers might want to check.Footer navigationSITEMAP is probably not such a crucial element for online store navigation but it can be useful for the users who happened to get lost on the site. The primary purpose of the sitemap is to list down the site pages  in a clear, hierarchical order giving a plain overview of the website. What’s even more important about the sitemap — it positively influences website visibility in search engines.  It’s also a built-in feature in Magento, so no programming is required.

And, traditionally — some tips and tricks in the end:

  • The obvious one: plan thourougly your online store navigation structure.
  • Ensure that all navigation elements are easy identifiable and consistent.
  • Try to determine what kind of users will come to your site. Put yourself in their shoes and build “for” them.
  • Try to minimize the number of clicks.
  • Introduce user-friendly categories.
  • Constantly track website traffic and improve store navigation in accordance with the results.

There is no universal way to design navigation. Magento offers extensive navigation functionality out of the box, but it can be improved further with multiple extensions and custom solutions. To create a clear and comprehensible navigation you probably would need some help from Magento web designers. Drop us a line, we will help you create a usable web-interface keeping your visitors engaged.