Selecting

Contributors

A common, high-level task in which the user is able to group certain items such as text, images, or other components on the screen - by clicking on them, touching them, or highlighting them with keyboard commands - and signal to the machine what elements on which the user wishes to focus.

Typical Appearance

  • Drop Down Menu Select
  • Folder Select
  • Menu Select
  • Text Select

Typical Behavior

Since selection of text, web elements, files, images, etc. is a relatively common task, there is a consistent behavior associated with it across multiple platforms. When a user selects an item, it is usually highlighted in a different color; most major platforms and operating systems as of 2016 utilize a blue-on-white color scheme by default, though some allow users to configure personalized color schemes or install themes that alter many such aesthetic features.

Many types of items and elements may be selected in different computer environments. With text, for example, the cursor turns into a specialized text cursor (the appearance of which depends upon both the platform and software, but typically resembles a capital Roman letter "I") as the mouse hovers over it. When the user left-clicks and drags the mouse over the desired text to select, the choosen characters highlight in a different color. On mobile platforms, a long press will usually highlight the entire selected word by default, with "handle" tooltips appearing at each end of the selection for further adjustment.

For items such as folders and files or apps, the user will typically see a dim highlight encapsulating items as they mouse or hover over them. Details about the file or folder (e.g. size, file type, and other relevant metadata) frequently appear as a tooltip as the user hovers over an item on many desktop platforms. If the user chooses to select an item, clicking on or touching it causes the dim highlight to change to a more opaque one, signifying the selection as a focus of attention. In most desktop operating systems, it is also possible to click and drag the mouse across a folder area to highlight multiple files or folders, but this is a relatively less common means of multiple selection.

The more common methods of multiple selecting are paired with the Shift and Ctrl/Command (⌘) keys on a computer keyboard. When using the Shift key while selecting, the user can click first on the point to begin the selection, and then use a second click to signify where to end the selection. When using the Ctrl or Command key while selecting, the user can click on separate items to group them as a single selection.

Events

Text selection : When selecting text, the major low-level actions are clicking, dragging, and letting go.

  • Click: The click signifies the beginning of the selection. As the user is hovering over the text, the mouse cursor will then turn into a text cursor. This is usually a visible sign that a user is able to make a text selection within the area the cursor is in. After the user has made their selection, clicking again without holding down either the Ctrl/Command or Shift keys will unselect that particular item.
  • Dragging: From the starting point (the intial click, in this case), the user drags along the text without releasing the mouse button to the endpoint of the text they would like to select. Whatever text is covered during this dragging operation is selected.
  • Letting go: When the user reaches the end of their selection, letting go of the mouse button signifies that that is the end of what they wish to select, and the text that they selected is highlighted - typically in blue, but colors vary by platform and by specific software application or color palette. It is at this point that the user can do whatever action they wish to perform with the text: copying it to the clipboard, pasting over it, using it as a search term in Google, etc.

File selection: File selecting is very similar to the text selection except the clicking action itself is emphasized.

  • Click: When the user clicks on the item or icon that they would like to select, that item is highlighted in much the same fashion as text to signify that it has been selected. On most computers, more items may be selected by holding down the Shift or Ctrl/Command keys. When a file is selected, clicking on a space or item within view other than another item of the same type will cause the item to become deselected.

State Diagram

Responsive image

Component in Action

Checkbox Selection

List selection. Hold Shift or Ctrl/Command (⌘) while clicking to select multiple options.

Text-Selection: Click and drag the text to see it highlight.

YouTube demonstrations explaining how to select multiple files and folders:

Variants How it varies across domains and modes

Though the behavior of selection is very similar in multiple settings, there are different implementations depending on the system state and platform. In a typical computer interface, for example, selecting is done primarily by means of clicking and dragging, whereas, for touch devices, selecting is done primarily with taps, holds, and drags. Depending upon user preferences, the cosmetic appearance of selection may also be altered, to accomodate different colors and effects.

There are also variations in what is selectable and how to select it depending upon the context and system state. There are three primary variations.

Text Selecting

When performing a text selection, the user goes through three actions:

1.) Clicking on-screen where the user would like to begin the selection.

2.) Holding the click and dragging the cursor so the desired text is highlighted.

3.) Releasing the click and finish the selecting.

Folder/File Selecting

When selecting multiple folders/files, a user can use the same methodology as text selection. However, when selecting a single file or folder a user just needs to follow two steps.

1.) Choosing what folder/file to select and hover over it. Notice there a dim highlight surrounds the folder/file.

2.) Click on the desired folder/file. Notice how the dim highlight turned more opaque after clicking.

Checkbox Selecting

When performing a selection on checkboxes, the user goes through two steps.

1.) Choosing which checkbox to select and hover over it. Notice there a dim blue highlight surrounds checkbox.

2.) Click on the desired checkbox. Notice a check has appeared in the box.

Priority Metrics Selecting and its Usability Metrics

Selecting is a basic and universal task a user can perform on almost all user interfaces today: users frequently need to be able to select objects or text in order to perform many important functions, and the ability to move quickly and seamlessly on to the next action is important for usability. Because of this, learnability, memorability, and errors are very important metrics:

Key Characteristics What do all great selection frameworks have?

There are a few elements that should go into any good selecting process:

Feedback & Visibility

