Mobile Content Is Twice as Difficult
If in Doubt, Leave It Out
Defer Secondary Information to Secondary Screens
Mini-IA: Structuring the Information About a Concept
We’ve 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, but this one issue is the main usability guideline for mobile content: When you’re writing for mobile users, focus their attention on the essential content.
As discussed in the next section, research has shown that it’s 108 percent harder to understand information when reading from a mobile screen. 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.
Mobile Content Is Twice as Difficult
Research by R.I. Singh and colleagues from the University of Alberta shows that it’s much harder to understand complicated information when you’re reading through a peephole.
Singh and colleagues ran a Cloze test on the privacy policies of ten popular websites: eBay, Facebook, Google, Microsoft, Myspace, Orkut, Wikipedia, WindowsLive, Yahoo!, and YouTube.
- 5,789 words, or 35 times the number of words users read during an average page visit.
- 13th-grade reading level, so only people with a year or more of university would find the text easy to read.
- Nicely formatted for Web reading, including a good use of subheads, bulleted lists, and highlighted keywords in keeping with guidelines for writing for the Web. (That said, these guidelines also call for short text and an 8th-grade reading level when targeting a broad consumer audience, not just Harvard students.)
In any case, there’s no doubt that privacy policies count as complicated Web content.
In Singh’s study, 50 test participants completed Cloze tests while reading the privacy policies on either a desktop-sized screen or an iPhone-sized screen.
Here are the results:
- Desktop screen. 39.18 percent comprehension score
- Mobile screen. 18.93 percent comprehension score
Test scores must be 60 percent or higher for text to be considered easy to understand. Even while reading from a desktop screen, users achieved only two-thirds of the desired comprehension level, showing that privacy policies do tend to be overly complicated.
Why Mobile Reading Is Challenging
User comprehension scores on the Cloze test were 48 percent of the desktop level when using the iPhone-sized screen. That is, it’s roughly twice as hard to understand complicated content when reading on the smaller screen.
Why? In this case, people were reading only a single page of information, and they were shown that page as part of the study without having to find it. Thus navigation difficulties or other user interface issues cannot explain the increased difficulty. Also, users were tested in a lab, so there were no issues related to walking around with the phone or being disturbed by noises or other environmental events. (In the real world, such distractions and degradations of the user experience further reduce people’s ability to understand mobile phone content during true mobile use.)
The only reason mobile scored lower than desktop is the screen size, because that was the only difference in the study conditions.
A smaller screen reduces comprehension for two reasons:
- Users can see less at any given time. Thus users must rely on their highly fallible memory when they are trying to understand anything that’s not fully explained within the viewable space. Less context = less understanding.
- Users must move around the page more, scrolling to refer to other parts of the content instead of simply glancing at the text.
Scrolling introduces three problems:
- It takes more time, thus degrading memory.
- It diverts attention from the problem at hand to the secondary task of locating the required part of the page.
- It introduces the new problem of reacquiring the previous location on the page.
In Figure 4.1 you can see an article from the app How Stuff Works. The article spreads across multiple screens; to follow the details in the text, users must remember or refer back to a diagram shown on a different screen.
Figure 4.1. The How Stuff Works app on iPhone: (A) Diagram of the different camera parts and (B) the explanation of how the camera works refers to the parts in the diagram. Users must go back to the diagram to understand the explanation.
Because a small screen impairs comprehension, it’s important to make sure that it’s used optimally and not occupied with unnecessary or redundant information. For instance, Lonely Planet’s choice (Figure 4.2) to make the title of the article sticky reduces the effective screen space without adding extra value to the user. Whereas this typically is recommended for e-commerce apps (where the “Buy now” button needs to be visible at all times in case users make up their mind as they scan through the product information–see Figure 4.11 and Figure 4.12 later in this chapter), it doesn’t make sense for touring guide information. It makes even less sense when the title is as devoid of content as “Hello, Amsterdam” is. (See also Figure A.1 in the Appendix for an example of how we discovered this mobile design principle way back in 2000.)
Figure 4.2. Lonely Planet’s app for iPhone anchored the title of its article, thus reducing the effective screen space.
Because comprehension is more difficult on mobile, it’s imperative that mobile content be easy to read and scan. Roundabout, fluffy writing should be replaced with direct and concise content that is formatted for scannability.
Let’s look at some examples of good and bad writing and formatting. In Figure 4.3., Teavana is overly wordy and suffers from poor and buggy formatting: The Health Info paragraph has no punctuation and is preceded by the meaningless-to-the-user FTGOP-2(SPECIAL).
Figure 4.3. Teavana app for iPhone: Tea description page. Not only is the description in the first paragraph relatively hard to read due to the multiple clauses per sentence and the many adjectives, but the formatting is buggy.
In contrast, OSHA (Figure 4.4) deserves a prize for concise, scannable writing for mobile: Emergency information needs to be read fast and understood easily, and the bullet points and keywords help with that. However the illustrations are just decorative: It is unlikely that they can help users identify the corresponding condition.
Figure 4.4. OSHA Heat Safety Tool app for Android.
In general, bullet points make the information more scannable (Figure 4.5). In the Recalls.gov app (Figure 4.5A), the information is easy to read; the main points are bolded and attract the eye. (The use of the “previous” and “next” buttons at the top of the screen to navigate to a different article is less fortunate, because “next” and “previous” are low information-scent labels.) However too much space between bullet points can make the page look less structured, as in the HSN example (Figure 4.5B). Additionally, the table-without-borders format makes it hard for the user to know which description goes with each option. And the brand description under the first blue sentence is completely unnecessary on mobile: It does not focus on the product facts. Brand information is better delegated to a secondary page.
Figure 4.5. Bullets make the small page more scannable: (A) Recalls.gov app for Android and (B) HSN app for Android.