This essential interaction design guide examines mobile apps, touch interfaces and screen size considerations, examining goal-directed design methodology, product design methods, design for mobile platforms and consumer electronics, contemporary interfaces, interface recommendations, and much more.

About Face

Preface

This book has a simple premise: If we design and develop digital products in such a way that the people who use them can easily achieve their goals, they will be satisfied, effective, and happy. They will gladly pay for our products—and recommend that others do the same. Assuming that we can do so in a cost-effective manner, this will translate into business success.

A Design Process for Digital Products

The outcome of any design effort ultimately must be judged by how successfully it meets the needs of both the product’s users and the organization that commissioned it. No matter how skillful or creative the designer, if she does not have clear and detailed knowledge of the users she is designing for, the problem’s constraints, and the business or organizational goals that are driving the design, she will have little chance of success.

Understanding the Problem: Design Research

Once you have spent some time out in the field investigating your users’ lives, motivations, and environs, the question naturally arises: How do you use all this great research data to forge a successful product design? You have notebooks full of conversations and observations, and it is very likely that each person you spoke to was slightly different from the others. It is hard to imagine digging through hundreds of pages of notes every time you need to make a design decision. Even if you had the time to do so, it isn’t entirely obvious how these notes should inform your thinking. How do you make sense of them and prioritize?

Modeling Users: Personas and Goals

In the two previous chapters, we talked about how to gather qualitative information about users and create models using that information. By carefully analyzing user research and synthesis of personas and other models, we create a clear picture of our users and their respective goals, as well as their current situation. This brings us, then, to the crux of the whole method: how we use this understanding of people to create design solutions that satisfy and inspire users, while simultaneously addressing business goals and technical constraints.

Setting the Vision: Scenarios and Design Requirements

In the preceding chapter, we talked about the first part of the design process: developing scenarios to imagine ideal user interactions and then defining requirements from these scenarios and other sources. Now we’re finally ready to design .

Designing the Product: Framework and Refinement

In the Introduction to this book, we described the Goal-Directed method as consisting of three p’s: principles, patterns, and processes. However, there’s a fourth “p” worth mentioning— practices. This book mostly concerns itself with the first three, but in this chapter we’d like to share a few thoughts about the practice of Goal-Directed design and how design teams integrate into the larger product team.

Creative Teamwork

In Part I, we discussed how to appropriately sequence the decisions to define and design a desirable and effective product. But how do we make these decisions? What makes a design solution good? As we’ve already discussed, a product’s ability to meet the goals and needs of users while also accommodating business goals and technical constraints is one measure of design quality. But does a product solution have recognizable attributes that enable it to accomplish this successfully? Can we generalize common solutions to apply to similar problems? Must a design possess universally applicable features to make it a “good” design?

A Basis for Good Product Behavior

In The Media Equation (Cambridge University Press, 1996), Stanford sociologists Clifford Nass and Byron Reeves make a compelling case that humans treat and respond to computers and other interactive products as if they were people. We should thus pay real attention to the “personality” projected by our digital products. Are they quietly competent and helpful, or do they whine, nag, badger, and make excuses?

Digital Etiquette

As you might recall from Chapter 5, the first question to answer as you begin to design the interaction framework of a digital product is “What platform and posture are appropriate?”

Platform and Posture

Most users of technology know all too well that buying a new digital appliance or downloading a new software app often means several days of frustration while learning a new interface. On the other hand, many experienced users of digital products may find themselves frustrated because that product treats them like beginners. It seems impossible to find the right balance between catering to the needs of the first-timer and the needs of the expert.

Optimizing for Intermediates

If our goal is to make the people who use our products more productive, effective, and engaging, we must ensure that users remain in the right frame of mind. This chapter discusses a kind of mental ergonomics. It describes how we can ensure that our products support user intelligence and effectiveness. It also covers how we can avoid disrupting the state of productive concentration that we want our users to be able to maintain.

Orchestration and Flow

