• Home & Services
• Resources
• Editions
• Community
• Goodies

• Design Tidbits
• Editorials
• Stories
• UI Design Blinks
• Books & People
• UI Events
• Forums

Design Tidbits

 Tidbits Overview

Tools for Design and Visualization

• Eurovision Song Contest 2011 and NodeXL: A Perfect Match – Part I
• Eurovision Song Contest 2011 and NodeXL: A Perfect Match – Part II
• My Design Tools – Part I
• My Design Tools – Part II
• Using Prototypes
• UI Toolbox: Capturing and Editing Screenshots – Part I
• UI Toolbox: Capturing and Editing Screenshots – Part II

Simplification

• What Does "Simple" Mean?
• Anti-Simplification – How to Make Life Harder for Users
• Reducing Complexity
• Error Prevention Comes First
• Don't Let Your Interface Lie
• Don't Let Users Suffer from System Weaknesses

Interaction Design

• Bridging the Gap – Part I
• Bridging the Gap – Part II
• Bridging the Gap – Part III
• Did You Make Your Selection? – Part I
• Did You Make Your Selection? – Part II
• Did You Make Your Selection? – Part III
• Did You Make Your Selection? – Part IV
• The Software Works The Way I Think: Beyond Point and Click
• A Layman's View on Interaction Styles – Part I
• A Layman's View on Interaction Styles – Part II
• Selecting Objects By Attributes – Part I
• Selecting Objects By Attributes – Part II

Screen Design

• The Art of Hiding – Part I
• The Art of Hiding – Part II
• Screen Layout – Part I: General Considerations
• Screen Layout – Part II: Layout Hierarchy
• Screen Layout – Part III: Examples

Hierarchies

• Hierarchies - Categories vs. Vectors
• Fighting (with) Hierarchies –
  Part I: Basics
• Fighting (with) Hierarchies –
  Part II: Presentation
• Appendix: Fighting (with) Hierarchies – Presentation Techniques I
• Appendix: Fighting (with) Hierarchies – Presentation Techniques II

Visual Design

• Some Color Mysteries
• Some Mysteries of Colored Text
• Animation – The Chili Pepper of the Web
• Appendix: Definitions of the Most Common Types of Animation on the Web

Design Process

• The Construction Cycle – Another Way to "Organize" the Design Process
• User Feedback
• What Does User Integration Mean for Software Design?
• Mapping a Conceptual Interface to a Physical Interface

Web, Web Applications, Web Design

• The Web – A Short Introduction
• An Introduction to Designing User Interface Controls at SAP
• From Dropdown Listboxes to Comboboxes
• List Box Tweaks (Part II)
• Concept Statements and Website Messages – Part I
• Concept Statements and Website Messages – Part II

Performance

• Waiting at the Computer: Busy Indicators and System Feedback – Part 1
• Waiting at the Computer: Busy Indicators and System Feedback – Part 2
• Waiting at the Computer: Busy Indicators and System Feedback – Part 3
• Human Performance at the Computer – Part 1: Introduction
• Human Performance at the Computer – Part 2: Making Applications More Responsive
• Human Performance at the Computer – Part 3: Perceived Performance
• Human Performance at the Computer – Part 4: On the Way to Performance-Oriented UI Guidelines
• Addressing a "Design Issue:" Start-Up Time
• Examples of Poor Responsiveness

Miscellany

• Adding Value to Your Interface by Using Simple Math and Matching
• Refreshing Three HCI Laws: Fitts' Law, Hick's Law, and the Power Law of Practice
• How Much Documentation Do Applications Need? – A Simple Example
• Human-Computer Dialog: How Good Does "Good Enough" Need to Be to Appear "Perfect"?
• Narrative User Interfaces
• Golden Rules for Bad User Interfaces
• Universal Usability
• User Interface Controls and Interaction Techniques of Horror
• Designing for a Workforce That Acts More Sustainably – Part 1: Action Fields for Designers
• Designing ... Sustainably – Part 2: Action Items for Designers
• Designing ... Sustainably – Part 3: Designing for Remote Collaboration and Communication
• Designing ... Sustainably – Part 4: Using Ambient Media to Support Awareness of Remote Colleagues
• Designing ... Sustainably – Part 5: Using Persuasive Design/Technology
• Designing ... Sustainably – Part 6: Replacing Physical Objects with Virtual (Digital) Ones
• Using Ambient Media to Support Awareness of Remote Colleagues – Part 1: Examples and Proposals new
• Using Ambient ... Remote Colleagues – Part 2: Ideas new
• A Proposal for Playful Interactive Persuasion: The "Employees' Commute Calculator" (ECC) – Part 1: The Easy ECC (E2C2) new
• A Proposal ... (ECC) – Part 2: Ideas for a More Advanced Version new

 

 

Did You Make Your Selection? – Part I

By Gerd Waloszek, SAP AG, SAP User Experience – December 1, 2000

With the advent of graphical user interfaces, making selections has become one of the most frequent user actions. Often we make selections unconsciously, not even knowing that we are selecting things – so commonplace are they. But if we take a closer look at selections we soon realize that they are not such a simple thing: selections can be complicated, many users don't even know that selection rules and commands exist.

