Google's 46 Mobile Web Design Principles

Last week we had a really interesting session with one of our clients and a Mobile Specialist at Google’s office in central London. The session analysed the performance of our client’s site on mobile devices.

Mobile traffic for our client accounts for 51% of their total web traffic, so it is vital that their mobile site is as good as possible for the job they want it to do for them – generate leads.

Google presented to us their 46 Mobile Web Design Principles, which I’d like to share with you now:

Mobile Homepage and Site Navigation

1. Make sure mobile users can easily gain access to your site through search.

2. Menus and lists need to be short and have few overlaps on mobile websites.

3. Your logo should be placed at the top of each screen and take the user back to the homepage.

4. Support mobile browsing behaviours by prominently displaying key calls-to-action on the main screen.

5. The primary purpose of your mobile homepage should be to identify users’ needs and guide them to the right place.

6. Watch for blind spots on your mobile homepage.

Mobile Search and Results

7. Mobile retail websites should prominently feature search on their homepages.

8. Non-retail mobile sites should use search to support secondary task flows.

9. The first few search results leave the greatest impression.

10. Don’t leave your users hanging. Provide guidance and help when there are no matching search results.

11. Feature filtering over sorting for large, heterogeneous sets of search results.

12. Make sure the user has accurate expectations about the consequences of applying any filters.

13. A guided approach can act as a proxy or complement for filters.

 Mobile-Optimized Sites vs. Desktop Sites

14. Make sure your entire site is optimized for mobile, rather than a piece at a time.

15. Users should never feel the need to pinch-to-zoom on mobile-optimized sites.

16. Ensure that any image a user might want to enlarge is tappable or expandable.

17. Avoid the “full site” | “mobile site” trap.

18. If you provide users a choice between a desktop and mobile site, make sure they can change their minds.

19. Re-evaluate the key tasks for your mobile users and design for them.

20. If you’re stuck with a desktop site, then prominently display key calls-to-action on the main page.

Form Entry and Text Input

21. Save some effort for your users through default input modes and advancing fields.

22. Use on-screen selection elements for binary (or small number) situations.

23. Visually integrate checkmarks and radio buttons with their corresponding labels to convey larger tap targets to users.

24. The wheel selector is a specialized tool, not a substitute for the dropdown menu.

25. In travel and scheduling tasks, provide a visual calendar to users when selecting dates.

26. Reduce form submission errors through communication and real-time validation.

27. Ensure field labels and the corresponding input boxes are visible at the same time.

28. Make sure it’s possible to complete your forms in landscape orientation.

29. Take advantage of auto-fill whenever possible.

30. Design your task flows and forms efficiently.

31. Progress bars and menus should accurately convey overall progress through multi-step forms and processes.

Registration, Checkout, and Conversion

32. Beware of making enemies at registration gates.

33. Mobile retailers should offer the choice to checkout as a “Guest.”

34. Fully leverage existing user information to streamline forms and processes.

35. Social media login should never be the only option.

36. Up-and-coming sites need to give value in order to get value from new users.

37. Provide tappable buttons to initiate phone calls at potential conversion drop-off points.

38. Seek opportunities to facilitate cross-channel conversion through your mobile website.

Mobile Site Performance and Stability

39. Design your site with the assumption that mobile network speeds will be unstable.

40. QA your mobile website rigorously.

41. Optimize the size and sensitivity of your calls-to-action and be mindful of the order in which screen elements load.

Mobile Miscellania

42. Either design for both screen orientations or encourage users to switch to the optimized orientation.

43. Users should always know what they’re getting when enabling location services.

44. The best way to promote your app is to provide a great mobile web experience.

45. Refresh animations and other visual representations of processing should be used sparingly and only when necessary.

46. Avoid calls-to-action that open new browser windows, as users may have trouble getting back to your site.