April 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

The Theory Behind User Interface Design, Part Two, Page 2

  • January 6, 2003
  • By Mauro Marinilli, Mauro Marinilli
  • Send Email »
  • More Articles »

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.


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.

Page 2 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Sitemap | Contact Us

Rocket Fuel