Mobile web through the users’ eyes
How Progressive Web Apps can address UX issues.
The mobile web experience
At Google we have unique insight into how people use the mobile web; but while we can look at data, that doesn’t give us the whole picture. We’re also interested in understanding what gives people a great experience, and what doesn’t work well.
We conducted in-depth user research interviews with 24 participants in the US who we interviewed for 1.5 hours each, in all collecting 36 hours of interview data¹. Through this we learnt about what works for people about the mobile web, and what some of the issues are, and identified opportunities for developing better experiences. These better experiences can be developed through implementing web fundamentals, such as responsive design and the adoption of best practice design principles, as well as more recent technologies — those that together, comprise a progressive web app (PWA).
In our study we found that users were appreciative of the mobile web enabling them discover and explore services or tools:
“It’s actually easy to seek out and discover mobile sites because one link will lead to another link, will lead to another link.”
Users like the fact that with the web they don’t have to download anything (or very little), and that this therefore doesn’t take up room on the phone — leaving more space for photos, or apps that they regularly use:
“This is the best thing about websites is that you can go somewhere, do something, and then leave it there. It’s not going to take up your memory on your phone later.”
As developers or website owners we need to remember that users have a comparative reference point for websites in many cases and that’s the desktop website. Some users do note the benefit and elegance of mobile sites:
“A mobile website is optimized for the smaller screen. Ideally, it uses less data than the main website, and provides information in a more linear fashion.”
The comparison means that they’re also aware of when key data is missing:
“Sometimes I’m on the mobile website and I’m like, ‘no, it’s too streamlined’ [and] I feel that the mobile website isn’t showing me what I want.”
As website owners we have to be very knowledgeable about users’ journeys to made sure key features or content are not missing from our mobile site experiences.
Mobile web optimization
Some of the participants in our study were aware that there are still some websites out there that are poorly optimized, or not optimized at all:
“[With a] mobile website sometimes it’s hard to press a link or a button. And sometimes you have to zoom in to the link or the action you want to take.”
At Google we recommend creating a responsive site. And for developing a good user experience, try applying these 25 mobile web principles to your site.
There’s also opportunity for us to speed up the mobile web, because as we’ve learnt through another study, if a site takes longer than 3 second to load, it can lead to 53% of people abandoning. In our recent study, this participant, for example, was aware enough of a few second delay in loading, to mention it:
“[With] websites, even if there’s a bookmark, it takes a couple seconds to load.”
Speed is critical
We recommend that your website should be interactive by 5 seconds on a 3G network. It’s therefore important to consider how your website deploys. Consider performance as a critical element of your strategy. Invest in developing Accelerated Mobile Pages (AMP) for a faster experience, or use component libraries such as Polymer, Material-UI or Material Design Lite for performant and polished site interactions.
Another aspect of the mobile web that can still be challenging for consumers, and particularly concerning for bigger ticket items is the check-out process on e-commerce sites:
“It’s a little tedious [to purchase on a mobile website]… sometimes when you’re filling out your information the drop down boxes aren’t as easy to get to.”
Our recommendation for a more seamless check-out experience is to focus on the experience and user flow, remove unnecessary steps (making sure the experience is still comprehensive) use autofill for forms, and include Google’s Payment Request API or Apple Pay for smoother transactions.
Develop better ad experiences
Be cognizant of and careful about the experience you’re providing as you monetize your site with ads:
“Sometimes reading articles on the web, you get so many pop-ups that it’s just too frustrating.”
Less obtrusive ad experiences are preferred, particularly those that give the user clear control, and enable them to be able to dismiss the ads. Research on ad preferences by the Coalition for Better Ads gives a good insight into ads types that are problematic and those that are acceptable on the mobile web.
Enable mobile web re-engagement
On the mobile web, in contrast to apps, if a user wishes to return to a site, it can be difficult to find it again:
“For me to access a mobile site I’d have to Google or remember the website from memory, or I’d have my phone kind of auto fill it for me.”
For this reason technology has now been developed that enables a user to add the mobile web icon to their homescreen, just as is the case with native apps. See the example below:
And re-engagement can also be enabled by mobile web notifications now, see:
Note that as developers and website owners we need to be mindful of not over-using notifications:
“I find if you have notifications for everything, then nothing is important.”
Notifications need to be timely, precise and relevant. For the design and creation of notifications, follow the guide for making great web push notifications and the permissions models for users to allow them.
Location-based opportunities
Of course there’s some relevant timely information that mobile websites can offer now, and the study showed that some users are moving from skepticism, to trusting how such information will be used:
“Say I’m in Oakland, and I don’t know where the closest [Chinese food chain] is. So if I pull up their website if it asks me for location, then hopefully [it will] show me a list of the closest [Chinese food chain stores]. So I have learned over time to not be suspicious when that question comes up. And to just [realize] sometimes they’re trying to help me and make life easier.”
The mobile web offline!
Finally, when there’s no network connection, this has traditionally provided a poor experience on the mobile web. Service Workers can be utilized to cater for providing an offline experience for the mobile web. As cute as this picture is …
… we don’t want people to be stuck staring at dino.
PWA’s FTW!
All-in-all — you should be aiming for the website experiences that you create to be fast, integrated, reliable and engaging. Consider the elements of a PWA for the development of your next online experience.
[1] Participants were screened for their use of technology, so that very tech savvy or very tech novice users were not selected for participation. Half of the participant sample were iPhone users, and half were Android users. There were equal numbers of males and females in the study.
With thanks to Mustafa Kurtuldu, Paul Kinlan and Owen-Campbell Moore for their review of this article.
