7/29/2019 - #culture-web #ecommerce
by: Benjamin Samson

 

In an e-commerce site, the navigation menu is in a way similar to the shelving in physical shops. When you enter a store, your first reflex is to look around to identify where your intended location is, or the bargain corner. If you are a man and you are looking for sneakers, you will identify in a few seconds the corner dedicated to your request as soon as you pass through the door. For the navigation menu of an e-commerce site, the same reflex must be applied in an equally natural way.

 

 

 

The first golden rule that can be drawn from this experience is to make the location of this menu obvious and natural. Natural means habits... so place the menu where the user will look for it.

Design and UX issues regarding navigation menus will be addressed in a future article. Here we will focus on the elaboration of the content of the menus: questions of hierarchy, order and organization.

It is a bit like “nuts and bolts”  in terms of information architecture. As it happens, many articles on specialized blogs address the issue of web browsing from a design and ergonomics perspective... few tell you how to write well and select the right terms to use in this menu. Here you find our approach.

What should contain the Navigation Menu of an e-Commerce Site? 

The navigation term includes many elements that are:

  • the menus

  • the breadcrumb (or railway)

  • links and contextual elements

  • the footer

  • the tools, the search bar

  • etc.

This set of elements that make up the navigation of the website allows: 

  • to know where I am

  • to know where I can go

  • to know where I went

In e-commerce, we find a clearly established and standardized use of the distribution of the different navigation menus: 

  • The main navigation centralizes access to your catalogue shelves, important editorial content and current commercial animations.This navigation generally provides access to many sub-elements.

  • Secondary navigation offers the tools available to the user: Search, access to his account, basket and favorites.

  • Tertiary navigation will be varied according to your needs and will include all the other navigation elements. What is essential is to mark the difference in hierarchy to be clear on the objectives of tertiary level links: These are links that offer a more in-depth reading of the shop, so they will be read later. Generally we will place access to the site's editorial content (the blog, brand information, general terms and conditions of sale, lookbook, reinsurance elements, etc.), contextual links (associated products for example) and tools (add to cart, add to favorites, share, etc.). These links will be distributed in different places: in contextual links, in the footer, close to the main menu, etc... 

In our case, we focus on the main navigation menu, which allows visitors to orient themselves and browse the content according to their interests (knowing where to go).

How to prioritize your Main Menu? 

When you say menu, you mean hierarchy. There is a first and a last element. There are the elements of parents and children. Creating this organization will seem natural to you, it nevertheless deserves special attention and conscious reflection if you wish to facilitate and fluidify the path of your visitors. 

The CLOSE method,  or "close to your user's expectations", allows you to analyse and select your menu items in a rational and safe way. CLOSE is the acronym for Concentrated, Limited, Organized, Synthetized, Exclusive.

  1. Concentrate or Target on use or interest.
    It is often interesting to organize the shelves according to the expectations of users. The most frequent case being the distribution by gender (Man, Woman, Child), but you can also think in terms of activities (running, swimming, pedalling), by place (kitchen, living room, bathroom) or more simply by type of products (clothes, shoes, accessories).To avoid losing the user, it is important not to over-mix the target fields (location and gender for example). Obviously this is not always possible, especially if the distribution is gender-specific and part of the catalogue is unisex. You will often find targeted menus for men / women and accessories.A good solution is to target the visitor's need, and thus offer alternative access. For example: see products by gender or activity.Your main entries will give access to the same products, divided into several categories. As an illustration, you can consult the sports product sales sites where a Running shoes will be present in the main menu "Men/Shoes" but also in the entry "All Sports/Running"

  2. Limit the main entries.
    The user will feel lost beyond 7 main entries. In addition, increasing this limit may result in duplication (see point 5: Exclusivity). Be careful not to limit too much either. Keep in mind that your menu directly expresses the scope of your field of activity and must therefore cover all your main departments. The ideal number of main menu entries is 5.

  3. Organize the main entries by frequency of use or interest to users.
    Your core business will be placed in the first 2 menu entries. The commercial and editorial animations will be the least important. The order must be analyzed and can be adjusted according to the traffic observations.

  4. Synthesize and formalize the terms used in their strict definition.
    Use an explicit nomenclature, which is known by your target audience and is easy to understand. Menu labels must be simple and unambiguous. Avoid unnecessary sentences, pronouns and terms. Avoid business slang and neologisms (think of natural referencing: the simpler and more direct, the better). Normalize the use of the plural and singular, or give it meaning if you use both (for example, to separate the shelves of the catalogue from editorial content).

  5. Make each main entrance exclusive.
    Each entry must be clearly distinct from the others. In addition, ideally, each entry should be unique. If you use a wording such as "A and B"... ask yourself the question: can they be separated into 2? is there a classification that would group the two terms together?

