Screen size, fat fingers and more
Reading your web page on a smartphone is like reading War and Peace through a keyhole.
It’s not easy to reach readers on mobile devices. The small screen size, touchscreen and more add up to a lot of usability issues.
Here, according to Raluca Budiu and Jakob Nielsen, authors of User Experience for Mobile Applications and Websites, are 5 obstacles to look out for when writing for the mobile web:
1. Screen size
Smartphones have touchscreens that are about 3.5-x-6.5-inches large, according to Budiu and Nielsen’s definition. That’s a tiny window through which your visitors see your web pages, blog posts, news releases and social media status updates.
That means that the content displayed above the fold on a 30-inch monitor requires five screens on a smartphone. As a result, mobile web visitors must:
- Work harder to get the same amount of information
- Remember information that isn’t visible on the small screen
That adds up to a lot of cognitive overload. As a result, reading on a mobile device cuts comprehension in half, according to research by R.I. Singh and colleagues from the University of Alberta.
Small screen size also means that every pixel of mobile screen real estate is as valuable as Central Park-facing real estate.
“Whenever you include a new design element or a new piece of content on the mobile screen, something else gets pushed out (or below the fold),” write Budiu and Nielsen. “Think hard of the opportunity cost of each new element: What does it mean for the users if you leave out element B in order to include element A? Is element A more important than element B?”
2. Portable and interruptible
Because every mobile phone is designed to fit in a pocket or a purse, people use them anywhere and everywhere.
But communication on the go is difficult, because mobile web visitors are likely to get interrupted at any moment. They’re cooling their heels with your blog post at the doctor’s office — when their name is called. They’re looking up the date of your webinar in the grocery line — when it’s their turn to step up to the cash register.
The result of these interruptions: Attention spans on mobile devices are half as long as on desktops, according to a Mobile HCI study (PDF):
- Average desktop session duration: 150 seconds
- Average mobile session duration: 72 seconds
“Because attention is fragmented, strive to show users what they need as soon as possible),” write Budiu and Nielsen. “Flooding them with details and asking them to parse walls of text for relevant facts is not interruption friendly. The gist should always come before the minutiae. A simple task is easier to finish quickly. It’s also easier to resume than one with many steps and alternatives.”
3. Single window
Most mobile visitors can see only a single window on their phones. They can’t split screens or work with two apps at once.
Imagine your visitors trying to pick up information from one app to paste into your online form in another app. Or going back and forth between web pages to get the context they need to follow your line of thought. Or taking notes with a pen and paper so they can get something from Screen A to Screen B.
Don’t make that happen.
Two words: fat fingers.
“Not only is the screen smaller than a laptop or desktop screen),” write Budiu and Nielsen, “but design elements need to be larger than those on a regular monitor.”
5. Variable connectivity
I don’t have to tell you that — even in the era of fast cellular networks and ubiquitous Wi-Fi — coverage is not universally good.
In an environment where connectivity issues are a given, “every new page load translates into a significant waiting time when the network does not cooperate,” write Budiu and Nielsen.
- Mind the load time: Think light page designs that contain as much information as possible.
- Reduce the number page loads: Put full stories and sets of instructions on single pages. And, you know those Top 25 stories that are essentially images and captions, strung along 25 different web pages? Stop that.
How to reach readers on mobile sites
All of these obstacles can add up to a difficult mobile experience. In fact, Budiu and Nielsen have seen a 294% increase in mobile usability guidelines, from 85 to 335, since the first iPhone was released in June 2007.
To overcome these obstacles to getting the word out via mobile devices:
- Get To the Point Faster: Put the hot stuff up top for mobile.
- Chunk It Up: Prioritize page content and defer secondary and tertiary material.
- Design for Mobile: Create large, spaced out links and other touch targets for fat fingers. Minimize page size and the number of page loads.
- Cut Through the Clutter for Mobile: Make every piece you write easier to read and understand.
- Lift Ideas Off the Mobile Screen: Give the gist of your story to skimmers and scanners through microcontent.
That’s essential. Because mobile usability is harder to achieve than desktop or laptop usability.
“What’s slightly annoying” on a desktop, write Budiu and Nielsen, “is overwhelming” on a smartphone.
How can you provide a good mobile user experience through your visitor’s 3.5-by-6.5-inch window onto your world?
Sources: Raluca Budiu and Jakob Nielsen; User Experience for Mobile Applications and Websites: Design Guidelines for Improving the Usability of Mobile Sites and Apps; 3rd edition; Nielsen Norman Group; 2015
R.I. Singh, M. Sumeeth, and J. Miller: “Evaluating the Readability of Privacy Policies in Mobile Environments,” International Journal of Mobile Human Computer Interaction, vol. 3, no. 1, pp. 55–78.
M. Bohmer, B. Hecht, J. Schoning, A. Kruger, G. Bauer; “Falling asleep with Angry Birds, Facebook and Kindle — A large scale study on mobile application usage,” Mobile HCI 2011
Jakob Nielsen, “Mobile Content Is Twice as Difficult,” Alertbox, Feb. 28, 2011