January 21, 2021
Hot Topics:

The Theory Behind User Interface Design, Part Two

  • By Mauro Marinilli
  • Send Email »
  • More Articles »


In this second article, we will briefly discuss some of the more interesting aspects of graphical user interfaces. Our approach will be expositive and discursive, rather than overly technical and detailed. We will focus mainly on Graphical User Interfaces (GUIs), getting into the details of practical user interface design.

As a consequence of the technology evolution, modern GUI designers implicitly rely on style guidelines and vast development toolkits for designing and building their products. The topics discussed here are often addressed directly only by such tools and guidelines, while designers are left with more specific design concerns. Nevertheless, it is important to discuss some basic notions often implicit in today's guidelines.

A little terminological note. With the term GUI, we denote here any kind of user interface that makes use of graphics features. This is rather different from the academic meaning of the term. Again, our intent here is to convey general, practical advice rather than detailed, specialized information (that the interested reader can find in the vast literature available on this topics).

Display Organization

Let's begin with the basic criteria used for organizing information on the screen.

There are mainly two strategies to manage the layout of the display area: high-density strategy (for conveying a high volume of information) and its counterpart, which we call the limited information layout strategy (where the aim is to reduce the displayed data). Such strategies are complementary and should always be used together in every GUI screen, or portion of it, that we are going to design. Depending on the case, one of the two will be dominant, but it is essential to be accurate in the exact mixing of them. Both overloaded and too "cryptic" interfaces are hard to use. In Figure 1, there is an example of a design where the high-density strategy is predominant. Such a Web page has been designed mainly for the repetitive, expert users.

