The Science of Great UI

Driving to the airport, I stop to fill my car with fuel. I look at the pump and see the buttons shown in Figure 1. On the left button, the word Regular has been all but destroyed by people pushing it repeatedly in hopes of getting a response. I, too, push that big yellow Regular button for a while until I spot the relatively tiny Push Here button below, which has apparently been deemed insufficient by the masses.

I park the car, walk to the bus that will take me to the airport terminal, and on the way see the well-worn path that Figure 2 shows. Like the thousands of travelers who have come before me, I forgo the paved sidewalk in favor of the path of greatest efficiency.

Inside the airport, I step into an elevator and saw the three buttons to select a destination, labeled CONCOURSE, RAMP, and TRAIN. At first I'm not sure whether RAMP or CONCOURSE will take me to my gate. Thankfully, to improve discoverability, someone posted tooltips made out of tape and permanent marker to the right of the buttons (see Figure 3). I pushed the button marked CC and headed for my gate.

The world is filled with evidence that people prefer to move and think efficiently. These three examples show how users have attempted to redesign the original UI.

Unlike in the physical world, in software it usually isn't so easy to see where your customers would like greater efficiency. This increases the burden on us as software designers to get it right the first time.

But how can we get it right? How can we design for greatest efficiency? There are several guidelines you can follow. These guidelines are based on research into what I call the Science of a Great UI. I use the term Science with intention, not only to blast the myth that UIs are subjective but also to convey the notion that rational thought and discipline can and should play a significant role in UI design.

Why Bother?
So why care about a great user experience? Great user experiences can put more money in your company's pocket. Great user experiences can create happy, productive customers. Happy productive customers are more loyal (and more likely to upgrade) and more likely to talk about your product—and that buzz can lead to more customers.

Even if your users are employees in your company, small UI changes can turn into big dollar savings. If you're more into altruism and care about how quickly the human race is moving into the future, then great user experiences will make the people of this planet more efficient and bring that future utopia (as created by all those super-efficient human beings out there) upon us all that much faster.

Is UI Subjective?
No, UI is not subjective. The quality of a user experience can be measured and compared, and a winner can be determined using agreed-upon criteria. When we talk about great user experiences, we're almost always talking about efficiency—efficiency of body and mind. The goal is to minimize the physical motion and mental effort required to perform a task.

Physical motion is easy to measure. For example, you can count the number of keys pressed, measure the distance the hands or eyes move, or record the time it takes to move or force required to click a mouse.

Mental effort can also be measured. You can time how long it takes to perform a task (consisting of both physical and mental effort) and subtract the portion dedicated to physical effort. For example, if it takes 10 seconds to perform a task and three of those seconds are spent in physical motion performing the task (e.g., moving the mouse, pressing keys), you can consider the seven motionless seconds as a representation of the mental effort required for that task.

There's also an emotional component of mental effort to consider. Concentration, frustration, and bewilderment can be side-effects of an inefficient UI and reveal areas of your product ripe for a UI fix. One of the best measurements of mental effort can come from paying attention to what's going on in your own mind as you use and explain your software.

It's important to note that simply getting one set of measurements is insufficient. The real value in measuring physical motion and mental effort is realized when the results from the current implementation of the UI are compared against alternatives. For example, it's valuable to be able to say things like, "Now it takes customers 14 seconds and five clicks to accomplish this task, but with the alternative we're proposing, they'll be able to accomplish the same task in three seconds and only one click."

Presenting with Clarity
Software developers present information. That's a big part of what we do. Here's how you can present information with clarity.

Information relevance. Everything onscreen is information. Data, lines between the data, background images, everything. However, the value or relevance of that information varies substantially. For example, consider the three tables in Figure 4. In Table 1, the lines separating the cells have a low relevance compared to the actual data in the cells. Tables 2 and 3 show what happens when you vary the contrast of the lines and data. In the somewhat exaggerated Table 2, the borders are strongly emphasized and the data is de-emphasized. In Table 3, the less relevant information is de-emphasized. When comparing Tables 2 and 3, the data in Table 3 is clearly easier to read. From this simple experiment, you can reach an important conclusion about clarity: Emphasis should match information relevance.

