Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

Did You Make Your Selection? – Part II

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

In my second article on selections I ask which objects can be selected on screens and take a look at controls where selections are involved. This time I cover those few, but important controls which are exclusively dedicated to selections. If appropriate, I will also discuss the peculiarities of Web pages and their controls.

See also my previous article on selections which covers the basics of selections, such as selection modes and how to "physically" select one or more objects with the mouse and the keyboard. 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.

 

Objects to be Selected

Let us start with asking how the objects, which we want to select or which we want to select part of, are presented. For brevity, I list only a few typical examples.

"Free Floating" Objects

Often objects are arbitrarily distributed on the screen or in a certain area of the screen, such as a window or a work space. You all know the document, application, or folders icons which may be placed anywhere within a window or on the desktop of Windows or Apple Macintosh computers (see figure 1 from Windows NT 4.0). Sometimes, the icons may snap to a fixed grid for easier and "cleaner" arrangement. Selected icons typically take on a "highlighted" state – they are ready for a manipulation by the user. Note that there may be different highlightings indicating different object states. You may also carry out one-step actions on icons, such as double clicks or drag-and-drop operations, without going through a "selected" state (see the previous article for details).

 Icons on the desktop and within a window; 
        the window is selected as well as the folder icon for "optical_illusions"

Figure 1: Icons on the desktop and within a window; the window is selected as well as the folder icon for "optical_illusions" (Windows NT 4.0)

Objects in drawing or presentation programs, such as rectangles, circles, lines, and text boxes may also be freely moved by the user. These are typically arranged in layers, not on the same level. You can move them within these layers without changing their actual screen location; for example, you can move them to the front, to the background or one layer backwards or forward.

Graphical objects show handles when selected (see figure 2), which allow for more elaborated operations, such as changing the size of an object. These actions are usually performed as direct manipulations; for example, changing the size is achieved by dragging a handle inwards or outwards.

Objects in a presentation program are layered; 
        when selected - here the text field is selected - they display handles 
        for manipulating them

Figure 2: Objects in a presentation program are layered; when selected – here the text field is selected – they display handles for manipulating them (e.g. moving, resizing)

Selecting layered objects can be hard at times, because the wanted object(s) may be obscured by other objects, or because the layers occupy the whole window, as is the case in Adobe Photoshop. Therefore, Photoshop offers a floating window as an aid for selecting layers. It also allows to right-click "objects" (there are no real objects in Photoshop); then users are offered a choice of layers to select from. Frankly, it took me years to discover this feature...

Note that "classical" Web pages (HTML pages) do not offer free floating objects, but only static elements, such as text (including hyperlinks), tables, graphics, and forms elements (see Figure 3). An exception to this is, for example, the Drag-and-Relate technology from TopTier, which is supplied with the mySAP.com Workplace. This technology allows users to drag, for example, a field label onto a hypertext link in the Launchpad in order to initiate a function or to open an application using this object. However, this is an add-on using proprietary technology, which is not generally available.

Nothing to drag on a Web page...

Figure 3: Nothing to drag on a Web page... (click image for larger version)

List and Tree Items within Controls

Operating systems shells like the Macintosh Finder or the Windows desktop offer tree-like or list-like presentations where you can drag a list or tree item onto the desktop or into the trash. However, we put this among the former case of objects which can be freely arranged on the screen, because the views can be easily exchanged between more objekt-like and more text-like presentations.

List and tree items within controls may be offered some freedom in their movements, but they cannot be moved as freely as the objects mentioned above. For example, items can typically not directly be moved out of a list, only between and within lists (see below for exceptions).

List items are usually listed from top to bottom; only few lists allow the direct dragging for rearranging items. Much more common are extra buttons which move items within one list or between two lists (see figures 4 and 5 below).

The most often used list is of a single-selection type. Multiple selection is seldom used in simple lists; it is more common in tables which in general offer more functionality.

Moving items within a list using buttons

Figure 4: Moving items within a list using buttons

Source:

Destination:


Figure 5
: Moving items between two lists using buttons (not functional)

Trees introduce additional complexity for selecting and manipulating objects, because in trees items can also be moved between levels – either via drag-and-drop or by using buttons as shown for the lists. As mentioned above, tree items typically cannot be moved out of a tree; but there are exceptions: for example, you can drag a tree item out of a Windows Explorer tree and place it on the desktop.

All items in a ThumbsPlus tree a tied to 
        the tree, that is, tree items cannot be moved out of the tree

Figure 6: All items in a ThumbsPlus tree a "tied" to the tree, that is, tree items cannot be moved out of the tree (ThumbsPlus 4.0 allows several tree operations, but not a removal from the tree)

