Thiết kế trải nghiệm người dùng iphone - p 24 ppsx

For exam-ple, the Maps app automatically pre-populates the Start field with the user’s cur-rent location and the End field with the most recent search FIGURE 9.13.. FIGURE 9.13 The Start

FIGURE 9.9 GQ with media open FIGURE 9.10 GQ with media closed

Scroll Up

The “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 filters 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

4 MAKE SELECTIONS FAST AND ERROR-FREE

As discussed earlier, the mobile context may make it difficult for users to enter

information Here we’ll discuss ways to minimize errors and make users more

efficient

Provide Smart Defaults

Smart defaults can considerably reduce the amount of typing required For

exam-ple, the Maps app automatically pre-populates the Start field with the user’s

cur-rent location and the End field 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

Predefined lists are an effective 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 flight, it would be

unwieldy to scan thousands of flight listings Instead, it would be preferable to

search by airline and flight 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 This strategy can be effective 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)

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 This information may be accessed in a number of ways, for example, by

• Pre-populating certain fields, 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)

Use Voice and Image Recognition

Typing can be significantly reduced if voice or image recognition is used 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 effective 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 The 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.

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., files 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

The bounce animation indicates when the user has reached the end of a selected screen.2 Related to this point, it’s also beneficial to show part of the last row; that way the user will know there’s more information available

FIGURE 9.20illustrates 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 flip, slide, fade, curl, and zoom As much

as possible, try to keep these consistent with the built-in apps

• Flip: Used when accessing Utility app settings or switching between views

(e.g., from list to map view) Movement is right to left from the start state

and left to right from the end state

• Slide left/right: Primarily used when drilling down lists.

• Slide up/down: Often 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.

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 can be used if visual feedback isn’t explicit enough They 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 The alert fades after a few seconds or when the user scrolls down the screen, as shown on Twitterific in FIGURE 9.24 This 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

• Overlay alert: Displayed above a grayed-out screen; the user must dismiss

the alert in order to proceed, as shown in FIGURE 9.25 This approach is

appropriate only when user acknowledgment is required and should not be

overused since it disrupts the user’s workflow

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 off

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 difficult 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

often 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

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

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 drafts 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 refine 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 clarification

WHICH PRODUCTIVITY STYLE SHOULD I USE?

Although there is a definitive Productivity style, many variations have emerged

since the iPhone HIG were first written You may want to explore these

alter-natives for your app, but keep in mind that diverging from the guidelines may

influence whether your app is approved And, more important, adhering to the

guidelines will make your app easier for users to learn and use Three 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 effective if you want to

show subcategories without drilling down lists FIGURE 9.28illustrates how USA

TODAY uses tiered tabs in a carousel format to show several different 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 This provides a hint to users

that additional sections are available if they scroll to the right This row

ani-mates the first time, reinforcing that there are additional options beyond the four

visible ones