Conceptual models and interface metaphors

Intuition

Before you draw a single button you need an answer to one question: what is this system, in the user’s head? A conceptual model is that answer, written down. A metaphor is one way to make the answer familiar.

A conceptual model is the designer’s plan, settled before layout

Week 6 follows the research phase. A good understanding of the problem space informs the design space: what kind of interface, behaviour and functionality to provide. Before deciding these you develop a conceptual model.

Johnson and Henderson (2002, p26) define it as “a high-level description of how a system is organized and operates”. Its job, in their words (p28), is to let designers “straighten out their thinking before they start laying out their widgets”.

You formulate it by asking: what will users be doing when carrying out their tasks, and how will the system support them? Then three follow-ups. What interface metaphor, if any, will help users understand the interface? Which interaction types suit the activities? Do different interface types suggest alternative design options?

The lecture has a separate slide titled “Mental model” with no text. Treat it as the user’s own picture of the system, which the conceptual model tries to match.

A metaphor borrows a familiar thing and adds its own properties

An interface metaphor is designed to be similar to a physical entity but also has its own properties. The desktop metaphor and web portals are the lecture’s examples, and a phone’s contacts app borrows the telephone directory. A metaphor can be based on an activity, an object, or a combination. It exploits familiar knowledge so users can understand the unfamiliar.

It does three jobs: conceptualising what users are doing (browsing the Internet), instantiating a conceptual model at the interface (the desktop), and visualising an operation (a shopping cart icon).

Exam detail

Choosing a metaphor, four steps: understand functionality (purpose, what the system should do); identify potential problem areas (which parts will be problematic and why); generate metaphors (analyse users’ descriptions of relevant activities); evaluate suitability.

Evaluating a metaphor, five questions: how much structure does it provide, how much is relevant to the problem, is it easy to represent, will the audience understand it, how extensible is it.

Advantages: easy to learn new systems; helps users understand the conceptual model; supports a diverse set of users; strengthens innovation.

Disadvantages: constrains conceptual design (real books have no search, so what about e-books?); limits users to understanding the system in terms of the metaphor; poor designs can become the metaphor; may interfere with new conceptual models; may break conventional and cultural rules (the recycle bin placed on the desktop).

Pitfall

Do not mix up the three layers the lecture keeps apart: the metaphor helps users understand the interface, the interaction type is what the user is doing, and the interface type is the input and output technology (see the next topic). A metaphor question is rarely about voice or touch.

Recall

Name the four steps for choosing a metaphor and the five questions for evaluating one.

Steps: understand functionality, identify problem areas, generate metaphors, evaluate suitability. Questions: structure, relevance, ease of representation, audience understanding, extensibility.