The Motive Web Design Glossary

interface

An interface enables a user to interact with a system to perform a task. For example:

• website navigation (hyperlinks, search tools, etc.) enables a user to find content
• a shopping cart/basket system enables goods to be ordered
• the formatting palette in Microsoft Word enables a user to change text colour, size, font, etc.

An interface may combine a number of types of sensory cues:

• visual/graphic: text (labels); shape, colour and size; spatial cues such as beveling and shadows to indicate ‘click-ability’; icons; change when moused-over; etc.
• aural: speech, beeps, clicks, etc.
• tactile (touch)

An effective interface combines the available, contextually-appropriate sensory cues to:

• inform users of the task the interface can be used to complete
• provide feedback (in response to interaction) to confirm task status (often referred to as closure).

Design patterns

Due to the decentralised nature of the web, interface design has also been popularised. The need for a new and often less-technical audience to engage with interface issues has given rise to the alternative term ‘design pattern’. The Yahoo Developer Network defines a [design] pattern as: …an optimal solution to a common problem within a specific context. [1].

The above definition combines the companion dimensions of:

scenario

the situation in which an interface is to be used

use-case

(loosely) the task(s) the user will complete using the interface

path

how a task is broken down into meaningful stages and sequences

interface conventions

sensory cues and interaction models likely to be known by the user

Interface conventions

When an interface element is recognised and understood consistently, by a significant user-group, it becomes a convention.

Hyperlinks

On a webpage, one convention for indicating a hyperlink is an underline. For a user familiar with this convention, their expectation is that clicking underlined text will link them to a new location: either a new webpage, or a different point on the same webpage.

Underlining webpage text for decorative purposes, or to indicate emphasis, sets an false expectation. This impacts on the ability of the user to complete their chosen task, as they may not be able to differentiate between hyperlinks and (non-navigational) content.

Interface conventions in other media

Interface conventions also exist for other media. For example, in Western tradition, a number displayed in the corner of a printed page usually indicates the position of the page within the overall structure of the book. It is also expected that pages are arranged sequentially, in ascending order. These conventions enable specific content to be found via a table of contents or index, without reading every page.

Related terms: closure, form, GUI, information architecture, label, mass practice, navigation, perceived affordance, usability, wysiwyg.

References and further reading

• [1] What’s a Pattern? (Yahoo Developer Network)
• Designing Interfaces: Patterns for Effective Interaction Design (Jenifer Tidwell, O’Reilly Network)
  A catalogue of interface design solutions (also available in book-form).
• Design Patterns: Defining and sharing user interface design languages (Luke Wroblewski, et al)
  Views from a range of interface designers and theorists on design patterns.
• The Elements of a Design Pattern (Jared Spool, User Interface Engineering)
  An approach to documenting design patterns for design and development team use.
• Examining the role of de facto standards on the web (Heidi Adkisson, Boxes and Arrows)
  Exploring where website interface standards come from and their impact on usability.
• First principles of interaction design (Bruce Tognazzini, Nielsen Norman Group)
  [Principles] fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web.
• Interface hall of shame (ISYS Information Architects)
  A collection of common interface design mistakes explored via a critique of program screen shots. Includes: selecting the wrong control, confusing terminology, inappropriate metaphor, etc. For positive reinforcement, see the companion: Interface hall of fame.
• Web Design Patterns (Martijn van Welie)
• Web Patterns Project (UC Berkeley)
• Yahoo Pattern Design Library (Yahoo Developer Network)
  A library of design patterns, including source code, formalised by the developers at Yahoo (initially created for content hosted by the Yahoo Network). Each example pattern is detailed in terms of: problem, use-case, solution, rationale and accessibility considerations.
  • Yahoo User Interface Blog
    News and articles about designing and developing with the Yahoo design patterns.

Motive Web Design Glossary Trivia