A UX State of Mind

Visual hierarchy communicates the relative importance of these three controls. 1: "Brew" button, 2: "Foam" button, 3: Water knob.

I was in a restaurant the other day and came across this wonderful coffee machine, the Saeco Odea. Two things caught my eye; first, the huge “coffee” button smack in the middle of the machine’s face and second, the apparent lack of many other controls.

There are three other buttons, but they’re for maintenance stuff; I won’t get into them here.

This is what the design tells me:

1. The big button with a coffee mug on it is my most important button and will be used most frequently.
2. If I want to froth milk, I can do so with the knob next to the steam wand that looks just out-of-place enough to be noticed.
3. This (well-marked) knob allows me to quickly adjust how “big” the coffee is going to be that comes out when I press button number 1.

How It Looks

There’s no way I can miss that huge button; it’s like the big, fat green button on a copier for “gimme one copy.” It affords instant activation of the machine’s default action, “make coffee.”

I love that the water knob is basically a part of the big button. They’re positioning (and the lightweight feel of turning the knob) gives me the feeling that it’s not a problem for me to change the amount of water for each and every coffee I make, if I want to. I’ve seen coffee machines where you have to set the water level with buttons each time (like an alarm clock); that makes me reluctant to customize my coffee, giving the water level a more “set in stone” feeling.

There are two good things about the steam adjustment knob. Firstly, it’s a knob and not a button, which one also sees often in coffee machines. I’m no expert milk frother, but if I was, I’d sure love to have something to twist to make the machine do what I want. Secondly, it’s placed so as to break one usability guideline in favor for another…

How It Works

Here, we see that the process of making coffee (blue) is localized in the center, while frothing milk (yellow) is all on the left.

The brilliant thing about putting the steam knob to the left side over the steam wand, instead of in the middle with the rest of the controls, is that it creates a task-based control grouping.

The machine exists for one purpose: to make coffee. Some coffee preparations require frothing milk, so the machine does that, too. That’s it.

The two are separate processes though, with no shared control elements. The Odea cleverly separates them so that task 1, making coffee, is in the front and center of the machine. As you can see in the picture to the right, these steps go in a straight line from the bottom, up.

1. Place mug under the dispenser
2. Adjust amount of water
3. Press the button

Similarly, task 2, frothing milk is localized and separated from task 1. Again, from the bottom, up.

1. Place mug under the steam wand.
2. Activate and adjust the steam for the milk.

Why I Love It

Service in a restaurant can be fast-paced; there is usually too little time to learn how to use a new coffee machine. With clear affordances and visual hierarchy, one knows in a glance how to work this one. Even experienced, routine use is made faster this way. There is no menu through which to navigate and no options to select, just one button to press. The button is big too, also making things faster (Fitts’ Law, anyone?).

All this means a simple, fluid user experience that is almost like an afterthought, letting people just make coffee. Isn’t that the point, after all?

Salsa Dancers in a Club

When we try to understand things, we model them so that we can more easily comprehend the elements of concepts and phenomena that we need to accomplish our goals. Why then do we not apply the idea of modeling more often in learning and communication?

What is a Model, Really?

A model is a simplified representation of some reality, designed to allow us to more quickly comprehend that reality. A mental model, on the other hand, is the representation of that reality in our minds. The big difference is that mental models are inside our heads, and we cannot share them, whereas other models are explicit; they can be seen, shared, and compared.

Models are representations of reality we use to enhance our mental models of reality. As our mental models become more detailed and accurate, we learn.

Take a car as an example. A car is an system that exists in reality. A child has a very simple mental model of a car that comprises of a general idea of what it is for and perhaps how to open doors and windows. When a person learns to drive, s/he increases the detail of her/his mental model by using explicit models like driving manuals and computer simulation programs. A driver’s mental model thus includes things like how to start the car, turn radius, clutch operation, etc.

Auto mechanics have even more detailed mental models of a car, because they know more about its inner workings. A driver knows that when s/he turns the steering wheel, the wheels turn as well. A mechanic knows that turning the steering wheel turns the steering shaft, which turns the pinion, which moves the rack, which pulls the tie rod and steering arm, etc. The mechanic’s mental model is more detailed than the driver’s, because s/he needs to know more to fix cars than the driver needs to know to drive them.

Using Models to Communicate

Since mental models are inside our heads, we need to use explicit models when trying to share our mental models of things with others. This is communication, and teachers do it by drawing on chalkboards, designers do it by drawing sketches and building prototypes, and parents do it when they tell their kids they were flown in by a stork.

Learning a simple model of a concept in the beginning makes learning at an advanced stage easier than trying to learn advanced concepts from the start.

The problem is that models are not always used where they could be useful. In an educational or training context, some classmates of mine and I discussed whether it is better to learn how to do something the “right way” from the beginning (what I call here straight-up learning) or to learn an easy way first to master the basic concepts, then learn the “right way” later. The discussion was in salsa class, and the debate was if it is better to learn an easy version of the Salsa Casino step before learning the real step or to learn the real step from the beginning.

My position is that the learning curve is steeper (faster skill aquisition across time) with learning the model first. Indeed, when we learned the advanced step, there was a sort of delay caused by having to first “unlearn” our learned habit of the easy step. However, with the easier step in the beginning, we were already able to learn some figures and turns before learning the advanced step. From the perspective of learning experience, it would have been much more frustrating and have delayed the reward of successful learning if we would have been taught the advanced step from the beginning.

So, What Does That Mean?

When designing a training course or class curriculum for complex concepts or procedural knowledge, please consider doing your learners/students the favor of teaching them a simplified version of the concept before throwing them into the deep end immediately. They’ll learn faster and have a better time doing it!

Furthermore, when communicating, try to remember that the closer your explanation or model is to your audience’s mental model, the quicker and better they’ll understand what you’re trying to say. Happy modeling!