User Interface Design - Taking the Good with the Bad - 12 November 2006

by Mike Padilla

Read this article in Chinese (translated by Zhang Liang, proofread by Zhou Jiong)

The key to any successful marriage is compromise. While things may not always go the way you want them to, in the end, coming to an agreement helps you to achieve a greater good. The same holds true for user interface (UI) design. After all, what else is the user interface if not a marriage of form and function?

Designing the UI is fundamentally an exercise in compromise—not compromise between designers and other project stakeholders (usability should never be sacrificed as a result of office politics)—but compromise between the drawbacks and benefits of design decisions. Every UI decision, from a pixel’s precise placement to the entire site’s information architecture, should be made judiciously. Careful consideration of the benefits each design decision affords and costs its users is essential. It’s the sometimes-subtle expense that many people often overlook, and every UI decision does have expense. Educated compromise across all UI decisions is essential to creating the best interface possible, and is, ironically, required if you are to avoid designing a compromised interface.

You can’t have your cake and eat it too

n creating the UI, you must cope with two primary interrelated limitations: the finite amount of information that can be conveyed via a single screen, and the finite amount of information that a user can process at one time. Show too much information on a single screen and users have to wade through the ensuing clutter; show too little and users have to guess their way to their destinations. A good design uses the screen real estate effectively to leverage the user’s understanding to effectively communicate between application and user.

Your canvas, the monitor screen, is constrained—X pixels wide by Y pixels high. As such, it’s important to conserve resources; every pixel you use comes at a price. Keeping information density balanced is a challenge when you’re trying to create a UI that communicates efficiently. Every design decision has an expense because each additional piece of information on the screen increases the information density, competes for the user’s limited attention and cognitive processing, and makes recognition more difficult.

Take the good with the bad

Whenever cost accompanies benefit, compromise is required. Ideally, you can maximize the good and minimize the bad. The fundamental question is, does the benefit that the design affords outweigh the cost? Not only does it outweigh it, but also does it outweigh it by the highest margin in comparison to all alternative design solutions? Only if it does so should it be prescribed as the best design solution.

The cost/benefit compromise cuts across all levels of UI development, from navigation design to font size. The bigger the design decision, the larger the potential impact on the UI. Small design decisions may seem insignificant by themselves, but in aggregate they too can have a large impact on the UI. Whether big or small, each design decision should be made judiciously after evaluating usability and the net UI benefit.

Some Contrasting Design Decisions

Costs and Benefits of Design Decisions

The method behind the madness

In reality, you may not deliberately assess the pros and cons of every design decision. This process may be second nature. You can instinctively know whether a drop-down box or radio buttons should be used, or whether one layout is better than another. But what may seem instinctive is actually an evaluative process based on your related experience and acquired knowledge. The design-compromise evaluation is still happening, it just takes place subconsciously. It may be so subconscious that it takes some work to explain why one solution was chosen over another, but if you unravel the process, a justification based on sound usability principles should be at the core.

Delineating the underlying principles may not seem necessary during the design process if it just comes to you naturally, but you should always be able to clearly and logically rationalize your design. If you’re working with others, they may make suggestions that reduce usability, and it’s important to be able to rationalize—and if need be, defend—your decisions. By exposing the ubiquitous underlying nature of compromise across all UI design, you can lay the foundation for your defense. After all, you could be the best UI designer in the world, but if you let anyone with an opinion (and who doesn’t have an opinion?) contribute to every facet of an application’s UI design—the dreaded design by committee—by the time your project sees production, it will be reduced to an ugly cousin of its former self.

Good – Bad = Net Usability

Have you noticed that you can immediately identify several deficiencies in any interface? That’s because of the nature of compromise in UI design. Even the best design solutions have some drawbacks, and team members may point these out in an effort to change the design. But every design solution has some deficiencies. Every single one. The presence of such deficiencies does not make a design solution a bad one. What makes one design solution better than another is the overall net usability that it offers (net, as in net result, not as in inter_net_). The good – the bad = the net usability. The net value of usability is the ultimate measure.

Critiques begin to fly. The font is too small, the icon is too cryptic, and the abbreviations are too abbreviated. At first blush, and especially to the untrained ear, such assessments may appear valid. In fact, the base claims are probably valid; it’s the too that should be challenged. After all, perhaps the font is small, the icon is cryptic, and the abbreviation is very abbreviated. But the word too implies that it is excessive. To determine whether it is or not, you need to consider both the cost and benefits. Back-seat designers can immediately see the cost of a specified design, but they often fail to see the benefit. The inverse applies to their suggested solution—they can see the benefit but not the cost. You need to objectively evaluate the net usability across each proposed solution to decide which is best.