Note that this does not mean that each entry must be completely partitioned from the others. There may be crosses in the results. With the notion of targeting, the main idea is to guide users according to their needs. This means that two different entries can lead to two lists of relatively similar products (remember that in point 1 is indicated 2 different entries to offer running shoes: via Men or via sport Running).

Distribute the subcategories in different main menus. At this level you have more freedom, but the CLOSE method must be applied again for the submenus: 

  • Concentrated on the user's expectations

  • Limited in number, even if that means using a third level

  • Organized according to importance to the user

  • Synthetic for easy reading

  • Exclusive to avoid any doubt between two inputs

It is always preferable to have a balanced distribution of sub-menus. This is not an absolute rule, some main entries may not have sub-menus and others may be very complete.

Some Examples of CLOSE Menus :

IKEA

Has a very large catalogue, offers 5 main menus: Products - Rooms - Services - New Products - Inspiration

 

Image Menu Ikea

 

CONCENTRATED OR TARGETED:

Here the targeting is clearly focused on the customer's use. Either it comes with a precise idea of the required product ("I want a TV cabinet" -> Product entry / TV furniture), or it comes with a precise need ("decorate the living room" -> Room entry / living room). The other menus are intended for other uses: reinsurance, fidelity, strolling.

LIMITED

Five entries, the ideal number.

ORGANIZED

The first two entries alone express the brand's Why: "products" for "parts".

SYNTHETIZED

Each entry is a word in plural (normalization). The only questionable point (in my opinion) is the singular on "inspiration".

EXCLUSIVE

No doubt about the entrances, as in physical stores where there is usually an "all products" floor and a "demo" floor.

  

CHAUSPORT

7 main entries (excluding the sales).

MAN - WOMAN - TEEN - CHILD - BABY - ACCESSORIES - NEW PRODUCTS

 

Image Menu Chausport

 

CONCENTRATED

As is often the case in fashion boutiques, targeting is by gender with an exception for accessories (which are not the brand's core business).

LIMITED

7 entries

ORGANIZED

the order is natural and obviously chosen according to the number of visitors. Would men buy more sports shoes? If you look at the asos.fr website, women are first.

SYNTHETIZED and EXCLUSIVE: 

the terms are obvious and leave no doubt, the rays are perfectly partitioned.

What is interesting in this site is the part of the sub-menus that are again organized around the visitor's need. He will be able to orient himself on a brand, a size or a product typology. Chausport immediately gives you the right keys to select your product quickly. 

 

BananaMoon 

6 main inputs:  SWIMSUITS - PRÊT-À-PORTER - ACCESSORIES - LOOKBOOK - SOCIAL SHOP - SALES

 

 Image Menu Bananamoon

 

CONCENTRATED

The entries are targeted on the need (swimwear, prêt-à-porter, accessories) and on discovery (lookbook, social shop).

LIMITED

3 menus to present the shelves, 2 menus to express the brand, then 1 event menu (sales).

ORGANIZED:

The order clearly corresponds to the field of activity: the swimsuit being the brand's core business.

SYNTHETIZED:

One word in plural for shelves, one word in singular for editorial entries.

EXCLUSIVE

Well partitioned entries by product typology. 

  

UKAL

An example in the B2B field... the method is the same and this example shows you that sometimes it is necessary to make concessions to obtain a result that remains effective. 

 

Image Menu Bananmoon

 

CONCENTRATED

The main entrances are targeted at the visitor's activities. An organization that will be found in the brand's paper catalogs.

LIMITED

Ukal had to make some concessions to reduce this classification to a strict minimum, bringing us to 10 main entries. This is a lot but it is still an acceptable compromise. The use of icons and colour makes it easier and lighter to read.

ORGANIZED

Entries are organized by order of use and attendance.

SYNTHETIZED

Here too, it was necessary to make some concessions, in particular for some titles ("for the farm" and "protection of the breeder") which are not in line with the other headings.

EXCLUSIVE

Here, the first 5 headings are very exclusive in terms of targeting, they will probably lead to lists of similar products. The user is supported according to his activity. 

 

Write your comment

Ready
for take-off?

Blackbird is a web agency specialized in the development of eCommerce websites. We are Magento Experts and we offer our services and advice for e-marketing, strategy, branding, deployment and methodology.

Contact
+339 50 66 21 38


Legal terms
Agency 30, Avenue du Rhin
67100 Strasbourg
France
SEE MAP
FR - EN