One of the most important principles of interaction design that designers of a selection mechanism must follow is that of providing the user with feedback. Users must never doubt whether they did positively select what they wanted to select, and only what they wanted to select; when attempting the selection action, the user should get immediate and persistent visible and/or audible feedback as to what he or she is selecting. Similarly, what actions are possible should be immediately visible to the user; a user should readily be able to tell if what they are tapping or clicking is indeed selectable. That way, the user's mental model of what items are selectable will be consistent with the designer's mental model.

Prevent Errors

Don Norman urges designers to plan for the possibility of error, and to minimize the cost thereof to the user. Users should be forgiven if they inadvertently select the wrong items, or omit those they wished to select. These actions should also be readily reversible: that is, users should also be able to easily deselect objects that they no longer wish to be selected, or add additional items to the overall selection.

Consistency

The low-level actions that are required for selecting a certain type of object should be consistent in every possible context, as consistent behavior:

Inconsistent behavior risks confusing and frustrating the user, as they are incapable of formulating an adequate mental model to explain the discrepant behavior.

Shortcuts

Though there is an issue of unnatural mapping for the inexperienced user, shortcuts and commands that allow for more advanced functionality can significantly improve the efficiency of selecting for knowledgeable users. Shortcuts should be added to allow these more experienced users to do more with the system, such as by selecting a large amount of objects at once. The "Ctrl + A" keyboard command is a common shortcut used to "select all" of the items or content in a given folder, page, document, etc.

Platform-Specific Instances

Windows 7

In Windows 7, selecting is typically a very simple task. It supports the three variants of selecting that are detailed above. The user can select any folder structure or type of file in the file explorer, and text in any text editor or web browser.

The default color in Windows 7 to signify that something has been selected is blue, but on the desktop, selecting a folder or file highlights it with a clear outline. These two colors are specific to operating system-level tasks, however: applications running in Windows could and do use different colors to signify a selection.

Windows has long supported the additional functions of Shift and Ctrl to allow selection of multiple targets, where Shift selects from a start to an end, while Ctrl allows multiple selections of single targets. The Typical Appearance section above shows a few specific examples of selection in Windows 7.

Legacy versions of Windows

Vista, XP, 2000, 98/95, 3.1 ...

The overall behavior (if not the look and feel) of current versions of Windows owes much to its forebears. As such, selection actions and even much of the aesthetic element aren't appreciably different today than they were in many previous versions of Windows.

Both the function and the look and feel of selection in Windows 7 is inherited virtually unchanged from Vista, which was in-turn inherited mostly unchanged from XP, and so on. The same actions described in the section on Windows 7 are possible in the same places, with the same blue highlighted feedback (although the specific shade used is a darker ocean blue in versions prior to Vista: see example images), in versions of Windows going back at least to 98/95.

Other differences in the graphical user interface may alter the look and feel in subtle ways (for example, as graphics processing at the level of the operating system in the 1990s didn't allow for much translucency, the highlighting effect is noticeably more opaque: see examples), but functionality is effectively the same. Shift and Ctrl as modifiers for multiple targets are both supported for more powerful functionality as far back as Windows 3.1.

File folder selection in Windows XP Desktop selection in Windows 95

Android ~ 4.4.4 ~ Kitkat

Typically in Android, selecting is different than desktop operating systems like Windows and OS X. It does support the three variants that are explained above, however, since there is no mouse, the user has to rely on touch.

To select a single target, the user would usually have to press and hold ("long press") until more a context menu pops up with more options. Selecting multiple targets is largely the same process, with the user simply selecting more items after the first. The implementation of the selection mechanism on Android 4.4.4 makes extensive use of feedback: the user knows when something is selected because the view will change as more options and menus pop up in response to the long press.

  • File Selection for Android
  • Picture Selection for Android
  • Text Field Selection Android
  • Text Selection Android

Mac OS X: Yosemite

File Selection

file selection in window

Icon Selection

icon selection in window

Menu Selection

menu selection in window

Text Selection

text selection in window
  • Selecting on a Mac with OS X is very similar to the general overview described as above.
  • Users can change the highlight color in System Preferences > General Settings
  • Apple's Human Interface Guidelines for OS X also highlight such general key characteristics as:
    • Direct Manipulation: As the user selects text, it is always visible, even while dragging and dropping.
    • User Control: The user is the one intiating the actions.
    • Feedback and Communication

iOS iPhone 4S

For iOS, selecting is a little tricker. Unlike on a laptop, where a user is able to click and drag, the user must use combinations of different taps, holds, and drags in order to select different items. Another key difference with iOS is that the only selectable items are text and images. Unlike on computers, there are no selectable files, but rather apps that one taps to open.

Appearance

User long presses on text, and a magnifying glass-like object appears showing where the text selector is.

text selection in notes image 1

After releasing hold, an option for Selecting and other options appear, as seen in the image below.

text selection in notes image 2

After tapping on select, the user is able to tap and drag either ends of the selection tooltips (the blue vertical bars) and move them around to make their selection

text selection in notes image 3

When there is no more action, a dialog menu pops up asking for what action the user would like to do next.

text selection in notes image 4

Though the actions are different, the events and priority metrics are the same.

Also, as with the Human Interface Guidelines for OS X, the iOS guidelines highlight similar key characteristics:

  • Feedback: the use of slight highlights whenever a user taps or uses gestures
  • Direct Manipulation
  • User Control

Resources

Apple OS X Human Interface Guidelines

Apple iOS Human Interface Guidelines