SAP DESIGN GUILD

Did You Make Your Selection? – Part III

By Gerd Waloszek, SAP AG, Product Design Center – 01/26/2001

In my third article on selections I continue with the round trip through the control zoo. This time I cover the more complex controls which allow selections to be made. If appropriate, I will discuss again the peculiarities of Web pages and their controls.

See also my previous articles on selections. In my first article I cover the basics of selections, such as selection modes and how to physically select one or more objects with the mouse and the keyboard. In my second article I ask which objects can be selected on screens, and take a look at some of the controls where selections are involved, namely those that are exclusively dedicated to selections. In the fourth and final article I'm covering function selection and toolbars.

 

Lists

Lists are linear orderings of items, which may be arranged vertically, horizontally, or in a grid (multiple-column lists). For selecting items in a list, the classical options or selection modes are:

• Single-selection lists including dropdown listboxes
• Multiple-selection list

(This is just a simple bullet list...)

Single-Selection Lists

A classical single-selection list displays several items at once (see Figure 1). If there are more options than can be displayed, a vertical scroll bar appears (see Figure 3 below).

Figure 1: A "classical" single-selection listbox

Dropdown Listboxes

I have already mentioned dropdown listboxes in my second article on selections. They are a combination of a field with a listbox: they display only one item, but allow users to inspect all available items if needed (see Figure 2)

Figure 2: Dropdown listboxes are single selection lists, which display only one item on the screen, namely the current selection; to see all options the user clicks the small triangle to the right.

When Use Which?

Figure 3: Listbox and dropdown listbox used together on a screen

As Figure 3 shows, it seems to be fairly arbitrary, when ordinary listboxes should be used, and when dropdown listboxes are the better choice. The following tables provides some criteria for selecting the right list type:

Element	Use for/when...	Do not Use for/when...
Listbox	Smaller item numbers (use tables for large item numbers) Space allows to display at least 3 rows Tasks which require that alternatives are immediately visible Situations where users need to consider their choices (critical or dangerous choices)	Tight space requirements Generally fewer items are available than visible rows (which would waste space) Large item numbers To permanently display settings or options that are rarely changed A set of options should be presented in readable form
Dropdown Listbox	Few items Tight space requirements Tasks where the current option is most important, not the whole set of options A set of options should be presented in readable form	Item numbers above 16-20 People with little or no mousing abilities Critical selections or actions (where errors are costly or dangerous)

Table 1: Criteria for choosing lists or dropdown lists

 

Multiple-Selection Lists

Multiple-selection listboxes often use checkboxes to indicate the selection (see figure 4).

Figure 4: A multiple-selection listbox with additional single selection (Windows ME)

However, things might get even more complicated, as Figure 4 shows; here, we have:

• A multiple-selection via checkboxes to indicate that a component has been chosen for inclusion in an installation, and there is also
• A single-selection for editing the component, that is, for setting which subcomponents are to be used.

Multiple-selection lists can be hierarchical. Such lists are used, for example, in installation programs on the Apple Macintosh (see Figure 5; in Windows ME additional dialogs with one-level lists pop up instead).

Figure 5: A hierarchical multiple-selection list as used in an installation program on the Apple Macintosh

 

Tables

Tables are the more advanced version of lists. While lists are typically reserved for item sets with one column or row (the ABAP lists are a different thing, though), tables can have more columns and often have inbuilt buttons for selecting rows and columns (see Figure 6), and toolbars for additional functionality.

Tables offer much more selection options than lists: users may select one or more rows, columns, or cells (single items). The selections may be contiguous or even non-contiguous. Cells and rows can often be selected via special table buttons. For selecting single cells, the cursor position may be used. Noncontiguous selections are hard to implement; modifier keys can be used here as are used for text or object selection.

Figure 6: A complex selection in an Microsoft Excel table (rows, columns, and cells are selected)

There are hybrid forms between tables and tree, too. Figure 5 already displayed one such example, a hierarchical list found in an installation programs on the Apple Macintosh (two-level list). The list presentation in the Macintosh Finder is another variant of this theme – actually it is a tree in a list-like look (see Figure 7).

