The Joy of Flex

Monday 4 pm. Today what we have are “point and grunt” interfaces. Right now the state of affairs is you point at something and you do something sort of like grunting. What about other alternative user gestures? A gesture is movement of a part of the body to express meaning. These alternative user gestures should always be alternatives, not the only ways to do things. Alternatives make for happy power users.

How do you talk to applications that you use? How do you express intent to your computer or its applications? Clicking things. Use menus. Drag and drop. All these gestures work well, don’t replace them, but add to them. You click buttons, tabs, links, images. Menus are good for arranging a lot of options out of the way of the view. In Flex applications, menus don’t get used that much — tabs are often used instead. Drag and drop is a great way to express relationships between things.

Context menus: like right-click menus, also radial menus. Keyboard shortcuts: Ctrl-S, Command-Shift-Z. Command line interfaces, e.g., the Unix command line. Mouse gestures: drag right to left to go back, drag left to right to go forward, drag up across a link to open in a new window, cross a bunch of links to open them all in tabs.

Expressiveness. Mouse gestures and a command line interface are more expressive; menus and keyboard shortcuts are less expressive.

Human-Computer Interface. Fitts’ Law predicts how much time it takes to point at something. Paul Fitts, 1954.

Some implications. Make buttons bigger. Hack the target’s size. Crossing creates an effective large size since once you cross you can keep going. Edges are targets of infinite size. Good examples of edges are the Mac menu bar at the top of the screen, and the Dock at the bottom of the screen. Hot corners are another good example.

You could also make buttons closer to the pointer, but then you get UI like 20 toolbars on the screen at once. Ouch!

Why do we care about time? While learning an app, time-to-task is a small problem. It’s ok because the user is exploring anyway. But as tasks become instinctive, the time-to-task must be short. So that’s why we get accelerator keys for common tasks like Save.

Menus: first you have to find the thing, then how deep is it in the menu? Very high Fitts. Acott-Zhai Steering Law (2D Fitts) describes time to find things in two dimensions.

Dragging and dropping: where is the thing I need to drag, where is the drag target? High Fitts, and added time due to muscle strain.

How do the “alternatives” save time? Context menus come up where the mouse is already. A radial menu is even better because all the options are equidistant from the mouse pointer position. Keyboard shortcuts are fast because there is no mouse travel, small distance to target (hands to keyboard, fingers to keys). Common shortcuts are keys close to the modifier key (e.g., Ctrl-S, Ctrl-Z). Command lines save time because there is no mouse travel at all, very expressive, convey lots of information in a small space. Mouse gestures have travel, but less wasted travel. Could be targeted or not, can be as expressive as needed.

Alternative gestures come down to training. For example, showing keyboard short cuts in the menu bar. Commensurate Effort = Cost vs. Reward. In other words, is the cost of learning the alternative gesture worth the time saved? Power users are more likely to take the time and effort to learn the alternatives.

Incorporate alternative gestures into your Flex Apps. Example of using Cairngorm’s command pattern and attaching gestures to commands. See labs.effectiveui.com/commando. Commando allows you to register a verb to a Cairngorm Command, register a set of options to the command, and parses a line of text into a verb and a set of options. We could do something like this in Buzzword pretty easily by attaching a command line interface to our CmdFactory class. (In fact it’s not that different from the command recording mechanism.)

Technorati Tags: 360Flex