When a user interface is for using—not for understanding—a product

The purpose of a user interface is not to explain how a product works. Instead, the interface is to help people use the product. Here’s an idea: if someone can use your product without understanding how it works, that’s probably just fine.

What model does the user interface reflect?

Models are useful to help people make sense of ideas and things.

An implementation model is how engineers and software developers think of the thing they’re building. It helps them to understand the product’s inner workings, the sum of its software algorithms and physical components. For example, a car mechanic has an implementation model of combustion engines.

A mental model is how someone believes a product behaves when they interact with it. It helps them to understand how to use the product. For example, a typical car driver has an implementation model of pressing the gas pedal to go faster and pressing the brake to slow down. This mental model doesn’t reflect how the car is built—there are many parts between the gas pedal and its spinning tires that typical drivers don’t know about.

The implementation model and the mental model can be very similar. For example, the mental model of using a wood saw is that “The saw makes a cut when I drags it back and forth across the wood.” This overlaps with the implementation model. In addition to the back-and-forth user action, the implementation model also includes an understanding of how the saw’s two rows of cutting edges—one for the forward stroke and one for the backward stroke—help to cut the wood fibers, break the cut fibers loose, and then remove the fibers from the kerf, and whether the saw’s tooth shape is better for cutting fresh wood or dried wood.

The mental- and implementation models can overlap, or not

The implementation model and the mental model can also be very different. Let’s consider another example: getting off a public-transit bus. The mental model of opening the exit doors is that “When the bus stops, I give the doors a nudge and then the doors open fully.” The implementation model of the exit doors is that, once the bus stops and the driver enables the mechanism, the exit doors will open when a passenger triggers a sensor. Now consider this: if the sensor is a touch sensor then the passenger’s mental model of “nudging the door” is correct. But, in fact, the sensor is a photoelectric sensor—a beam of light—and the passenger’s mental model of “nudging the door” is incorrect.

To exit, break the photoelectric beam

Getting bus passengers to break the photoelectric beam was a real-life design challenge that was solved in different ways. In Calgary, public-transit buses use a large, complex sign on exit doors to present a mental model that’s somewhat consistent with the implementation model:

Signage explains the complex implementation modelTO Signage for a simpler mental modelOPEN THE DOOR

      1. WAIT FOR GREEN LIGHT
      2. WAVE HAND NEAR DOOR HERE

In Vancouver, public-transit buses use a large, simple sign on exit doors to present a mental model that’s inconsistent with the implementation model:

TOUCH HERE ▓ TO OPEN

In fact, touch does not open the exit doors at all—not on the Vancouver buses or the Calgary buses I observed. Only when a passenger breaks the photoelectric beam will the doors open. In Calgary passengers are told to wave a hand near the door. A Calgary bus passenger might conclude that the exit door has a motion sensor (partly true) or a proximity sensor (not true).  In Vancouver passengers are told to touch a target, and the touch target is positioned so the passenger will break the photoelectric sensor beam when reaching for the target. A Vancouver bus passenger might conclude that the exit door has a touch sensor (not true).

Calgary bus passengers are more likely to guess correctly how the exit door actually works because the sign presents a mental model that partly overlaps the implementation model: the door detects hand-waving. But does that make it easier for someone without prior experience to exit the bus?

No, it’s harder.

It’s more difficult for a sign to get passengers to hold up a hand in the air in front of the door than it is to put a hand on the door. Here’s why: If you knew nothing about a door that you wanted to open outward, would you place a hand on the door and push? Or would you wave at it? From our lifelong experience with doors we know to push them open. Touching a door is more intuitive than waving at it, and that’s why “nudge the door” is a better mental model and thus an easier behaviour to elicit and train. The simpler mental model improves usability.

Rule of thumb for mental models

When understanding of a product’s inner workings are unnecessary, staying true to the implementation model risks increasing the complexity of the user interface. Instead, have the user interface, reflect a mental model that is simple, effective, and usable.

If you can relate the use of an object to a common experience or simple idea then do so—even if it doesn’t follow the implementation model. It is unnecessary for a system’s user interface to convey how the product was built. The user interface only needs to help users to succeed at their tasks.

No doubt there are cases where a lack of understanding of a product’s inner workings could cause danger to life and limb, or cause unintended destruction of property. In that case, the mental model needs to convey the danger or risk or, failing that, needs to overlap more with the implementation model.

Chip-card usability: Remove the card to fail

Card readerI went to the corner store, made a purchase, and tried to pay by using a chip card in a machine that verifies my PIN. My first attempt failed, because I pulled my card out of the card reader too soon, before the transaction was finished. I should add that I removed my card when the machine apparently told me so.

The machine said: “REMOVE CARD”

And just as I pulled my card out, I noticed the other words: “PLEASE DO NOT”

Have you done this, too…?

Since making a chip-card payment is an everyday task for most of us, I wonder: “What design tweaks would help me—and everyone else—do this task correctly the first time, every time?” Who would have to be involved to improve the success rate?

Ideas for a usable chip-card reader

