Day 13: Guide your users out of the maze (or don’t build one)
Imagine for a moment that you’ve built an amazing garden and opened it up to the public. Your garden is filled with exotic flowers and offers views people could have only dreamt of until now.
Problem is – your garden is a maze. So intricate that once customers are in, they cannot find their way out. Their visit is runned first by anxiety, then frustration.
This brings us to today’s point, orientation. Helping your visitors effectively find their way on your site is a vital part of good user experience. If they can’t, they might perceive it as an obstacle and this creates unnecessary friction in the buying process.
Things like mega menus, too many navigation links, too many and confusing dropdown menus, too many different CTA buttons, all contribute in creating a counterproductive user experience for users.
The majority of users are perfectionists, or as psychologist Herbert A. Simon called, “maximizers”, especially when money is involved. They are likely to evaluate almost all of the options they are presented with, and the more options we give them, the more they will feel overwhelmed.
This is the “paradox of choice”, which after a long session of multiple, daunting, small choices on your site can turn into “decision fatigue”, and lead people to avoid making any decision whatsoever. Goodbye potential customer!
Take this example of a navigation menu:
- Visually, links are stacked together and are not clearly differentiated from the main category name
- They are not using a similar naming convention for the different procedures (a principle known as “priming”), which creates even more confusion
- The navigation dropdown takes up way too much space on the page
- …And it’s triggered on hover (cursor moving on it), which can be annoying considering the size if opened involuntarily
Bad navigation is a huge problem especially if you own an ecommerce business selling a ton of products in many categories. How do you present them? Should you link to every single sub category in your nav menu? How do you group products? And what about mobile??
Luckily you’ve done the hard work upfront (did you?). You know your ideal customer and your goals for the site.
The best way to start improving your navigation, is to create your sitemap.
A good sitemap will help you figure out where you want to place your CTAs, how to link all your pages together and how to make the user flow as seamless and effective as possible.
And since we don’t want to leave you empty handed after this course, here’s a template you can use as an example to work on your own:
Use the template to structure your sitemap, keeping in mind your KPIs, your one goal and your avatar.
Ask yourself questions like:
- What does your ideal customer need to see on the homepage (this gives you an idea of the main sections to include)?
- What do they need to know in more detail before buying (this is where you should link to from the homepage with buttons and navigation)?
- Where should you place your primary and secondary CTAs so they’re easy to find, and meet the visitor in the right frame of mind?
- And finally, what should you include in your header navigation and footer menus to provide shortcuts to the right areas of the site?
With an effective sitemap you’ll get a crystal clear idea of how to guide your visitors towards conversion. However this alone won’t solve the “massive mega menu” problem if you have it. To fix that, here’s a few ideas you can play with:
- Create groups of categories or options
- Differentiate the design for each drop down based on product
- Don’t stack links too close to each other
- Prime users with your link copy: make them expect a structure and keep it consistent
- Think carefully about how users will trigger the dropdown (click is usually better than hover)
- If you cannot make a case for including a link, leave it out
Here’s some great examples of how simple can also be effective:
Your task today, is to create your own sitemap using the process we described. There are plenty of tools you can use like FlowMapp, Stormboard and Whimsical,or you can simply sketch it out by hand. What’s important is that you take the time to think about it, and then use it to actually build the structure of your website.
This will save you countless hours down the road, and give you the peace of mind of knowing that your users will be able to find what they’re looking for without constant hand holding from you.