The Theory Behind User Interface Design, Part Two

Introduction

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.

The Menu Selection Style

Menus are used to select items (often with the purpose of invoking commands) in a systematic, centralized way. Note that here with the generic term "menu," we denote any selectable item such as links in a hypertext page, commands in a dropdown menu, buttons, and so forth.

Organizing Dropdown Menus is an important issue, especially when there are many items available for selection.

The criteria mostly used are:

• Task-Related organization. This is the single most successful strategy for organizing menu items. Organizing items at design time, following a semantic criteria, greatly helps users to access them later at runtime. However, the problem on how to share the semantic criteria used with the end users still remains.
• Hierarchical grouping in tree structures. The number of levels (depth) and the number of items per level (breadth) characterize such menu trees. Empirical studies have shown the superiority of breadth over depth in menu hierarchies (see Figure 3). As a rule of thumb, menu hierarchies shouldn't be deeper than three levels. There are some practical rules for choosing the right hierarchical structure. At the root of the menu hierarchy, a greater depth is recommended, making sure that items are not overlapping but clearly distinct, covering all the possibilities. A broader range can be adopted on the leaves also (the final items in menu items hierarchy).
• Standard Organization. Adopting a standard menu organization helps users to get quickly accustomed to new applications, minimizing the memory load during work. This technique is used by software application commands menus (where menus such as "File," "Edit," and "Help" are common).

These strategies, if combined, relieve users from the time-consuming task of finding an item in a potentially large menu catalog.

Also, the Start Menu in Windows XP (see Figure 3) follows the advice previously mentioned about structuring large menus for easy access.

Click here for a larger image.

Figure 3—An Example of Hierarchical Menu: The Start Menu in Windows XP

The Form Filling Style

Another widely held interaction style in modern graphical user interfaces is form filling. This is a radically different approach for interacting with a GUI than menus. Its primary scope is to allow users to read and input (mainly discrete but also continuous) information into the system.

Figure 4—An Example of a Form Dialog of a Java-enabled Wireless phone

The general principles for the form filling interaction style are those valid for general data entry, just to mention the main ones:

• Consistency of data-entry transactions. Clearly, the data input should be made as coherent as possible, right from the design of the form.
• Minimal input actions by users. User interaction should be minimized. This is essential because forms often are used by repetitive users.
• Minimal memory load on users. Exploiting contextual data and short-term memory (see the previous article) is essential for reducing interaction strain.
• Compatibility of data entry with data display. This is often an overlooked propriety of modern computer-based forms. When we insert a password in a password text field (that shows asterisks instead of its real content), we heavily rely on short-term memory for successfully completing our input subtask. Imagine how difficult would be to interact with a complex form where input data is not clearly intelligible.

There are a number of general guidelines for designing data entry forms; here we will mention only the most useful ones:

• Grouping and sequencing fields logically. This is essential for creating a usable, rational product.
• Supplying clear instructions. This ranges from providing meaningful labels and form titles to supplying additional explanatory messages for fields (for example, by contextual help or through ToolTips) together with adopting consistent terminology and abbreviations. This is a general prescription: avoiding as much as possible cumbersome terminology while providing names as close as possible to the business domain users are accustomed to.
• Effective focus navigation. Other navigation mechanisms (apart from the mouse) should be considered, too; first of all, the keyboard. This criterion deals with interactivity and usability rather than mere graphic appearance.
• Providing an effective completion signal. Clearly, it should always be clear how to complete the data entry task associated with the form. The completion scheme usually is dictated by the platform and the related style guidelines. On wireless phones, for instance, often a devoted key (usually signaled by some icon or by means of the green color) is used to commit the data in the current screen.
• Representing text. Labeling text is kept brief and usually put beside the related component, on the left, as in Figure 5. Usually all main messages (command names, labels, windows title, and so forth) follow the so-called headline capitalization rule (see Figures 4 and 5).
• Handling errors. Whenever it is possible, the GUI should be designed for preventing errors and, when this is not possible, showing meaningful, constructive error messages.
• Designing the visual appearance usually involves adopting a visually appealing layout together with signaling which fields are mandatory and which are optional, and grouping together semantically related fields.

Creating an effective form requires some extra care. In Figure 5, there is an example of a simple (yet well-designed) form dialog. Navigation has been enhanced and the whole interaction smoothened thanks to few simple details:

• Every field in the form is easily reachable by using the related mnemonic keys (these depend on the particular platform conventions).
• Traversal of the form via the keyboard and the overall form navigation has been tested and smoothened to help repetitive users or those who prefer using the keyboard.
• Standard buttons are added at the bottom of the GUI. In this way, the users know from their past experience (with other windows and forms) how to dismiss this dialog (the so-called completion signal). Note the "OK" button selected by default.
• A careful design of the visual appearance and the components layout of the dialog box promotes the avoidance of useless graphics and provide an overall pleasant effect.
• Information about accessibility (suitable for people with perceptual and cognitive disabilities) has been added, too. Such an "invisible" feature could be very important in some situations and should always be used.

These little details greatly enhance the overall usability, especially for repetitive users.

Figure 5—An Example of Form Dialog Box for the Mac Os-X

Direct Manipulation

In Figure 6, there is a classic example of a direct-manipulation interaction mechanism, the Mac System 1.0. The items in the user interface can be dragged, edited, and deleted, by performing operations on them in a consistent and "direct" way.

Figure 6—A Direct Manipulation Interaction Style Example (Mac 1.0, 1984)

Fortunately, nowadays direct manipulation is the default interaction style for well-designed GUIs aimed at a wide and diversified range of users.

Command Language

Historically, this was the first interaction style used by interactive computers.

Early modern computers had very limited resources and very few could afford to be devoted to the user interface. Users were usually specialized personnel and there was not yet a mass market pushing for the adoption of more usable interfaces. Clearly, in this case the limited resources and the small market prompted for a simplified, implementation-oriented interaction style. Figure 7 is a screenshot of the user interface of a machine of the first generation of so-called "home" computers (note the amount of available free memory). The memory space occupied by the OS software in Figure 6 was of an order of scale bigger than the ROM space occupied by the OS in Figure 7.

Figure 7—A Command Line Interaction Style Example (Vic20, 1983)

Anyway, command-line user interfaces are far from dead. Instead, they are alive and well because they offer a powerful and flexible means of expression for expert users. Figure 8 is a snapshot from a terminal window of the Linux OS.

Figure 8—A Contemporary Command Line Example (Linux , 2002)

Command-line interfaces always need some initial training and the error rates are usually high when compared with other interaction approaches.

Natural Language

Though quite complex to implement, natural language (both via text or speech recognition) can be useful in some cases.

Many examples of commercial applications are continuously appearing on the market. Some analysts predict this as the dominant interaction style for future user interfaces. Anyway, theoretical problems with natural language processing (NLP) seem still far away to be solved, and such promising interaction approach are still limited to few, circumscribed applications only.

Conclusions

In this article, we touched some interesting points in graphical user interfaces design. We followed a practical approach trying to highlight the theory by means of common, real-world examples. In regard to the references, interested readers can refer to the list given in the previous article.

About the Author

Mauro Marinilli is currently finishing his second book, on professional Java graphical user interfaces. He teaches CS courses at the University of Rome 3 in Italy while being active as a consultant and as an academic researcher in case-based reasoning, Human Computer Interaction and its applications to e-learning. You can email him at contact@marinilli.com.