Fitt's Law
en.wikipedia.org
en.wikipedia.org
1. Menu items. Pull down the main menu on OSX, and find a menu with a separator - a line between groups of related actions. The separator itself isn't a target - it doesn't lead anywhere - but clicking it dismisses the menu. So, miss your intended target by a few pixels, and frustration ensues.
2. Window edges. This one is a side-effect of OSX's poor support for full-screen windows. Even if you 'maximise' a window, moving your pointer to an extreme edge does, for example, allow you to move the scrollbar, but persists in offering the 'size window' action. So you need to go all the way to one edge, then move ever so slightly back again, which reduces the target area from infinite to very small. Full-screen addresses this, whilst introducing other 'flaws' (like your global menubar no longer being visible).
The dock is terrible. I edited a config file to have mine as small as possible and then auto-hide it. Also never use Mission Control or whatever the launcher grid screen is called. Spotlight set only to show apps and client directories does everything I need.
Those useless Dock corners could be really nice for displaying square widgets that might otherwise want a chunk of the menu bar.
*of course due to the wide screen nature of monitors they aren't actually infinite because you'll almost always have significant horizontal velocity by the time your pointer gets there causing you to have to stop and carefully move your mouse just as much as if you had window-attached menus and often further if you've rammed into the corner furthest from your desired menu. The RiscOS/NeXT approach of putting the menus in the context menu is arguably best for acquisition speed although probably worse for discoverability because you have to take an action before you can see even the top-level of the hierarchy.
I think that Windows 10 is similar - there are window-edge issues which don't (to me) appear to be present in W7 that make it more frustrating when resizing, etc.
BetterSnapTool and alike help, though.
I haven't noticed the menu divider issue. You already have to wait until your menu item is highlighted before clicking, so that is what you focus on. It is an odd choice though.
Mac OS is about easy entry-level accessibility whereas windows/linux are more suited to power users for this reason. Much, much easier to be a pure/power kb user in windows/linux.
http://www.hcs.harvard.edu/~jrus/Site/cocoa-text.html
https://developer.apple.com/library/mac/documentation/Cocoa/...
They are hidden by default in OS X, and you can just use swipe gestures on trackpad/Magic Mouse or the mouse wheel on other mice to scroll, while the cursor is anywhere over the window..
- Moving a whole page up or down by clicking on the grey bar, which is similar to pressing Page Up and Page Down, but it's much faster on screen when I already have the hand on the mouse and the window maximized (because of Fitts's law, the scrollbar has infinite width, while the keys are small).
- Dragging around up and down in a long page to a different part of the document, in almost instant time. I HATE with all my strength how mobile browsers and apps have eliminated that option. Dragging a moderately long page to find a particular section (in, say, a Wikipedia article) with the touchscreen's physical scroll is a pain in the ass, and slow as molasses because the max speed is also capped at a low value. Is it that hard to show a drag handle after the drag event has started, and hide it when it ends?
[1] https://en.wikipedia.org/w/index.php?title=Accot-Zhai_steeri...
The apostrophe also comes at the very end when "es" is added to make a word plural, e.g. "fishes' spawning ground."
Rules 1b and 1c http://m.grammarbook.com/punctuation-rules/apostrophes.aspx
This is why I gave up my second monitor.
My Fitts's law analysis happens on a target platform and not my development system.
Could you elaborate?
Fitts' Law inspired my work with pie menus [1] and gestural direct manipulation user interfaces over the years. [2]
[1] Pie Menus on Wikipedia: https://en.wikipedia.org/wiki/Pie_menu
[2] An Empirical Comparison of Pie vs. Linear Menus; CHI'88; Callahan, Hopkins, Weiser, Shneiderman: http://www.donhopkins.com/drupal/node/100
One rule of thumb which abides by Fitts' Law that I try to follow is: "the user's attention should not be squandered". [3] (So I apologize for being so verbose.)
[3] BayCHI '98 talk: Natural Selection: The Evolution of Pie Menus: http://www.baychi.org/calendar/19981013/
My goals have been enabling designers and users to easily create and edit their own pie menus, and providing smart editors, automatic layout, and support and guidance to help humans come up with easily memorable, Fitts'-friendly designs.
This demo of an old OLE/ActiveX implementation of pie menus in Internet Explorer [4] shows the weakness and complexity of the traditional desktop gui MFC based approach to creating and editing pie menus with typical property sheets, scrolling lists and tree editors.
[4] ActiveX Pie Menus: https://www.youtube.com/watch?v=nnC8x9x3Xag
When editing a scrolling list or tree of items, it's difficult to visualize the directions, which change when you add or remove items. As the antithesis of direct manipulation, it takes far too much pointing and clicking to indirectly edit a pie menu via a scrolling list or tree control.
Entering an indented outline into a text editor is an easy way to quickly define and edit a tree of pie menus and submenus, but it doesn't give you a good way to edit properties of each item. Of course describing menus in XML is great if you're a web server, but not fun for human beings.
I tried to combine these different techniques of editing pie menus in a tabbed dialog, with a scrolling list and controls for editing items, a tree of nested items and a graphical preview, a text editor for entering nested items as an outline, loading and saving XML.
But the result was a horribly unwieldy Frankinterface's Monster, difficult for a professional UI designer to use, and impossible for end users to use.
These jQuery pie menus have a more evolved, web friendly design, but I haven't made an editor for them yet. Here's the documentation [5] and free open source code [6].
[5] jQuery Pie Menus Documentation: http://www.donhopkins.com/mediawiki/index.php/JQuery_Pie_Men...
[6] jQuery Pie Menus Source Code: https://github.com/SimHacker/jquery-pie
In the newer jQuery version, one change from previous designs is that I'm de-emphasizing the idea of "menus", and just calling them "pies", because I believe that framing pies as menus has too much historical baggage, does not emphasize their gestural, direct manipulative qualities, and precludes thinking of them more like a directed graph or geographical map, instead of a hierarchical tree.
The jQuery and Unity3D [7] versions also differ from previous designs by modeling pies as containing directional slices, which themselves contain linear items, instead of pies containing items directly, and laying out all items in different directions, which change whenever you add or remove items.
[7] Unity3D Pie Menu Demo: https://www.youtube.com/watch?v=sMN1LQ7qx9g
That enables designers to first specify the number of slices (which has a major effect on usability, with 4 and 8 being ideal numbers of slices), and then independently populate each slice with zero or more items, which users can select by moving out from the center.
So the directions of the slices remain stable during construction and editing, because you can start by creating an 8 slice menu, and then incrementally drop any number of items into it each slice, or none at all.
But why would you ever want to have empty slice, and why would you want the directions to remain stable and fixed to 8 slices?
Kurtenbach and Buxton compared the speed and error rates of directional menus with different numbers of items, and found that 2, 4, 8 and 12 were optimal peaks. [8]
[8] An empirical evaluation of some articulatory and cognitive aspects of marking menus: https://d2f99xq7vri1nk.cloudfront.net/legacy_app_files/pdf/9...
With 2 or 4 items, Fitts' Law has an overwhelming effect, because each item's target area is enormous (1/2 or 1/4 of the entire screen area), and adjacent to the cursor starting position in the center of the menu. (Maximizing the area, minimizing the distance).
The articulatory effects of Fitts' Law diminish as you add more items (the target area decreases, but the distance remains a small fixed constant), but there are other important cognitive effects that comes into play: the cognitive effort of remember the directions, and the mental framework you use to think, learn and recall.
How many items are there, and what are their relationships? Are you ordering food from restaurant menu [8], or wandering around a Memory Palace? [10] [11]
[9] Servitude: https://www.youtube.com/watch?v=NXsUetUzXlg
[10] Method of Loci: https://en.wikipedia.org/wiki/Method_of_loci
[11] iPhone app iLoci by Don Hopkins @ Mobile Dev Camp: https://www.youtube.com/watch?v=03ddG3jWF98
With 7 items, there is no common English word or concept for all but one of the directions. But with 8 items, you benefit from the compass framework, opposite pairs, orthogonal axis, vertical, horizontal or diagonal patterns to use as a framework for arranging the items. And with 12 items, you benefit from the clock dial framework, as well as pairs, orthogonal and diagonal patterns, etc.
But 10 and 12 items are past the "seven, plus or minus two" sweet spot. [12] So I'd recommend sticking with 8 items at most, unless your items semantically fit into that number of directions, like a 10 decimal dial, the 12 hours of the day, 12 months of the year, 12 signs of the Zodiac, etc.
[12] The Magical Number Seven, Plus or Minus Two: https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus...
Kurtenbach and Buxton expected that the selection time would be monotonically increasing as you added more items, but were surprised to find that 8 items were faster than 7, and it kind of plateaued between 11 and 12.
If you have 7 items, it actually helps to add a dummy item to even the menu out! That explains the "8 Days a Week" menu in this Dr. Dobb's Journal article, which adds "Today" to the top of a 7 weekday menu, splitting Sunday and Sunday, where it's always easy to select. [13]
[13] The Design and Implementation of Pie Menus -- Dr. Dobb's Journal, Dec. 1991: http://www.donhopkins.com/drupal/node/98
In this MediaGraph demo [14], you can see two different approaches to pies working together.
1) Traditional hierarchical pop-up pie menus, supporting sub-menus, mouse ahead gestures, real time feedback, and pull-out items that use the distance as a parameter to the selection. (0:36 in video) Not editable by the user, but used to edit the other kind of pie.
2) Non-hierarchical free-form navigational pie maps, for arranging a map of songs connected with roads into a bidirectionally navigable graph, which enables users to easily hop around the network with quick flicking gestures (3:20 in video), and even create, edit and navigate their own pie maps via direct manipulation (4:07 in video). Editable and navigable by the user. Seamlessly integrated with panning and zooming gestures.
[14] MediaGraph Music Navigation with Pie Menus Prototype developed for Will Wright's Stupid Fun Club: https://www.youtube.com/watch?v=2KfeHNIXYUc
For more examples, here's a youtube playlist with some of my pie menu demos, in reverse-chronological order, which shows the evolution of designs over time. [15]
[15] YouTube Pie Menu Play List: https://www.youtube.com/playlist?list=PLX66BqHq0qTCWwzRxTJ-X...
Maybe it's because they don't lend themselves to scanning and sorting. It's easy to sort a list of items alphabetically, and it's easy to scan a list by moving my eye down across it, requiring nearly no horizontal eye movement to read the words. But a pie menu does not lend itself so naturally to alphabetical sorting, and scanning requires circular eye movement, which is less economical.
It also has seemed to me that pie menus don't lend themselves as well to memorizing where entries are, perhaps because of the sorting issue. I can remember that a word starts with A and is at the top of a list, but remembering where a word belongs on a compass or clock face doesn't seem as natural, unless the associated action is itself directional (up/down/left/right, north/south/east/west etc).
Here's an example which comes to mind. Team Fortress 2 has quick-access voice lines which can be played with two keypresses, one to open one of three menus, and another to select a line from the menu. They are displayed in a compact list on the left side of the screen.
A newer game coming out soon, Overwatch, also has quick-access voice lines, but they are accessed through a pie menu that covers the entire screen, and items are selected with the mouse.
When I haven't played TF2 for a while, I can be running around the map playing the game, hit one of the keys, and scan the list of commands to find the one I want so quickly that I don't even have to think about it; my eye can sweep across the list in one motion. I just open a couple of the menus and then hit the key, all while running around the map, turning my character with the mouse, etc.
In Overwatch, this doesn't work at all. If I don't remember where a command is on the pie, I have to move my eye in a circle the diameter of which is nearly the entire height of the screen. This takes significant time and effort compared to scanning a list. It also blocks the screen, and it prevents the mouse from being used to control the character.
So, for actions and menus that are primarily directional in nature, and limited in number, I can see pie menus being a natural choice. But for menus that are non-directional, and especially ones that don't lend themselves to memorization, pie menus seem objectively inferior to simple, vertical lists.
To handle those inevitable cases, the jQuery pie menus (and other implementations [1]) can support a hybrid mixture of directional pie items and traditional linear items, by simply adding multiple items to the same slice.
[1] Pie Menus on Python/GTK/Cairo for OLPC Sugar: http://www.donhopkins.com/drupal/node/128
Multiple items in the same slice are just laid out vertically (or horizontally, or even diagonally) in the slice direction, and they can track based on entering/exiting rectangles just like a linear menu, or by the distance (like a pull-out font size menu, etc) [2].
[2] Pull-out Font Pie Menu: https://youtu.be/R5k4gJK-aWw?t=2m10s
I've also tried various forms of spiral scrolling [3], paging [4], and weird springy things [5]. And also limiting the maximum number of pie items, so the first eight "most important" items are assigned to different directions, and subsequent items are laid out below or above the menu as linear items.
[3] Scrolling NeWS Pie Menus: https://youtu.be/kxkfqgAkgDc?t=2m34s
[4] Paging ActiveX Pie Menus: https://youtu.be/nnC8x9x3Xag?t=4m44s
[5] Weird Springy Thing: https://youtu.be/mOLS9I_tdKE?t=2m49s
Some people remember things spatially, and other people don't. The Greeks invented a spatial memorization technique called the Method of Loci. [6]
[6] Method of Loci: https://en.wikipedia.org/wiki/Method_of_loci