But what about Table 1? Was there a UI mistake in the way this table was rendered? If you compare Tables 1 and 3 using the guideline that emphasis should match information relevance, the answer is clear: There is a mistake in Table 1. Its lines are thicker than the lines used to render the text, and the contrast of the lines (black on white) matches the contrast of the text.

To recap, everything presented onscreen is information, but not all information is equally relevant. So, you must match emphasis to information relevance.

Information in parallel. Have you ever moved a dialog box or floating window just to see the information below it? For example, in Figure 5, the large Reorder Parameters dialog box obscures the source code below, demonstrating information in serial. Information presented serially can require greater mental effort to consume, especially when you need to see the older information that's now obscured by the new information. In contrast, Figure 6 shows the Reorder Parameters UI implemented a different way, demonstrating information in parallel. The flatter parallel UI permits parameter reordering without leaving the source code. All the important information is in view and accessible, making it easier to consume and compare. You should to strive to flatten UIs so that you can present more information in parallel.

Proximity. Consider the pie chart in Figure 7. If your customers are interested in what the larger purple pie slice (in the lower left) represents, they need to first move their eyes from that pie slice to the far right, then visually scan down the legend looking for a color match, and finally read the text. Consuming the data represented by this chart is an exercise in color matching and left-right eye movement. After a minute, it gets tedious. After an hour, the tedium turns to fatigue.

Contrast that pie chart with the one in Figure 8. The same data is rendered, but this time the labels are much closer to their corresponding pie slices. It's immediately obvious the larger purple slice represents Wire Transfers. In the time it takes you to learn that detail in the chart in Figure 7, you can easily and confidently consume the contents of the other slices in the chart in Figure 8.

Connected information and controls should be positioned near each other. Conversely, potentially dangerous or infrequently used controls shouldn't be positioned near controls that are used all the time. For example, you don't want to position your Delete All Without Undo button right next to your Save button.

Size and precision. From the standpoint of presenting with clarity, our eyes are attracted to bigger elements. You can implement emphasis by changing size, as you've seen with the ultra-wide lines in Figure 4's Table 2. And you've discovered you should match emphasis to information relevance. However, from the viewpoint of controls and interactivity, size plays a different role.



The larger the target, the easier it is to hit. Smaller targets require more precision and mental effort to hit. Since the goal of great UI is to make things easier (I call this "widening the path"), commonly targeted elements should be larger than rarely targeted elements. For example, if you look at the Office Ribbon in Microsoft Word, you'll notice that the Paste button is clearly larger than the Cut and Copy buttons. This makes sense because you're likely to paste more often than cut or copy.

In devices that use fingers for input, this guideline becomes even more important. For example, in the physical world, my number-one candidate for a resize overhaul is the control panel inside elevators. If you step into an elevator, what button are you most likely to press? If you're on the ground floor, it could be the button for any other floor. But if you're not on the ground floor, most likely you're going to push the button for the ground floor.

So, the button that takes you to the ground floor should be much bigger (e.g., wider and placed on its own row). This should be standard in all elevators, so that the millions of humans who use elevators can easily find and hit the big button to take them to the ground floor. This change could lead to hundreds of millions of dollars in saved productivity each year. Sound implausible? Read on to see how small changes to UIs can save big money.

Applying the UI Guidelines
As you've seen, proximity, size, and emphasis are all important in UIs. Figure 9 shows an example of a fuel pump UI that has multiple proximity and size violations. After you enter your ZIP code (12345 in this case), the instructions clearly tell you to Press Enter When Done. The button that millions of fuel customers want to press each day, ENTER, is positioned far, far away from the instructions, where the customers' gaze is focused. Thus begins the painful visual scan for the ENTER button. Take a moment and try to find the ENTER button, if you haven't already. It takes time to find it. But I bet you immediately saw the highly emphasized CANCEL button, with its saturated red background, large size, and high contrast. But even worse, that scary CANCEL button is positioned only a few millimeters to the right of the button you need to hit. Care and precision are required to successfully hit that tiny ENTER button.

