Optimize product UX: horizontal vs vertical menu, left vs right menus

UberStarter is going to help startups speed up and as you can imagine that implies it needs to help startups on so many fronts that it is a big box of UI elements to juggle around. In fact it is out right complicated and so complex that no one will probably use this product.

Which ofcourse worries me, and in my attempt to make things more intuitive, I went into the depths of horizontal vs vertical menus and right menus vs left menus vs top menus and 2 column layouts vs 2 column layouts.

First step was to Google a bit about it, which led me to a post on Quora.

The interesting bit was Quora's layout by itself which was using a 3 column layout and a combination of horizontal and vertical menus. Also I tried to make sense of why Gmail layout is the way it is.

Here are my learnings.

  1. There are two forces at play here. The first one is biological human vision which makes it easier for us to react to things in our peripheral vision. So notifications (usually top right) are best placed in that zone i.e. the corners and edges of the web layout. Also things which need us to see more clearly for extended periods are placed in the centre ofcourse.

  2. The second force at play are our habits of viewing data which come from reading books primarily. So for populations which are used to reading from left to right and from top to bottom, are used to this sense of hierarchy. Logos go to top left corner, the source of "all power". :-) Also left menus then make more sense then right menus. Like above in Quora, where the left menu is topics which are hierarchially at the top, and related questions are towards the bottom and hence placed on the right.

  3. This way of observing or reading kind of reflects in heat maps of eye tracking tests on users which take the shape of an F or an E (in some cases). So if you places a large vaguely shaped F on your web app that is what the user is primarily seeing. Never put content which will distract in this zone. Ideally no (minimum) ads in this zone else user engagement with your site / web app will fall. Chat windows inside your web app, like in Gmail and Facebook are outside of this zone and also more in the peripheral zone. So while you will immediately notice if a chat comes, it will not seem distracting if you continue to still work on your emails, read a post in the centre.

  4. Books and documents have titles at the top. That's the hierarchy we are used to, hence horizontal menus work better than vertical menus. Horizontal menus at the top with less and standard options work best. But if you have a long list of options like in case of an ecommerce product category list then that is better put in a vertical menu on the left. Just make sure the list is viewable within the first fold of the site, and if not then give multiple levels to the menu. Ebay has a good example of a vertical menu, they even made it alphabetical which makes it easier to scan the list for the users.

  5. If you want to put a search bar then put in the top horizontal menu. Ideally in the centre. Things which you do not really want the user to do should be at the right end of the top menu, like the logout button. Quora actually makes the logout option in light gray color, in a dropdown which is reachable at the right end of the top menu. They really want you to stay logged in !

Probably most designers know this intuitively, but I needed to know why. Hopefully this is helpful for your complex app design too.