Digital products too often contain interactions that are top-heavy, requiring unnecessary work for users. Interacting with an interface always involves some work on the part of the user. The goal of designers (or at least one of the more important ones) is to minimize that work, while at the same time enabling users to achieve their goals. If designers and developers don’t pay careful attention to the human actions required to operate their technology, the result can be a taxing experience for the users. They will struggle to relate their mental models of the activities they want to perform to the product interface that has been engineered.

Reducing Work and Eliminating Excise

When the first edition of this book was published, interface designers often spoke of finding the right visual and behavioral metaphors on which to base their interface designs. In that decade or two following the introduction of the Apple Macintosh, it was widely believed that filling interfaces with visual representations of familiar objects from the real world would give users a pipeline to easy learning. As a result, designers created interfaces resembling offices filled with desks, file cabinets, telephones, and address books, or pads of paper, or a street with signs and buildings.

Metaphors, Idioms, and Affordances

In the world of digital technology, the place where implementation-model thinking is most strikingly apparent is in data management: entering data, storing it, and finding it again.

Rethinking Data Entry, Storage, and Retrieval

In the early days of the digital revolution, a significant portion of a software application’s graphical interface was taken up by dialoges and messages telling users what they did wrong, or warning them about what their computer or software was unable to handle due to real or presumed technical limitations. The first edition of About Face was released during that time, and was, as you can probably imagine, quite critical of this state of affairs.

Preventing Errors and Informing Decisions

As we discussed in Part I, personas and scenarios help us focus our design efforts on the goals, behaviors, needs, and mental models of real users. In addition to the specific focus that personas can give a design effort, some consistent and generalizable patterns of user needs should inform how our products are designed. In this chapter, we’ll explore some strategies for serving these well-known needs: learnability and help , customizability, localization and globalization, and accessibility .

Designing for Different Needs

As an interaction designer, you put a lot of effort into understanding your product’s users. You also spend time crafting the interface’s behaviors and the presentation of the content that helps users achieve their goals. However, these efforts will fall short unless you also dedicate significant work to clearly communicating to your users both what content is available and how they can interact with it. With interactive products this communication almost always happens visually, via a display. (With custom hardware, you can also communicate some product behavior through physical properties.)

Integrating Visual Design

Most modern desktop interfaces derive their appearance from the Xerox Alto, an experimental computer system developed in 1973 at Xerox’s Palo Alto Research Center (PARC), now PARC, Inc. PARC’s Alto was the first computer with a graphical interface and was designed to explore the potential of computers as desktop business systems. In creating the Alto, PARC researchers developed what became the four pillars of the desktop UI paradigm: windows, icons, menus (and other widgets), and pointer, or WIMP for short.

Designing for the Desktop

The mobile device user experience changed forever in June of 2007, when Apple introduced the iPhone. Almost overnight, the definition of what it meant to be a mobile information device experienced a radical reboot. Before the iPhone’s introduction, the mobile user experience meant tiny hardware keyboards on the device surface or hidden within a sliding drawer. It also meant small, clumsy, resistive mono-touchscreens that more often than not required a stylus to operate effectively without resorting to a miniature five-way D-pad that was equally cumbersome to use.

Designing for Mobile and Other Devices

The advent of the World Wide Web was initially both a boon and a curse for interaction designers. For perhaps the first time since the invention of graphical user interfaces, corporate decision makers began to understand and adopt the language of user-centered design, and the term “user experience” came into vogue among business executives far and wide. On the other hand, the limitations and challenges of web interactivity, which are a result of its historical evolution, set back interaction design by nearly a decade.

Designing for the Web

Even though they may have somewhat different visual design trappings from platform to platform, controls and dialogs constitute a common language for users interacting with most of the digital products available today. These standard objects are available as part of most GUI development libraries, but this doesn’t prevent their misuse in many software applications.

Design Details: Controls and Dialogs

Appendix A: Design Principles