Figure 7: The list view on the Apple Macintosh is a tree presented in a list-like manner. Note, that the Apple Macintosh uses different modifier keys than Windows for selecting several objects.

Lists and Tables on the Web

On Web pages, simple lists can be created by listing items vertically or horizontally using the <p> or <br> tags as vertical separators and, for example, commas or " | " as horizontal separators. There is also special support for bulleted (<ul>) or numbered lists (<ol>) which are typically indented by browsers. Cascading styles sheets offer many more options for fine-tuning lists.

Tables are supported via the <table> construct. All these tags do not support any selection mechanisms; you have to use text or image links or special controls to implement selection. For details see the following table:

Selection  Type	List/Table Created by...	Selection Element	Comment
Single-Selection Table	HTML table	Links, icons with links, or buttons are used to select a single item; radiobuttons are rarely used on the Web.	Typically, selection is combined with an action. It may have more than one column.
Single-Selection Bullet/Numbered List	Bullet/number list (UL/OL)	Links, icons with links	Simple version without HTML table Has one column only
Single-Selection Listbox	Forms element (control)	Integrated (control)	HTML control only Type listbox is set by using an attribute
Single-Selection Dropdown List	Forms element (control)	Integrated (control)	HTML control only Type dropdown list is set using an attribute
Multiple-Selection	HTML table	Checkboxes indicate the selected items	Multiple-selection is typically used for setting options or attributes, not for actions
Multiple-Selection & Single-Selection		Checkboxes indicate the selected items Links, icons with links, or buttons are used to select a single item for a certain action	Not common on the Web, but can be implemented Combines a multiple selection with actions on one item

Table 2: Overview of the design options for lists and tables on the Web

 

Trees

Trees add the dimension of hierarchy to lists. Typically, they do not offer special controls for selecting items. That is, trees behave similarly to object lists (see below) and use the standard keyboard mechanism like Shift and Control clicks for multiple selection.

Figure 7: A typical tree in the Windows Explorer (Windows NT4). This special tree allows single-selection only; to the right the content of the selected folder is displayed.

A special combination of a tree and a table is the so-called list-tree, a variant of the tree control of the R/3 GUI. It consists of a tree to the left and a table to the right. The list-tree can be used if a tree consists of elements, which all have the same attributes so that these can be described by a table.

Trees on the Web

There is no such thing as a tree control for Web pages. Trees have to be implemented as Java, Javascript, or as ActiveX controls. While some time ago, tree code was a hot giveaway, and many Websites hastily introduced trees, this tree-mania soon faded away. Most current Websites feature simpler one to three-level lists and hide larger hierarchies from their users' view. In general, trees are not regarded as Web-like; they are seen as too complex for most users.

Tree controls implemented in Java or other languages imitate the behavior of tree controls for GUIs – including the selection behavior. Simulated trees using HTML tables, however, behave similarly to lists and HTML tables, that is, they do not offer special selection functionality.

 

Object Lists

Figure 8: An object list; in this example modifier keys like Shift and Ctrl allow you to make special selections

Up to now we discussed only text-based controls, that is controls, which offer a set of "text objects". However, tools like the Windows Explorer offer different views of the same objects. The text-based list variants are just some of the offered views. As we covered many aspects of object lists already in the second article in section "Objects to be selected", I will not go into detail here. Note that multiple objects can be selected using the standard modifier key such as Shift and Control. I would like to restrict the term "object list" to regular arrangements of – typically similar – objects (for example, icons). Regular means that the objects are arranged in rows, columns, or follow a grid structure (the grid need not be visible).

Figure 9: An text-like (tabular) presentation of the object list above; selection is governed by the same rules as for the object list

 

Tabstrips – View Selection

Tabstrips are used for displaying several alternate views in a restricted amount of space (with more space, the views could be shown in parallel). These views may cluster, for example, groups of related fields in a template, or options in a settings dialog. They are selected by clicking the tabs at the top of the tabstrip (other arrangements of the tabs are possible).

