Vertical action-bar vs a horizontal action bar

Question

I had a discussion today with a UX professional who is more experienced than me. The discussion was around the placement of a list of actions (Tools, Add To Gallery, Send Email, etc.) The person I was discussing this with was adamant about having the list of actions in a vertical bar on the left margin instead of have the list displayed horizontally above a detail view of an image.

Is there a real user experience reason for having a vertical tool bar instead of a horizontal tool bar? Below is an example of each view that we discussed.

Answer 1

I don't think there's a strong UX reason for actions being on the left or being along the top.

There's lots of instances of both in the wild that work just fine. Many email clients have the actions along the top - e.g. get mail, write, chat, address book, tag, filter, etc, and most of us are familiar with horizontal toolbars. And yet there's lots that have them down the side too. Some apps even have them along the bottom: share, edit, close, flag, delete, etc.

So there's no rules I am aware of other than ensuring that it works for your users and they are not confused by what they see, what they can do, and how they can do it.

However, what does matter is whether they look like actions. In your examples, the ones on the left look reasonably like actions in a panel, but the ones along the top look more like a typical menu system. A horizontal toolbar should (and usually does) look quite different to a horizontal menubar.

Answer 2

I feel that this situation beckons the Gestalt Principle of the "common fate" in perception.

Humans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions.

Aligning the tools as vertically give the user more of a sense that the content on the right is related to the option on the left, as you read from the top to the bottom from content on the right side.

Another enable of utilizing this principle can be see in those slide out menus commonly in drop-down navigation elements. The way that sub-menu items move into visibly distinct groupings of elements all moving in succession gives us the idea that these grouped links are related to one another within each sub-menu group.

Answer 3

I would actually argue in many cases users would expect actions to the right or below.

The exception being that if you are trying to "emulate" a toolbar in the classic sense of a > desktop software application... they work best on top, or floating/customizable.

e.g. On Digg the actions are all below the item... for Digging, saving, tweeting...

Or on this retail site actions are mostly on the right... Sharing, Saving, Buying

I think this flow makes more sense to most users as they understand the visual hierarchy of the page/screen... as it flows from top to bottom and left to right. (obviously this is a bit different in RTL locale scenarios)

Answer 4

I would say there are three mayor criteria to consider. Please be aware that I'm only covering semi-large to large screen usage in this answer, I think that the following rules don't apply for smartphone- or "phablet"-screens.

1. Compactness of lists

This is a rather easy one: If your list items contain text and are thus wider than high, it is much faster for a user to scan the list for the action he wants to activate:

If your list is horizontal, you have to visually travel the width of every element in order to find the desired one. With a horizontal list, you can jump from one element to the next as soon as you determine that the current item you're looking at is not the one you're searching for.

Of course, as soon as your list only contains icons (which is generally a bad idea), this doesn't apply anymore.

2. Screen estate

This is a huge one on desktops and tablets, not so much on smartphones though. As those "large" screens evolved to wider aspect ratios, and users are accustomed to vertically scrolling content, you need a way to use screen estate as good as possible. This means, in order to give the informational content as much estate as possible, it has to use the full screen height. So, in order to account for that, you'll have to move any action toolbars and navigational links to a sidebar.

An additional benefit of this is that you're reducing distractions from the content itself.

Also, if your list contains a large amount of items, you probably don't have any other choice but to use a horizontal list. A scrolling horizontal list should be avoided if possible.

3. Visual hierarchy

Now we're getting to the tougher one, which is also dependent on your situation: If your actions are global to the current view and not bound to a certain object that could move out of view, you should keep those actions in a sidebar or a header. Because of reasons already discussed, a sidebar would be the better choice. As we are conditioned to conceive the content from left to right, a sidebar on the left clearly stands out as a global navigational tool and can divide your view nicely.

But, if you have actions bound to a certain object, they should definitely stay in range of it, and that's where things get blurry. I would still mainly consider a horizontal list, but in some cases vertical lists (for a small amount of actions to group) or grids could work just as fine.

Conclusion / TL;DR

So yes, a vertical list offers a lot of benefits over a horizontal one, especially on widescreen devices and are vastly superior for a high amount of elements and elements with descriptions. That said, if you only need about three actions in your list, a horizontal list seems kind of like a waste of space, though, on the devices I considered, vertical space is way more valuable than horizontal space.