Without understanding the true nature of compromise in UI design, you will likely make flawed design suggestions. To effectively evaluate the cost and benefit of each design decision that affects the UI, you need insight across many fields, from cognitive psychology to human factors to graphic design. A large knowledge base centered on an understanding of how users interact with applications is necessary to accurately evaluate a UI. It is often not a simple black-and-white issue, because the respective costs and benefits have to be gauged relative to alternative solutions.

For example, the font on your web page may be small, and consequently a bit more difficult to read for some older users. That’s the cost. But it affords a lot more information on each screen, which means less scrolling. Less scrolling means fewer motor tasks and less cognitive load, because now with more information on a single screen, comparative tasks are more likely to involve information that is currently viewable. Now assume with this example that user demographics show that 90% of your users are between the ages of 21 and 30. So while the font may be more difficult to read than a larger size for some users, the net usability of the design decision is highest, compared with other solutions.

The selected design solution is not free of any deficiencies, but it provides the best usability available. You are compromising, taking the good with bad, but choosing the solution that offers the highest net good for your specific application usage. Only by considering the design impact across its entire application can you accurately determine which design offers the highest net good.

Understanding the omnipresent nature of compromise in UI design is essential across the entire project team so that a general awareness of the larger, tangled set of issues that surround UI design can be fostered. By understanding, evaluating, and explaining the compromises associated with each design decision, you can design for usability and strongly advocate for it throughout the design review process.

Measuring success

When evaluating the net usability of one design versus another, a logical process should be followed to effectively evaluate the compromises that accompany each. To judge the good with the bad, you need a UI ruler by which to measure. You can assess the quality of a UI with a handful of factors:

* Ease of learning and memorability * Efficiency of use * Error frequency, severity, and recovery * Subjective satisfaction

Depending on the ultimate use of the application, each factor may be of variable importance. For example, efficiency of use would be more important for a highly used application than for a brochure-like marketing website, whereas the reverse may be true when it comes to subjective satisfaction. Each UI design decision that is challenged can be evaluated by judging it against each of these four factors.

Macro Compromise

Compromise does not end with screen-level design, either. It’s threaded throughout larger issues in UI design, including supported web demographics (which browser, platform, monitor resolution, etc. the application will operate on), thin/fat/rich client architecture, development time, and cost issues. Usability still plays a large role in evaluating such compromises, but other real-world mitigating issues start to creep in. For example, if one design solution is clearly superior to another, does that justify an additional ten thousand dollars in development expenses? Is a particular piece of functionality (the good) worth the monetary cost (the bad)? Or conversely, is the budget savings (the good) worth the decrease in application usability (the bad)? Such decisions need to be evaluated as what they truly are, compromises, and acted upon accordingly.

Simply recognizing the fact that UI design is based on a foundation of compromise can go a long way in getting the project team to understand the why behind designs. Doing so will reduce the risk of derailing an optimal UI design that is inaccurately critiqued by those who only see one side of the story. By clearly showing the costs, the benefits, and the corresponding net value of your designs, you can educate others while championing your vision. After all, if we can all just compromise, we can live with the good and the bad. Just don’t give us the ugly.

Mike Padilla currently serves as the User Experience Design Director for web applications at Radian Guaranty (RDN) where he oversees everything from information architecture to branding integration to rich client UI architecture. He’s led front-end development efforts for such companies as Fleet Credit Cards, Mellon Private Asset Management, The Bank of New York, and Bessemer Trust and his work has been featured by Macromedia for its usability. He has recently written articles for IBM developerWorks, User Experience Magazine, and The Rational Edge.

Possible Related Articles:

• The Concept of Universal Design
• Five Rules for Communication between Machines and People
• The application of model matching principle in user interface design - Part 2
• The application of model matching principle in user interface design - Part 1
• Easy, Intuitive and Metaphor, and other meaningless words
• The Gap between 25 Seconds and 5 Seconds
• Moving UX into a Position of Corporate Influence: Whose Advice Really Works?
• Meaning of Chopsticks in Asia
• Design for emotion: ready for the next decade?
• Why do people become attached to their products?