2

I'm currently working on a project in which navigation positioning is key for the UX flow of the user. I've been trying several options, but I'm not sure I've found a solution that captivates the right understanding from the user.

I've got a layout in which the navigation is a sidebar and each item contains a submenu. By default, the first item would be selected, once you dive in the page. Selecting other items in this submenu would change the meaning of the content on the page. As if the content maintained the same context, but changed focus.

Now, the issue is: between option A and B, which do you think is the most intuitive and easy to understand in this situation and why?

enter image description here

  • A - contains the menu on the sidebar on the left (blue) and the submenu horizontally displayed on the top of the page on the right (green).
  • B - contains the menu on the sidebar on the left (blue) and the submenu is displayed vertically below each parent menu item (green).
  • Option A seems to assume that you would click a Blue item and go to a landing page of sorts. Meanwhile, Option B could assume the same, but can also be viewed as a dropdown menu. – mrmac Sep 16 '16 at 23:15
1

Both are valid approaches, however there is a little more to this than just the position of the sub menus, e.g. you also need to think about the selected state of each menu item which helps to associate the selected menu item to either the sub menu items and page content, e.g.

  • When you select a blue menu item you need to ensure there is a visual association to its sub menus, and...
  • When you select a green sub menu item you need to ensure there is a visual association the page content.

However, by following the Gestalt Principles of Grouping (a set of principles in psychology), specifically the Law of Proximity, Option B is probably the better of the two, e.g.

Law of Proximity—The Gestalt law of proximity states that "objects or shapes that are close to one another appear to form groups". Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together.

So in Option B, the selected blue menu item is in close proximity to its green sub menu items (and you need to ensure all the other blue menu items are not)

Gestalt Laws of Grouping

1

The style of option B is more suitable for the reason that it maintains consistency and visually reiterates the hierarchy. It's clearer that the sub-categories belong under the main category.

As soon as you begin moving tabs onto another axis or area of the page, you undermine the power of the left-hand navigation as the locus of control.

Another argument is that horizontal tabs suffer from lack of room for labels, and behaviour begins to get trickier to manage in a responsive layout.

A small, but important addition to this layout would be a visual indicator to express that the first sub-category has been automatically applied to the page content. This could be achieved many ways, this is just one example:

enter image description here

0

I would recommend option B. Simply for the reason that it will scale better if you need to add an additional third tier to the navigation at some point. Also it is very easy to run out of horizontal real-estate with a horizontal tabbed menu system like A.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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