In this article I discuss the basics of selections, such as selection modes and how screen objects are selected with the mouse and keyboard. In the next article, I take a look at selectable objects, controls exclusively dedicated to selections, and other controls with selection options. Both articles also touch on some of the implications introduced by Web pages. In a third article of this series I deal with more complex controls and their selection "specialties". The fourth and final article will cover function selection and toolbars.

 

Selection Basics

User Goals – Why Do Users Make Selections?

Basically, users make selections for the following reasons:

1. To select one or more objects for further processing
   Example: Click a document icon in order to revise it with an application
2. To select one or more objects for inclusion in a certain object set
   Example: Select mails from colleagues to move them to a special folder
3. To set properties or attributes of objects
   Example: Set the font attributes for a text phrase
4. Users also select functions, typically after they have already selected one or more objects
   Example: Select a file and then choose Open from the menu to edit the file

Selection Modes

Selection modes define how many and which objects can be selected:

1. Single Selection: Users can only select one single object or set only one attribute
   Example: Users can only select one font size for a text phrase
2. Multiple Selection: Users can select several objects (including none)
   Example: Users can set text attributes like bold, italic, etc. or even none (none means that they select the default)

For multiple selections there are also two variants:

1. Contiguous Selection:
   The selected objects have to be "spatially connected," that is, there can't be any deselected objects between selected objects
2. Noncontiguous Selection:
   Objects in arbitrary locations can be selected (however, they may, for example, have to be in the same active window)

 

Figure 1: Contiguous selection (above) versus noncontiguous selection (below) for icons

Expressing Variety

With these different user goals, modes and variants for making selections, there is obviously some need for expressing this variety, that is, for telling the computer what exactly is to be selected and how.

Basically, graphical user interfaces offer two approaches to this problem:

• techniques for mouse and keyboard users to "express" the type of selection
• controls which allow selections or are even specifically designed for this purpose

We will address both of these issues – the physical actions below, and the controls in the next article.

Interfaces based on command languages, on the other hand, require users to specify commands with parameters and maybe options obeying a certain syntax.

Figure 2: A typical DOS command for copying a file

Indicating the Selection

Typically, selected objects are indicated through some highlighting mechanism. For example, icons have a certain "highlighted" state, whereas text is displayed in inverted color on a colored background.

In Windows there is an additional selection indicator called the focus, which is indicated by a dotted frame. As the focus is connected to selecting objects with the keyboard, we will discuss it in that section.

 

Figure 3: Highlighted icons (left) and highlighted text (right) indicate the selection

 

Making the "Physical" Selection

Making Basic Selections Using the Mouse

The simplest way to select an object with the mouse is to click it. To deselect it, you click another object or the background. If you want to select more than one object, you can drag the mouse across the objects using a marquee, or use modifier keys while clicking objects.

Modifying and Constraining Mouse Selections

Modifier keys allow you to affect the selection mode for multiple selections: the Shift key is for making contiguous multiple selections, while the Control key is for noncontiguous ones.

If selection is combined with an action in a shortcut, as is the case with drag-and-drop operations, there are even more options for modifier keys to change the operation or to constrain it. See Drag-and-Drop as a Shortcut for examples.

These are the basics of selecting objects with the mouse.

Making Selections Using the Keyboard

Making selections with the keyboard can be much more complicated, as it is less direct than clicking with the mouse. Many users, especially beginners and casual users, do not know how to use the keyboard to make selections. Power users, however, profit very much from these so-called "keyboard shortcuts."

The most important selection mechanisms are:

• Accelerator Keys: In Windows menu options, buttons and other screen elements with text labels may be selected by pressing the Alt key and simultaneously a letter or number. This letter is underlined in the name of the item. This requires, of course, the so-called accelerator keys to be unique for the respective element group (e.g. in a specific pulldown menu – not for all pulldown menus).
• Command Keys: Command keys are reserved for selecting functions or options which reside in menus; they have to be unique within an application. They are redundant to accelerator keys in the case of functions, but typically better known and more often used. Command keys require the Control (or Command) key to be pressed and simultaneously some other key or key combination.
• Key Selection: In certain usage contexts objects may be selected by simply pressing a key. If, for example, you press the letter K the first file starting with the letter K is selected (otherwise the item closest to K in the alphabet is selected ). Sometimes only the first letter in a text label is used, but often the interface allows users to specify more letters. This is much better from an interaction point of view. Key selection can be used for example in folders and in dropdown lists. The arrow keys can also be used to move the selection pointer.
• Moving the Focus and Pressing Additional Keys: This technique is discussed in the following paragraphs.

The Focus

Different computer platforms differ in the degree to which they allow keyboard selections. While Windows can be used with the keyboard alone, which is important for blind and visually impaired users, the Apple Macintosh cannot. To make keyboard selection possible and more transparent, Windows offers a concept known as the (keyboard) focus. The focus indicates where the next selection (or shortcut action) will take place, if the keyboard is used; it is indicated by a dotted frame around the object.

