The Motive Web Design Glossary
Interacting with the world around us
Interface is an issue for anything that is ‘used’; telephone touch pads, lift buttons and light switches are all examples of real world interfaces.
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).
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. .
The above definition combines the companion dimensions of:
- the situation in which an interface is to be used
- (loosely) the task(s) the user will complete using the interface
- 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
The comfort of the familiar
Interface conventions are a significant issue when creating a computer operating system (OS). One of the reasons for the success of the Apple Macintosh is that software developers use standardised interface elements. The OS feels more ‘friendly’—even when using a new program—because the interface is familiar.
When an interface element is recognised and understood consistently, by a significant user-group, it becomes a convention.
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.
closure, form, GUI,
information architecture, label, mass practice, navigation, perceived affordance, usability, wysiwyg.
References and further reading
-  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.
Motive Web Design Glossary Trivia