In Part Four you will find these chapters: • Chapter 9, “User Interface Design,” includes guidelines for a range of UI issues navigation, personalization, feedback as well as best practi
Trang 1ptg Feedback messaging; see page 201 UI controls; see page 213 Hierarchy; see page 229
Icon communicability; see page 239 Brand extensibility; see page 256 Branding the user experience; see
page 260
Trang 2189
PART FOUR
Refining Your
iPhone App
Now that you have formulated your app concept, the next step is to
look at a variety of ways to refine your design
In Part Four you will find these chapters:
• Chapter 9, “User Interface Design,” includes guidelines for a range
of UI issues (navigation, personalization, feedback) as well as best
practices for the iPhone UI controls outlined in Apple’s iPhone HIG
• Chapter 10, “Visual Design,” explains how to improve your app’s
visual design, with an emphasis on layout, typography,
iconogra-phy, and color
• Chapter 11, “Branding and Advertising,” discusses ways to express
branding within your app and how to seamlessly incorporate
advertising
• Chapter 12, “Accessibility and Localization,” explains how to make
your app compatible with VoiceOver, the iPhone’s screen-reading
software, and delves into alternative localization approaches
This part tackles these topics serially to simplify the discussion, but your
app should consider all of these issues holistically For example, your
accessibility and localization strategies should be considered along with
your app’s interaction and visual design; you shouldn’t wait until the
very end to sort out how and where accessibility and localization fit into
your design
Trang 3This page intentionally left blank
Trang 4191
User Interface
Design
AS NOTED IN THE PREVIOUS CHAPTER, first impressions can mean everything
When it comes to your application, its user interface is your first impression
If users can’t get past the first screen, they are likely to abandon or delete
your app Once they’ve had a negative experience, it will be challenging to
convince them to try it again
To prevent this from happening it’s important to spend time refining your
app’s user interface In this chapter we’ll review user interface best practices
that can be applied across many app types, covering topics such as the
first-time user experience, personalization, and feedback
Next, we’ll delve into specific UI issues not adequately addressed in the HIG,
such as when to use a tab versus a toolbar Finally, we’ll discuss back-end
requirements that may impact the user experience Designers often assume
that these “invisible” requirements are automatically coded into their apps,
but they must be specified in advance
This chapter also includes case studies on the Sonos and FlightTrack
iPhone apps
9
Trang 5192
User Interface Best Practices
As you refine your app design, the best practices in this section may help focus your efforts They may be similar to best practices for other platforms, but all of the examples are specific to the iPhone
1 Be welcoming
2 Know thy user
3 Let the content shine
4 Make selections fast and error-free
5 Provide appropriate feedback
6 Minimize the pain
1 BE WELCOMING
Given that there are thousands and thousands of iPhone apps, it’s no small feat when users find and download yours When they first open it, they are undoubt-edly excited to see what it has to offer Imagine their disappointment when they are dropped into a bare screen with little guidance, forced to complete a long registration process, or confronted with an error message that doesn’t tell them what they’ve done wrong To help soften the first-time user experience (and retain users!), here are some ways to make your app more welcoming:
• Display “getting started” information
• Annotate the user interface
• Provide an optional video demo.
Display “Getting Started” Information
Many apps provide a welcome screen that introduces the app in a few brief sen-tences This is particularly important in three cases:
• Apps with little or no precedence
• Apps that require certain configurations (e.g., sound turned on)
• Apps that require registration (e.g., Twitter clients) TweetDeck (shown in FIGURE 9.1) welcomes new users and introduces the setup process Additional information can also be provided for new features that require explanation For example, Yelp (shown in FIGURE 9.2) provides a tip when users open the Scope feature
Trang 6USER INTERFACE BEST PRACTICES 193
FIGURE 9.1 TweetDeck’s welcome
screen introduces the user to the app
and the setup process.
FIGURE 9.2 Yelp provides a tip when users first open the Scope feature
Annotate the User Interface
Annotations are effective when most of the app functionality is concentrated on
one screen FIGURE 9.3illustrates how Postman presents a series of annotations
to the first-time user Notice that there are five concise annotations; many more
might overwhelm the user These annotations go away once users have created
their first postcard
FIGURE 9.3 Postman presents annotations to the first-time user.
Trang 7194
Provide an Optional Demo
If your app space is not well defined or the interface is relatively unique, consider offering an optional demo, as Convertbot does (FIGURE 9.4) Emphasis is put on
optional since it can be very annoying to users when they are forced to watch a
demo If you plan to localize your app, keep in mind that video demos should be localized as well
FIGURE 9.4 Convertbot optional demo
2 KNOW THY USER
The iPhone presents a unique opportunity to create personalized user experiences, yet many apps barely scratch the surface Information commonly used to person-alize the user experience includes the user’s name or ID, settings, favorites, and user behavior
Name
At the most basic level, you can personalize your app with the user’s name or ID
In addition to greeting users within the app, as in Flickr (FIGURE 9.5), the user’s name can be shown when sending app-related messages, such as alerts This type
of personalization is most appropriate when the user’s identity is an integral part
of the user experience (e.g., social networking apps or multiplayer games) Users may not wish to provide their name if the benefits are not evident
Settings
The user experience can be personalized with settings, but make sure they are absolutely necessary, not a dumping ground for extra features Frequently used settings should be within the app; less frequent settings can be stored in the
Trang 8USER INTERFACE BEST PRACTICES 195
iPhone Settings This distinction is important because users must exit your app to
access the iPhone Settings Additionally, if your app is available on multiple
plat-forms (web, desktop, etc.), make sure the settings are synchronized accordingly
Every app is different, but here are some common settings to consider:
• Font size, especially for news and Twitter apps (e.g., increase/decrease or
specify size)
• Sounds (e.g., turn on/off, customize sound)
• Measurement (e.g., miles versus kilometers for location-based apps)
• Default applications (e.g., which Twitter client to launch for Tweets)
• List view (e.g., number of items to display, content to display)
• Recents/History (e.g., on/off, how long to save, how many items to save)
• Tab content (e.g., what appears in each tab, as done in the NYTimes and
Yelp apps)
• Screen orientation and autocorrect (e.g., ability to turn off)
Favorites
Favorites (and Bookmarks) enable users to actively save an item to view later
If your app is available on other platforms (web, desktop, etc.), favorites should
be synced across all platforms Favorites are most common in content-rich apps
such as news, photos, videos, recipes, and Twitter clients Yelp provides a
seam-less syncing experience between its web site and iPhone app When the user loads
Yelp Bookmarks on the iPhone, the app checks for any changes the user may have
made via the Yelp web site (FIGURE 9.6)
FIGURE 9.5 Flickr welcomes the user on the Photostream page.
Trang 9196
FIGURE 9.6 Syncing Bookmarks on the Yelp app
Behavior
Although settings and favorites are valuable, they can be challenging to manage
in the mobile context In contrast, personalizing the user experience based on user behavior requires no effort One of the most common examples is the ability
to access items using the app history, for example, Recent Searches Personaliza-tion based on user behavior can be taken much further, though it’s important to consider user privacy Some types of personalization (e.g., apps that use Address Book information) may be considered invasive and would require user consent
3 LET THE CONTENT SHINE
As discussed in Chapter 1, “iPhone Application Overview,” one of the defining characteristics of an Immersive application is its focus on the content (e.g., the built-in photo app “hides” the UI controls when photos are viewed)
In January 2008, Edward Tufte lauded this aspect of the iPhone user experience:
The idea is that the content is the interface, the information is the
As much as possible, try to apply this philosophy to your own app The iPhone screen is tiny in comparison to desktop computer screens; thus every pixel of UI should add value to the user experience
1 Edward Tufte, “iPhone Interface Design,” www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00036T.
Trang 10USER INTERFACE BEST PRACTICES 197
At the same time, consider the tasks and their frequency of use For example, it
would be frustrating if controls were hidden in an email app since the user is
con-stantly reading, moving, and deleting messages Additionally, be clear on how to
access the hidden controls Three common models—tap screen, tap button, and
scroll up—are described in this section
Tap Screen
The “tap screen” model is used when all of the user interface controls are hidden
and is most appropriate for apps such as photo slideshows, video players, news
articles, e-books, and certain Immersive games FIGURE 9.7illustrates how the
NYTimes app shows the UI controls when the user first opens an article When
the user starts scrolling (and has presumably seen the controls), the controls
grad-ually fade until they are hidden (FIGURE 9.8); they reappear when the user reaches
the end of the article Users may also bring back the controls by tapping anywhere
on the screen This is consistent with the built-in photo slideshow app
FIGURE 9.7 NYTimes article with controls FIGURE 9.8 NYTimes article without controls
Tap Button/Zone
The “tap button/zone” model is used when only part of the UI controls are hidden
It’s most effective when controls are infrequently used and/or space is limited For
example, when GQ users first open an article, the photos are shown (FIGURE 9.9)
After a few seconds the photos fade into the background and are replaced with a
View Media button indicating the number of photos available (FIGURE 9.10) This
approach may also be used for hiding/showing certain information, such as a
legend for movie ratings