37

I'm designing an admin dashboard and this came to my mind.

  • Should I use a side menu or a top menu?
  • Why? What's the main difference for the user experience?

When using a top menu it looks more consistent when analysing it cross browsing, since it's always on top, even though this dashboard is going to be responsive, it's something users will not use very often on mobile, at maximum on a tablet. This is real information based on the previous version of this dashboard.

enter image description here

On the other hand, the side menu seems to be more consistent on a desktop, with a more intuitive way to change menus.

enter image description here

So, based on this information, what type of menu should I choose? Currently I have no criteria on what type of menu to use besides of layout and appearance.

1
  • This is something I have been considering for a while. My horizontal menu is getting a bit cluttered so thinking of going left vertical. But on an iPad the left vertical takes up a lot of screen real estate.
    – Craig
    Oct 6, 2016 at 4:12

4 Answers 4

26

From a UXMovement.com article:

Top or left menu, there is no absolute answer. When it comes to designing for users, context is king.

A navigation that works well in one context may not fit well for another context. To conclude which navigation is best for your application, it's important to understand the different context where the top and left navigation may work best. enter image description here

Scanning

  1. A left navigation is faster and more efficient for users to scan.
  2. The left navigation also facilitates a vertical scanning direction that is natural for people.
  3. Top navigation forces a horizontal scanning direction that people often use when they’re reading.

Visibility

  1. Top navigation items are more visible because they are always above the fold and are easier to find.
  2. Left navigation items are not always above the fold because sometimes if you have too many items, some of them can get pushed below the fold.
  3. Top navigations are also easier to find because they are usually accompanied by the header and logo, both of which are visually dominant objects.

Priority

  1. The left most item carry more visual weight than the other items because of its placement in the primary optical area (top left).
  2. Items in the top left get more exposure.
  3. Left nav takes more priority because there is no balance navigation at the right side.
  4. Items in a top navigation do not have equal weight.

When it comes to design, there are few absolutes where one approach will be 100% effective all the time for all cases. Finding the approach that is best for you and your users, calls for an understanding of the context involved.

0
8

From the GUI Evolution point of view the navigation layer of commands is expected to be on the top, whether on sides of the screen you would commonly find the operational/contextual layer of commands.

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.

For example navigating and operating in wordpress admin is quite the same enter image description here

6

I have been trying going through some discussions regarding when and how to implement navigation within a 'dashboard' like page, so here are some of the considerations we have taken into account, which will hopefully help you come up with the right answer:

  • Length of page: this is where the top nav is good for long pages, as the side nav takes up room down the whole length of the page
  • Amount of menu items: the top nav deals with this using either a mega menu structure or collapsible/accordions, whereas the side nav can use a tree/folder structure as well
  • Additional navigation elements: if you use breadcrumbs or in-page secondary navigation, it is important to fit this into the rest of the presentation of the navigation system
  • Viewport: side nav is good for wide screen desktop because the navigations are tightly grouped, whereas top nav will tend to spread it out further; in mobile you want more horizontal space so top nav works better than side nav
  • Application ecosphere: if this is part of a suite of applications, can the style that you choose be applied consistently to create a common look & feel?
1

I prefer to reserve the top-menu for the highest-level interactions. Things like: getting to the 'home' of the website, switching to a totally different workflow, accessing the user profile, etc. These activities are less-common, and users will intuitively scan the very top of the page for these higher-level activities.

The side-menu can be more useful for actions that a user will take more frequently. If the actions you are grouping are part of the same workflow (say, navigating sections of an inbox, or monitoring sales in different categories), then I'd say use a side-menu to keep the users logically in the same workspace.

If users will frequently be flipping between these dashboard menu items, I would recommend the side-menu. I would need to know more about the workflows to suggest otherwise.

For examples of this, see: Pivotal Tracker, Facebook, Gmail, and CircleCI.

3
  • This is a dashboard to control buildings such as houses, apartment, stores, etc.. The user can sell, rent, interact with possible buyers through a system like a support ticket to get information and schedule a visit, also to check for avaliable space to advertise a specific property and so on.. And, of course, an area to edit his personal info, company logo, security system to change password, etc.. Apr 11, 2016 at 20:22
  • Welcome to the site, @Jack! Do you have any evidence to support your assertion that "users will intuitively scan the very top of the page for these higher-level activities"? Apr 11, 2016 at 20:24
  • @Graham thank you. I only have my own user-testing experience to go off of, not any hard evidence - I apologize for that. I wish I had something better. Apr 11, 2016 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.