There are also mixed cases where trees with few levels are presented in a "list-like" fashion, but with indentation and maybe variable text attributes, depending on the hierarchy levels. Here we also find cases with multiple selections. For example, an installation program may offer different installation options with sub-options (see figure 7).

A list-like tree with hierarchical multiple selection

Figure 7: A list-like tree with hierarchical multiple selection (Apple Macintosh; click image for larger version)

The HTML pages do not offer explicit list and tree controls. Either these have to be programmed in Java or Javascript, or they have to be simulated using text, radiobuttons, checkboxes, icons and HTML tables. For the implementation of single-selection lists see below.

Text

Text typically consists of paragraphs, these of words, and these of characters. Users may want to select any assortment from this, starting with the whole text, paragraphs or parts thereof to words or parts thereof and single characters.

Selected text

Figure 8: Selected text

Text can be part of a text document or text box, but actually it is nearly universally present on screens, as in in fields, tables, lists, labels, etc. There are "special" texts like hypertext which are "active" and cause some action when selected (see below).

Others

Bitmap programs allow to select parts of a bitmap; for example, image editing programs offer highly sophisticated tools for making selections. The selected parts can be handled in a special way and retouched. Other often needed operations include cropping, resizing, or even distorting a selection.

A selection with the lasso tool can be 
        given a different color, e.g. you can remove red eyes from a flash photo 
        - but why not let the eye glow a little bit blue?

Figure 9: A selection with the lasso tool can be given a different color, e.g. you can remove red eyes from a flash photo – but why not let the eye glow a little bit blue?

 

Controls For Selections

Radiobuttons and Checkboxes

These two controls serve the sole purpose of indicating selections:

  • radiobuttons indicate single selections,
  • checkboxes indicate multiple (0...n) selections.

Checkboxes act like toggles, that is, they can be turned on and off. Radiobuttons can only be turned on; they are turned off, when another radiobutton in the same group is turned on. This difference has the consequence that there may be only one checkbox, but there must be at least two radiobuttons. Otherwise you cannot deselect an option or item.

Both controls are typically used to select properties of objects or options, not to select objects themselves.

Arial                      Bold
Courier   Italic
Symbol   Underline
Times   Strikethrough


Figure 10: Radiobuttons (true HTML controls) for selecting alternative values of a property (left); checkboxes (true HTML controls) allow to set several properties or property values (right)

Dropdown Listboxes and Comboboxes

Both controls can be used to select property values or properties of objects, options, as well as objects themselves.

The list items have to belong to a predefined set (at least for one user interaction). In the case of the listbox this set is fixed, in the case of the combobox it may be expanded temporarily or permanently by the user. That is why the "real" name of the combobox is dropdown combination listbox, namely it is a combination of an entry field with a dropdown listbox.

Requisition #            Font size


Figure 11
: A dropdown listbox for selecting objects by requisition number (left) and another one for selecting property values – in this case these are font sizes

HTML pages offer only dropdown listboxes. The same is true for the SAP R/3 GUI, be it the SAPGUI for Windows or for HTML. However, see our Design Tidbit article "Dropdown Combonations" for a possible workaround for HTML pages using Javascript.

Single selection lists can be implemented as a variant of the dropdown listbox in HTML called "list", but are rarely used on HTML pages. In standard graphical user interfaces they are, however, widely used – especially in dialog boxes.

Font  

Figure 12: A single-selection list using a forms element

Links

Although the term "link" is often used as a synonym for "hypertext link", links are by no way restricted to text. Parts of graphics, so called image maps offer the same functionality. Sometimes, image maps even simulate hypertext links, because graphical text offers far more design options than usual text.

Top | Listboxes and Comboboxes | Links

Figure13: A short text-based link list (the links move within this page)

A "cool" link list... Irrespective 
        of whether you really regard this as a "cool" effect or not 
        - the difference between an image map using graphic text and pure text 
        links as in figure 13 should be obvious Top Listboxes Links

Figure 14: A "cool" link list... Irrespective of whether you really regard this as a "cool" effect or not – the difference between an image map using graphic text and pure text links as in figure 13 should be obvious (the links move within this page)

Links are "shortcuts" because they combine the selection of an object and the initiation of a related action – the movement to another HTML page or page section – in one step (see previous article).

 

Conclusions

This article ended up much longer than I initially expected – as did its predecessor. This clearly illustrates that selections are a universal issue in graphical user interfaces. In the third article of this series on selections I cover further controls; a fourth and final article will deal with function selection and the complexities of toolbars.

 

top top