We've recently run many user studies, watching people read information on mobile devices. Our research included mobile websites, apps, and email newsletters. Across all formats, there's one indispensable element: focus.
Of course, there are many other points to consider (detailed findings to be presented in our training courses on writing), but this one issue is the main usability guideline for mobile content:
- When writing for mobile users, focus their attention on the essential content.
Content comprehension suffers when you're looking through a peephole, because there's little visible context. The less you can see, the more you have to remember, and human short-term memory is notoriously weak.
Our own studies of mobile usability have found that users are typically rushed when using their mobile devices. A contrasting mobile use case is people who simply want to kill time while waiting for something. However, most tasks are at least somewhat goal-directed, and people using a mobile device often have minimal time to accomplish them. For example, when you check email on your phone, you tend to allocate less time to a newsletter than you would when reading email at home or in the office.
We've known for 14 years that it's best to be concise when writing for the Web. Mobile simply reinforces this point and stretches it to the limit. Short is too long for mobile. Ultra-short rules the day.
How to be super-concise and still offer the info people need? By deferring secondary information to secondary screens. The first screen users see should be ruthlessly focused on the minimum information needed to communicate your top point. In other words, impose a mini-IA on your mobile copywriting. (It's not just "copy," it's a tiny information space.)
Example 1: Mobile Coupons
Discount coupons are a perfect mobile service because they're highly dependent on time and/or location: Flash sales have a sense of urgency because people want to know about a coupon before it sells out. Similarly, people are likely to be interested in coupons for shops and products they encounter while they're out and about (and away from their desktop computers).
Here's an example of how a Groupon deal looks on an Android phone:
Mobile Groupon deal: Initial view (left).
You get the detailed view (right) when you select "More about this deal" on the first screen.
The initial view is clearly suited for the hurried mobile user. The detailed view, on the other hand, is a nice second step for people who are really interested, but it would have been a great turn-off to show this wall-of-text as the first screen.
Groupon worked well in our mobile usability study. A competing service, LivingSocial, did poorly:
Mobile LivingSocial: Sample deal.
LivingSocial offends against several mobile usability guidelines. Cute babies are always nice, but in a mobile user interface, stock photos only push salient information off the small screen. (Our seminar on Visual Design for Mobile Devices and Tablets covers how to look good without wasting space.) With this layout and writing, it's hard to find out what you're buying. And if there's one thing we know about mobile users, it's that they are usually too busy to work at finding information.
(In fairness to LivingSocial, the Buy Now button does follow guidelines for easy touchability on a mobile screen: it's big, clear, and has nothing near it that users might tap by mistake.)
Here's what two of our study participants said about these two ways of presenting coupon offers on mobile devices:
- LivingSocial's presentation: "It just seems like more of a display that would be on a website as opposed to adapting it on the phone. It would be fine to me if it was on my computer." The same user, on the Groupon app: "It's the quick version on the front. There are options to see more, but there isn't a ton of info. Since it's a phone, crowding the screen isn't a good idea."
- Another user on Groupon: "I like the really quick bulleted format." And on LivingSocial: "You have to read through the whole thing to see what's included in it."
(Now that usability testing has identified Groupon as having a good mobile user experience does that mean that I endorse its proposed $30 billion stock valuation? No, because any other site could learn how to do as well by taking a $769 course or by spending a week on a quick study with its own customers. Also, we're clearly in a stock market bubble for social networking sites — I refer you to read my 1999 column about the first dot-com bubble and unrealistic valuations of usage stats.)
Example 2: Progressive Disclosure in Wikipedia
Wikipedia has always had two good things going for it: extensive hypertext linking and exhaustive content, telling us something about everything. Wikipedia has also always exemplified bad writing, with contributors who have little insight into a topic's truly important aspects and thus have an inability to prioritize information in their articles.
Given this decade-long tradition, I was surprised that Wikipedia scored well for information prioritization in our recent study. Here's an example of how an article looks the first time users see it on their phones:
Mobile Wikipedia: Initial article view.
This design nicely focuses users on the article's key points, while deferring secondary information. Of course, this is nothing but a case of progressive disclosure, which is a very old idea in human–computer interaction. This established design principle comes to the forefront when writing for mobile.
It's particularly effective to show an outline of the secondary information instead of dumping it into a linear scrolling page. Users can immediately see, for example, that there's a section about awards. And if they care about awards, they can expand this section without having to slug their way through a long biography section.
Here's what some of our test users said about mobile Wikipedia:
- "It's sort of giving me an outline. They have their TOCs at the top, so it gives you the headings but not the whole thing. So you know what the heads are in the article and go to them as you wish."
- "I like that [hiding content] better than having everything available. I can open the bio and not see all the references. It's something I appreciate."
Of course, in true obsessive-compulsive Wikipedia fashion, this article also includes material that's definitely not well-written for mobile. Given that users are likely interested in understanding Dr. Huang's scientific accomplishments, explaining how her name would be transcribed in Pinyin and Wades-Giles is not even secondary information — it's tertiary at best and should have been banned from the mobile version.
Deferring Information = Initial Info Read More
It's a tough decision to defer most of your information to secondary screens because many users will never see it, even though you no doubt consider it very important.
But remember: if you make the first screen too dense, then nobody will read anything. Better to focus the initial screen and let those users who're particularly interested dig into the rest. That way, you'll satisfy more customers, get more traffic, and derive more business value from your mobile content.
Full Report
The full report with all our research into mobile user experience with actionable design guidelines for mobile sites and apps is available for download.