A bit of brain-storming raised a list of potential solutions.

  • Less shadow. Design the device so it doesn’t cast a shadow on its own screen. The screen of card reader I used was sunk deeply below its surrounding frame, and the frame cast a shadow across the “PLEASE DO NOT” phrase. (See the illustration.)
  • Better lighting. Ask the installer to advise the merchant to reduce glare at the cash register, by shading the in-store lighting and windows.
  • Freedom to move. The device I used was mounted to the counter, so I couldn’t turn it away from the glare.
  • Layout. Place the two lines of text—”PLEASE DO NOT” and “REMOVE CARD”—closer together, so they’re perceived as one paragraph. When perceived as separate paragraphs, the words “REMOVE CARD” are an incorrect instruction.
  • Capitalisation. Use sentence capitalisation to show that “remove card” is only part of an instruction, not the entire instruction.
  • Wording. Give the customer a positive instruction: “Leave your card inserted” could work. But I’d test with real customers to confirm this.
  • Predict the wait time. Actively show the customer how much longer to wait before removing their card. 15 seconds…, 10 seconds…, and so on.
  • Informal training. Sometimes, the cashier tells you on which side of the machine to insert your card, when to leave it inserted, and when to remove it.
  • Can you think of other ideas?

Listing many potential ideas—even expensive and impractical ones—is a worthwhile exercise, because a “poor” idea may trigger other ideas—affordable, good ideas. After the ideas are generated, they can be evaluated. Some would be costly. Some might solve one problem but cause another. Some are outside of the designers’ control. Some would have to have been considered while the device was still on the drawing board. Some are affordable and could be applied quickly.

Making improvements

Designers of chip-card readers have already made significant improvements by considering the customer’s whole experience, not just their use of the card-reader machine in isolation. In early versions, customers would often forgot their cards in the reader. With a small software change, now, the card must be removed before the cashier can complete the transaction. This dependency ensures customers take their card with them after they pay. One brand of card reader is designed for customers to insert their card upright, perpendicular to the screen. This makes the card more obvious, and—I’m giving the designer extra credit—the upright card provides additional privacy to help shield the customer’s PIN from prying eyes. These changes show that the design focus is now on more than just verifying the PIN; it’s about doing it quickly and comfortably, without compromising future use of the card. It’s about the whole experience.

A good hardware designer works with an interaction designer to make a device that works well in its environment. A good user-experience designer ensures customers can succeed with ease. A good usability analyst tests the prototypes or early versions of the device and the experience to find any glitches, and recommends how to fix them.

Divergent thinking and collaboration

I watched an illustrated video of an illustrated speech by Ken Robinson on changing education paradigms. I believe the paradigm shifts he calls are also needed in the development process of software and information products.

In his speech, Robinson cites a study on divergent thinking—thinking in an unusual and unstereotyped way—which isn’t the same thing as creativity. Divergent thinking is an essential part of creativity. It is the ability to see:

  • lots of possible ways to interpret a question.
  • lots and lots of possible answers to a question.

Interaction designers engage in divergent thinking when they explore multiple ideas and try to “saturate the problem space.” Divergent thinking Initially, this exploration isn’t linear or convergent. Instead, it’s about trying different things, borrowing ideas, letting go of ownership and letting go of the idea that your idea is too good to edit or to combine with the ideas of others. Brainstorming is a structured form of divergent thinking. Only after the divergence—after the problem space is saturated with ideas—is it time to converge, to assess, to use judgement, and to make design decisions.

You can engage in a divergent-then-convergent process on your own, but for people new to the process, results are much better when they can borrow and combine each other’s ideas during the divergent stage. In the workplace this is called collaboration, and we need to add it to iterative, Agile development processes.

If development teams find collaboration difficult, it could be because of the paradigms we learned at school. As Robinson points out, the education system refers to sharing as copying, refers to re-using as plagiarism, and sees both as forms of cheating?

Although children innately engage in divergent thinking, Robinson cites a study from Break Point & Beyond that shows how our Return the fish to water ability to think divergently dries up as we pass through the education system. In school, divergent thinking is a fish out of water. At work, we need to put the fish back in the water.

It’s true. There’s a mismatch between what business leaders say they need and what schools teach, according to a 2009 Asian Development Bank publication, which reports:

What best demonstrates creativity?   (1 is highest) Business Schools
Problem identification or articulation 1 9
Ability to identify new patterns of behaviour or new combination of actions 2 3
Integration of knowledge across different disciplines 3 2
Ability to originate new ideas 4 6
Comfort with the notion of “no right answer” 5 11
Fundamental curiosity 6 10
Originality and inventiveness in work 7 4
Problem solving 8 1
Ability to take risks 9 (tied) 8
Tolerance of ambiguity 9 (tied) 7
Ability to communicate new ideas to others 11 5

In the table, above, compare where business ranks originality and inventiveness versus where schools rank it. Similarly, note the contrast between problem identification and problem solving.

Where to start? Sketching is one method that supports divergent thinking because a sketch intrinsically says: “As an idea, I am disposable. You can change me, or discard me, and then have more ideas.” Ideas are cheap, so have lots of them—that’s key to divergent thinking. There are people in your workplace who know this, already. People formally trained in design have been taught to use divergent thinking. Ask them for help. For other ways to learn to collaborate and to reward collaboration, an Internet search will identify many ideas and methods. One of the first things you’ll read is that collaboration requires support at all levels. Here’s a to-do list for executives:

  • Make sure the vision and mission are clearly communicated. This helps others to understand the problems to solve.
  • Remove the bureaucratic obstacles that strangle creativity.
  • Create a climate for an open flow of ideas, collaboration and knowledge sharing. Freedom and trust are key to creativity.
  • Embrace diversity. The more personality types (or team roles) are on the team, the more likely the project will succeed.
  • Give employees an opportunity to reap the rewards of the success they helped create. Stage celebrations to benchmark success.
  • Cultivate continuous learning. Revitalise by cultivating outside interests.