ptg 198 CHAPTER 9 ● USER INTERFACE DESIGN FIGURE 9.9 GQ with media open FIGURE 9.10 GQ with media closed Scroll Up e “scroll up” model is used when the controls directly below the header are hid- den until scrolled into view (these are typically one row or less in height). Search is the primary use case, as shown in Tweetie 2.0 (FIGURES 9.11–9.12), though it could also be applied to list lters or sort options. Given the minimal cues, this model is arguably for more advanced users. FIGURE 9.11 Tweetie 2.0 with the Search field shown on “scroll up” FIGURE 9.12 Tweetie 2.0 when the Search field is not shown Download from www.wowebook.com ptg USER INTERFACE BEST PRACTICES 199 4. MAKE SELECTIONS FAST AND ERROR-FREE As discussed earlier, the mobile context may make it dicult for users to enter information. Here we’ll discuss ways to minimize errors and make users more ecient. Provide Smart Defaults Smart defaults can considerably reduce the amount of typing required. For exam- ple, the Maps app automatically pre-populates the Start eld with the user’s cur- rent location and the End eld with the most recent search (FIGURE 9.13). FIGURE 9.13 The Start field on Google Maps is pre-populated with the user’s current location and most recent search. Include Predefined Lists Predened lists are an eective way to minimize text entry if the lists aren’t too long. For example, this approach works well with the iBART (Bay Area Rapid Transit) app, given that there are about 40 train stations listed alphabetically (FIGURE 9.14). On the other hand, if you were looking up a ight, it would be unwieldy to scan thousands of ight listings. Instead, it would be preferable to search by airline and ight number, as is done in the FlightTrack app (FIGURE 9.15). Suggest Matches If free-form text entry is required, consider suggesting matches as the user enters the information. is strategy can be eective for apps that search large amounts of unstructured data, such as Google. Suggesting matches can also be helpful when searching user data (e.g., contact lists). Download from www.wowebook.com ptg 200 CHAPTER 9 ● USER INTERFACE DESIGN FIGURE 9.14 iBART lists all the BART stations. FIGURE 9.15 FlightTrack lets users search by airline and flight number. Store Recent Activity/Selections If the user has taken the time to enter certain information, consider storing it for future reference. is information may be accessed in a number of ways, for example, by • Pre-populating certain elds, such as the user’s postal code based on his or her location • Making past selections available in a Recents tab • Showing History matches as the user types a query Each of these methods can give users a better experience, simplifying tasks they would otherwise have to do over and over again. For example, when Read It Later users tag items, the app shows frequently used tags (FIGURE 9.16). FIGURE 9.16 Read It Later provides access to frequently used tags. Download from www.wowebook.com ptg USER INTERFACE BEST PRACTICES 201 Use Voice and Image Recognition Ty ping ca n be signi cant ly reduced i f voice or image recog nition is u sed. For example, Google Search lets users vocalize their search queries, and SnapTell lets users search for purchase information using images captured with their iPhones. 5. PROVIDE APPROPRIATE FEEDBACK As users interact with your app, there may be times when things happen “behind the scenes” that require them to wait a moment. To reassure users during these moments, consider providing feedback in the form of animations, transitions, highlights, or alerts. Animations Animations are an eective way to provide feedback for the following situations: downloading content, moving content, and end-of-content indicators. • Downloading/processing An activity indicator should be provided when content is being downloaded or processed on the device and this activity impacts the user experience. For example, the Voices app displays a full-screen animation as it “trans- forms” your voice (FIGURE 9.17). In contrast, the NYTimes app (shown in FIGURE 9.18) provides a progress indicator that can be closed, thereby enabling users to continue viewing other content. e full-screen approach should be used only when the app is busy and can’t be used for other tasks. FIGURE 9.17 The Voices app draws red curtains and lowers the “Your voice is being transformed” message when applying voice filters. FIGURE 9.18 The NYTimes app displays a progress bar by default as articles and images are downloaded, but the user may close it at any time. Download from www.wowebook.com ptg 202 CHAPTER 9 ● USER INTERFACE DESIGN • Moving Move animations help indicate where an object is going and where it came from. For example, they may illustrate content moving between objects (e.g., les between folders) or items moving within a list (e.g., reordering cities on the Yahoo! Weather app). To make your app easier to learn, keep the interaction consistent with the built-in apps, but customize the visual feedback. For example, the built-in email app shows a letter falling into the target folder (FIGURE 9.19), but you might want to show a postcard or other relevant imagery for your app. • Bounce e bounce animation indicates when the user has reached the end of a selected screen. 2 Related to this point, it’s also benecial to show part of the last row; that way the user will know there’s more information available. FIGURE 9.20 illustrates how Classics shows part of the next bookshelf at the top and bottom. FIGURE 9.19 The Mail app shows an envelope falling into a folder when a message is moved. FIGURE 9.20 The Classics app shows part of the next bookshelf to indicate additional content. Transitions Transitions refer to the visual feedback provided when users move between related screens. Many of the transitions reference real-world metaphors or abstract spatial orientations that help users understand where things reside within an app or how they work. Common transitions include ip, slide, fade, curl, and zoom. As much as possible, try to keep these consistent with the built-in apps. 2. David Barnard et al., iPhone User Interface Projects (Apress, 2009). Download from www.wowebook.com ptg USER INTERFACE BEST PRACTICES 203 • Flip: Used when accessing Utility app settings or switching between views (e.g., from list to map view). Movement is right to le from the start state and le to right from the end state. • Slide le/right: Primarily used when drilling down lists. • Slide up/down: Oen used when a secondary panel slides up along the bottom of the app. For example, Postman uses the slide-up transition when users access the Picture and Styling options (FIGURES 9.21–9.22). FIGURE 9.21 Postman with the Picture pane hidden FIGURE 9.22 Postman with the Picture pane shown via slide-up transition • Fade in/out: Used when viewing media (e.g., entering/exiting a slideshow or video). Also known as “cross-dissolve.” • Curl: Used to access content “under” the current view. Perhaps the best- known example of a curl transition is on Maps (FIGURE 9.23). NOTE To see short videos illustrating these transi- tions, visit http:// www.iphoneuxreviews .com/?p=191. Download from www.wowebook.com ptg 204 CHAPTER 9 ● USER INTERFACE DESIGN FIGURE 9.23 Curl transition used on Maps • Zoom: Used to maximize/minimize the selected item. For example, the Facebook home screen zooms in or out when users select one of the options. Text Alerts Text alerts ca n be used if visual feedback isn’t ex plicit enoug h. ey can be dis- played in-line or on an overlay. • In-line alert: Displays feedback alongside other content, typically one line at the top of the screen. e alert fades aer a few seconds or when the user scrolls down the screen, as shown on Twitteric in FIGURE 9.24. is type of alert is appropriate when user acknowledgment is not required. FIGURE 9.24 Twitterific displays a message in-line to indicate the number of new tweets. Download from www.wowebook.com ptg USER INTERFACE BEST PRACTICES 205 • Overlay alert: Displayed above a grayed-out screen; the user must dismiss the alert in order to proceed, as shown in FIGURE 9.25. is approach is appropriate only when user acknowledgment is required and should not be overused since it disrupts the user’s workow. FIGURE 9.25 Flickr provides a modal alert when the user must leave the app. Sound Sound may accompany many of the feedback options just mentioned, but use it sparingly. Overuse of sound will annoy users and may lead them to turn o sounds altogether (or worse, they will stop using your app and delete it from their iPhone). Even when used sparingly, sound should not be the primary feedback mechanism. Users may mute their phones in certain situations, and sounds may be dicult to hear in noisy environments. 6. MINIMIZE THE PAIN When users are engaged with your app, sometimes things will go wrong that are beyond your control (e.g., loss of network connection, limited bandwidth). In these cases try to minimize the impact on the user experience by explaining the problem, maintaining the status quo, and keeping the user informed. Explain the Problem Although this may seem obvious, many apps don’t explain what’s going on when things go wrong. For example, when the network connection is lost, users are oen presented with the never-ending loading icon. Instead, it’s best to explain the problem in layperson’s terms and how it may be resolved. FIGURE 9.26 illus- trates how Epicurious deals with a lost network connection. Download from www.wowebook.com ptg 206 CHAPTER 9 ● USER INTERFACE DESIGN FIGURE 9.26 Epicurious provides a helpful message when users are offline. Maintain the Status Quo Certain app features may stop working when things go wrong. As much as possi- ble, try to maintain the status quo. For example, in the absence of a network con- nection, Shazam still allows users to tag songs but postpones the analysis until the network connection is reestablished (FIGURE 9.27). Similarly, instead of providing null results when users try to view network content, ideally your app will cache the last result. FIGURE 9.27 Shazam doesn’t completely break down when offline. Users can still capture the information needed to tag a song, then finish the process when they are back online. Save Work in Progress Given that mobile users are frequently interrupted, it’s important to save work in progress. Depending on the app, your solution may include a combination of Download from www.wowebook.com ptg USER INTERFACE Q&A 207 user- and app-initiated features. For example, WordPress provides an auto-recov- ery feature if users are interrupted by a phone call as well as the ability to explic- itly save dras. Also, a large number of apps save the user’s “state,” which means they can display the last screen viewed (and the related content) when the user returns to the app. Most Twitter apps even maintain your place in Tweet lists. Keep the User Informed If network or other issues impact how the app normally works, keep the user informed. For example, let’s say your app provides sports scores. If the user loses the network connection, it would be helpful to indicate the time of the last app update. With this information the user can easily determine whether the scores are current or not. User Interface Q&A In Chapter 1, “iPhone Application Overview,” we discussed the importance of reading Apple’s iPhone Human Interface Guidelines (the “iPhone HIG”) before you start designing your iPhone app. As you rene your app, consider rereading the iPhone HIG, paying extra attention to Part II, “Designing the User Interface of Your iPhone Application.” Here we’ll try to address some aspects of the iPhone HIG that could use additional clarication. WHICH PRODUCTIVITY STYLE SHOULD I USE? Although there is a denitive Productivity style, many variations have emerged since the iPhone HIG were rst written. You may want to explore these alter- natives for your app, but keep in mind that diverging from the guidelines may inuence whether your app is approved. And, more important, adhering to the guidelines will make your app easier for users to learn and use. ree common variations include tiered tabs, the grid, and top tabs, which we’ll cover next. Tiered Tabs Tiered tabs are an extension of the standard Productivity style and are commonly used in content-rich apps. In particular, this approach is eective if you want to show subcategories without drilling down lists. FIGURE 9.28 illustrates how USA TODAY uses tiered tabs in a carousel format to show several dierent sections within the Headlines tab—Top News, News, Money, Sports. Notice how part of the last label, L (for Life), shows, along with an arrow. is provides a hint to users that additional sections are available if they scroll to the right. is row ani- mates the rst time, reinforcing that there are additional options beyond the four visible ones. Download from www.wowebook.com . In Chapter 1, iPhone Application Overview,” we discussed the importance of reading Apple’s iPhone Human Interface Guidelines (the iPhone HIG”) before you start designing your iPhone app. As. your app, consider rereading the iPhone HIG, paying extra attention to Part II, “Designing the User Interface of Your iPhone Application.” Here we’ll try to address some aspects of the iPhone. ecient. Provide Smart Defaults Smart defaults can considerably reduce the amount of typing required. For exam- ple, the Maps app automatically pre-populates the Start eld with the user’s cur- rent