I believe that the user experience of mobile newspaper websites can be greatly improved. Armed with feedback from a small remote user test of the mobile pages of two big newspapers, I want to explain why I think these sites fail in some key area’s, and make some suggestions for improvement.
The USA Today and the Washington Post are both among the biggest newspapers in the United States. They differ in their tone of voice, but together they form a very rough average of the mobile newspaper sites available.
I’ll look at the user experience of these sites by discussing two use case scenario’s, and afterwards explain how these sites can be improved by less clutter, better typography, and a stronger visual hierarchy.
A mobile user test of USA Today and The Washington Post
Usabilla recently added support for testing on mobile devices, and I used it to set up a test that included screenshots of the mobile pages and these three tasks:
Mark the things that draw your attention the most: For this seemingly trivial task, I’m equally interested in where people don’t tap and where they do tap. I can construct the perceived hierarchy of the page by seeing which areas get a lot of attention and which ones don’t.
Where would you go to read financial news?: This is a performance task, designed to test how many people can find a desired section, and how long it takes them to do so.
Please note the things that could be improved: This is an open feedback task. I asked people to leave a note on the elements that they thought needed improvement. Note how this is euphemistically phrased: if I asked people what they hate on this page, I would get less constructive feedback.
First scenario: Browsing for headlines
I think this scenario is the most common: you open the mobile page of a newspaper while you are away from your house and work (possibly waiting for the bus, or until someone returns from the bathroom), scan the offered headlines and pick one you like for further reading.
For this most common use case, the headlines are the most important interface elements. A lot of their power lies in the wording that is used. Good headline writing is an art in itself. But headlines also need to be orderly presented and easy to tap or point to on any mobile device.
When I open both mobile pages on my iPhone, I see exactly one or two headlines:
Have a look at the feedback on the task “Mark the things that draw your attention the most” on the USA Today page. See how the taps concentrate on the featured article and sections (click image to enlarge)?
This is interesting: apart from the header, only the featured article gets a lot of attention, most of all the accompanying big picture. The other headlines are not clicked on at all!
The same question on the mobile page of the Washington Post reveals another pattern. Rather than one big featured article, there are five ‘Top Stories’ on display. These headlines do get a fair amount of attention. Beneath these featured top stories the attention wanes quickly, however (click image to enlarge):
Second scenario: Looking for specific news
Looking for news of a specific subject is another common use case of mobile newspaper sites. Most sites offer their headlines clustered in sections. If this is done well, a specific category can be found easily while scanning. Well named sections, a clutter free page and a general sense of visual hierarchy all assist this.
To see how our participants would go about reading specific news, we presented them with the task “Where would you go to read financial news?”.
This task seemed hard to accomplish on the mobile page of the Washington Post. There are no sections on top, and the sections only appear after scrolling a long while down. Only 40 percent of the recorded taps were on the correct ‘Business’ section, and they also took 10 seconds on average to get there. See how the section is buried in a sea of boredom? (Click to enlarge)
The scenario is easier to accomplish on the mobile homepage of USA Today: There is a section button on top, you need to scroll less, and their section is aptly called ‘money’. This one was a bit easier to find. (Click to enlarge)
70 percent of the taps were on target, and the participants finished the task in 6.6 seconds on average.
Although the wording of the sections certainly is a big factor, the layout of the sites play a big part too. Again, this is a matter of visual hierarchy. USA Today uses colored blocks, and indented headlines to communicate what belongs to one section. The Washington Post shows a lot more Top Stories before the sections, and uses a bland section header.
Less clutter. Better typography. Stronger hierarchy
When I asked the participants to “please note the things that can be improved”, most feedback concerned the clutter on the pages and confusing copy on elements. A selection of notes on the site of USA Today:
- The page is way too cluttered!
- There is so much going on, which is confusing
- What does this mean, stock numbers? It’s confusing
- Section button is too small
- Am I going to the category this way?
- Move above news content. Make this highly visible
A selection of notes of improvement for the page of the Washington Post:
- The page is too long, type is small. It’s boring!
- The header is small and dull
- Why is the page so long
- What do they mean with sections? Like tags or?
- Text flow around the pic can be problematic, e.g. if this paragraph ended with the word pose it would be stuck out on its own
- More spacing would make it easier to tap
Like a lot of sites that have to present a large amount of information, these mobile newspaper sites bring down the user experience by confusing the user with clutter. They have so much trouble deciding what is important that they just put too much on display—it’s like they have a hoarding problem. Clutter is bad on these mobile sites for two reasons: first, less screen real estate on mobile devices makes information harder to find, and second, a cluttered presentation is more annoying in the context of a five minute window of news consumption on a mobile device. How to avoid this?
Present a collection of headlines, designed from the typography out, and establish a strong visual hierarchy.
In a perfect world, all mobile newspaper sites would be just a collection of headlines, with clear sections that are always in reach. These sites need to be designed from the typography out, which means letting the typography take center stage. The strange thing is that newspapers themselves have a lot of knowledge on good type design. I can only hope that this knowledge will find its way into their digital presence. Modern browsers handle type much better than a few years ago, so there is no excuse around a careful consideration of typographic details.
The visual hierarchy can be achieved by letting a few headlines standout on their own, as featured stories, and by grouping the rest of the headlines into categories. The user test showed that participants can much more easily find their way on a site with clearly separated sections, like the USA Today page.
Let’s hope that big news corporations will continue to improve their mobile web pages. If you have any interesting examples of well designed mobile newspaper sites or have other comments, please feel free to share them.