Only one screen object can have the focus. Note that the focus can be moved independently from the selection by, for example, pressing Ctrl and an arrow key. If you then press the Space bar, the selection jumps to the object with the focus. Pressing Return opens the respective document or folder.

Figure 4: (1) No selection, but a focus, (2) the object with the focus has been selected by pressing the Space bar, (3) the focus has been moved to the next icon by using the Ctrl key and an arrow key

Many users may never have realized that there is a difference between the focus and a selection (or that there is a focus at all), because a newly selected object also gets the focus. This is the case with multiple selection, too, where only one object has the focus – typically the item most recently added to the selection.

Note that there is no such concept on the Apple Macintosh.

The Tab Chain

Pressing the Tab key allows users to move through the "selectable" elements of a screen using the keyboard. Note, that the tab chain does not move the actual selection, only the focus.

The tab chain, that is, the exact sequence in which the focus is being moved, can be defined by the programmer. It is important to ensure a tab chain which makes sense to the user and to the task at hand – a "random" tab chain can be very disturbing. Note, however, that this is not possible for HTML pages – the browser determines the tab chain automatically.

Windows has rather sophisticated rules for moving the focus with the keyboard, e.g. for moving it forward, backwards, to the next group etc. Often the Tab key moves the focus only between elements of different groups – then e.g. the arrow keys move the focus between the items within a group. As the Apple Macintosh does not use the focus concept, there are only the basic commands for simple forward/backward movements between entry fields.

The focus concept does not always make a form more usable for a given task, as the following example demonstrates. Look at the HTML table below: it consists of entry fields and some icons. For fast entry, the Tab key helps users to quickly move through the entry fields.

Status Item # Quantity Unit Description Note Actions pieces kg liter pack Text with link Text pieces kg liter pack Text with link Text pieces kg liter pack Text with link Text pieces kg liter pack Text with link Text pieces kg liter pack Text with link Text pieces kg liter pack Text with link Text

Note: The icons to the left do not have a link, the ones to the right do.

Depending on the platform and browser you use, you may get a different behavior: on the Apple Macintosh the tab chain only moves through the input fields (Netscape Navigator 4.7 and lower; Microsoft Internet Explorer 4.5 and lower), in Windows every "clickable" item is passed. The first behavior is useful if you want to enter data quickly, the second is necessary for interaction using solely the keyboard. But wait, things are changing fast – the new Macintosh browsers IE5 and Netscape 6 show a "Windows-like" behavior.

Combinations

Of course mouse selections and keyboard selections can be combined in many cases or simply used alternatively during one interaction. For example, a file can be selected by clicking it with the mouse and then opened by pressing the Ctrl-S command keys.

 

The Fast Way – Combining Object and Function Selection

Double Clicks and "Automatic Single Clicks"

Last but not least, we come to the issue of combining object and function selection. These shortcuts, as the name implies, help users to work more quickly. The best know shortcut is the double click, which is typically used to select and open an object (or start an application). However, double clicking is controversial, because many users have difficulties with double-clicking. Therefore, there have been several attempts to replace double clicking with an "automatic single click" – here are a few of them:

• buttons
• hyperlinks
• the "Web interface" in Windows
• the Apple Macintosh clickstarter

These days the hyperlink is surely one of the most often used shortcuts for combining selection with actions – in this case it is the movement to a location which is related to the link phrase.

Replacing single clicks with double clicks introduces new problems for many users, especially casual and untrained ones (to these users it is not evident when to single-click and when to double-click a screen object). I've seen lots of users double-clicking buttons and hyperlinks. I myself often double-click icons in the Macintosh clickstarter, because I am used to double-click icons in the Macintosh Finder – old habits die hard.

So, relieving users from a "mechanical" problem may produce a consistency problem. Sometimes this does not have consequences, which might be one of the reasons why many users even do not recognize that they have clicked the wrong way. In other cases it does have consequences, especially if systems are reacting slowly. This is especially true for the Web, where the user may cancel and restart a page request by double-clicking a hyperlink.

Drag-and-Drop as a Shortcut

A second technique for accelerating work with the mouse while keeping the user interface intuitive is by using drag-and-drop: while pressing down on the mouse button, the users drags a selected object or object set to some other screen location and then releases the mouse button. Depending on the object or target location a certain action is taken. This action can be altered by using the right mouse button, which opens a context menu for selecting the action, or by pressing a modifier key; in the latter case, the modifier key determines the action. Modifier keys may also constrain the action in certain contexts. For example, pressing the Shift key restricts dragging to movements in straight lines and at certain angles. Some programs offer a multitude of such "shortcuts" which are obviously suited to professional users who use the program on a daily basis.

While drag-and-drop operations look simple and intuitive at first glance, they have inherent problems. Sometimes they turn out to be cumbersome, especially if the target location is invisible at first. Moreover, there are no indications in the interface, which objects are draggable and which are possible target locations – you have to know or learn this by experience. On the other hand, such information would clutter the interface, if it were permanently visible.

 

Final Word

I will continue the topic "selections" in a follow-up article. There I will take a look at the different objects you can select on a screen and discuss more selection controls.

 

top