UI Patterns and Techniques

Smart Selection


From Photoshop

Use when:

The user is working with selectable objects of any kind -- text, pixels, geometric objects, even tree items or table cells. The selectable things are organized into coherent visual groups, like words or sentences in a text editor, or contiguous color areas in an image.

Normally, selection of one of these groups would require the user to click and drag the pointer with some precision.

Why:

Precision isn't everyone's strong suit. Once it becomes clear to the program that you are trying to select a particular group, it ought to help you out and do it for you. Some users will find it much faster and more convenient if a certain gesture did a groupwise selection. (Other users will find it possible!)

How:

Define a certain UI gesture to make a "smart selection" where the pointer currently is. The gesture might be:
  • a double-click or double-tap,
  • a single click while in a particular tool or mode, such as Photoshop's magic wand,
  • a single click while a key is held down,
  • merely the act of enlarging the selection out towards the boundaries of a group, as some text editors do (but see the warning below).
If there are larger groups containing the small groups, consider ways to enlarge the smart selection to the enclosing groups too -- like expanding the selection of a word to the selection of a sentence, then a whole paragraph.

But be careful. When done thoughtlessly, smart selections can be incredibly irritating. Imagine the user's aggravation when he tries to precisely select a chunk of text or pixels, but every time he comes close to a word or color boundary, the selection "snaps" out to where he didn't want it! This happens in some text editors, including Word.

Examples:


From Adobe's PDF viewer