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?

Primum non nocere

First, do no harm. This phrase represents the concept of non-maleficence in medicine, purporting that it is sometimes better to do nothing than to do something harmful. It is a core tenet of medical ethics, taught to medical students around the world.

So why don’t design students get mandatory classes in design ethics?

Whitney Hess wrote a great article called, Guiding Principles for UX Designers, the title of which is self-explanatory. Her #2 guideline, don’t hurt anyone, is reminiscent of the Hippocratic Oath (again, medicine) but her explanation is much more general than what I’m getting at here.

First, Do Not Overdesign

Non-maleficence in medical ethics is in place to prevent medical practicioners from intervening when the intervention risks causing more harm than help. Design intervenes in the way things work, look, feel, behave, etc. by making decisions for users, consumers, clients, etc. so that they have to make the fewest decisions possible. That’s why we learn design, so that we know which decisions we should be making for other people.

Overdesign then, in this context, is making decisions for a user that impede the user’s freedom in ways that detract from her user experience.

Notice the two components there:

1. Impeding users’ freedom
2. Detracting from user experience

Component number two is important, because I am not trying to denounce the practice of impeding users’ freedom across the board. That’s what designers do. It only becomes a problem when users actually want or need the “freedoms” we “design away.”

Apple, for example, uses its closed iPhone/iPod+iTunes platform as a unique selling point. It takes away the freedom of downloading apps and music wherever you want but gives users added security and a more robust user experience. This is like my mom cooking me dinner: I have no “freedom” in what she makes, but I  know for (damn) sure that it’s going to taste wonderful. Linux operating systems, on the other hand, are more like cooking yourself; you have ultimate freedom in what you have for dinner, but it will only be good if you are skilled enough to make it good.

Dinner and Hegel’s Dialectic

Different UX philosophies imply different power structures between user and system. N.B. The term "casual user" refers not to users who use their systems casually but to those, who do not want to configure things, they want their systems to "just work."

Hegel’s Master-slave Dialectic (Herrschaft und Knechtschaft) illustrates how a Master is dependent on her slave on multiple levels. The principle is applicable to almost any relationship where one entity performs actions to the benefit of another; they might as well also be referred to as Lord-servant, Teacher-learner, Citizen-government, or User-system.

To reuse my example above, if my mom is cooking for me, I don’t have the freedom to choose what is served for dinner. This means that even though my mom is technically the “slave” (only because she’s cooking dinner) in this example, she is in the real position of power, because she makes the decisions on what I will eat. I give up my freedom willingly to have a wonderful meal. Once I learn more about cooking, I may want to cook for myself, trading ease-of-dinner for the freedom to customize and eat what I want.

So What Does That Mean for Design?

As designers, we are in charge of crafting systems for Users or slaves for Masters. In many instances, especially when we are designing for users who crave simplicity and ease-of-use above all else, because they do not have the time or patience to customize.

People trust us designers to make decisions to improve their lives.

In that, we have power. With great power comes great responsibility. It is our duty to take this power seriously and not, though negligence, misplaced good intentions, fear, or control-freakiness, abuse our power by overdesigning and making so many decisions for users that their experience is constrained and frustrating.

As a designer, I hereby swear to first, do not overdesign.

Yeah, that means doing my best to strike the perfect balance between simplicity and function, security and freedom. That’s where the art part of design comes in, and that’s why design is fun. If we had a designer’s oath, what do you think should be in it?

The Problem: What to Buy?

Being confronted with lots of choices at once can be daunting.

Being confronted with an entire supermarket of dinner possibilities may be daunting, especially if you aren’t a master chef or don’t have a lot of time to peruse the aisles. For each item, one has to answer at least three questions:

1. Do I feel like eating this?
2. Is this compatible with what I just bought?
3. Am I getting a good price for this?

This is assuming you even know how to answer these questions. When shopping for groceries, especially when I’m in a hurry, I tend to stick to the basics and get the same things. If I were a more practiced chef, I could probably make these kinds of decisions quicker, but here’s one way I can get away with being less than stellar in the kitchen.

One Solution: 1 + 2 + 3 + 4 “Pakketvoordeel”

The Dutch supermarket Albert Heijn has devised a brilliant way to make dinner shopping easier

Here comes Albert Heijn to the rescue! Albert Heijn (http://www.ah.nl)  is a Dutch supermarket chain that represents the high end of the countries’ supermarket spectrum with more selection, better service, and higher prices than most other supermarkets in the Netherlands.

The “pakketvoordeel” (Dutch for “package deal”) system groups a pre-selected array of easy-to-prepare food items into four groups. These four groups are distributed in a shopping cabinet into four shelves in such a way that any food items out of any one of the groups is compatible with any food item from any of the other groups and getting one food items from each group gives you a “complete meal.”

Oh, and all of the items in the shelf are labeled with a number from one to four, to make sure you don’t fall for the “I’ll just put it the wrong shelf” trick they do at supermarkets. Still can’t make up your mind as to which meat should go with which rice under which sauce and side? There are recipes on the front shelf that tell you which combination of elements makes up which meal.

Any food item from each of the four groups is compatible with food items from the other groups

The perhaps best part is that any combination of food items from all four groups always costs nine Euro. Remember the three questions you have to ask yourself when you shop freestyle? With the “pakketvoordeel,” everything’s compatible with everything else, and it always costs the same, effectively taking away two decisions you have to make.

Why I Love It

This takes away much of the guesswork involved in grocery shopping. Instead of having to make three decisions, I make just one: eat it or not? It’s the typical trick of reducing the number of possible choices to guide users (in this case “shoppers”) into making a decision. It’s easier for the user, and it’s profitable for the vendor. How many times have you refrained from buying something like cookies, because you couldn’t decide which ones you wanted?

How It Could Be even Better

If there were a color-coding system or perhaps a vertical grouping scheme dividing the recipes, it would make choosing the right ingredients for each recipe faster and easier. This illustrates the grouping more explicitly without taking away the ability to “cheat” and mix-match.