Designing Interfaces

DESIGNING INTERFACES
How should functionality be represented?

GENERAL CONSIDERATIONS

Interface design is primarily concerned with the communication of function. However, the manner in which a function is executed, and the task or process associated with that function by the user may not coincide. It is the task of interface design to bridge that gap.

Typically, there are two levels of communication in a given interface -- an expression of general functionality (e.g. this is a button, link or static image), and an expression of some specific meaning (e.g. the specific task that button or link executes.). Given the widespread and common use of digital media, certain expressions, in particular regarding general functionality (e.g. iconography, underlined text links, cursor changes, double-clicking icons, etc.), have become somewhat standardized, and thus may be relied upon as general user knowledge in many cases. Other case-specific instances of communication can be achieved via thoughtfully developed and tested interface designs focused on the completion of a task from the perspective of the end user. Consider the following questions concerning usability:

Is the result of the interaction accurate? Does the result match the user's expectations?

Can the interaction be completed efficiently? Is the task completed within an acceptable time frame?

Was the interaction enjoyable? Would the user choose to perform the action again?

GENERAL RULES OF THUMB

NOTE: The following guidelines are general principles, which should be applied intelligently and not mechanically. An individual design context may call for solutions contrary to these principles. In these cases it is absolutely acceptable to break a rule of thumb. You should, however, be able to articulate concrete reasons for doing so.

Minimize what a user needs to remember in order to use your interface.

Avoid the use of excessive color or text formatting. If coding schemes are used, be sure implementation is consistent throughout the site. Use a maximum of three information-bearing colors.

Don't expect a user to remember short-cut key-strokes, or distinguish instances of single- vs. double-clicking, etc.

Program your interface objects so that they will respond to a range of a particular type of input (e.g. a button that executes its command on single, double, rapid, slow or exaggerated clicks).

Aim for consistency of appearance, and even identity of use. Be sure similar button interfaces (size, color, etc.) initiate similar functions. Be sure identical button interfaces initiate the same function, no matter from where they are called. Use the same terms for the same functions (e.g. exit, quit, close, leave, etc.) throughout a website or program.

Aim for clarity and simplicity of content: present only the information a user will need, and present it only when and where they will need it. Be sure to think of your content in terms of its presentation in time; not everything need necessarily be available to a user at all times.

Icons and metaphors:

Interface metaphors should focus on the task at hand rather than the actual system processes.

The arrangement of items (e.g. the sequence) should represent the requirements of the task(s) to be accomplished from the perspective of the user.

Provide the user with timely active and passive feedback to let them know that an action is in progress or whether or not an action has been successfully completed. For more information on feedback see this response-time chart.

Build in redundant layers of information. Provide your user with several active and passive means of identifying interactive versus static objects, and the function of the interactive object.

To clarify the information relating to a graphic link, combine brief text descriptions with iconographic representations, such as in the Netscape toolbar.

Use active means such as visual (load a new image) and audio responses to user actions (e.g. mouse clicks, etc.) to provide active feedback that the action has been registered by the system.

Use passive means such as cursor changes (a default in web-browsers for link-buttons) and image-switching or roll-overs to indicate interactive potential.

See an example at: Metadesign

Express communications in your user's language and in terms of their point of view (e.g. "you have just ..." or "are you sure you would like to ....").

PROTOTYPING TECHNIQUES

The following techniques are suggestions only. Choose a method that best suits your needs and abilities. It is most important that you work in a manner that is comfortable and efficient.

For preliminary concepts quickly sketch on paper. In this regard, for almost everyone the computer will be a hindrance. Try to generate as many concepts and iterations of concepts as possible, and do not invest a lot of time or effort in any one concept. Take the time to create electronic versions of only promising concepts.

Show concepts to others to test for user comprehension.

Design for monochrome output and then add limited color. This will aid in designing for the color-blind population (about 8% of males are red-green deficient) and b/w printers. Test color schemes for tone readability by printing them on b/w printers.