Adlin, Tamara and Pruitt, John. 2010. The Essential Persona Lifecycle . New York: Morgan Kaufmann. Alexander, Christopher. 1964. Notes on the Synthesis of Form . Cambridge, MA: Harvard University Press. Alexander, Christopher. 1979. The Timeless Way of Building . New York: Oxford University Press. Alexander, Christopher, et al. 1977. A Pattern Language . New York: Oxford University Press. Bertin, Jacques. 2010. Semiology of Graphics . Redlands, CA: Ersi Press. Beyer, Hugh and Holtzblatt, Karen. 1998. Contextual Design . New York: Morgan Kaufmann. Borchers, Jan. 2001. A Pattern Approach to Interaction Design . Hoboken, NJ: John Wiley & Sons. Borenstein, Nathaniel S. 1994. Programming as if People Mattered . Princeton: Princeton University Press. Buxton, Bill. 1990. “The ‘Natural’ Language of Interaction: A Perspective on Non-Verbal Dialogues.” Laurel, Brenda, ed. The Art of Human-Computer Interface Design . Boston: Addison-Wesley. Carroll, John M., ed. 1995. Scenario-Based Design . Hoboken, NJ: John Wiley & Sons. Carroll, John M. 2000. Making Use: Scenario-Based Design of Human-Computer Interactions . Cambridge, MA: The MIT Press. Constantine, Larry L. and Lockwood, Lucy A. D. 1999. Software for Use . Boston: Addison-Wesley. Constantine, Larry L. and Lockwood, Lucy A. D. 2002. forUse Newsletter #26, October. Cooper, Alan. 1999. The Inmates Are Running the Asylum . Indianapolis: Sams. Crampton Smith, Gillian and Tabor, Philip. 1996. “The Role of the Artist-Designer.” Winograd, Terry, ed. Bringing Design to Software . Boston: Addison-Wesley. Csikszentmihalyi, Mihaly. 1990. Flow: The Psychology of Optimal Experience . New York: Harper & Row. De Saint-Exupéry, Antoine. 2002. DeMarco, Tom and Lister, Timothy. 2013. Peopleware , Third Edition. Boston: Addison-Wesley. Dillon, Andrew. “Beyond Usability: Process, Outcome and Affect in Human Computer Interaction.” Paper presented at the Lazerow Lecture at the Faculty of Information Studies, University of Toronto, March 2001. Retrieved from www.ischool.utexas.edu/~adillon/publications/beyond_usability.html . Dreyfuss, Henry. 2003. Designing for People . New York: Allworth Press. Gamma, Erich, et al. 1995. Design Patterns: Elements of Reusable Object-Oriented Software . Boston: Addison-Wesley. Garrett, Jesse James. 2011. The Elements of User Experience , Second Edition . San Francisco: New Riders. Gellerman, Saul W. 1963. Motivation and Productivity . New York: Amacom Press. Goodman, Elizabeth, Kuniavsky, Mike, and Moed, Andrea. 2012. Observing the User Experience . New York: Morgan Kaufmann. Goodwin, Kim. 2001. “Perfecting Your Personas.” Cooper Newsletter , July/August. Goodwin, Kim. 2002. “Getting from Research to Personas: Harnessing the Power of Data.” User Interface 7 West Conference. Goodwin, Kim. 2002a. Cooper U Interaction Design Practicum Notes. Cooper. Goodwin, Kim. 2009. Designing for the Digital Age . Hoboken, NJ: John Wiley & Sons. Grudin, J. and Pruitt, J. 2002. “Personas, Participatory Design and Product Development: An Infrastructure for Engagement.” PDC ’02: Proceedings of the Participatory Design Conference . Heckel, Paul. 1994. The Elements of Friendly Software Design . San Francisco: Sybex. Hoober, Steven and Berkman, Eric. 2012. Designing Mobile Interfaces . Sebastopol, CA: O’Reilly. Horn, Robert E. 1998. Visual Language . Bainbridge Island, WA: Macro Vu Press. Horton, William. 1994. The Icon Book: Visual Symbols for Computer Systems and Documentation . Hoboken, NJ: John Wiley & Sons. Johnson, Jeff. 2007. GUI Bloopers 2.0 . New York: Morgan Kaufmann. Jones, Matt and Marsden, Gary. 2006. Mobile Interaction Design . Hoboken, NJ: John Wiley & Sons. Kahneman, Daniel. 2011. Thinking, Fast and Slow, NY: Farrar, Straus and Giroux. Kobara, Shiz. 1991. Visual Design with OSF/Motif . Boston: Addison-Wesley. Korman, Jonathan. 2001. “Putting People Together to Create Good Products.” Cooper Newsletter , September. Kramer, Kem-Laurin. 2012. User Experience in the Age of Sustainability . New York: Morgan Kaufmann. Krug, Steve. 2014. Don’t Make Me Think, Revisited. San Francisco: New Riders. Kuutti, Kari. 1995. “Work Processes: Scenarios as a Preliminary Vocabulary.” Carroll, John M., ed. Scenario-Based Design . Hoboken, NJ: John Wiley & Sons. Laurel, Brenda. 2013. Computers as Theatre , Second Edition. Boston: Addison-Wesley. Lidwell, William, Holden, Kritina, and Butler, Jill. 2010. Universal Principles of Design , Revised and Updated Edition. Boston: Rockport Publishers. Macdonald, Nico. 2003. What Is Web Design? Brighton, UK: RotoVision. McCloud, Scott. 1994. Understanding Comics. Northampton, MA: Kitchen Sink Press. Mikkelson, N. and Lee, W. O. 2000. “Incorporating user archetypes into scenario-based design.” Proceedings of UPA 2000 . Miller, R. B. 1968. “Response time in man-computer conversational transactions.” Proceedings of the AFIPS Fall Joint Computer Conference, vol. 33, 267–277. Mitchell, J. and Shneiderman, B. 1989. “Dynamic versus static menus: An exploratory comparison.” SIGCHI Bulletin , vol. 20, no. 4, 33–37. Moggridge, Bill. 2007. Designing Interactions . Cambridge, MA: The MIT Press. Morville, Peter. 2005. Ambient Findability . Sebastopol, CA: O’Reilly. Morville, Peter and Rosenfeld, Louis . 2007. Information Architecture for the World Wide Web , Third Edition. Sebastopol, CA: O’Reilly. Mulder, Steve and Yaar, Ziv. 2006. The User Is Always Right . San Francisco: New Riders. Mullet, Kevin and Sano, Darrell. 1995. Designing Visual Interfaces . Upper Saddle River, NJ: Prentice Hall. Neil, Theresa. 2014. Mobile Design Pattern Gallery , Second Edition. Sebastopol, CA: O’Reilly. Nelson, Theodor Holm. 1990. “The Right Way to Think About Software Design.” Laurel, Brenda, ed. The Art of Human-Computer Interface Design . Boston: Addison-Wesley. Newman, William M. and Lamming, Michael G. 1995. Interactive System Design . Boston: Addison-Wesley. Nielsen, Jakob. 1993. Usability Engineering . Waltham, MA: Academic Press. Nielsen, Jakob. 2000. Designing Web Usability . San Francisco: New Riders. Nielsen, Jakob. 2002. UseIt.com . Norman, Don. 2013. The Design of Everyday Things , Revised and Expanded Edition. New York: Basic Books. Norman, Donald A. 1994. Things That Make Us Smart . New York: Basic Books. Norman, Donald A. 1998. The Invisible Computer . Cambridge, MA: The MIT Press. Norman, Donald A. 2005. Emotional Design . New York: Basic Books. Nudelman, Greg. 2013. Android Design Patterns . Hoboken, NJ: John Wiley & Sons. Papanek, Victor. 1984. Design for the Real World . Chicago: Academy Chicago Publishers. Perfetti, Christine and Landesman, Lori. 2001. “The Truth About Download Times.” UIE.com . Pinker, Stephen. 1999. How the Mind Works . New York: Norton. Raskin, Jeff. 2000. The Humane Interface . Boston: Addison-Wesley. Reimann, Robert. 2002. “Perspectives: Learning Curves.” edesign magazine, December. Reimann, Robert. 2005. “Personas, Scenarios, and Emotional Design.” UXMatters.com . Reimann, Robert M. 2001. “So You Want to Be an Interaction Designer.” Cooper Newsletter , June. Reimann, Robert M. 2002. “Bridging the Gap from Research to Design.” Panel presentation, IBM Make IT Easy Conference. Reimann, Robert M. and Forlizzi, Jodi. 2001. “Role: Interaction Designer.” Presentation to AIGA Experience Design 2001. Rheinfrank, John and Evenson, Shelley. 1996. “Design Languages.” Winograd, Terry, ed. Bringing Design to Software . Boston: Addison-Wesley. Rogers, Yvonne, Sharp, Helen, and Preece, Jenny. 2011. Interaction Design , Third Edition. Hoboken, NJ: John Wiley & Sons. Rombauer, Irma S. and Becker, Marion Rombauer. 1975. The Joy of Cooking . New York: Scribner. Rudolf, Frank. 1998. “Model-Based User Interface Design: Successive Transformations of a Task/Object Model.” Wood, Larry E., ed. User Interface Design: Bridging the Gap from User Requirements to Design . Boca Raton, FL: CRC Press. Saffer, Dan. 2010. Designing for Interaction , Second Edition. San Francisco: New Riders. Saffer, Dan. 2013. Microinteractions . Sebastopol, CA: O’Reilly. Sauro, Jeff and Lewis, James R. 2012. Quantifying the User Experience . New York: Morgan Kaufmann. Schön, D. and Bennett, J. 1996. “Reflective Conversation with Materials.” Winograd, Terry, ed. Bringing Design to Software . Boston: Addison-Wesley. Schumann, J., Strothotte, T., Raab, A., and Laser, S. 1996. Assessing the Effect of Non-Photorealistic Rendered Images in CAD , CHI 1996 Papers, 35–41. Scott, Bill and Neil, Theresa. 2009. Designing Web Interfaces . Sebastopol, CA: O’Reilly. Shneiderman, Ben, et al. 2009. Designing the User Interface , Fifth Edition. Upper Saddle River, NJ: Prentice Hall. Simon, Herbert A. 1996. The Sciences of the Artificial , Third Edition. Cambridge, MA: The MIT Press. Snyder, Carolyn. 2003. Paper Prototyping . New York: Morgan Kaufmann. Sutton, Robert and Rao, Huggy. 2014. Scaling Up Excellence, BY: Random House. Tidwell, Jennifer. 2011. Designing Interfaces . Sebastopol, CA: O’Reilly. Tufte, Edward. 1983. The Visual Display of Quantitative Information . Cheshire, CT: Graphic Press. Van Duyne, Douglas K., Landay, James A., and Hong, Jason I. 2006. The Design of Sites , Second Edition. Upper Saddle River, NJ: Prentice Hall. Veen, Jeffrey. 2000. The Art and Science of Web Design . San Francisco: New Riders. Verplank, B., Fulton, J., Black, A., and Moggridge, B. 1993. “Observation and Invention: Use of Scenarios in Interaction Design.” Tutorial Notes, InterCHI ’93, Amsterdam. Vora, Pawan. 2009. Web Application Design Patterns . New York: Morgan Kaufmann. Weiss, Michael J. 2000. The Clustered World: How We Live, What We Buy, and What It All Means About Who We Are . New York: Little, Brown and Company. Wigdor, Daniel and Wixon, Dennis. 2011. Brave NUI World . New York: Morgan Kaufmann. Winograd, Terry, ed. 1996. Bringing Design to Software . Boston: Addison-Wesley. Wirfs-Brock, Rebecca. 1993. “Designing Scenarios: Making the Case for a Use Case Framework.” Smalltalk Report , November/December. Wixon, Dennis and Ramey, Judith, eds. 1996. Field Methods Casebook for Software Design . Hoboken, NJ: John Wiley & Sons. Wood, Larry E. 1996. “The Ethnographic Interview in User-Centered Task/Work Analysis.” Young, Indi. 2008. Mental Models . Brooklyn, NY: Rosenfeld Media. http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/ http://dontpaniconline.com/magazine/music/steve-albinis-letter-to-nirvana-before-he-produced-in-utero 

Community Questions