Clarity and Consistency - Two Facets of a Better Interface

By Tim Broderick

In any design, simplicity always seems to look and work best. An interface should be understandable at a glance, but it must also involve imagination. Where do we find inspiration to create such a guide? Metaphor. Metaphor is fundamental to human thought and language; it provides a way of understanding an unfamiliar product or process in terms of something else that we already know about. It is the link between the message and how to communicate it. A metaphor is built around the content of your site or application.

The sample icons that appear in the Navigation Panel on the left will take the user away from the curriculum proper to (from top to bottom): the Bulletin Board, the Progress map, a Quiz Me test, and the Study Guide. The arrow icons at the bottom of the menu bar help the student navigate forward and backward through the lessons; the center asterisk shape brings the student back to the lesson he last saw if he were to visit, say, the Bulletin Board.

• Select a metaphor based on what is intrinsically interesting about that content.

• Develop images that connect the familiar experiences of the user with the functions of the site.

• Apply those images to the design of all the interface elements.

• Extend the interface to include all of the site resources.

The choice of a representative metaphor for content, and its consistent application, is one of the key aspects of interface design.

Make sure pictures or icons are understandable. It is pointless to create cool-looking devices or buttons if the user does not understand how they work or what function they perform. Ambiguity is very unsettling to users and often results in their lack of respect for the site or product. Don't depend solely on icons to communicate accurately; always print a text description so the user will not have to guess their meaning.

A consistent design is easy to follow and builds trust with the user. A given action always returns the same reaction. A consistent interface yields little surprise. Use conventions. These are the universals such as help, go back, next page, previous page and home page buttons. Conventions are predictable, common and boring - but they work. They are the interaction standards that make it easier to move into the content and help keep the interface transparent. Remember: The interface should call attention not to itself, but to the content it is designed to help explore.

Buttons should always be in the same place and react to user input in the same way. (Using a grid to lay out their position on each screen will help force this type of consistency.) Menu items also should remain consistent in the different levels as a user moves through the project. This helps orient users, keeps them from getting lost, and makes them aware of what choices are available to them, something akin to providing a visual map. Buttons should be a uniform size; if they will have text labels they must be large enough to support the label. Buttons might be designed to have a content-specific shape to further integrate the design, and should enhance single-dimensional concepts that might not be expressed fully in text alone. Buttons (and all interface elements) should always produce immediate feedback to the user to show that they have been clicked or activated. Feedback can be visual, aural or both, but it must happen quickly to reassure the user.

The interface is what makes a web site work as one integrated piece rather than a collection of screens, and it is what allows the user access to information and provides some of the site's entertainment value. It is the foundation of the interaction. Keep interfaces simple, clear and consistent, and they will be successful in communicating to the audience.

Learn more about Tim Broderick in our Contributors area.