Magnetism

Example of the Magnetism UX pattern.

Problem

Pixels are small and hands are big—it’s hard to be precise with a mouse.

Solution

Help people precisely position things where they want by creating a larger “magnetic” boundary in relation to potential targets.

Context

You have scenarios that involve gestural positioning of objects on a screen.
Your target audience would want to precisely position items but would find it challenging and even frustrating to do without help.

Rationale

Magnetism functions primarily in terms of Fitt’s Law by invisibly increasing the size of the target. People often want to align things precisely, even to the pixel, or quickly position items on the edges of a view or in relation to each other. Doing this w/o help can be difficult and frustrating for all but the most adept users and near impossible when using touch-based input. Magnetism helps by inferring the target based on proximity and some predetermined parameters that suggest likely targets. In general, it makes people both feel and be more productive and applications smarter.

Implementation

If your solution involves manual positioning of objects on a view, see if you can enhance the experience with magnetism. Determine if there are either common target areas for objects, such as:

edges of a view or screen
edges of objects of similar types that might want to be positioned adjacent to each other
grid lines or guide lines that people can specify or, even better, inferred guide lines based on the positions of existing objects in the view (to make aligning the objects easier without explicitly specifying a guide)
edges of objects that show on demand when the pointer is near them

Also consider that sometimes you want the magnetism to function as well when moving objects away from their targets. For instance, if you have a toolbar stuck to the edge of a view, you may want to require more than a couple pixels of dragging to undock it from the edge so that people don’t accidentally undo alignments.

Examples

The primary example is from Microsoft Outlook 2007 which uses a form of magnetism to help people stick toolbars easily to the edges of the interface.

http://quince.infragistics.com/10yd