Top menu vs Side menu on dashboard

  • 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.

    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.

  • Grafix Guru

    Grafix Guru Correct answer

    5 years ago

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used