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
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
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
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:
- Learnability/Memorability: Due in part to its universal utility and in part to inheritance or design convergence from the original Mac OS, the action of selecting something is very similar across multiple user interfaces. The biggest differences across platforms are in the types of peripheral input/output devices (i.e. mouse, trackball, touchpad, or touch screen) that are available to the user. Because there is a natural mapping between the action and the expected results, a first-time user should be able to intuit how to select an item in any particular system with any particular device. And once a user learns to select something with certain peripherals, it should not be difficult to perform the same task on different platforms, even with a novel input. All of this also lends itself to memorability: if the user has not performed such an action recently, this information should be easily recalled.
- Efficiency/Errors: Selecting is a comparatively simple task, and therefore should be performed seamlessly and flawlessly. It is a necessary prerequisite for many functions or commands such as copying or moving files, and the more efficiently a user can perform the supporting task of selection, the more efficiently a user can continue with the desired high-level task. Errors must be minimized, as errors in selection could lead to such potentially dire consequences as deleting files or overwriting data (though modern computer systems minimize the impact of such errors system-wide by making most of them reversible). The additional selection functionality afforded by the keyboard through the Shift and Ctrl/Command keys give the user appreciably more power to perform tasks efficiently than selecting each of many individual items one at a time. With the selected items or text highlighted in a noticeable, contrasting color after selection, the difference between selected and unselected items is visible to the user, thus reducing errors.
- Satisfaction: While this metric generally does not apply, there are narrow circumstances in which it should be discussed. As a more utilitarian action, users typically do not derive direct satisfaction from selecting items in the user interface - although there could be limited satisfaction from animated or auditory feedback from the action in certain scenarios. There is a definite possibility, however, for negative satisfaction in situations in which the user becomes annoyed or upset if the mechanism for selecting items in the system is not learnable or efficient, or is unduly error-prone.
Key Characteristics What do all great selection frameworks have?
There are a few elements that should go into any good selecting process:
- First, in order to select a single target, the design should require the user to perform one action (click or tap).
- Second, in order to select multiple targets, the design should have a learnable and memorable system in place that builds on the natural mapping of the single select. For example, if the user can click to select one target, they should be able to click and drag to select multiple items.
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:
- reduces the likelhiood of error (and therefore also increases efficiency) due to arbitrary or unnatural mappings
- improves learnability for inexperienced users who can draw upon past experience when they encounter novel, but similar, situations
- increases memorability, for much the same reasons.
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.
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.
Mac OS X: Yosemite
File Selection
Icon Selection
Menu Selection
Text Selection
- 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.
After releasing hold, an option for Selecting and other options appear, as seen in the image below.
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
When there is no more action, a dialog menu pops up asking for what action the user would like to do next.
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