ptg xxx ACKNOWLEDGMENTS Several colleagues and friends informally reviewed my initial proposal and selected chapters. is wonderful group included Nicole Celichowski, Blake Engel, Wendy McKennon, and Rachel Wear. Over the course of writing the book, I reached out to two mailing lists: the Silicon Valley iPhone Developers and IXDA (Interaction Design Association). I appreciate all of the individuals who read and responded to my questions. Also, a big thanks to Michelle Reamy for collaborat- ing with me on user research in the early stages of the book. My gratitude also goes out to all of the individuals who contributed sketches and photos to the book. In particular, the talented Clive Goodinson was kind enough to create a Pixton comic especially for the book. And Scott Klemmer, Assistant Professor of Computer Science at Stanford, introduced me to a number of his HCI students who were creating iPhone apps. A few of the book’s sketches and photos are from current and past Stanford students. Last but certainly not least, a very special thanks goes out to Lee, who read and commented on the entire manuscript, at least twice! He provided valuable feed- back on the content and corrected a semicolon or two. If I’m missing anyone, I apologize in advance and thank you for your help. Download from www.wowebook.com ptg ABOUT THE AUTHOR xxxi About the Author Suzanne Ginsburg is a user experience consultant based in San Francisco, Cali- fornia. She helps companies conceptualize and design soware. She works with many dierent kinds of organizations, from established technology companies to small iPhone start-ups. One of her favorite aspects of user experience design is exploratory user research that helps uncover users’ unmet needs and inspires innovation. She has conducted exploratory research for online communities, home networking soware, and several iPhone apps. Sketching and prototyping also play a big role in her design process. Suzanne is constantly exploring new approaches and evolving her proto- typing toolkit. Suzanne is most passionate about products that connect people. ese projects oen involve cross-platform design, which looks at the user experience across the web, desktop, and iPhone. Suzanne is also interested in the eld of augmented environments, particularly soware that helps users learn about the people, objects, and places around them. Suzanne is an experienced speaker and writer. She regularly presents at meet- ups, UX book clubs, and conferences. She also maintains a UX blog, iPhone UX Reviews (www.iphoneuxreviews.com), where she reviews iPhone apps and pro- vides advice on iPhone app design. Suzanne has a master’s degree in user interface design from UC Berkeley’s iSchool and an undergraduate degree in business management from Cornell University. You can learn more about Suz anne at Ginsburg Design (www.ginsburg-design. com), her company web site. Download from www.wowebook.com ptg Yahoo! Weather; see page 6 CityTransit; see page 10 Mint; see page 12 ProCamera; see page 28 Air Hockey; see page 31 Shazam; see page 34 Download from www.wowebook.com ptg 1 PART ONE iPhone Application and Device Overview Before designing your iPhone app, it’s important to acquire a deeper understanding of the iPhone Human Interface Guidelines 1 (often referred to as “the HIG”). Apps that follow these guidelines are often easier to learn and use since they are familiar to users. iPhone designers should also learn about the hardware that defines the iPhone user experience. Having this knowledge may inspire creative app solutions, for example, augmented reality apps combine the compass, GPS, and camera. The chapters you’ll find in Part One are the following: • Chapter 1, “iPhone Application Overview,” discusses the HIG, with an emphasis on the three iPhone application styles: Utility, Pro- ductivity, and Immersive. • Chapter 2, “iPhone Device Overview,” switches gears and reviews the iPhone hardware as it relates to the user experience. By the end of Part One, you should be inspired to create apps that com- bine the iPhone user interface and hardware in innovative ways. 1. iPhone Dev Center, iPhone Human Interface Guidelines, http://developer.apple.com/iphone/library/ documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html. Download from www.wowebook.com ptg This page intentionally left blank Download from www.wowebook.com ptg 3 1 iPhone Application Overview THE IPHONE HUMAN INTERFACE GUIDELINES (HIG) define three different iPhone application styles—Utility, Productivity, and Immersive—to ensure a consistent user experience. These styles are based on visual and behavioral characteristics, the type of information, and the desired user experience. Before you start designing your iPhone app, read through the application style guidelines included in the HIG. Having a strong grasp of these guidelines will help you understand what’s possible within the iPhone framework and how your app may use the framework. This chapter will review applications that clearly fit into the three classic definitions as well as apps that build upon principles set forth in the HIG. Additionally, the chapter will provide advice on how to choose an application style. Download from www.wowebook.com ptg 4 CHAPTER 1 ● IPHONE APPLICATION OVERVIEW Utility Apps Utility apps enable users to quickly access a specic type of information or per- form a narrowly dened task. Apps well suited to this style include weather, stocks, trac reports, and sports scores. To illustrate how these apps are used in context, consider the following scenario: Quick Information Lookup Sarah, a mother of two young children, owns a MacBook Pro and an iPhone, but she prefers using the iPhone in the morning since it ts into her “ow.” On weekdays she can be found dashing between the kitchen, bathroom, and bedrooms as she gets the children ready for school. She turns to a weather app when decid- ing what the children should wear that day: Does she need to pack an extra jacket? An umbrella? Sunscreen? is scenario shows how users with limited time may turn to a Utility app to help them accomplish a task as quickly and eciently as possible. ey may have only a few seconds to spare, so there is no time to create an account, enter preferences, and so on. Characteristics of most Utility apps include • Minimal setup • Simple ows and layouts • Standard user interface elements Now, let’s take a look at each of those characteristics. MINIMAL SETUP Utility apps are typically ready to use when rst launched; thus setup processes are unnecessary or kept to a minimum. While this behavior is preferable for any app, it’s even more critical for Utility apps since they are used for short periods of time. If setup takes longer than the primary task—and the value of the app remains to be seen—users may abandon the app. For example, the ideal weather app would forgo any registration and immediately detect Sarah’s current location (with her permission). Download from www.wowebook.com ptg UTILITY APPS 5 SIMPLE LAYOUTS AND FLOWS Utility apps have easy-to-scan layouts that include only the most essential infor- mation. Users may glance at a Utility app for only a few seconds and won’t have time to wade through extraneous data or user interface elements. A good rule of thumb is that the app should still be legible from about ve feet away. Also, keeping the task ow succinct allows users to quickly accomplish their goals. For example, Sarah can access weather in two steps: Go to the home screen, and tap on the app icon. When the app opens, she can quickly scan it to see the current temperature and the day’s forecast. STANDARD USER INTERFACE ELEMENTS Utility apps tend to incorporate the standard user interface elements outlined in the HIG: the selected page, the Info button, and the series of dots that indicate additional pages (FIGURE 1.1). Although custom user interface elements may seem more aesthetically pleasing, they may slow Utility app users down since they are less familiar. i Battery and network status indicators Info button for configuration options Dots indicate additional pages Displays one page at a time FIGURE 1.1 Utility schematic with standard user interface elements UTILITY APP TOUR e Utility application style is predominantly used for “bite-sized” pieces of infor- mation like sports scores, stocks, and weather. FIGURES 1.2–1.4 show how ESPN uses the Utility application style for sports scores. Notice how the background color changes depending on the league—NFL, NBA, NHL. Download from www.wowebook.com ptg 6 CHAPTER 1 ● IPHONE APPLICATION OVERVIEW FIGURE 1.2 ESPN NFL scores FIGURE 1.3 ESPN NBA scores FIGURE 1.4 ESPN NHL scores Similarly, the background image of the Yahoo! Weather app changes depending on the time of day and weather conditions. FIGURES 1.5–1.7 show the background images for sun, clouds, and snow; the background color switches to a dark plum shade in the evening. Consider incorporating relevant visual cues into your Util- ity apps, as they help users process the information more rapidly. FIGURE 1.5 Yahoo! Weather with sunny graphic FIGURE 1.6 Yahoo! Weather with cloudy graphic FIGURE 1.7 Yahoo! Weather with snow flurries graphic Download from www.wowebook.com ptg PRODUCTIVITY APPS 7 (Photo courtesy of Paulette Ginsburg) Productivity Apps Productivity-style apps are more full-featured than Utility apps and encompass everything from social networking to mobile banking. e time spent with these apps varies based on the context and task; for example, a user may spend a few seconds checking for new email messages but several minutes reading the mes- sages. To illustrate how several Productivity apps may be used in context, let’s look at another scenario: Stay Connected David is a college sophomore majoring in biochemistry. In the morning he wakes to the alarm on his iPhone, which charges on his nightstand while he sleeps. While lying in bed, he scans through his Facebook and MySpace apps, looking for updates from his friends and family. Next, he checks for emails and reviews his calen- dar for the day. He relies heavily on the calendar since it has his school and work schedules. Aer he has showered and dressed, he walks to the train, oen double- checking the train schedule and location using an iPhone app. is scenario shows how a user may use dierent Productivity apps to stay con- nected with family, friends, and work. Although Productivity apps may be used for long durations, the setup process should still be kept to a minimum. Productivity apps are highly diverse, but most can be identied by the following characteristics: • Hierarchical structure • Accelerators and shortcuts Let’s take a look at each of those characteristics. HIERARCHICAL STRUCTURE Nearly all Productivity apps have a hierarchical structure composed of list and de- tail views, as shown in FIGURE 1.8. List views contain a scrollable list of items (e.g., text, images, video), as well as tab controls to navigate to other sections of the app. Detail views provide more information on list items and tools related to the items, such as Favorites or Email. Download from www.wowebook.com . see page 34 Download from www.wowebook.com ptg 1 PART ONE iPhone Application and Device Overview Before designing your iPhone app, it’s important to acquire a deeper understanding of the iPhone. inspire creative app solutions, for example, augmented reality apps combine the compass, GPS, and camera. The chapters you’ll find in Part One are the following: • Chapter 1, iPhone Application. an application style. Download from www.wowebook.com ptg 4 CHAPTER 1 ● IPHONE APPLICATION OVERVIEW Utility Apps Utility apps enable users to quickly access a specic type of