Jakob Nielsen's Alertbox, March 28, 2011

Optimizing a Screen for Mobile Use

Summary:
A single mobile screen with almost no features still required 10 design changes to meet usability guidelines for mobile websites.

During our recent Asia-Pacific tour, we took the opportunity to conduct several usability studies. Sometimes we tested regular websites to update seminars such as Fundamental Guidelines for Web Usability. But we spent more time on issues where we expected to find bigger regional differences, such as mobile usability and social user interfaces.

One of the mobile sites we tested was AllKpop.com, which covers a topic of seemingly great fascination in many Asian countries: Korean pop stars.

All K Pop dot com: live homepage for the mobile site
AllKpop.com mobile site, as tested in Hong Kong.

AllKpop does many things right:

Most important of all, it supports a task that's perfect for mobile use: celebrity gossip. We've known since our first mobile usability studies in 2000 that killing time is a killer app for mobile. Many other tasks make little sense in the mobile scenario; no matter how great the design, the mobile versions wouldn't get much use and creating them is a waste of time.
Almost as important, it has a separate mobile version. Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile.
Because the server auto-senses whether they're using a mobile or a desktop device, users don't have to manually choose their version. As we know from testing, usability drops dramatically when the mobile and full sites have different URLs because users often end up with the wrong user interface.
Touch targets for each headline are fairly large.
Content-carrying keywords usually appear at the beginning of the headlines. For this site, the pop star's name is the most important information for users, and it typically appears first.

However, the site doesn't follow all the guidelines for mobile usability, so we decided to create an alternative design that did:

All K Pop dot com: proposed redesigned homepage
Our proposed redesign of AllKpop's mobile homepage.

Our redesign included 10 major changes:

Fewer features, which we achieved by removing three elements:
- bylines, because they aren't needed to choose an article (which is the only point of listing headlines on the front page);
- selectable categories and tags, which were too small to hit reliably anyway (and categories like "music" seem worthless on a pop site); and
- the triangle-button that displays a summary in place (instead, we always show a summary).
Bigger touch targets. The entire story tile can now be tapped, and users no longer need the added precision of tapping the headline itself. (In the live design, each tile contains several tiny tappable areas, with low usability and questionable utility.)
Full headlines instead of truncated headlines. This is probably the biggest redesign improvement, because the full headline provides substantially stronger information scent than the few words visible on the live site.
Enhanced scannability by highlighting each pop star's name in the headlines.
Even more information scent by showing a short story summary (a "dek") under each headline.
Using pop star photos instead of date icons. Not only does this add some visual interest, it further enhances scannability and information scent as many users will recognize their favorite star's face faster than they can read a headline.
Room for 4 full story tiles without scrolling. The slightly tighter spacing lets users view the entire 4^th story summary in their first scan of the page. If users do scroll down, the ability to view more tiles in less space also means that they work a bit less for each new story, and so they're likely to want more of them. Because this second benefit is relatively small, we considered making the tiles smaller to display more stories on the first screen. On balance, the added information scent from the story summaries and pop star photos seemed a better use of the space — but testing an alternative would be worthwhile.
Showing the publication date only as a divider between stories published on different dates. Because so many stories are published each day, users typically see only the current day's date when they access the site, unless they scroll down far enough to reach yesterday's news. Thus, the story date is not worth the substantial screen real estate it occupies in the live design. In general, it's good to question any mobile design that repeats the same information multiple times; such redundancy is probably a poor use of highly limited screen space.
Adding more space between the navigation bar's two options so users are less likely to touch the wrong one.
Labeling the drop-down menu instead of simply denoting it by a triangle. (It's just above search in the original design — a subtle presentation that's mostly overlooked by users.) Depending on which commands are actually in the menu, a different name might be better. We didn't redesign the entire navigation system, but we assumed that a revised categorization system would be the most valuable and usable way to navigate the site, after headline-tapping and search. (See our seminar on IA structuring for more information on how to determine the best access schemes.)

As this example shows, even a small mobile screen has room for many user interface intricacies. Even though this site (appropriately enough) has very few features, we made 10 usability improvements — including cutting the features even more.

(The sidebar shows 3 design iterations we tried before arriving at the redesign discussed here.)

The tighter the design constraints, the more you must polish the user interface to deliver optimal usability. And mobile is an incredibly constrained design problem.

Learn More

293-page report on Usability of Mobile Websites and Applications with 210 design guidelines and 479 screenshots is available for download.

Full-day seminars at the annual Usability Week conference: