A short summary of our approach for the age-old debate between the top and left side navigation.
It’s Monday, 9 pm here in Berlin at Infinitec Solutions. And my design team and I just received a new challenge. The problem of the day: should we use a vertical navigation for our online platform or should we keep using the horizontal one? Both choices have supporters, but there are also some, including myself, who believe we don’t have enough evidence to firmly be on either side. So how shall we find the solution?
The first obvious solution that comes to mind. Run an A/B usability testing. What can be so difficult? For some reason, this idea didn’t quite sit well with me so I suggested starting by doing some good old research first. There was a reason why initially we chose the horizontal navigation and changing it would mean that we needed to first understand why this need appeared and from where. (quick note: it was not coming from our users)
Probably it would not surprise you to hear that most of the discussion out there, on the forums of the internet, debates website navigation, and almost no attention is given to dashboard navigation. No many seem to have ever questioned why are we using left side navigation for dashboard by default.
Here is one explanation by Patternfly in their pattern library:
It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left. While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.
And other by Designshack in their article on Design Trends:
The trend is eye-catching and makes you look. So, there’s some value in that because users will see it. If your navigation is a vital part of click patterns and user flow, this option could be a consideration.
And another from this Ux Stack Exchange forum question on dashboards:
In the particular case of dashboards, where the navigation layer tends to merge with the operational one, it is probably more elegant to place the menu on the left side. Even more so, in case the menu is expected to have many entries.
I can continue but I imagine you got the point. However, beyond personal preference or trends, in design, there are rarely absolutes where one approach will be 100% effective all the time for all cases. Thus whichever choice you make, the context should be the main player.
What we found
Because, as we determined, one type of navigation may work well in one context, but may not work as well in another. To figure out which navigation is best, it’s important to keep in mind the following aspects:
Understanding how do users scan the navigation while searching for an item, is very important when choosing the position of the navigation. For example, the left navigation facilitates a vertical scanning direction that is natural for people, while the top navigation forces a horizontal scanning direction that people often use when reading, this, in turn, influences item priority.
- Page space
Do you, or do you not have enough page space? Vertical navigation, for example, more often than not shrink and narrow the content area of your page, which means more of your content may have to live below the fold.
- Item priority and hierarchy
This has a lot to do with information architecture. In a list, to much choice means no choice. And thus a well-structured information architecture that groups the items accordingly is much easier to access than a show-me-everything-and-let-me-choose kind of approach. In terms of priority, for example in a top navigation, the leftmost items carry more visual weight than other items because of their placement in the primary optical area. In a left navigation, items have equal weight mainly because of the way users read and compare elements.
This concerns above or below the fold position. Top navigation items are more visible because they are always easier to find, being at the top. Left navigation items are not always above the fold because sometimes if you have too many items, some of them can get pushed below.
- Broad concepts vs specific concepts.
This is again related to information architecture. If you cannot find an efficient way to group items, left navigation containing different topics would be best for your users leaving them to decide which items in the navigation are most important. However, if you wish to focus the user on specific categories or groups and if some items are more important than other, the top navigation would be the best choice. Because the user’s topic of interest is more limited in this context, it makes finding items faster and easier.
- Navigation vs operation.
Often these 2 concepts merge. For example, the WordPress navigation has both operational and navigational items, but in some cases, they may need to be separate, particularly when there are too many items in the list.
Armed with all these it was time to get back to our initial problem. Because our dashboard is a real time view of our users finances, with the main purpose of helping them analyse and predict their businesses cash flow, making an informed decision while choosing the navigation is a necessity. Navigation should make our users lives easier, by given them quick access to what they need and allowing them to focus more on the content rather than on the navigation itself.
This being said we sat down and wrote the pros and cos of both navigations in the context of our dashboard and bellow you can see the results.
The decision is obvious. We have less cons for choosing the horizontal view compared to the vertical one, and our information architecture and platform structure benefits more if the the navigation is at the top.
This article was originally published on blog.prototypr.io. Click here to read the original article.