Common Principles: A Usable Interface Design Primer


Common Principles: A Usable Interface Design Primer

By Rick Oppedisano

When users perform a transaction or action, their cognition is often split between learning and operating the system or user interface (UI)1 . A well-designed UI allows users to focus the majority of their cognitive energy on learning, and offers no operational complications. This most general principle of usability is often called the "transparent interface." The transparent interface is commonly defined as one that maximizes user task completion and minimizes interfering factors, such as unnecessary interface complexity or performance.

The following are some basic guidelines for minimizing user cognitive processing and maximizing interface efficiency.

Consistency of Elements and Style

Effective UIs are unified by a common style (layout, fonts, and design or brand elements). Consistency is one of the most important aspects of a repeatable user experience. If users know what to expect, it will be easier for them to build a conceptual map of what should happen next. If the UI meets these expectations, the user becomes comfortable, and the more comfortable a user is with the interface, the shorter the learning curve of the application. This makes it easy for the user to feel "contained" within the application and establishes clear boundaries so that the user won't inadvertently exit.

In web-based applications, style sheets can be used to impose a uniform appearance on pages. HTML style sheets are a lot like ones seen in larger office suite applications like Microsoft Word or PowerPoint. The developer sets universal properties for how a certain kind of paragraph or other text unit should look, stores those descriptions in a style sheet file and inserts this file into the HTML code. The defined styles will be applied to the paragraphs on the page. Using style sheets allows the appearance of a whole site or application to be changed simply by the altering the common style sheet.

Provide Clear Navigation

Simple and comprehensible navigation is essential for the success of any application. Users must be able to move from page to page via links, buttons, or menu items. More importantly, navigation must also address the tenuous balance between real-life user goals and business goals of the application. When business requirement terminology filters into navigation, there is risk that the typical user may misinterpret the language used in the navigation. This misinterpretation compromises the user's ability to complete the task, and can override the benefits the technology aims to provide. For example, "Transfer of Eligible Internal Account Funds" is the formal business terminology for transferring money online from a checking account to a mortgage. It would, however, be a mistake to use this term in software navigation or functionality since users wouldn't understand it.

Three basic questions navigation should answer at any time during the task are:

  • Where did I come from?
  • Where am I now?
  • Where can I go from here?

In a complex application, users may find themselves unable to answer one or more of these questions. Navigation that is clearly labeled in accordance to the user's task is an essential element of the transparent interface.

Navigation should also allow the user to reverse any decisions they may have made in error. On websites, this is commonly seen in use of the "breadcrumb trail" technique. This technique offers a clickable trail of the user's navigation path on every page, starting with the Home page. In a web application, one preferred option is a "Previous Page" link. Others include anything from the browser's Back button to a Cancel Activity option built into the application.

Logical Grouping of Tasks

When users need information in order to proceed with the task, make it available with minimal effort on their part. Recent experimental work revealed that new users of graphical user interface (GUI) applications employ a strategy of first scanning the interface for a well-labeled action, then quickly narrowing their search by selecting that action. If further options are displayed as a result, the scan-search cycle will be continued until the guiding goal has been accomplished 2 .

The success of this strategy depends on how the corresponding tasks are organized. A well-designed program will make it easy to find information on the page by grouping corresponding task functions around one another. For example, if a series of checkboxes is left aligned, don't make the user look or scroll to the right to find the button that executes the action. Left align the button, placing the action item as close to the task (choosing from the checkboxes) possible.

Prioritization of Visual Elements

The location of visual elements in the UI has a huge impact on how the user interprets information. Placement of these elements often appeals to the user's conceptual map of the interface. Humans naturally associate paired elements as being connected, so when laying out visual elements, know that the user will attempt to interpret the contents and functions of various page elements and how those elements relate to one another.

Spatial organization of information allows for quicker location and interpretation. For example:

  • A list is easier to search than the same items presented in a running text marquee.
  • An alphabetized list is easier to search than one in random order.
  • Text is easier to read if broken into paragraphs than jammed together.
  • Longer text documents are easier to read with visually distinct headings than without them 3.

Another effective technique is to create a distinct "functional area" on the screen through use of graphic properties like shape, texture, color, size, border, and screen location. This area contains the information and interactive elements most relevant to the task. An example of a functional area is the Internet Explorer navigation bar: it is always in the same place, and most page navigation tools are there. Functional areas can also contain other functional areas. The Internet Explorer toolbar also contains the navigation menu, the tool menu, and the URL entry field.

Care for the User

Another important aspect of the transparent interface is building the user's trust. If the program protects the user from destructive actions, the user will not have to think as much about whether every action is a safe one, and will feel more comfortable with the application. In some applications, certain actions can have a negative consequence. If this is the case, be sure to tell the user. Users like to be warned before any adverse actions occur. For example, if a user wants to stop a transaction prior to completion, and this act will cost them a financial penalty, give a warning. One option could utilize a JavaScript pop-up that reads, "If you cancel this transaction right now, you will be penalized $5.00. Do you still want to cancel?"


Use of these techniques is a great first step towards achieving the transparent interface. However, a degree of compromise is necessary for the success of any of these techniques. Perceptual salience, or the probability that an event or pattern will be noticed, is a relative thing; increasing salience in one location diminishes it everywhere else. People have a limited amount of attention. Building a transparent interface through efficient and usable design is the catalyst for focusing this attention on completing the designated task.

1 Usability Evaluation with the Cognitive Walkthrough, John Rieman, Marita Franzke, and David Redmiles. http://www.acm.org/sigchi/chi95/proceedings/tutors/jr_bdy.htm
2 Franzke, M. (1994). Exploration and Experienced Performance with Display-Based Systems. Ph.D. Dissertation, Department of Psychology, University of Colorado.
3 How Users Read on the Web, Jakob Nielsen, Alertbox, www.useit.com/alertbox.

By Rick Oppedisano
Rick Oppedisano is a Client-Side Architect and Designer for Bank of America. Rick's interactive content storyboards were recently featured at the American Society for Information Science and Technology's 2002 Information Architecture Summit (http://www.asteriskcreative.com/article.html).