Sunday, November 17, 2019

layout - As screens become wider, should navigations and toolbars go away from the top, to the sides?


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?



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...