Tidwell J. Designing Interfaces (Second Edition)
Подождите немного. Документ загружается.
The Challenges of Mobile Design 443
Difficulty of typing text
No one likes typing text on a touch screen or keypad. You should design interaction
paths through your site or tool in such a way that typing is unnecessary or very lim-
ited. Use
Autocompletion (Chapter 8) in text fields whenever possible, for instance,
and prefill form fields whenever you can do so reliably. Remember that numbers are
much easier than text in some contexts, however.
Challenging physical environments
People use their phones and other devices in all kinds of places: outside in the bright
sun, in dark theaters, in conference rooms, cars, buses, trains, planes, stores, bath-
rooms, and in bed. Think about the ambient light differences, to begin with—tasteful
gray text on a gray background may not work so well in direct sun. Think also about
ambient noise differences: assume that some users won’t hear the device at all, and
that others might find sudden noises jarring and inappropriate.
Finally, think about motion. Tiny text is hard to read when the device (or the user)
is moving around. And a tiny hit target on a touch screen device will be hard to
use under the best of circumstances, but it can be nearly impossible on a rocking
and jolting bus! Again, design for “fat fingers,” and design so that mistakes are easily
corrected.
Social influences and limited attention
Most of the time, mobile users won’t spend lots of time and attention on your site
or app. They’ll be looking at your design while doing other things—walking, riding
in a vehicle, talking with other people, sitting in a meeting, or (God forbid) driving.
Occasionally a mobile user will focus his full attention on the device, such as when
playing a game, but he won’t do it as often as someone sitting at a keyboard will.
Therefore, design for distracted users: make the task sequences easy, quick, and reen-
trant. And make everything self-explanatory.
Another assumption you can make is that lots of mobile users will be engaging in
conversations or other social situations. They may pass around the device to show
people something on-screen. They may have people looking over their shoulder.
They may need to suddenly turn off the sound if it’s not socially acceptable to have a
noisy device—or they may turn it up to let others hear something. Does your design
behave well in these situations? Can it support graceful social interaction?
How to Approach a Mobile Design
In his book Mobile Design and Development (O’Reilly, http://oreilly.com/ catalog/
9780596155452/), Brian Fling tells a difficult truth: “Great mobile products are created,
never ported. Start by understanding your users and the benefits the medium has to offer.”
If you’re simply trying to take a site’s usual content and cram it into a 320 × 480 window,
stop. Take a big step back and look at the whole picture.
444 Chapter 10: Going Mobile
1. What do users in a mobile context actually need?
A person who is out and about with a mobile device may only want to use your site (or
app) in particular ways; she won’t have the same range of needs that a user of the full site
will have. Design for use contexts such as these:
• “I need to know this fact right now, quickly.”
• “I have a few minutes to spare, so entertain me.” (See the
Microbreaks pattern in
Chapter 1.)
• “Connect me socially.”
• “If there’s something I need to know right now, tell me.”
• “What’s relevant to the place I’m in right now?”
2. Strip the site or app down to its essence
Don’t be afraid to take away all that other stuff—the extra content, eye-catching features,
sidebars, pull quotes, ads, images, site maps, social links, and so on. Focus tightly on the
few tasks that mobile users will need from your site, use minimal branding, and chuck
the rest.
In fact, make sure that even on the home page (for a website) or the first working page of
an app, relevant content appears high on the screen. That means getting rid of the “layer
cake effect” of logos, ads, tabs, and headers that stack up on the screen. See Figure 10-1
for a poor example; the only piece of content that a user really cares about is the score at
the bottom of the screen! (If the user rotated the phone sideways, the score wouldn’t even
be visible above the fold.)
Figure 10-1.
NBA.com, where the only information the user cares about is at the bottom
The Challenges of Mobile Design 445
Having reduced the site to its minimal form, you should then make sure that a user who
really needs the full nonmobile site can get it. Put a link to the full site in an obvious place.
Remember that many of the world’s people can get web access only through their phones,
so you can’t count on them just going to the full site on their large screen—they may not
have one.
Alternatively, you might create the two “separate and parallel” designs mentioned earlier,
in which all the site’s functions and information are presented in the mobile site (mean-
ing the user never has to go to the full nonmobile site). You may still need to strip down
the home page or main screen. Instead of having a flat and broad navigational hierarchy
in which the home page has a zillion links directly to other pages, you may need to reor-
ganize the site so that the hierarchy is somewhat narrower and deeper. This lets you put
fewer options on the home page, which means less clutter on a small screen. (Of course,
you’ll have to balance that against the time it takes for a user to jump from page to page!)
3. If you can, use the device’s hardware
Mobile devices offer wonderful features that you don’t get on the desktop. Location, cam-
era, voice integration, gestural input, haptic feedback such as bumps and vibrations, and
other features may be available to you. Some devices multitask so that your app can be
running in the background while the user is doing other things; can you use that?
4. Linearize your content
This goes back to the width problem. Many devices simply don’t give you enough pixels
in the width dimension to do any interesting side-by-side layouts. Instead of forcing the
issue, just accept that one way or another, your content will end up being laid out verti-
cally. Order the mobile site’s content so that it “reads well” when laid out this way. See the
Vertical Stack pattern in this chapter.
(Several writers have pointed out that this linearization of content also makes the mobile
site’s content more accessible to screen readers and other types of devices. This is a non-
trivial point. Can your main site, in fact, be linearized this way? Does it make sense if you
read the content in its HTML order, with no CSS styling or layout?)
5. Optimize the most common interaction sequences
Once you’ve decided which tasks your typical mobile users will want to perform, and
you’ve narrowed down the site to only the most relevant content, try to make those tasks
as easy as possible by following these heuristics:
• Eliminate typing, or reduce it to as few characters as possible.
• Use as few page loads as possible, and don’t inflate pages with unnecessary bytes.
Download times can be very slow; most parts of the world are still outside the reach
of high-bandwidth wireless Internet facilities.
446 Chapter 10: Going Mobile
• Reduce scrolling and sideways dragging, except where it eliminates page loads and
typing. In other words, prefer one long vertical page to many small pages if you have
to present a lot of content.
• Reduce the number of taps it takes a user to reach the desired information or ac-
complish a task. Tapping large hit targets—or using hardware buttons—is better than
typing by a long shot, but try to reduce them anyway.
For more information on mobile design guidelines and an analysis of mobile usability
tests done on various websites, see the Nielsen Norman Group’s study “Usability of Mobile
Websites,” at http://www.nngroup.com/reports/mobile.
Dan Saffer’s book Designing Gestural Interfaces (O’Reilly, http://oreilly.com/
catalog/9780596518394/) discusses the common gestures used in touch screens, among
other topics relevant to mobile devices.
Finally, the Design For Mobile pattern library, at http://patterns.design4mobile.com, con-
tains many good patterns in addition to those found in this book.
Some Worthy Examples
Here are some mobile versions of home pages that manage to meet most of the design
constraints listed in the preceding section, while retaining the branding and personality
of each site. Figure 10-2 shows examples of each.
JetBlue.com
If someone is accessing JetBlue’s website from a mobile device, it’s a really good bet
that he’s actually traveling on JetBlue that day! He may be trying to get information
about his flight, for instance. That’s exactly what the JetBlue mobile site offers. The
first items are the most useful to a traveler: flight information, check-in, and alerts,
with further options for booking flights and in-flight entertainment. The page is sim-
ple and linear, and the items are easy to read and tap.
RuthsChris.com
Mobile users who go to restaurant sites probably want to see locations, peruse menus,
or make a reservation. This simple site does those tasks with style. (The site would be
even better if the device’s browser knew the current location so that the user could tell
the site to “find the restaurants closest to me.”)
Boston.com
This news site has a clean design and packs useful information into a small space: the
weather, the baseball score, leading headlines, and the first 20 or so words of each ar-
ticle. The site satisfies mobile users’ needs to fill up a minute here and a minute there
of “found time.” The entire area of each article summary can be tapped, making the
summaries easy to navigate.
The Challenges of Mobile Design 447
Fidelity.com
People who watch the financial markets compulsively will find current data on the
three big U.S. market indexes at the top of the mobile page, plus a way to search for
specific quotes and navi gation links into other timely topics (such as news, watch
lists, and personal portfolios). Useful inform ation is surfaced right on the home page,
and a much deeper data set is easily available from the choices given.
Figure 10-2.
Good examples of mobile sites: JetBlue, Ruth’s Chris, Boston.com, and Fidelity
Do wnl oa d fr om W ow! e Bo ok < ww w.w ow eb oo k. co m>
448 Chapter 10: Going Mobile
The Patterns
In the introduction, we talked about the need to structure content in a vertical column for
maximum flexibility. The
Vertical Stack pattern goes into more detail.
1.
Vertical Stack
A mobile application needs a way to show its top-level navigational structure. A persis-
tent toolbar across the top or bottom of each app page is one standard way to organize a
mobile interface; tabs and full-page menus are two other common ways. Less obvious, yet
worth mentioning, are the
Filmstrip and Touch Tools patterns.
2.
Filmstrip
3. Touch Tools
Mobile web pages often use the Bottom Navigation pattern for their global menus, prefer-
ring to use valuable top-of-page space for more immediately relevant content.
4.
Bottom Navigation
Lists are everywhere in the mobile world—lists of apps, pictures, messages, contacts, ac-
tions, settings, everything! Both web pages and applications should present well-designed
lists that look good and are usable. Ordinary text lists are often adequate, and
Carousels
and
Thumbnail Grids work beautifully in mobile designs. (See Chapter 5 for those patterns
and more discussion of list design.) Consider using a
Thumbnail-and-Text List as well, be-
cause they’re usually simpler than
Carousels and Thumbnail Grids. Sometimes an Infinite List
suits the needs of mobile designs.
5.
Thumbnail-and-Text List
6. Infinite List
The remaining patterns are a grab bag of topics related to mobile design.
7.
Generous Borders
8. Text Clear Button
9. Loading Indicators
10. Richly Connected Apps
11. Streamlined Branding
The Patterns 449
Vertical Stack
Figure 10-3.
Google News vertical layout
What
Order the mobile page’s content in a vertical column, with little or no use of side-by-side
elements. Let text elements line-wrap, and let the page scroll down past the bottom of
most device screens.
Use when
Most mobile web pages that must work on devices of different sizes should use this pat-
tern, especially if they contain text-based content and forms. (Immersive content, such as
a full-screen video or game, won’t generally use this because it doesn’t usually scroll like
a text-based page does.)
When going from one page to another is expensive—as is the case with web pages, which
take time to download—this pattern is applicable. On the other hand, an app that resides
on the device can go from page to page almost instantly, since the content doesn’t have to
be downloaded. For these, it makes more sense to structure the content into single screen-
fuls so that the user never has to scroll vertically—she can just tap or swipe. But vertical
scrolling of a long page is preferable to interminable waits for downloads.
450 Chapter 10: Going Mobile
Why
Devices come in different widths. You can’t always anticipate what the actual width in
pixels will be, unless you detect the screen width at runtime or build apps for particular
devices. (You can create optimized designs for single devices or standard device-specific
widths, but not everyone has the resources to do so.)
A fixed-width design that’s too big for the physical device can scroll sideways or be
zoomed, but these designs are never as usable as those that let the user simply scroll down.
Font sizes may also change unbeknownst to you, and as in the
Liquid Layout pattern, a
Vertical Stack with line-wrapped text elements will adjust gracefully when this happens.
How
Lay out the page’s content in a scrolling vertical column. Put the most important items on
top and less important items farther down so that most users can see the important stuff.
Useful content—from the user’s perspective, that is—should show up in the first 100 pix-
els (or less) of this
Vertical Stack. This top part of the screen is precious real estate. Don’t
waste it with too-tall logos, ads, or endless toolbars all stacked up into a “layer cake” that
pushes all the useful content off the bottom of the page! That annoys users to no end.
Put form labels above their controls, not next to them, to save horizontal space. You will
need all the space you can get to show text fields and choice controls with adequate width.
Put buttons side by side only if you’re really sure their total width will never be wider than
the visible screen. If the buttons contain long text that might be subject to localization or
font enlargements, forget it.
Thumbnail images can fit beside text fairly easily, and it’s common to do this in lists of
articles, contacts, books, and so on—see the
Thumbnail-and-Text List pattern. Make sure
the design degrades well when the screen width is reduced to 128 pixels (or whatever the
realistic minimum happens to be when you create your design).
Examples
The sites for ESPN, the Washington Post, and REI (Figure 10-4) demonstrate three styles
of using a
Vertical Stack. ESPN places only the most immediately relevant content on the
home page, preferring to put the rest behind menu items on the bottom of the page. The
Washington Post puts it all out there; the stack shown in the figure is just a small fragment
of the entire page! REI simply shows a menu of all the available places and ways to shop,
with no ads or teasers on its home page.
The Patterns 451
Figure 10-4.
Vertical Stacks on the mobile sites for ESPN, the Washington Post, and REI
452 Chapter 10: Going Mobile
Filmstrip
Figure 10-5.
iPhone Weather app
What
Arrange top-level pages side by side, and let the user swipe them back and forth to view
them one at a time.
Use when
You have pages of content that are conceptually parallel, such as the weather in different
cities or the scores in different sports. Users won’t mind swiping through these pages,
going through several before reaching the one they’re looking for, because they are all
potentially interesting.
This pattern can sometimes be a viable alternative to other navigation schemes for mobile
apps, such as toolbars, tabs, or full-page menus.
Why
Each item to be displayed can occupy the entire screen; no space needs to be used for tabs
or other navigation.
Since the user can’t jump straight to a desired screen—he has to swipe through others to
get there—this pattern encourages browsing and serendipity.
Swiping seems to be a very satisfying gesture for some users.