Google PRINCIPLES OF MOBILE SITE DESIGN: DELIGHT USERS AN Bedienungsanleitung

PRINCIPLES OF MOBILE SITE DESIGN:DELIGHT USERS AND DRIVE CONVERSIONS

For app promotions, participants preferred easily dismissible banners as opposed to large interstitials.Sample screen for illustration only.Key Takeaw

SITE SEARCH11

Site search is vital for helping mobile users nd what they’re looking for in a hurry. This section oers tips for maximizing the value of your site’s

Example from The Home Depot Mobile Site.Key TakeawayPlace your site search near the topof your homepage via an open text eld.135. MAKE SITE SEARCH V

6. ENSURE SITE SEARCH RESULTS ARE RELEVANTParticipants didn’t bother to swipe through multiple pages of search results. Instead, they judged a site’s

7. IMPLEMENT FILTERS TO IMPROVE SITE SEARCH USABILITYParticipants relied on lters to narrow down search results, and actually abandoned sites that co

8. GUIDE USERS TO BETTER SITE SEARCH RESULTSFor sites that serve diverse customer segments, it can be helpful to ask users a few questions before the

COMMERCE & CONVERSIONS17

The customer journey is getting more complex, and users expect to convert on their own terms. In this section, we look at how to drive conversions by

9. LET USERS EXPLORE BEFORE THEY COMMITPlacing registration gates too early in a site experience can be detrimental to conversion. In the study, parti

INTRODUCTION 03METHODOLOGY 04HOMEPAGE & SITE NAVIGATION 05SITE SEARCH 11COMMERCE & CONVERSIONS

10. LET USERS PURCHASE AS A GUESTEven when participants were making a purchase, they didn’t necessarily want to commit to creating an account with the

11. USE EXISTING INFORMATION TO MAXIMIZE CONVENIENCEFor your registered users, remember and pre-ll their preferences. For new users, oer a third-par

12. USE CLICK-TO-CALL BUTTONS FOR COMPLEX TASKSOer click-to-call at points in the conversion process that require entry of complex or sensitive infor

13. MAKE IT EASY TO FINISH CONVERTING ON ANOTHER DEVICENot all participants were comfortable converting on their mobile device. Oer an easy way to sa

FORM ENTRY24

Whether it’s making a purchase, getting a quote or joining an email list, your user’s conversion experience should be as seamless as possible. This

14. STREAMLINE INFORMATION ENTRYParticipants were pleased when sites automatically presented number pads for entering values like zip codes or birth d

15. CHOOSE THE SIMPLEST INPUT METHOD FOR EACH TASKWhen participants needed to make a choice with limited options, it was easier for them to tap a lar

16. PROVIDE A VISUAL CALENDAR WHEN SELECTING DATESParticipants didn’t always remember the exact dates for “next weekend” when booking a ight. Oer a

17. MINIMIZE FORM ERRORS WITH LABELING AND REAL-TIME VALIDATIONLabel your forms clearly, and make sure the labels are visible when users are actuall

INTRODUCTIONConsumers increasingly rely on the mobile web for research and discovery, which makes it more important than ever for companies to have a

18. DESIGN EFFICIENT FORMSMake sure your forms have no repeated actions, only as many elds as necessary, and take advantage of autoll. With multi-p

USABILITY & FORM FACTOR31

Mobile users will notice and be delighted by the small things you do for them to enhance their experience. This section discusses how to design your e

19. OPTIMIZE YOUR ENTIRE SITE FOR MOBILEUnsurprisingly, participants had a much easier time navigating mobile-optimized sites than trying to navigat

20. DON’T MAKE USERS PINCH-TO-ZOOMParticipants were frustrated when they needed to zoom in or out, and sometimes missed important messaging and calls-

3521. MAKE PRODUCT IMAGES EXPANDABLECustomers want to see what they’re buying. On retail sites, participants expected to be able to view high-resoluti

22. TELL USERS WHICH SCREEN ORIENTATION WORKS BEST Study participants tended to stay in the same screen orientation until something prompted them to

23. KEEP YOUR USER IN A SINGLE BROWSER WINDOW Switching between windows on a smartphone can be troublesome, and raises the risk that visitors might

24. AVOID “FULL SITE” LABELING When participants saw an option for “full site” vs “mobile site,” they assumed the mobile site was condensed and chose

25. BE CLEAR WHY YOU NEED A USER’S LOCATION Users should always understand why you’re asking for their location. Participants trying to book a hotel i

METHODOLOGY04The study was held through 119 hour-long in-person usability sessions with participants in Chicago and San Francisco.Participants were as

TECHNICAL CHECKLIST40

Great design is only part of a mobile site’s success - it’s important to get the technical side right as well. Here’s a few tips to avoid common pitf

© Copyright 2014 Google. All rights reserved. Google and the Google logo are registered trademarks of Google Inc.

HOMEPAGE & SITE NAVIGATION05

A desktop homepage often serves as a welcome page, messaging center and promotional space all in one, but the mobile homepage should focus on connecti

1. CALLS-TO-ACTION FRONT AND CENTERIt can be easy for mobile users to miss menu items, so always put your key calls-to-action where you know users wil

2. KEEP MENUS SHORT AND SWEETAn extensive menu might work well for your desktop site, but mobile users won’t have the patience to scroll through a l

3. MAKE IT EASY TO GET BACK TO THE HOMEPAGEWhen mobile users navigate through your site, they want an easy way to get back to your initial homepage.