The fix, as with most violations of great UI, is simple. You need to make the ENTER button bigger, increase its contrast, and move it closer to the display where the customers' eyes are focused. You should also make the CANCEL button smaller and move it farther away. Figure 10 shows the redesigned UI. With this UI, it's easier to find and hit the Enter key and harder to unintentionally cancel the transaction. Notice how easy it is to shift your gaze from the instructions in the display to the redesigned and repositioned Enter button below.

How Much Does Bad UI Cost?
By this time you might be wondering about the costs associated with bad UIs. Fortunately, you can get an estimate. In the case of the badly designed fuel pump UI, there are two apparent costs. First, there's an impact on customers' emotions. Customers might get frustrated—and might remember this experience and choose to get their fuel at competing stations next time. Second, there's an impact on customers' time. It takes about five seconds to locate and press the ENTER button in the original design. In the new design, they can locate and hit the Enter button in about two seconds. So, in addition to frustrating customers, the original design adds about three seconds to each customer's experience at the pump. Multiply this by roughly 25,000 fuel stations associated with this pump design in the United States, and the likely 300 customers visiting these fuel stations each day, and you get 22.5 million seconds wasted.

How much is a second worth? If the average income in the United States is around $50,000 for 49 weeks of work per year (or 7.056 million seconds), then those 22.5 million seconds work out to about $160,000 lost each day. So this design mistake seems to incur a hit of $58 million in wasted time every year.



But there's another cost from poor UIs—one that can potentially have a big impact on revenue. Consider what might happen if your competition puts out a software release whose UI leapfrogs your software's UI. This is what happened to Windows Mobile in 2007, when Apple introduced iPhone. In a single quarter, iPhone became the number-one selling mobile device in the United States, significantly cutting into Microsoft's market share. Microsoft is now trying to win back some of that market share with Windows Phone 7. If you want to see how its UI does with respect to the UI guidelines, see the sidebar "Redesigning the UI of Windows Phone 7" at the end of this article.

Providing a Great UI
Great UIs are important. Providing employees and customers with a great user experience translates into happier, more loyal employees and customers as well as cost savings and increased revenues. So, when you're designing or redesigning a UI, remember to:

And perhaps most important, remember that small changes to UIs can lead to big gains.

Mark Miller is a C# MVP with strong expertise in decoupled design, plug-in architectures, and great UI. Mark is chief architect of the IDE Tools division at Developer Express and is the visionary force behind CodeRush. Mark is a popular speaker at conferences around the world and has been writing software for three decades.

Sidebar: Redesigning the UI of Windows Phone 7
When Apple introduced iPhone in 2007, it quickly became the best-selling mobile device in the United States. The iPhone UI was the main reason why the iPhone beat Microsoft Windows Mobile in the marketplace. The iPhone provided a new slick multi-touch UI, while the Windows Mobile UI was essentially based on the desktop Windows UI.

After three years of development and half a billion dollars committed to advertising, Windows Phone 7 is trying to take back some of the smartphone market share. How does its UI do with respect to the UI guidelines I present in the main article? Let's take a look.

Figure A shows two screenshots of Windows Phone 7's home page. In this home page, you can change the color of the background tiles, but you're limited to bright colors. Notice that the relevant details—the icons and text on the tiles—are rendered in white on a bright background. Important information is rendered with low contrast, and the substantially less relevant sharp edges of the tiles are rendered with a high contrast against the black screen border. This isn't where you want customers to look. You want customers focused on the data. Figure B shows a redesign that follows the guidelines for creating great UIs.