Make a mobile-friendly web: prototyping Google’s best practices
Web/mobile designers! Check out Google’s top 5 mobile-friendly tips, plus get your hands on 3 must-have mobile website examples
Mobile is king. 30% of online commerce in the USA is now carried out on mobile devices; over 50% of travel tickets are set to be booked via mobile in 2016; and mobile is now the biggest channel for the majority of US banks, per volume of transactions. All of this means that companies are scrabbling to create responsive versions of their existing websites (or they should be!) and claim their piece of the mobile market pie. But what does it take to make a good mobile site?
That was the question that Google and AnswerLab addressed when they sat down for 119 face-to-face usability sessions with users in Chicago and San Francisco. Through monitoring how the participants interacted with various kinds of mobile sites, the research team identified 25 mobile site design principles that make for good mobile app experiences.
Testing out these best practices on interactive prototypes before launching your new mobile friendly site is a sound way to ensure that you effectively update your web interface and interactions to cater for the specialized demands of mobile users.
What Google and AnswerLab did
- 119 hour-long in-person usability sessions with people in Chicago and San Francisco.
- Participants carried out tasks on their own phones, both Android and iOS.
- For each site, participants had to do a conversion-focused task – purchase something, book something or research plans/prices.
- Crucially, the users spoke out loud while they conducted their tasks, and then rated their experience with each site.
- Ratings based on site experience and task success were also contributed by the research team, and errors/site issues logged according to how serious they were.
The results revealed 4 categories of mobile site design principles:
- Homepage & Site Navigation
- Site Search
- Commerce & Conversions
- Form Entry
- Usability & Form Factor
Implement Google’s mobile-friendly design tips with a prototyping tool
With Google setting the standard for mobile, your mobile design process needs to follow suit. With a prototyping tool, you can build your website from the bottom up and make sure that it’s mobile-worthy.
Pixel-perfect mobile prototypes every time
Whether you choose to go for a Responsive or an Adaptive version of your desktop site (find out the pros and cons of each here) is a decision that will be based on the parameters of the particular project. Adaptive might be a better bet if you want to implement the kind of device-specific features and functionality that Google and AnswerLab talk about, but if you don’t have time and resources in abundance you can still implement some of Google’s recommendations in Responsive.
Armed with a good prototyping tool, you can prototype a website that is 100% mobile-friendly from the jump, or you can prototype versions of your existing site to test out new interactions and flows.
If you’re prototyping with Justinmind, you can build a responsive prototype with scalable and pinnable UI elements and adaptable margins and pinnable using tables. Your designs will maintain their proportions no matter the height or width of the screen. Combine that with liquid layouts and you can mockup interactive prototypes of your website to ensure that when you launch your mobile-friendly site, it really is friendly.
Let’s have a look at Google’s five categories more closely to see how prototyping can help you build a mobile version of your site.
Prototype mobile-friendly designs that Google will love
Homepage and site navigation
Desktop and mobile homepages are very different beasts, both in terms of purpose and information architecture. On a desktop homepage, you can dedicate real estate to explaining who you are and what you do – a short tagline, branding moments or promotional offers.
On your mobile version homepage not only is space at a premium, but users don’t want to waste time: Google’s research found that “mobile users tend to be very goal-oriented – they expect to be able to get what they need from a mobile site easily, immediately, and on their own terms.”
When adapting your desktop home to mobile, Calls to Action should be given priority above all. This goes for all priority navigation flows: menu items hidden behind a hamburger are even less likely to work on a mobile than on a desktop, so place all CTAs within easy reach inside the thumb zone, and tuck secondary navigation options behind menu buttons to save space.
The menu items that are visible need to be boiled down to the absolute minimum – check out the McDonalds mobile app, in which they’ve reduced their menu bar items from 10 on the web to 4 on the mobile version. If McDonalds can slim down, so can you.
Using a prototyping tool to build mobile versions of your site before moving on to development will help you test out how the changes will look on a range of devices for both Android and iOS. This will help you catch any conflicts between established navigation systems and your desktop site (like creating a mobile site with topbar navigation for Android devices).
Once you’ve got an interactive prototype you’re happy with try it out on the device with a real user – are the calls to action obvious to them, are they reachable and do your breadcrumbs make it easy to navigate back to them homepage if they need to?
And junk the promotions. You might be able to get away with pop-ups and banners on your website, but on the mobile version it’s a different matter. Users are likely to miss key navigational items or confuse promotions with calls to action. If you must include promotion, make it obvious what it is and make sure navigation pathways are still clear.
According to Google’s findings, mobile users tend to be more goal-orientated than their desktop buddies, so the Search button is one of the key elements of any mobile adapted version. Google found that when using mobile homepages, users responded better to open-text search boxes near the top of the screen.
Adding effects like autopopulate and autocomplete, which you can prototype for, will save your users tapping themselves into exhaustion on their tiny keyboards. You can create an open-text search box in a prototype homepage and add any number of Events based on the information added.
Use data grids and lists to play with different ways to present your search results: users don’t want to jump back and forth between multiple results pages on a mobile device, so present as much as you reasonably can at first site.
Commerce and conversions
As anyone involved in eCommerce knows, the online customer journey from prospect to paid-up customer is often unpredictable. Maximizing conversions is the holy grail of design when it comes to eCommerce, but web and mobile sites have to drive sales in different ways.
Users are increasingly wary of handing over their details thanks to anxieties about spam and privacy, so sites that asked for personal information too early in the conversion process were likely to see abandonment, Google found. This was even more true if the brand was unknown. It’s a better bet to let users access your content freely and purchase without registering as a site member, simply as a guest.
You can also make use of microcopy to assuage fears about how data will be used and why customers have to give certain information before purchasing; reducing worries will boost user experience and conversions.
For some businesses, such as those in financial services, Google found that potential customers appreciate the idea that there is a real person out there ready to help with their request. Desktop sites can achieve this with a click-to-Skype button or a auto-chat box. On mobile, this can convert directly to a click-to-call button.
Form entry can be one of the weakest parts of a user’s mobile experience. Small text boxes, smaller keyboards, worries about privacy – all combine to make users sweat. When converting your desktop forms to mobile version the focus should be on making the process as painless as possible. Offering forms that switch of their own accord between numeric and and keyboard mode, or advance automatically through the information fields is a good way to keep users happy.
A prototyping tool will let you experiment with how you present options to your users: dropdown and toggle menus work best on mobile, whereas on your website you might have a slideshow or mega menus. Just make sure that forms are labelled and validate that the information is correct before users proceed. You can play around with Change Style events in Justinmind prototypes to see how to help users understand what’s happening during their form-filling activities.
Finally, progress bars will let users know how far they’ve got to go and reduce drop-out rates. There are tons of ways to prototype progress bars in your apps.
Usability and form factor
Last but not least, Google focused on user experience. User needs on a mobile site are vastly different from a desktop site, so its important to re-emphasize that just making your site smaller or fluid won’t cut it. A good mobile user experience stems from putting yourself in your users’ shoes and adapting accordingly.
One important factor that Google picked up on in their tests was users’ frustration with having to zoom in or out. When focusing in on something users are likely to miss out on other important information or calls to action, leading to frustration and dropping conversions. If your site is truly Responsive there should be little need to zoom in and out, but nevertheless attempting to keep Pinch and Expand mobile gestures to a minimum will force you to be more creative with gestures and the user interface.
Of course, getting frustrated with Zoom doesn’t mean your customers never want to see something close up and personal, particularly on retail sites when they want to know exactly what they’re buying. Include high quality close-ups of products – you can test out mobile gestures such as On Hold to find the best way to let your customers access close ups without cluttering your interface.
One big difference you have to cater for on mobile as compared to desktop is screen orientation. You’re never going to be rotating your PC (or your head) 180 degrees to get a better UX, but you are with your mobile. Design with this in mind and play to mobile’s strengths: prompt users when they should think about changing their screen orientation, but make sure priority functionality is accessible whatever orientation they eventually choose. A good prototyping tool will let you test out those rotations on real devices.
Takeaway – Google’s mobile friendly tips
Creating an outstanding mobile version of a desktop site isn’t simply a case of applying fluidity; it’s about putting yourself in the users’ shoes and changing some key functionality. The desire for efficiency and simplicity sets mobile users apart, and the constraints of a smaller screen present challenges to designers. Interactive prototypes are a great way to experiment on how to implement Google’s top 5 takeaway tips for strong mobile site adaption.
- Make sure mobile ads take users to the mobile site
- Minimize downloads
- Test on a range of devices
- Load your page content in a logical order
- Use analytics and conversion tracking across your site
We’re always up for a challenge at Justinmind, so we tried out these best practices on our own site and then ran them through Google’s tailor-made Test My Site tool, which lets you know how well your site is working across all mobile and desktop devices. We’re pretty happy with the results you can see below – thanks for the tips, Google!