Tidwell J. Designing Interfaces (Second Edition)
Подождите немного. Документ загружается.
The Patterns 463
Alternatively, you could use no button at all. After the user has loaded and can view the
first chunk of items, silently start loading the next chunk. Append them to the visible list
when they’re ready, and the user has scrolled down to the end of the original list. (This is
your clue that the user may want to see more. If the user doesn’t scroll down, don’t bother
getting more items.)
In software engineering, this well-known approach to managing lists of undefined length
is often called lazy loading.
Examples
Several iPhone applications use Infinite Lists, including Mail (Figure 10-17), as well as
iTunes and third-party apps such as Facebook (Figure 10-18). The iTunes button only
loads 10 more items, which seems like too small a number for an eager music listener, but
the Mail app loads many screenfuls of new messages; it seems to balance download time
and quantity fairly well. The Facebook app, like the full-size Facebook page, loads up the
first several pages of updates and then lets the user load more.
Figure 10-18.
Facebook and iTunes
You can also do this with a web page. Gmail Buzz loads a few screenfuls of updates and
then offers a “Load more” button; so does Mashable (see Figure 10-19).
464 Chapter 10: Going Mobile
Figure 10-19.
Buzz and Mashable
Generous Borders
Figure 10-20.
Best Western’s mobile site
The Patterns 465
What
On devices with touch screens, put large margins and whitespace around buttons, links,
and any other tappable control.
Use when
You need to use buttons with text labels, or a list of items, or ordinary text-based links—in
short, any touch target that isn’t already large on the screen.
Why
Touch targets must be large enough for clumsy fingers to hit successfully. In particular,
they need to be tall enough, which is challenging for buttons and links that consist only
of text.
How
Surround each touch target with enough inner margin, border, and surrounding
whitespace to make a sufficiently large hit target for fingertips.
One trick is to make the whitespace immediately surrounding a target tappable. The but-
ton will look the same size, thus fitting into your visual design as expected, but you gain
a few pixels of sensitivity in each direction around the button. Dan Saffer, in Designing
Gestural Interfaces, uses the term iceberg tips for controls such as these—they are bigger
than they appear.
Exactly how big to make these targets is a very good question. Ideally, you want a size that
ends up large enough on the physical device to be manipulated by most people—many of
whom will have large fingers. Some others will not have great control over their fingertips.
Yet others will be using their mobile devices in challenging conditions: bad light, moving
vehicles, little attention to spare.
So ultimately, how big should you make your targets? It depends on whom you ask.
There’s no consensus on minimum target size, but different references make these claims:
• 3/4 × 3/4 inches, separated by 1/8 inch (http://www.sapdesignguild.org/resources/
TSDesignGL/Index.htm)
• 9.6 mm (http://portal.acm.org/citation.cfm?id=1152260)
• 1 × 1 cm square (Nokia’s S60 5th Edition C++ Developer’s Library v2.1, among others)
• 44 × 44 pixels on an iPhone (iPhone Human Interface Guidelines)
And there’s more. See Luke Wroblewski’s discussion at http://www.lukew.com/ff/entry.
asp?1085 for even more information.
466 Chapter 10: Going Mobile
Examples
The IMDb application for the iPhone reliably puts plenty of margin space around its
touch targets. The whole application has a relaxed, uncramped feeling, as shown in
Figure 10-21.
Figure 10-21.
Screens from the IMDb app
The Epicurious app is similar, though its visual styling is quite different. The buttons for
key actions—“find a recipe,” “view recipe”—are quite large and distinctive, as shown in
Figure 10-22.
Figure 10-22.
Screens from the Epicurious app
The Patterns 467
Text Clear Button
Figure 10-23.
The URL box in Safari
What
Clear a text field with one button press.
Use when
Whenever a text field is needed in the mobile interface, consider using a Text Clear Button.
It is especially valuable for fields that hold long strings of text, such as search strings,
URLs, and multiline text.
Why
Erasing long strings of text letter by letter is slow and error-prone. Don’t force your users
to do this.
Some mobile platforms have no facility for cut, copy, and paste. A cut operation may suf-
fice for erasing text—so would the selection of all of a text field’s contents—but even if
those exist it’s easier just to tap a single target to erase the field.
How
Put a simple “X” or “Clear” button into the text field. A button beside the text field can
also work, though you’d want to usability-test it to find out whether users see it or not—
they may see it as a “Go” or “Search” button instead.
If the platform offers a “Clear” button as a built-in feature for text fields, use it. I have
watched users struggle to clear text fields when this feature was not provided, on early
versions of Android—it’s painful to watch people erase a long search field letter by letter
by letter. I’ve also watched people use iPhone apps that didn’t use its standard clear button;
these users had a strong expectation that the “X” button would appear in text fields, and
were unhappy when it wasn’t provided.
Do wnl oa d fr om W ow! e Bo ok < ww w.w ow eb oo k. co m>
468 Chapter 10: Going Mobile
Examples
There aren’t many varied examples of this pattern to show as of this writing. Figure 10-24
shows the websites of two large search engines that insert a
Text Clear Button into their
search fields.
Figure 10-24.
Clear buttons as used by Google and Bing
Loading Indicators
Figure 10-25.
The iPhone Stocks app waiting for chart data
What
While a page or page section is loading, show a progress indicator in the place where it
will be (or where the user tapped or clicked).
The Patterns 469
Use when
The user has to wait for content to load, especially in a page that changes dynamically in
response to user interaction.
Why
Loading new content can be slow and erratic over mobile connections.
You should always show as much of a partially loaded page as you can, so the user can
actually see something useful.
In general, progress indicators make loading times appear faster to a user. She is reassured
that something is actually happening in response to a gesture, especially when that indica-
tor appears where the gesture occurred.
How
Show as much of the page as can be loaded quickly, but if part of it takes a long time, such
as a graphic or video, show a lightweight animated progress indicator where the graphic
will appear. (The mobile platform may supply a default indicator.)
When the user initiates an action that causes part of the page to be reloaded—or loads a
whole new page—show a progress indicator in situ on the page.
Examples
Flickr’s mobile website uses loading indicators very skillfully. When the user taps a picture
thumbnail to see the whole picture, the thumbnail is overlaid by a Flickr logo that moves
until the new image is ready to show (see Figure 10-26).
Figure 10-26.
Flickr’s animated loading indicator
When an iPhone installs a new app, the app’s icon literally shows a miniature progress bar
to show how far it’s gotten with the download (see Figure 10-27). It’s cute, and its meaning
is unmistakable.
470 Chapter 10: Going Mobile
Figure 10-27.
iPhone’s app installation progress bar
Richly Connected Apps
Figure 10-28.
Freedom Trail app for iPhone
What
Inside your mobile app put direct links to other apps, such as the phone dialer, map, or
browser. “Prefill” them with data from the user’s current context.
The Patterns 471
Use when
The mobile app shows data that is “connectable” in obvious ways, such as phone numbers
and hyperlinks.
More subtly, your app may offer ways to capture images (via the device camera), sound,
or video. It may even be aware of social networking conventions, such as Facebook or
Twitter usernames. In all cases, your app might direct the user to another app to perform
these device-based functions.
Why
A user can only see one mobile app at a time, even when multiple apps are being used at
once, and it’s annoying to switch between them by hand.
Mobile devices often have enough context and available functionality to offer intelligent
paths between apps.
As of this writing, mobile devices have no good way to arbitrarily shuffle small amounts
of information from one application to another. On the desktop, you can type easily, or
use copy and paste, or even use the filesystem. You don’t have those options on a mobile
platform. So, you need to support moving that data automatically.
How
In your app, keep track of data that might be closely associated with other apps or ser-
vices. When the user taps or selects that data, or uses special affordances that you provide,
open another app and handle the data there.
Here are some examples. Consider all the ways that data in your app can connect directly
to other mobile functions.
• Phone numbers connect to the dialer.
• Addresses connect to the map, or to the contacts app.
• Dates connect to the calendar.
• Email addresses connect to the email app.
• Hyperlinks connect to the browser.
• Music and videos connect to media players.
In addition, you might be able to do such things as take a picture, or use a map, entirely
within the context of your application.
You can do some of this on a desktop, but the walled-garden nature of many mobile de-
vices makes it easier to launch the “right” app for certain kinds of data. You don’t have to
decide which email reader to use, or which address or contact management system, and
so on. Plus, many mobile devices supply a phone dialer, a camera, and geographic loca-
tion services.
472 Chapter 10: Going Mobile
Examples
The Freedom Trail application for the iPhone, shown in Figure 10-28, explicitly illustrates
its links to other apps. The user chooses whether to follow them for more information, or
just to stay within the app; this transparency is useful and refreshing.
The Facebook app for iPhone connects to the camera on the device (see Figure 10-29).
The integration is close; users can take a picture and immediately post it to Facebook,
without ever seeming to leave the Facebook app. Facebook can also reach the preexisting
photos on the iPhone.
Figure 10-29.
Facebook’s integration with the camera
The iPhone’s map application (Figure 10-30) connects to the contacts app to add a per-
son’s address to her contact info, and to email and MMS for sharing a location. (Of course,
many other applications, both mobile and otherwise, also have “Email this” or “Share this”
features. See the
Sharing Widget pattern in Chapter 9, for example.)