Navigation UX: Finding Your Way To Users’ Hearts Hazel Ho, User Researcher, drops some knowledge on retailers

navigation UX user experience

Photo credit: mikecogh via Visual Hunt

It’s a new year, which means new resolutions (that will be broken in two weeks’ time)! This year’s list consists of:

 

  1. Taking up rock-climbing

  2. Going on a health cleanse

Actually, one’s a lie…I’ll let you try to guess which one’s not true (but the answer is at the bottom of this post).

Before I undertake these resolutions, I just need to do a bit of prep work and purchase some items—online or in person. Which brings us to today’s topic—the role of navigation in good user experience.

There is a lot that contributes to seamless navigation but in the essence of time I’d like to focus on the importance of information architecture.

Information architecture (IA) is the practice of arranging parts of something to make it understandable—whether that’s in a digital or physical space. It helps people complete tasks by focussing on:

 

  1. Structure—the way information is laid out i.e. people should be able to predict where to find what they’re looking for

  2. Organisation—grouping information in a way that makes sense to people

  3. Labels—ensuring elements are appropriately titled so people can find information

Most people don’t like feeling lost, or overwhelmed and frustrated. Good IA can prevent this by helping people understand where they are, what’s around, and what to expect.

The design of a store or website’s navigation has a bigger impact on a person’s experience than almost any other factor. Follow along as we do a bit of shopping!

Rock climbing

I wanted to try out some climbing shoes so I made my way over to Covent Garden, where I knew I could find a cluster of outdoor recreation stores.

Snow & Rock

When I arrived at Snow & Rock, I was faced with a stairwell going up, and going down, and no signage indicating what could be found on each floor. With 5 floors of products, I had to face the fact that I’d have to go through each floor to accomplish my mission.

Snow & Rock Navigation UX 1

Where do I go to find climbing equipment? I have no idea…

The only *somewhat* useful information was signage indicating what could be found on the next floor up.

But the signage was one-directional—meaning while I could preview what would be on the 3rd floor if I was coming from the 2nd, I wouldn’t know what would be on the 2nd floor if I was coming from the 3rd.

Snow & Rock Retail Navigation UX 2

Currently on the first floor and while I can see what’s on the second floor I have no idea what’s one level down.

I suppose that’s where my amazing photographic memory skills would come into play…

Navigation experience = Horrendous 

What could be improved = Labelling  

A simple solution is to have a board indicating what can be found on each floor.  

Cotswold

When I arrived at Cotswold, I felt like I’d entered navigation heaven. I knew what kind of products were available before I even stepped into the store!

Cotswold Retail Outlet Store Navigation

I can see exactly what kind of products to expect inside

As soon as I walked inside, my eyes were immediately drawn to the big red post where—lo and behold—I saw the word ‘Climbing’. As I beelined for the post, I was drawn to signage that clarified what I’d be able to find downstairs and, unlike my previous experience, what I’d be able to find when I came back up.

Helpful in the event that my photographic memory failed me.

Cotswold retail outlet user experience

I can tell right away that climbing gear can be found downstairs


Cotswold retail store UX nav

Great signposting to let people know what products can be found on each floor

Navigation experience = Glorious  

What could be improved = Nothing 

Health cleanse

I know many people who have tried the Master Cleanse, where for 10 days you drink only a mix of water, lemon juice, cayenne pepper, and maple syrup. It’s supposed to jumpstart your metabolism, while giving enough energy and carbohydrates to last the day.

So, I decided to do some online grocery shopping for lemons and cayenne pepper (maple syrup was already taken care of—I am Canadian after all).

I decided to time how long it would take to find these two items on the following stores, using only navigation.

Waitrose

Discovery Duration = 2 min 6 sec 

From the Waitrose homepage, I clicked on ‘Groceries’, which brought me to the page below. You can see ‘Fresh & Chilled’, ‘Bakery’ etc.

Waitrose online navigation UX

 To find my lemons: clicked ‘Fresh & Chilled’ clicked ‘Fresh Fruit’ clicked ‘Oranges, Lemons & Citrus Fruit’ found my lemons 

 To find cayenne pepper: clicked ‘Food Cupboard’ clicked ‘Cooking Ingredients’ → clicked ‘Herbs, Spices & Seasoning’ clicked ‘Spices’ scrolled to find Cayenne pepper 

Waitrose online navigation user experienceI found the left side navigation unintuitive because the wording threw me off. And although there were dynamic changes as I clicked on the navigation links, the changes were so subtle compared to the large images on the main page. At first, I didn’t even notice that I could continue to filter on the navigation bar to narrow my search.

Navigation experience = Mediocre  

What could be improved = Labelling  

I wasn’t entirely sure what ‘Fresh & Chilled’ meant and clicked on it based on a process of elimination—none of the other labels sounded right.

Tesco

 Discovery Duration = 41 sec 

From the Tesco homepage, I immediately saw the ‘Groceries’ tab, which brought up the following links.

Tesco online nav bar UX

 To find my lemons: clicked ‘Fresh Food’ hovered over menu ‘Fresh Fruit’ → hovered over menu ‘Citrus Fruit’ found my lemons 

Tesco online navigation sidebar UX

 To find cayenne pepper: clicked ‘Food Cupboard’ hovered over menu ‘Cooking Ingredients’ hovered over menu ‘Herbs, Spices & Seasonings’ clicked ‘Spices’ → found Cayenne pepper 


Navigation experience = Glorious  

What could be improved = Nothing  

It’s amazing how Tesco’s label of ‘Fresh Food’, compared with Waitrose’s ‘Fresh & Chilled’, made a huge difference in clarity. Tesco’s tabbed structure ensured the navigation links were prominently featured. The use of dropdown hover navigation was also effective—a feature which, if used incorrectly, can actually make for a terrible user experience.

In general, dropdown menus work best when they group together items that people are used to grouping together—such as oranges, apples and bananas being under ‘fruit’.

P.S.* The major discrepancy in time was due to Waitrose’s slow page load and my needing to click through so many navigation links. 

How can I evaluate my information architecture?

Regular testing → research your users!

I cannot emphasise this enough. Design for your users, not for yourself. Get feedback from people to see if they can navigate your website. There are tests you can run to validate how effective your organisation, structuring and labelling really are.

Card sorting

A useful way to see how users categorise information. 

Users are presented with a list of items (for example, all the products in a grocery store) and asked to group them in a way that makes sense to them. Users can also choose names for the groups they’ve put together. This exercise can help build the structure for your website and category labelling—both things that will help with ease in navigation.

Tree testing

A technique for evaluating the findability of topics on a website. 

Commonly seen as reverse card sorting, this involves having main topics and subtopics already set up. You then ask users to find a certain item by clicking through headings and subtopics, until they see a link under which they expect it to reside.

This exercise helps identify navigation issues because you can assess where users would expect to find information, and change your website accordingly.

So there you have it—information architecture 101

I’ll now leave you with a UX fact. In 2004, 27% of issues causing users to fail at completing tasks were attributed to findability. Can you guess what that figure was in 2016?

60%! Just goes to show that UX is a never-ending story.

And one last thing—I’m not doing the master cleanse. 10 days without food… are you kidding me?

Your smartest business move is UX testing.

Try it for yourself – get a free trial showing 3 real people using your website or app, as they speak their thoughts

Hazel Ho
Hazel is a UX aficionado and part of the research team at WhatUsersDo. With a background in psychology, marketing and technology, getting involved in the world of user experience was just a natural progression.

And since her dream of being a ninja was never realised, she decided to battle the evils of terrible user experience instead.

Leave a Reply