ptg xx PREFACE • User interface design Strictly dened, user interface (UI) design refers to the design of the “inter- face” between users and the underlying soware. However, in reality, most UI designers think beyond this supercial level to create designs that meet users’ needs. • Interaction design David Kelley, the founder of IDEO, denes interaction design this way: “Interaction design is using your technical knowledge in order to make it useful for people, to delight someone, to make someone get excited about the new technology they’re using.” 3 Given its broad scope, this denition is most closely aligned to UX design. • Information architecture Information architecture (IA) is the categorization of information into a coherent structure. e term was popularized when vast web sites started cropping up during the dot-com boom. Many people use the term inter- changeably with interaction design but the scope is arguably narrower. What This Book Teaches You is book provides an end-to-end overview of the user-centered design process, specically for iPhone applications. Aer reading this book, you will know how to • Conduct up-front user and competitive research to inform your app’s vision statement, also known as the Production Denition Statement. • Brainstorm, sketch, and prototype your app concepts. e prototypes cov- ered take many dierent forms, from simple paper to scripted videos. • Rene your app’s user interface and visual design, using best practices based on established design principles. • Make your app accessible to individuals with impairments, with specic attention to VoiceOver, the screen-reading soware built into the iPhone. • Localize your app’s user experience with an emphasis on language, content, and culture. While the book is focused on the iPhone and iPod Touch, many of the principles you will learn here can also be applied to user experience design for the iPad. For example, the research methods in Part Two, “Dening Your iPhone App,” and sketching and prototyping in Part ree, “Developing Your App Concept,” can also be applied to the iPad. Many sections in Part Four, “Rening Your iPhone 3. Quoted in Bill Moggridge, Designing Interactions (MIT Press, 2007). Download from www.wowebook.com ptg App,” are also relevant; however, there are some new iPad user interface controls and transitions that are not covered in this book. To learn more, consider reading the iPad Human Interface Guidelines. 4 How This Book Is Organized is book is organized into four parts, which take you through the process of developing the Product Denition Statement for your app to prototyping and testing your designs with target users. e book concludes with best practices that cover key aspects of the user experience: the user interface, visual design, brand- ing, accessibility, and localization. Case studies are included throughout the book to illustrate how other companies approach user experience design. • Part One: “iPhone Application and Device Overview” e chapters in this part provide the grounding and foundation you’ll need for the rest of the book. You’ll learn about the iPhone Human Interface Guidelines, as well as specics about the iPhone hardware and what that means for application design teams. • Chapter 1: “iPhone Application Overview” is chapter reviews applications that clearly t into Apple’s three classic denitions—Productivity, Utility, Immersive—as well as apps that build upon principles set forth in the HIG. e chapter also provides advice on how to choose an application style. • Chapter 2: “iPhone Device Overview” H e r e w e e x p l o r e t h e i P h o n e d e v i c e w i t h a n e m p h a s i s o n t h e t e c h n o l o g i e s and hardware that dene the iPhone user experience, such as the multi- touch display, motion sensors, and location information. • Part Two: “Dening Your iPhone App” e chapters in this part discuss the value of up-front research, with an emphasis on user research and competitive research. Case studies are given to illustrate how companies have put these methods into practice. • Chapter 3: “Introduction to User Research” is chapter reviews a variety of user research methods such as shadow- ing, eld interviews, and diary studies and suggests ways to tailor these methods for your app. 4. iPhone Dev Center, iPad Human Interface Guidelines, http://developer.apple.com/iphone/library/ documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html . PREFACE xxi Download from www.wowebook.com ptg xxii PREFACE • Chapter 4: “Analyzing User Research” is chapter has step-by-step advice on how to eectively analyze your user research. You’ll also learn how your ndings can be used to create valuable design tools such as personas, scenarios, and user journeys. • Chapter 5: “Evaluating the Competition” H e r e I i n t r o d u c e a v a r i e t y o f w a y s t o c o n d u c t c o m p e t i t i v e u s e r e x p e r i - ence analyses and explain how your ndings can help shape your Prod- uct Denition Statement. • Part ree: “Developing Your App Concept” Once armed with your up-front research ndings, you’ll learn how to translate these discoveries into design solutions for your own applications. In addition to sketching and prototyping, Part ree explains how to evalu- ate your app designs through usability testing. • Chapter 6: “Exploring App Concepts” is chapter starts by explaining how to create a design-friendly envi- ronment and hold eective brainstorming sessions. e remainder of the chapter discusses ways to illustrate and communicate your early design explorations. • Chapter 7: “Prototyping App Concepts” I n t h i s c h a p t e r , w e l o o k a t a v a r i e t y o f i P h o n e p r o t o t y p i n g a p p r o a c h e s — paper, soware, and video—and I give suggestions for how to choose the best approach for your app. • Chapter 8: “Usability Testing App Concepts” A v a r i e t y o f u s a b i l i t y t e s t i n g m e t h o d s — r a n g i n g f r o m “ t r a d i t i o n a l ” t e s t s to the Rapid Iterative Testing and Evaluation (RITE) method and guer- rilla testing—are explored in this chapter. It also discusses beta testing and ways to enhance it with traditional usability methods. • Part Four: “Rening Your iPhone App” Although user testing is a critical part of the iterative design process, the book also reviews best practices that have emerged in the iPhone space, considering a variety of application styles and categories. Topics covered in Part Four include user interface design, visual design, branding, accessibil- ity, and localization. • Chapter 9: “User Interface Design” I n t h i s c h a p t e r , I i n t r o d u c e u s e r i n t e r f a c e b e s t p r a c t i c e s t h a t c a n b e applied across many app types, covering topics such as the rst-time user experience, personalization, and feedback. Download from www.wowebook.com ptg • Chapter 10: “Visual Design” is chapter begins with a discussion of visual structure—grouping, hierarchy, alignment—then explores how color, type, and imagery can reinforce visual structure and create harmonious designs. • Chapter 11: “Branding and Advertising” is chapter focuses on ways to express your brand within your app’s design. It also discusses mobile advertising and ways to integrate ads into your designs. • Chapter 12: “Accessibility and Localization” is chapter reviews accessibility on the iPhone, with specic attention to VoiceOver compatibility. Additionally, the chapter explains how to localize the user experience of your app, covering both built-in and cus- tom solutions. e book wraps up with a look to the future of the iPhone and how its evolution may impact the user experience. Case Studies Parts Two through Four contain iPhone app case studies, which show how dier- ent companies approach user experience design. Although the methods and tools vary from company to company, these organizations have at least one common goal: the desire to oer the best user experience possible. You’ll learn how success- ful companies manage to deliver on this promise, and you may nd ways to bring similar approaches into your own organization. Here are some highlights from the 13 case studies: • Case Study 1: Windspire (Chapter 4) e Windspire app helps users determine whether they have enough wind for a turbine and how much money they could save with one. In the early design phase, the company conducted eld research to understand the needs of potential customers. • Case Study 2: Aardvark Mobile (Chapter 4) e Aardvark iPhone app lets users ask friends and friends of friends for advice while on the go. e company involved users throughout the design and development process, from early-stage user interviews to late-stage alpha testing. PREFACE xxiii Download from www.wowebook.com ptg xxiv PREFACE • Case Study 3: Foodspotting (Chapter 6) Foodspotting is a visual local guide that helps users nd dishes and earn points for spotting foods. Its creators used concept posters, paper proto- types, and simple on-screen prototypes to get user feedback. • Case Study 4: Not For Tourists (Chapter 6) NFT helps users navigate and explore cities like a local. Personas and sce- narios helped focus the team on the app’s core interactions. e scenarios were then used to create storyboards, which were translated into paper and on-screen prototypes. • Case Study 5: MUSE (Chapter 6) MUSE is an interface that visualizes your music library as a grid of dots; each dot is a track, and all tracks are playing. It was born out of a desire for a more right-brain tool for navigating music libraries and creating playlists. • Case Study 6: Prototyping at Dan4, Inc. (Chapter 7) Dan4 has experimented with many kinds of prototypes—paper, Keynote, video, and more. When choosing a prototype, the company factors in time, budget, and scope but also how the wider development team works and how the prototypes could be reused. • Case Study 7: What’s Shakin’ (Chapter 7) e What’s Shakin’ app is an egg shaker developed with OpenAL, a cross- platform 3D audio API. Over the course of designing the app, the inventors tested their prototypes with friends, musicians, and local bar patrons. • Case Study 8: REALTOR.com (Chapter 8) e REALTOR.com app is for individuals who are searching for a home. Aer several rounds of sketching and storyboarding, the design team cre- ated a paper prototype and conducted usability tests with prospective users. • Case Study 9: Sonos (Chapter 9) e Sonos iPhone app lets users access their wireless multi-room music sys- tem. In addition to internal design reviews, the team improved their design through usability tests with current Sonos customers, as well as iPhone users who had never heard of Sonos. • Case Study 10: FlightTrack (Chapter 9) e FlightTrack app is used to look up and monitor ight information. e initial designs went through several iterations before the team found a solu- tion that eectively addressed their customers’ needs. Download from www.wowebook.com ptg • Case Study 11: USA TODAY (Chapter 10) e USA TODAY app lets users access headlines, sports scores, weather, photos, and other content from USA TODAY. e nal app’s design came aer dozens of rigorous design explorations. • Case Study 12: Voices (Chapter 10) e Voices app lets users record their voice and change it with lters (such as Chipmunk and Fun House). e Voices team paid close attention to app details, adding special touches such as a roving strobe light and quirky background music. • Case Study 13: Convertbot (Chapter 10) e Convertbot app is used to convert time, mass, currency, and more. Depth was a really important aspect of the visual design; there were many iterations to make the app “feel” like a real robot. e case studies appear in the chapters to which they are most applicable and are provided to give you additional insight into how other developers and designers approach iPhone UI design. NOTE Some of the case studies have been edited to fit within the confines of the printed book; however, we have compiled full-text ver- sions as a freely download- able PDF file on the book’s web site. To download the PDF, go to informit.com/ title/9780321699435 and click on the Extras tab. PREFACE xxv Download from www.wowebook.com ptg This page intentionally left blank Download from www.wowebook.com ptg WE’D LIKE TO HEAR FROM YOU xxvii We’d Like to Hear from You You can visit ou r web site a nd register this book at informit.com/title/ 9780321699435. ere you will also nd any updates, downloads, or errata that might be available for the book. As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wis- dom you’re willing to pass our way. You can email or write me directly to let me k now what you did or didn’t like about this book, as well as what we can do to make our books better. When you write, please be sure to include this book’s title and the name of the author, as well as your name, phone, and/or email address. I will carefully review your comments and share them with the author and editors who worked on this book. Email: chuck.toporek@pearson.com Mail: Chuck Toporek Senior Acquisitions Editor, Addison-Wesley Pearson Education, Inc. 75 Arlington St., Ste. 300 Boston, MA 02116 USA If you would like to contact Suzanne directly, she can be reached via email at suzanne@iphoneuxreviews.com. For more information about our books or conferences, see our web site at informit.com. NOTE Please note that I cannot help you with technical problems related to the topic of this book, and that because of the high volume of email I receive, I might not be able to reply to every message. Download from www.wowebook.com ptg This page intentionally left blank Download from www.wowebook.com ptg ACKNOWLEDGMENTS xxix Acknowledgments is book would not have been possible without the support of many talented individuals. e rst person who paved the way was Raven Zachary, the president of Small Society. We met when he was presenting on an iPhone panel at the Web 2.0 Sum- mit in the fall of 2008. Raven encouraged me to start my iPhone user experience blog, iPhone UX Reviews (www.iphoneuxreviews), which led me to Tim Burks, the founder of the Silicon Valley iPhone Developer Meetup. Tim was impressed with one of my early blog posts and invited me to present at his monthly event. One of my presentations, “An Agile Approach to iPhone Development,” caught the attention of Chuck Toporek, who is now my editor at Addison-Wesley. Chuck recognized the need for a book on the iPhone user experience. At the time there were plenty of iPhone programming books but not one on iPhone app design. Although Chuck and I saw eye to eye on the book’s vision, I was uncertain about writing an entire book on the subject. But Chuck, a seasoned editor, had faith in my abilities and encouraged me to submit a book proposal. He has been insightful and supportive throughout the entire process. Other wonderful indi- viduals at Addison-Wesley, including Karen Gettman, Romny French, Julie Nahil, and John Fuller, and copy editor Barbara Wood. My phenomenal review panel of design and development experts also played a major role in this book. eir comments helped shape the overall organization, direction, and ner details. e design panel included the insightful Marion Buchenau, Nancy Frishberg, Patrick Jean, Christian Rohrer, and Mirjana S p a s o j e v i c . e d e v e l o p m e n t p a n e l i n c l u d e d t h e e s t e e m e d M i k e S h i e l d s , B r i a n Arnold, Dan Grover, and August Trometer. One of my favorite parts of the book is the series of case studies, covering every- thing from “green” energy to gourmet food. A special thanks to all of the talented designers and developers I interviewed: Alexa Andrzejewski, John Casasanta, Mark Jardine, Ben Kazez, Rob Lambourne, Rusty Mitchell, Margeigh Novotny, Matt Paul, Rob Spiro, Espen Tu, Bill Westerman, Ilana Westerman, and Cli Williams. Sincere thanks also go out to George Chen for his insights on mobile advertising, Max Bielenberg for his perspective on prototyping, and Robert S p e n c e r f o r h i s a d v i c e o n g e s t u r e i n t e r f a c e s . Download from www.wowebook.com . Your iPhone App,” and sketching and prototyping in Part ree, “Developing Your App Concept,” can also be applied to the iPad. Many sections in Part Four, “Rening Your iPhone 3. Quoted in. own applications. In addition to sketching and prototyping, Part ree explains how to evalu- ate your app designs through usability testing. • Chapter 6: “Exploring App Concepts” is chapter. design explorations. • Chapter 7: “Prototyping App Concepts” I n t h i s c h a p t e r , w e l o o k a t a v a r i e t y o f i P h o n e p r o t o t y p i n g a p p r o a c h e s — paper, soware,