Iterative Design of a Mobile Screen

(Sidebar to Jakob Nielsen's column on Optimizing a Screen for Mobile Use, March 2011)

Even the most talented genius designer can't design the perfect user interface in one attempt. For sure, we admit that we can't do it. Instead, we used iterative design in our recent exercise to redesign the mobile AllKpop.com site.

Following are the 3 iterations.

Redesign iteration number 1
Redesign iteration #1.

The biggest problem in iteration #1 was using text from the beginning of each article for the summaries. Often, these words didn't do the job of supplementing the headline to give users a preview of the article's main points. For iteration #2, we wrote custom summaries.

A second problem was the thumbnail for the first story, about the 9-member "Girls' Generation" group SNSD. It's tough to show several people in 50x50 pixels. Here are some alternate thumbnails we considered: in general, the closer you crop the photo, the more recognizable the thumbnail.

4 versions of a thumbnail to represent the Korean SNSD pop group
Design iterations of the SNSD group's thumbnail.

Redesign iteration number 3
Redesign iteration #2.

For iteration #2 we reintroduced two features from the live site: the search and the publication date. It's good to remove features, but these two were too important to miss.

We reintroduced some simplification by aggregating less-used navigation methods into a single drop-down menu. However, in iteration #2, the menu and search options were too small and close together for touchscreen use. We fixed this in iteration #3:

Redesign iteration number 3
Redesign iteration #3.

Here, we further enhanced headline scannability by highlighting the featured pop star's name.

Testing Needed

The main article shows our final redesign. However, this is not truly the "final" redesign. If we'd done this as a consulting project for a real client instead of as a simple exercise for this article, the next step would have been user testing.

The redesign includes several questionable elements that would benefit from a usability study:

Would it be better to have smaller story tiles and show more stories on each screenfull?
Do people realize that the top date stripe is the publication date for all the stories between it and the next date stripe (which is usually one or two screenfulls below the fold)?
Could headlines, decks, and thumbnails be written/cropped better? What do people look for when choosing articles to read? Content usability is usually the biggest determinant of website success.
- In particular, what's the best way of depicting a group? A close-up shot of a single singer (the last idea in the set of four SNSD attempts above) seemed too focused on that individual. In our final design, we picked more of an "action" shot of one singer in costume to make it feel more like a performance than a portrait. But would it be better to show 2–3 singers?
- Is it better to retain the same thumbnail at all times for any given star, or should we have a photo editor pick new pictures that better illustrate each story? New thumbnails are obviously more interesting, but persistent thumbnails promote faster recognition and save download time because most image files will be cashed.
Does the "Categories" menu work? Should it have a different name and/or contain different menu items?
When you use a name's possessive or plural form, such as "SNSD's" in the sample screenshot, is it better to highlight the entire construct (including the apostrophe and the "s") or just the main name? That is, should it be SNSD's or SNSD's? The former might look better, but the latter might be more scannable. Answering this question would require an elaborate eyetracking study that's almost certainly not worth doing because the difference between the two designs is likely to be less than 1%. So, for this decision, it's probably better to rely on the visual designer's judgment rather than testing; we have bigger fish to fry that'll probably gain anywhere from 10–100%.
What did we overlook in testing the live site? The above list names some "known unknowns," but the "unknown unknowns" are often more important: every time you test a new design, new issues arise. You can't assume that you have a complete picture of all user experience questions just because you tested one corner of the design space. If you don't get any unexpected findings from usability testing, you didn't run the study right.

Luckily, user testing can be fast and cheap, so it should be possible to continue with several more iterations and get an even better design that would make even more money for the site.

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 training courses at the annual Usability Week conference: