Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The counter-example to my question are the ribbons that MS introduced with Office 2007; they take up a lot of screen estate at the top of the user-interface. Since the screens become wider and wider (from the original ratio of 4:3 to 16:10, now at 16:9), and limited-space devices like tablets, netbooks etc. are also becoming more common, doesn't it make more sense to save space at the top and the bottom of the UI and move most of tools and navigation e.g. to the left side?

share|improve this question
    
Excellent question! In fact, it's made me consider repositioning toolbars to the sides for applications I already use, whenever possible. –  Matt DiTrolio Dec 30 '10 at 14:20
    
Only if the user interface will be used maximized or in full-screen mode? Generally in my thinking, larger monitors equals more windows shown at the same time and not necessarily more horizontal space for each application or web site - but it might only be me. –  Oskar Duveborn Jan 2 '11 at 19:37
    
Oskar: My main concern are relatively small displays, like those on netbooks or 15.6" notbooks. On a larger screen, it might be less relevant, though. –  ammoQ Jan 2 '11 at 20:06

1 Answer 1

up vote 16 down vote accepted

Yes, the advent of monitors with cinematic aspect ratios is one good reason to favor web-style side-bar menus to conserve the more precious vertical dimensions. Multi-monitor set-ups are also becoming common for desktops, so there’s less reason to save the horizontal dimension for putting windows side-by-side.

With the right design, vertically-oriented side-bar menus can have the following additional advantages:

  • Scanning down a list of labels in a menu for a target menu item is easier than scanning across (see Parkinson SR, Sisson N, & Snowberry K, 1985. Organization of broad computer menu displays. International Journal of Man-Machine Studies, 23, p689-697). This is especially effective if the caption of each menu item starts with a unique key word.

  • A vertical orientation fits more menu items than a horizontal orientation for typical window sizes, assuming a single dimensional array of menu items. You can fit 26 menu items in window only 600 pixels high, about the least height you’d expect for a major application. Note the Ribbon takes to stacking menu items, which I believe makes it harder to scan.

  • A vertical orientation means one caption per line, making it easier to delineate multi-word menus items and menu labels from each other. A horizontal orientation can make multi-word captions appear like two separate menu items or menus, perhaps forcing you to use only single-word captions, as is the standard for menus on a menubar. There’s some evidence that multi-word captions improve command findability, so it’s good to have this option available to the designer (see Huang S-C, Chou I-F, & Bias RG 2006. Empirical evaluation of a popular cellular phone’s menu system: Theory meets practice. Journal of Usability Studies, 1(2), p 91-108).

  • With a horizontal orientation, longer menu item captions take more space, suggesting that they are more important, when that is not necessarily the case. With a vertical orientation each menu item is the same size, although if you wanted to make more important (or more commonly used) menu items bigger (like they do on the Ribbon), you make them extra tall.

  • While top or bottom mounting of the menu means the mouse tends to slew mostly vertically from the workspace area of the window, side mounting the menu means the mouse tends to slews mostly horizontally to reach the menu. Menu items are almost always wider than they are high, so this side mounting tends to align the largest dimension of each menu item with the direction of the slew, making selection fastest as predicted by Fitt’s Law.

  • Speaking of Fitt’s law, with the menu mounted on the side of the window, clever users can position the left edge of the window past the edge of the screen, which allows them to slew-and-smack the mouse pointer against the menu items for faster selection. The same benefits exist for any user that maximizes the window: the edge of the menu items are right on the edge of the screen. If the menu were on the top, there wouldn’t be this benefit on Windows or Linux platforms because the title bar separates the menu from the top edge of the screen.

I’ve posted an untested design for a side-bar menu that I call a “Menu Bank,” which attempts to address the shortcomings of the Ribbon and the traditional menu bar and toolbar combination (most of the text in this answer is from that post).

share|improve this answer
    
Thanks for this post. Made me think... Had a (short) look at your Menu Bank. I would suggest that more visual distinction between main menu items and sub-menu items, something along the visual lines of Outlook's left navigation bar, would make it easier for users to spot the various sub menu's. –  Marjan Venema Dec 29 '10 at 9:34
1  
wow, great answer! –  ammoQ Dec 29 '10 at 10:34
    
I personally love the ribbon layout, but given these observations, I'd like the ability to position it on the side of my window, as well. –  Matt DiTrolio Dec 30 '10 at 14:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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