<--Home

Contents | Background | Process | Concepts | Elements | Design

Designing the User Interface

Display Things | Capture Things | Navigate | Panel Layout

Capture Things from the User

In order for a computer is to store information, the user must be able to communicate that information to the computer. Similarly, the user must provide certain information to the computer merely for the process of operating the interface itself. This process of communicating information from the user to the computer is generally referred to as the computer "capturing" information from the user.

Capture a little text

This can be accomplished simply by presenting a text field. The size of the text field typically corresponds to the amount of text that is expected to be entered.

top

Capture a lot of text

If a large or undetermined amount of text is to be captured, such as the content of a mail file, it is generally done through the use of a scrolling text field.

top

Toggle settings on/off

Frequently it is necessary to capture information that has a "yes/no" or "on/off" format. These are also referred to as "binary" or "Boolean" choices. It may be information that is meaningful to the application, or it may simply settings that the interface requires such as preferences. Either way, these are best implemented using checkboxes.

top

Capture a single selection from pre-defined choices

This is one of the most common functions that an interface might be required to perform. Rather than asking for the user to input some information and rejecting it if it is invalid, it is much better to present all the valid choices and allow the user to select the desired value. There are many ways in which this can be done.

If there is not a lot of space on the panel to display the valid choices, and the list of choices is not terribly long, it can be implemented in a popup list.

If the list of valid choices is not terribly long, and if for some reason a popup list might obscure some important information on the panel, the list can be implemented in a spin box.

If it is important that the entire list of valid choices be visible, it can be implemented using radio buttons, providing there is enough space available on the panel for the entire list.

The list of valid choices can also be displayed in a scrolling list. This is helpful when the list is too long to be displayed on the panel in its entirety, or so long that a popup list or spin box is unwieldy.

If for some reason it is preferred that the list not appear on the panel at all, it is possible to implement the selection in a pull-down / drop-down menu with a check mark indicating which option has been selected.

An approach that is particularly intuitive is to present the valid choices in the form of icons. This assumes that the list of choices is small enough that this solution is practical.

top

Capture multiple selections from pre-defined choices

It may be required to display a list of valid choices, but allow the user to select more than once choice.

If the list is very short or it is important that the entire list of valid choices be visible, it can be implemented using a series of checkboxes.

If the list is too long for all the options to be displayed on the panel as checkboxes, it is possible to present them in a scrolling list that has been configured to allow multiple selections.

If for some reason it is preferred that the list not appear on the panel at all, it is possible to implement it in a pull-down / drop-down menu with check marks indicating the options that have been selected.

top

Capture an approximate value from a wide range

Sometimes it might be necessary to capture a value from the users, but they won't know what the exact value is until they see immediate feedback on the screen, as in the case of setting colors. Similarly, the unit of measure might be something that is not meaningful to the users, such as setting brightness and contrast settings. This is usually implemented using sliders.

top

Increment or decrement a value

In some cases it might be convenient for the user to increment or decrement a value one unit at a time. This can be implemented by displaying the value in a text field and providing buttons with meaningful icons.

top

Add/Remove an element to/from a list

It might also be a convenience to allow the users to generate one list by selecting elements from another list. This can be accomplished by putting two lists side by side with meaningful buttons between them.

top