Top Navigation vs Side Navigation for Your Interface — What to Choose?
For many, this might seem like a rather simple choice to make — Whatever looks good in design. But there’s a lot more to this decision that can change everything for your interface.
So, how did we arrive at the problem?
I’ve recently been working on a particular project with ConduiraOnline, a fast-growing ed-tech that is in the space of providing great tools and resources for those preparing for competitive exams. Its platform currently has a side navigation menu with 11 items on it. Due to certain changes on the platform and the big picture, the team thought it’d be better to get rid of all the items that don’t belong in the primary navigation and put them further down within the pages.
Now, this narrowed the primary navigation down to just 3 items — Home, Internships, and Courses.
And hence, the big question — Should we still keep the side navigation or shift to the top navigation?
The answer to this rather simple question is just a teeny tiny bit complicated. And for that, we need to answer three basic questions.
1. How many items do you have in your primary navigation?
I believe this is the first and most important question you need to ask yourself. Do you have 3 menu items like I did? 15? Or even more? Answering this question matters a lot when it comes to making the choice of navigation. A very fascinating UX concept called Visual Fixation helps to put this in perspective.
‘Fixation or visual fixation is the maintaining of the visual gaze on a single location.’ — Our very awesome Wikipedia.
Now, on the top navigation, a single point of visual fixation usually fits in just one item. Whereas, a single point of visual fixation on the side navigation can fit in two items at a time. This is what I mean —
Hence, the outcome is simple. A user can view and perceive more menu items on the side navigation during one single visual look/fixation than on the top navigation. Though this might seem like a huge downside to the top navigation, think of it in terms of the number of items on your menu.
For E-Commerce websites that have filtering options or secondary menu with choices or product types, this concept of Visual fixation plays a super important role because in those cases you would want the user to be able to go through as many options as possible during one single visual point.
However, if you have less than or equal to 5 menu items on your primary navigation, your objective would be to give each of them their own weightage and not let their importance be distributed by another item.
So, the choice here is simply dependent on how many items you have on your interface. My suggestion — If you’re talking in numbers like 3 or 5, just go with the top navigation. This gives you a lot more control over the user’s journey across your platform.
Talking about control-the next question:
2. Does your Primary Navigation heavily depend on item priority?
Have you heard about the F Scanning Pattern in UX? People scan webpages and phone screens in various patterns, one of them being the shape of the letter F.
Here’s what it looks like:
According to an article titled ‘F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)’ by the Nielsen Norman Group:
The F-shaped scanning pattern is characterized by many fixations concentrated at the top and the left side of the page. Specifically:
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Finally, users scan the content’s left side in a vertical movement. Sometimes this is a slow and systematic scan that appears as a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
The implications of this pattern are:
- First lines of text on a page receive more gazes than subsequent lines of text on the same page.
- The first few words on the left of each line of text receive more fixations than subsequent words on the same line.
Hence, if your primary navigation constitutes of items with varying levels of priority you’d want the users to first scan the most important item — this is beautifully taken care of by the Top Navigation because it has a horizontal scrolling direction that people often use when they are reading.
Hence, in the top navigation the leftmost items carry more visual weight than other items because of their placement in the primary visual area.
As defined by the ‘F-Shaped Pattern of Reading on the Web’, side navigation uses a vertical scanning direction that is natural to people, however, item priority is a limitation.
Items on side navigation usually don’t carry priority based on where they are placed.
Use side navigation when you have various items of equal weights so that the user can scan through the list and decide what’s important for them.
3. Do you have plans for filters or subsections within your primary pages?
Think long term. Would you ever want to have subsections, tabs, or filters within your primary pages?
If yes, you might want to consider a primary navigation on the top and a side navigation to handle all the subsection complexities.
There are two ways you can handle subsections within your primary navigation (If your primary navigation is horizontal):
A. Horizontal sub-navigation:
B. Vertical sub-navigation
The choice between both would completely depend on what works for your interface.
Summary
The choice between the top navigation and side navigation really depends on these three basic questions. However, owing to devices with larger screen sizes, many design trends these days have shifted to side navigation as it looks cleaner and optimizes more screen space.
It all boils down to two things-
a. The number of items your primary navigation consists of.
b. Whether you want the user to navigate through items based on their priority or to visually scroll through them and pick an item based on their preference.
Also, if you haven’t checked my last writeup on Material Dark theme and Snapchat Dark mode, check it out here:
Hope this article helped you make a better decision for your interface and let me know your thoughts on the same.