Tabstrips should not be nested. Tabs characterize views through category labels. Users often have difficulties with understanding what the categories mean and which item is assigned to which category (i.e. tab label). If most of the categories are hidden from the users' view, the problems increase dramatically. There are only a few cases where the assignments are obvious or well established.

Figure 10: Tabstrip used in a settings dialog for switching views

Figure 11: Tabstrip used in a toolbar for switching formatting options

Tabstrips on the Web

There is no tabstrip control for the Web. This implies that tabstrips, or view selection mechanisms in general have to be implemented using appropriate techniques. A simple tabstrip can, for example, be implemented using an HTML table. The tabs reside in cells and can have text or graphic links. This solution, however, requires a page or frame reload in order to change a view, which may annoy users. More advanced implementations use inline frames or layers, which do not cause reloads.

Address Text Attributes Comment Email Address First Name Last Name Street City Country

Figure 12: A simple tabstrip implementation using tables and simple text links for the tabs (not functional); this implementation requires three pages or frames for the different views – one for each view.

From the users' point of view, the applied technique is of no concern, apart from possible disturbing effects, such as page or frame reloads or longer delays.

A recent trend on the Web is to use tabstrips as a navigation tool for accessing the global areas of a Website or Web portal. For larger sites, a secondary navigation level is typically shown below the tabstrip (which is different for each tab). Actually, this is a rebirth of pulldown menus in a new packaging. It is also equivalent to using buttons for the larger areas and index lists for the secondary navigation; however, it consumes less space than such a design.

Figure 13: The navigation tab at www.apple.com follows the recent trend to implement a two-level navigation bar as a variant of the tabstrip (the original image slightly larger)

Other Design Options for View Selection

There are other design solutions for selecting views, such as lists, link lists, or buttons which serve the same purpose as the tabs. The table below summarizes the pros and cons of the different options.

Design Option	Pros	Cons	Remarks
Tabstrip	Easy to understand Keeps screen visually stable All view names visible	Uses much space (borders) Visually complex Has to be simulated on HTML pages	Use it: If the views are visually so different that other choices would result in an unstable environment
Dropdown List	Consumes the least space of all alternatives Allows more views than tabstrip or radiobuttons ( however, the list should not be longer than about 12 items) Label can be used as (part of) instruction	Visually unstable, if views look very different Only the name of the current view is visible -> User does not immediately see which views are available (the user has to click the dropdown list)	Use it : If there is a larger number of views and space is restricted If the number of views may change dynamically If the labels for the views are very long To maintain similarity to the shuffler
Link List	Needs less space than a tabstrip Allows more views than a tabstrip All view names are visible	Visually unstable, if views look very different	Typically used on Websites Links can be text links or graphic links (or even image map links)
Button List or Toolbox	Needs less space than a tabstrip Allows more views than a tabstrip All view names are visible	Visually unstable, if views look very different The toolbox is not available on HTML pages	Use it: Only, if there is a depressed state for the buttons to indicate the selected view
Radiobuttons	Only suitable for 2-3 alternatives All view names are visible	Visually unstable, if views look very different	Use it: For few alternatives If quick access to alternatives and visible alternatives are important

Table 3: Overview of the design options for views

Examples for Alternatives to Tabstrips

Select View 1 View 2 View 3 Field 1   Field 2 Field 3 Field 4

View 1 View 2 View 3 Field 1   Field 2 Field 3 Field 4

Figure 14: A dropdown list (left) or radiobuttons (right) can switch the different form-like views (not functional)

View 1 | View 2 | View 3 | View 4 Field 1   Field 2 Field 3 Field 4

Field 1   Field 2 Field 3 Field 4

Figure 15: A simple link list (left) or buttons (right, depressed state not indicated) can also switch the different views (not functional)

The following example shows a settings dialog with a tree for selecting different options (that is, views). Similar approaches can be found, for example, in the settings dialog of the Netscape browser.

Figure 16: Tree used as a control for switching views (Allaire Homesite 4.5; slightly modified)

 

Final Word

A fourth and final article will deal with function selection and the complexities of toolbars.

 

top