3 Representational Models That Affect Usability

A few weeks ago while talking about visual perception and memory, I mentioned how the mental models your audience hold affect how they perceive your designs. Today I want to expand on the topic and consider the conceptual model of the designer as well as the interaction model or where designer and audience meet.

Before getting to the details let’s quickly define each of the 3 models.

• Mental model— how users think a system will work
• Conceptual model—how designers develop a system to work
• Interaction model—how people actually interact with a system

Mental Models

A mental model represents a persons thought process for how something works. It’s built through past experiences, incomplete facts, intuition, and the general understanding of how we think the world around us works.

We all use mental models to predict how systems work. They set a context that helps shape our behavior and actions with the system and they influence our visual perception by suggesting where we should look and what we pay attention to.

For example if you sit inside a car you have a mental model about how that car should work.

You expect to find an ignition, which you’ll likely turn on with a key. You expect a steering wheel that you’ll turn clockwise or counter-clockwise to turn the car right or left. You expect to find gas and brake pedals as well as many other things common to most cars.

Even though you’ve never been in that particular car it shouldn’t take you more than few seconds to figure out how to turn it on and drive it. You have a mental model for a car, which is easily transferred from one car to another.

Mental models are fluid. We create them quickly and modify them as new information comes in. We base them on

• Prior experiences
• Assumptions
• Observations

The first 2 allow us to form models quickly and the last allows us to modify them.

The main thing to understand is that we form mental models to help us make sense of world and interact with unfamiliar things. Our mental models influence our perceptions and our perceptions influence our mental models.

Conceptual Models

A conceptual model represents how something is designed to work. It’s the mental model of the designer put into action.

Consider again a car. There’s no reason we need to turn a key to start the ignition. A designer’s conceptual model of a car could suggest that a push button ignition and joystick controls are better ways to operate the car.

Push button and joystick break our mental model of a car. We do have mental models for what to do with buttons and joysticks in general and we can use them to figure out how to turn on and drive the cr.

Still it’s easy to see how some or even many would have trouble operating the push button and joystick car, because conceptual model and mental model disagree.

Every design decision creates either agreement or disagreement between mental model and conceptual model.

• Disagreement—leads to a system that’s harder to learn. It will typically create user frustration, more errors, and be less usable when first encoutnered.
• Agreement—leads to system that’s easier to learn. It will typically be highly usable and create less error and user frustration when first encountered. It will like be seen as more intuitive.

When mental and conceptual models agree little explanation is needed to use the system. When the models disagree an explanation is sometimes necessary.

Designing for Disagreement

While agreement makes a system easier to learn, it may not always be desired. Consider touch screen devices. When touch interfaces first appeared they broke the mental model for interacting with a computer.

Users typed using software instead of hardware. They swiped, tapped, and pinched without a mouse. While new and not part of anyone’s mental model at the time, all are still pretty easy to learn.

A good conceptual model allows people to predict the effects of an action. We expect to pull on a door handle. We assume things will move in the direction we swipe. A good conceptual model reveals itself through its interface.

2 principles we can use to help users predict how our designs work:

• Affordance—The physical characteristics of a design element suggest how to use it. A door handle suggests pulling. A door knob suggests turning. A button suggests pushing.
• Mapping—The relationship between design controls, their movements, and their effects on the element(s) they control. Moving a joystick to the left should result in something moving left.

We can also build in constraints to help prevent errors and generally build a forgiving design in order to encourage exploration.

Designing for Agreement

When developing a conceptual model we naturally consider our own mental model for how something should work, but as we’re designing for an audience we want to also consider the mental models they’ll likely bring to our design.

Usually we have different groups of people in our audience, each with different mental models. For example beginner, intermediate, and advanced users.

Someone very familiar with your subject or object is going to bring a very different mental model than a complete beginner. Mental models are also based on:

• goals
• motivation
• culture

We can use personas to see potential mental models for our audience and then design accordingly. We can also try usability testing and simple observation of people using our designs while we’re developing them.

Interaction Models

Interaction models are how people actually interact with a system. Communication between mental model and conceptual model occurs through the interface of the system.

Designers have complete and accurate conceptual models However designers have weak interaction models early on as we don’t know in advance how people expect our designs to function. We can use personas, etc. to predict mental models, but we won’t really know them.

Users start with an interaction model based on their mental model and then refine that model based on actual use. Through experience users can gain a complete and accurate interaction model.

A system’s interaction model could be completely different from either mental model or conceptual model, though in time users come to understand the interaction model through experience.

Optimal design occurs when we create an interface where interaction model and conceptual model meet. To do this we want to

• Use the system—To understand how a design works in practice we need to become a user of the design. However as designers we need to be aware that we aren’t typical users as we created the conceptual model. Using our own designs won’t always reveal problems in the interaction model.
• Observe others using the system—By watching others we again gain information about how our designs are used in practice. The advantage here is that we get to see how people unfamiliar with our conceptual model use our designs.

Designing with Conventions

Since an interaction model will begin as a user’s mental model, we can take advantage of standard mental models through design conventions.

Nothing says a link on a web page needs to be blue and underlined, but by making it blue and underlined we align conceptual, mental, and interaction models.

It’s a good idea to use conventions where possible because of this agreement between the 3 models.

However don’t force design into convention just to take advantage of the model. It’s better to have people learn to form a new mental model than require they use a mental model that doesn’t really fit the design.

Swiping pages on a touch device could have instead been a horizontal scroll bar that we tap, hold, and move, but aren’t you glad designers opted not to keep this model?

Contrast and Similarity

Consider the simple web page text link. The expectation (mental model) is clicking a link takes you to a new page. That’s at least the predominant model for a link.

The first time a link opened a new window or took you to a new place on the same page or triggered an ajax request it broke that predominant mental model.

Each of these different types of links is useful, but because they are different they should be designed differently to indicate in advance their different behavior.

Perhaps a different color for links that make ajax requests or an icon when a new window will open. The first time someone clicks those links they may still expect the default going to a new page, but by their second or third click they will have learned the different behavior.

The subtle change builds a new mental model and creates a new convention and trains our audience to use our design.

At the same time all these links share some characteristics. The standard link, new window link, and same page link all take you to a new location.

It makes sense therefore that each share some design characteristics. Maybe all 3 use a cool color and remain underlined.

Using contrast and similarity this way we can help people understand our conceptual models. Contrast with convention where there is disagreement in models and similarity with convention when there is agreement.

Summary

We all build mental models to help us predict how unfamiliar systems will work. We build them based on experience using similar systems, assumptions based on general knowledge, and observations of the new system.

Designers use their mental models to build things. Our mental model becomes the conceptual model of the thing we build.

When people use our designs they build an interaction model for how the design actually works. Over time they can develop an accurate and complete interaction model through experience with the system.

When conceptual model and mental model agree our designs are intuitive to use. When the models disagree the design needs to be learned.

We should do our best to understand the likely mental models our audience will bring to our designs. Where possible we should take advantage of conventional design patterns to indicate the model is correct. Where the model needs to be altered we should indicate that as well, by diverging from convention.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.