Tidwell J. Designing Interfaces (Second Edition)
Подождите немного. Документ загружается.
The Patterns 453
A disadvantage of this pattern is that it doesn’t scale very well; you can’t use too many top-
level pages, or users might get irritated at having to swipe too many times to get to a de-
sired page. Another disadvantage is lack of transparency. A new user, just seeing your app
for the first time, cannot easily see that swiping is how he gets from one page to another.
How
Essentially, a Filmstrip is like a Carousel (see Chapter 5) for a mobile application’s main
pages. One difference is that a
Carousel usually shows metadata—information about the
item or page—and context, such as fragments of the previous and next pages. Mobile apps
that use
Filmstrips as a top-level organizing device don’t generally do that.
If you want to give the user a clue that multiple top-level pages exist, and that he can swipe
between them, use a dot indicator like the Weather app uses at the bottom of its screen.
Examples
The iPhone’s built-in Weather app (shown in Figure 10-5, at the top of the pattern) uses
a
Filmstrip to show the weather in the various geographic locations that the user chooses.
Likewise, ESPN’s iPhone app structures its main pages as a
Filmstrip. The user swipes back
and forth between football, baseball, basketball, and other sports scores (see Figure 10-6).
Figure 10-6.
ESPN application
454 Chapter 10: Going Mobile
Touch Tools
Figure 10-7.
Touch tools on the iPhone photo viewer
What
Show tools only in response to a touch or key press, and put them in a small, dynamic
overlay atop the content.
Use when
You are designing an immersive or full-screen experience, such as videos, photos, games,
maps, or books. To manage that experience, the user will sometimes need controls—
navigation tools, media player tools, information about the content, and so forth. The
tools require significant space, but are only needed sometimes.
Why
The content is allowed to dominate the experience most of the time. The user isn’t dis-
tracted by controls taking space and attention away from the content. Remember that in a
mobile context, space and attention are even more precious resources than usual.
The user controls the experience by choosing when to show the tools.
The Patterns 455
How
Show the unadorned content using the full screen. When the user touches the device’s
screen or presses a particular key or softkey, show the tools.
Many apps only show
Touch Tools when the user touches a certain region of the screen.
This way, the user doesn’t accidentally bring up the tools just by ordinary handling of the
device. Also, you can bring up different tools when different regions of the screen are
touched—the Stanza book reader does this, for instance. See the example in Figure 10-9.
Show the tools in a small, translucent area that appears to float above the content. The
translucency makes the tools look ephemeral (which they are).
Remove the tools after a few seconds of nonuse, or immediately if the user taps the screen
outside the bounds of the tools. It can be annoying to wait for the tools to go away by
themselves.
Examples
The video player on the iPhone shows Touch Tools when the user taps the indicated area
of the screen (see Figure 10-8). They go away again after about five seconds of nonuse.
Figure 10-8.
YouTube for iPhone Touch Tools
Stanza, one of the many ebook readers on smartphones and other touch screen devices,
also uses
Touch Tools. Most of the time, the full screen is used to show book text. But when
the user taps the center of the screen, extra information and controls appear—book title,
author, chapter and page, settings, search, viewing mode, and a menu of yet more tools.
To explain this and the page-turning gestures, a first-time reader is shown an explanatory
dialog. See Figure 10-9.
456 Chapter 10: Going Mobile
Figure 10-9.
The Stanza book reader: default page, with Touch Tools, and an explanatory dialog
Bottom Navigation
Figure 10-10.
Amazon’s Bottom Navigation
The Patterns 457
What
Place global navigation at the bottom of the page, below the fold.
Use when
A mobile website needs to show some global navigation links, but these links represent
low-priority paths through the interface for many users.
Your highest priority on the site’s front page is to show fresh, interesting content.
Why
The top of a mobile home page is precious real estate. You should generally put only the
two or three most important navigation links there—if any at all—and devote the rest of
the front page to content that will interest most users.
A user looking for navigational links can easily scroll to the bottom of a page, even when
those links are far below the fold.
How
Create a set of vertically arranged menu items on the bottom of the page. Make them easy
to tap with a finger on touch screens—stretch them across the full width of the mobile
page, and make the text large and readable.
This pattern is closely related to the
Sitemap Footer pattern in Chapter 3. In a mobile ap-
plication, you probably aren’t trying to fit an entire site map into the footer—you only
have room for a few well-chosen links. But the idea is similar: instead of taking up too
much top-of-page space for navigation, you can push it to the bottom of the page, where
real estate is less valuable.
Examples
NPR puts an extensive footer across the bottom of each of its pages (see Figure 10-11). It
includes standard navigational links, a search box, the full-size site, a link to download an
app, and a font size control.
Amazon uses a simpler, shorter
Bottom Navigation system. See the screenshot in Figure 10-10
at the top of the pattern.
In contrast, Google uses a more web-like footer on many of its mobile properties (see
Figure 10-12). These links are smaller and look more like the brand, but they are far
harder to hit with clumsy fingertips.
458 Chapter 10: Going Mobile
Figure 10-11.
NPR’s Bottom Navigation
Figure 10-12.
Google Images footer
The Patterns 459
Thumbnail-and-Text List
Figure 10-13.
iPhone App Store
What
Present a selectable list of items, with each item containing a thumbnail image, some text,
and possibly smaller text as well. If appropriate, use bold colors, icons, and other visual
differentiators.
Use when
You need to show lists of articles, blog entries, videos, applications, or other complex
content. Many or all of these have associated images. You want to invite the user to click
on these items and view them.
Why
Thumbnail images improve text-only lists because they look appealing, help identify
items, and establish a generous height for the list items.
460 Chapter 10: Going Mobile
Reading conditions on mobile devices are rarely ideal. By adding colorful images, you can
improve the visual differentiation among items, which helps people scan and parse the
list quickly.
Many news and blog websites have converged on this design pattern as a way to show
links to their articles. They look more appealing, and more “finished,” than similar sites
that only list article titles or text fragments.
How
Place a thumbnail image next to the text of the item. Most sites and apps put the thumb-
nail on the left.
In addition to picture thumbnails, you can include other visual markers, such as five-star
ratings or icons representing people’s social presence.
Don’t be afraid to use bright or saturated colors. You probably wouldn’t design so much
visual stimulation in a desktop context, but in a mobile context, it works. Even if the col-
ors seem garish, don’t worry—small screens can handle strong colors better than large
screens can!
Examples
Many news sites use this pattern to show their articles. Yahoo! News and Boston.com offer
good examples. Special-interest journalism sites such as Mashable also use
Thumbnail-and-
Text Lists
effectively for their feature articles. See Figure 10-14.
Figure 10-14.
Yahoo! News, Boston.com, and Mashable
Videos and other media fit this pattern naturally. As shown in Figure 10-15, YouTube, IMDb,
and Kobo show thumbnails representing their videos, movies, and books. Note the rating
stars on the YouTube and Kobo listings (and on the iPhone app store, in Figure 10-13 at the
top of the pattern). These help a user scan down a list and pick out items with more stars.
The Patterns 461
IMDb also shows user ratings, but it eschews stars in favor of plain text, and it doesn’t
draw the eye—it just blends in with the rest of the text. Note also that the subdued and
tasteful colors of the Kobo book reader look beautiful, but don’t help differentiate items as
strongly as the bolder colors used by YouTube or the app store.
Figure 10-15.
YouTube, IMDb, and Kobo apps
Finally, many apps show Thumbnail-and-Text Lists of other, diverse kinds of items: birds
(from iBird Explorer), products (the Google iPhone app), and menu items in a complex
information architecture (Buzz Aldrin’s Portal to Science and Space Exploration); see
Figure 10-16.
Figure 10-16.
iBird, Google, and Buzz Aldrin
462 Chapter 10: Going Mobile
Infinite List
Figure 10-17.
iPhone Mail app
What
At the bottom of a long list, put a button that loads and appends more items to the list.
Use when
You need to show long lists of email messages, search results, an archive of articles or blog
posts, or anything else that is effectively “bottomless.”
Users are likely to find desired items near the top, but they sometimes need to search
further.
Why
The initial loading of a screenful or two of items is fast, and the user doesn’t get stuck waiting
for a very long initial page load before she sees anything useful.
Each subsequent loading of a new chunk of items is also fast, and it’s under user control—
the user decides when (and whether) she needs to load more items.
Since the new items are just appended to the current page, the user never has to context-
shift by going to a new page to see new items, as she would with paginated search results.
How
When the page or list is initially sent to the mobile device, truncate the list at a reasonable
length. That length will vary greatly with item size, download time, and the user’s goal—is
she reading everything (as with Facebook), or just scanning a large number of items to
find the one she wants (as with search results)?
At the bottom of the scrolled page, put a button that lets the user load and show more
items. Let the user know how many more will be loaded.