In Figure 1, a Web page of the SETI@HOME project (http://setiathome.ssl.berkeley.edu/unix.html) shows the high-density organization approach at work. The idea behind this Web page is to show all the information of interest right now, in one shot. This could be slightly confusing for novice users, but it comes in handy for expert and repetitive users. Furthermore, depending on the situation (the current application domain, the given task, and the intended end-user population), it can be the only way to go.

Click here for a larger image.

Figure 1—A High-density Area Organization

The two approaches are briefly outlined in the following:

  • High-density layout strategy can be usually achieved by three general devices:
    • Tabular arrangement. Data is organized in a list of (possibly) structured values. Typical examples are spreadsheets and database grids. Figure 1 is an example of this common layout strategy.
    • Hierarchical organization. The information is structured into a tree-like hierarchy as in a file system graphic representation.
    • Graph. Data is represented graphically, like a chart or a diagram.
  • The limited information layout strategy, on the other hand, aims at minimizing the displayed data. There are a couple of approaches to control the displayed data:
    • Step-by-step interaction. The data are cut up and displayed in one-page stages; a classic example of this approach is the so-called Wizard interface, popularized by Microsoft Windows.
    • Details on demand. Some optional data can be shown on user request. A common example of this strategy is some dialogs that have a "more details" button that enlarge the dialog, providing further information. However, this latter device should be used with care, because users prefer well-known, expected windows and they feel uncomfortable with a GUI that changes its appearance too much.
    • Disable/minimize irrelevant information. There are many ways to minimize data; for example, shading it. In Figure 2, a command menu is shown, where some commands are purposely grayed to signal that they are currently unavailable. We often take such a feature for granted, but just think how frustrating it may be for the user to invoke a command just to be startled by an error message about the current unavailability of that command.
    • Figure 2—Disabled Unavailable Information for a Menu

The two basic layout strategies discussed in this section are at the base of any GUI. Try it by yourself to individuate the designer's intentions in the applications you normally use. As a rule of thumb, usually the high-density approach is used when the user population is assumed to be experts and repetitive users; whereas, for a wider and less specific audience, the other approach is preferable. The Microsoft Windows Explorer, for example, employs the high-density organization criteria when showing the file system structure as a tree beside the contents of the currently open folder.

Esthetic Considerations

Undoubtedly, quality GUIs are also pleasant to see. However, there often is a wrong assumption about the meaning of the term "pleasant." Indeed, one of the recurring pitfalls in GUI design is to be stuck into an excessively elaborate visual experience, with the wrong assumption of the more, the better. GUIs should be the least astonishing possible. A successful GUI is one that is barely noticed and one that works smoothly and swiftly as expected, with users barely noticing it.

This "excessively indulgent design" is a common slip even for seasoned designers. In fact, given the current pace of software releases, the most obvious—and visible—place to add new features (justifying the new release effort) is always the user interface.

Nevertheless, esthetics are important, too. Much too often developers snob the visual appearance of their user interfaces, producing unusable designs. Some of them find those visual details, such as button size, overall visual balance, and the like, boring. These kind of developers are mostly implementation-driven and tend to automate the user interface (implicitly seeing it as a dull, unnecessary activity) as much as it is possible. Unfortunately, there is no substitute for human design, and self-directing windows that fully automate their contained data layout are cool to implement but produce poor quality user interfaces.

Techniques for Getting the User's Attention

Some techniques for getting user's attention are widely employed in user interfaces. They are derived from empirical studies and can be summarized as follows:

  • Animation. Items blinking on the screen easily capture the user's attention. This technique can be disturbing and invasive. Animation is often used to express the GUI internal state, signaling work in progress or activity in general.
  • Color. Like animation, this technique should be used wisely. Too many colors tend to produce confusing GUIs.
  • Sound. As with technique, when used wisely, can be very effective. Indeed, when dealing with disabled people, sound signals could offer an effective feedback means.
  • Graphic Adornments (such as bold fonts, special graphics, and so forth). When used wisely and coherently, these graphic conventions could be effective without being disruptive.

Fortunately, relying on professional design guidelines avoids many gross errors. This is especially true for attention-catching methods such as flashy labels, colors, and the like.

Providing Feedback for the System Internal State

It is essential to signal the system's internal state. This important feature can be achieved by using different techniques. The most commonly used techniques are the following:

  • Change the pointer shape. In modern GUIs, the pointer shape is widely employed for signaling the application's internal state (such as the waiting pointer) and the currently available operations (like, for example, resizing a window by dragging its corner). As a rule of thumb (if not otherwise stated into the guidelines of your platform/corporation), the waiting pointer should be used for any operation that takes more than three seconds to be accomplished.
  • Animation, as already mentioned before, can be used to show both exact progress in completing an operation (usually by means of a progress bar component), and generic activity (using, for example, an ad-hoc animation). As a general rule of thumb, any progress indicator should be updated at least every four seconds.
  • Messages. The system can use message dialogs, status bars, or similar techniques to convey the GUI's internal state to the user. This is a widely used technique, where the details of the interaction are dictated by the style guidelines in use.

A controversial notion that needs to be carefully taken into account when designing a GUI is the use of modes. Modes are particular states that affect some parts of the user interface behavior. You can think of them as contexts in which some previous user interactions change the meaning of current actions. Depending on the particular mode, the application can behave in a completely different way. Design guidelines usually discourage the use of modes, or even ban it altogether. It is critical to signal explicitly the current application mode. This is usually done by modifying the pointer shape (like when some tool is selected) or by means of toggled buttons or status bars and so on.

Interaction Styles

Following classic literature in the field (see the references section in the previous article), we can identify several basic interaction styles for user interfaces. Such styles are commonly combined in real-world GUIs. For each style, we will summarise some design aspects.

  • Menu Selection. Whenever there are a number of items, this approach can be used.
  • Form Filling. It is mainly used for data input. Users see a display of semantically related fields. They can inspect and eventually modify the data, navigating from one field to the other, usually using the keyboard.
  • Direct Manipulation. The GUI creates a visual representation (by means of some metaphor) of the world that the user can manipulate directly. Modern word processors (users can manipulate the characters on the screen as if they were real), videogames, and the popular desktop metaphor (see Figure 6) are examples of this approach.
  • Command Language. This is the oldest of the interaction styles, and it is particularly suited for expert users who can express complex commands by using the command line prompt facility.
  • Natural Language. Users interact with the system by means of their own natural language; for example, by means of voice recognition and speech synthesizers.

We will see in some detail only the most commonly used ones, the first two in the list: menu selection and form filling.

Page 1 of 2

This article was originally published on January 6, 2003

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date