3 Navigation Mistakes To Avoid In Design
June 2, 2017
Mazes are fun, but try making your way out of a fairly complex one and they won’t seem fun anymore. Just downright frustrating.
A web design should therefore be everything that a maze is not. It should show visitors where they need to go and what to do to get there. There is a good reason for this.
If users can’t find what they are looking for in your website or web application, they will leave. Plain and simple.
In this article, we will talk about the navigational DONT’s which designers should keep in mind for an effective user journey.
Making Navigation Difficult
What’s easier than allowing users to shop by categories on an ecommerce website? Give them a search bar which they can use to find specific items and jump to those pages directly.
There are two benefits to making navigation easy like this:
- It makes people use your app or website more
- It makes the way clear for desirable actions which increases conversions
Designers know that user journeys should be easy. Every navigational link, should have a logical progression.
This is why elements like color schemes and fonts for example, are kept the same throughout a website to smoothen the user journey.
You can make the user journey easy by:
Making navigational trails consistent:
People who navigate from one website to another, owned by the same brand, expect navigational elements to either be the same or close to the direction they were following.
If menu items aren’t clear enough or look different on each page, it might confuse visitors and prompt them to leave.
To spare visitors from having to re-orient their bearings on different websites, keep basic navigational elements consistent.
Disney does a pretty good job of this. Even though the content style is different on Disney Channel and Disney XD, the navigation bar and header on each is basically the same (Games, Videos, Blogs, TV).
So, anyone who goes from one website to the next wouldn’t get lost in trying to find their way around, as the brand guidelines and UI design gives a familiar look and feel.
Giving Users Too Many Options
Give someone a few choices, and they will make decisions fast. Give visitors too many options, and they will take twice as long to make a decision.
This is why a menu bar with two or three options will receive more attention than a bar that requires visitors to scroll down to make their choice amongst eight or more options.
To avoid this, keep options limited to only those that are valuable. Here is how you can do this:
Spread your options in other menus:
To increase engagement, a good practice is to prioritize what matters to your audience (and your business goals) and place them in front and secondary options in hidden menus which users can access later.
As an example, consider the side menu on a web application which can be accessed by a hamburger icon at the top left corner. Designers usually include options like user profile, groups joined (on Facebook) and other options that offer secondary value to the user experience in a side menu (like the hamburger icon). Or you can do what Instagram does and spread your navigation options at the bottom of the screen in a tab bar.
Do more with less:
The fewer choices visitors have, the faster they can evaluate them and make their decision. The same principle applies to design. To make it easier for visitors to get around on a website for example, you can limit the navigation options on the front page.
Take inspiration from the British IKEA website which has no more than four options (Products, Rooms, Ideas, This is IKEA) on its front page. The US based website has 10 which would require visitors to spend more time to make their decisions.
Reinventing Navigation Patterns
Why is the Back button always on the top left of a website? It’s because visitors associate this direction as going backward which is why this placement is standard in web design. Placing it anywhere else (like the middle) would confuse visitors.
Just like hiding navigation options can put users off, making people use navigational options that they are unfamiliar with has the same effect. It ruins the user experience. To counter this:
Keep Main Navigation Options in Familiar Areas:
In design, especially considering apps that have the same purpose (social media websites) familiarity increases engagement.
It’s why social media platforms, like Facebook and Twitter, place the comment bar right at the top of the page. Designers know that this is where new users will look when they want to post something on their news feeds.
Use familiar symbols:
There is a lot of areas to be creative in design but navigation is not one of them. Good design doesn’t make visitors think.
Avoid confusing users by using standard navigation formats (shopping trolley for Add to Cart or magnifying glass for the search bar) in your design.
The more intuitive the navigation of your web or app design, the better. To validate your user flows, look at your design from the perspective of the people who will actually be using your product for user testing.
Designers know that a good user journey relies on seamless navigation. To avoid mistakes in navigation:
- Make the navigation trail consistent throughout your design
- Avoid giving visitors too many options by spreading them out in other menus or by reducing them
- Use standard navigation practices to avoid confusion