Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Principles of
mobile site design:
delight users and
drive conversions
Lina Lau
Strategic Partner Manager
Google
Would you stand in this line if you could order the
iPhone 6 on your mobile device in < 2 mins?
Driving conversions in the...
Story about My Dog and buying a Car
Study Design: 25 Site Design Principles
100 Websites
iOS & Android
Participants used
their own device
I’m going to
shop fo...
Homepage &
Site Navigation
Site
Search
Commerce &
Conversions
Form
Entry
Usability &
Form Factor
❑ Calls-to-action are fro...
Homepage Site Search Commerce
Form Entry Usability
Homepage
Put in screenshot of advertiser
Principles
1. Keep calls-to-action front and
center
2. Keep menus short and sweet
3. Make it easy to get back to the
homep...
Google Confidential and Proprietary
Landing Pages
All tips for Homepage should be considered as essential for landing
page...
Homepage &
Navigation
What the Endsleigh site
does well:
RWD - Consistent design on all devices - main actions promoted
Cl...
Homepage &
Navigation
What the Protest site
does well:
Desktop and Mobile experience support Protest branding
Minimal navi...
Homepage &
Navigation
What the Priceline site
does well:
Focused on key user needs
Not overloaded with content, no blind s...
Homepage &
Navigation
Focused on key user needs
Sign in Option
Visible search
Auto- Date selection
BIG Search Button
ATL !
Site Search
Principles
5. Make site search visible
6. Ensure site search results are relevant
7. Implement filters to improve
site sea...
On-Site Search
What the Amazon site
does well:
Search prominent
Auto-completion of search queries
Search Results
Sale Price
Urgency!!!
Product Rating
Search Results
Large lists of filters
Users know what to expect when applying a filter
On-Site Search
What the alpharooms
site does well:
Clean list of results with various display options including map view
U...
Commerce
Put in screenshot of advertiser
Principles
9. Let users explore before they
commit
10. Let users purchase as a guest
11. Use existing information to
maxim...
Product Pages
Product / Offer
Pages
What the Garmin site
does well:
Progressive disclosure
Prominent ever-present CTA
Multiple images av...
Product / Offer
Pages
What the Lowes site
does well:
Shows in-store availability
Additional CTA appears when scrolling dow...
Form Entry
Put in screenshot of advertiser
Principles
19. Optimize your entire site for mobile
20. Don’t make users pinch to zoom
21. Make product images expandable
...
Recommendation
Minimize the number of fields
in your forms, and autofill
information wherever
possible. Use clearly-labele...
Form Entry
What the rentalcars.com
landing page does well:
Clean landing page with city pre-populated based on search quer...
What the Crate and Barrel
site does well:
Field labels and form fields are visible at the same time
Amount of input requir...
What the Vueling site
does well:
Homepage clean and focussed on key user needs
Touch friendly input methods, visual calend...
Recommendation
Offer the option to check
out as a guest, and
encourage registration with
tangible benefits.
Insert client ...
Usability
Put in screenshot of advertiser
Recommendation
Use clearly visible labels to let
users know what you need,
and validate for errors in real
time to let the...
Recommendation
Always make it clear why you
need a user s location, and
how the information will
influence their experienc...
Recommendation
Always make it clear why you
need a user s location, and
how the information will
influence their experienc...
Summary
Review The 25 principles of Mobile Site design
Divide your review per page… (HP, Search, Product etc.)
Always Meas...
© Copyright 2014 Google. All rights reserved. Google and the Google logo are registered trademarks of Google Inc.
Thank Yo...
IAB FORUM 2015  Principles of mobile site design: delight users and drive conversions Lina Lau, Strategic Partner Manager/...
IAB FORUM 2015  Principles of mobile site design: delight users and drive conversions Lina Lau, Strategic Partner Manager/...
Upcoming SlideShare
Loading in …5
×

IAB FORUM 2015 Principles of mobile site design: delight users and drive conversions Lina Lau, Strategic Partner Manager/ SEEMEA Mobile apps Verticalized Solutions and Success Stories Lead (Paris), Google

1,393 views

Published on

Inspiration and Insight for Digital Leaders

IAB FORUM 2015 Principles of mobile site design: delight users and drive conversions Lina Lau, Strategic Partner Manager/ SEEMEA Mobile apps Verticalized Solutions and Success Stories Lead (Paris), Google

Published in: Mobile
  • Be the first to comment

IAB FORUM 2015 Principles of mobile site design: delight users and drive conversions Lina Lau, Strategic Partner Manager/ SEEMEA Mobile apps Verticalized Solutions and Success Stories Lead (Paris), Google

  1. 1. Principles of mobile site design: delight users and drive conversions Lina Lau Strategic Partner Manager Google
  2. 2. Would you stand in this line if you could order the iPhone 6 on your mobile device in < 2 mins? Driving conversions in the digital world means making it easy for people to take action
  3. 3. Story about My Dog and buying a Car
  4. 4. Study Design: 25 Site Design Principles 100 Websites iOS & Android Participants used their own device I’m going to shop for chairs... Ok! First I’m going to click on this button... 119 Hour Long Interviews Traditional Usability with Think-Aloud Protocol
  5. 5. Homepage & Site Navigation Site Search Commerce & Conversions Form Entry Usability & Form Factor ❑ Calls-to-action are front and center ❑ Menus are short and sweet ❑ Easy to get back to the homepage ❑ Promotions don’t steal the show ❑ Site search is visible (near top of page) ❑ Site search results are relevant (autocomplete) ❑ Use filters to improve search results ❑ Guides users to better search results ❑ Users can explore before committing ❑ Users can purchase as a guest ❑ Existing information is used (e.g. 3rd party payments) ❑ Click-to-call is present for complex tasks ❑ Easy to finish converting on another device ❑ Info entry is streamlined ❑ Uses toggles/dropdowns to simplify input ❑ Visual calendars used for date selection ❑ Minimize errors with labeling and real-time validation ❑ Form design is efficient (auto-fill, progress bar) ❑ Entire site is optimized for mobile ❑ Don’t need to pinch + zoom (especially CTAs) ❑ Product images are expandable (and high quality close-ups are available) ❑ Shoppers are told which screen orientation works best (and site works in all orientations) ❑ Users aren't brought to new browser windows (calls-to-action stay in same window) ❑ Site avoids "full site" labeling (uses "desktop" instead) ❑ Site is clear about why it needs user's location (and what it intends to do with it) 25 principles of mobile site design
  6. 6. Homepage Site Search Commerce Form Entry Usability
  7. 7. Homepage Put in screenshot of advertiser
  8. 8. Principles 1. Keep calls-to-action front and center 2. Keep menus short and sweet 3. Make it easy to get back to the homepage 4. Don’t let promotions steal the show Homepage
  9. 9. Google Confidential and Proprietary Landing Pages All tips for Homepage should be considered as essential for landing pages too What about time on page? Long or short? On desktop the answer is almost always long, on mobile short - Minimise bounce rate - Benchmark against yourself, try to beat your 90 day best in class number Bounce / clickthrough rate BE Obsess about load speed-1 second delay = ~4% decrease in CvR Our free tool also works on mobile: Source: Mobile Commerce Daily; KISSMetrics
  10. 10. Homepage & Navigation What the Endsleigh site does well: RWD - Consistent design on all devices - main actions promoted Clean and structured navigation, large font type
  11. 11. Homepage & Navigation What the Protest site does well: Desktop and Mobile experience support Protest branding Minimal navigation focussed on identifying users interest
  12. 12. Homepage & Navigation What the Priceline site does well: Focused on key user needs Not overloaded with content, no blind spots
  13. 13. Homepage & Navigation Focused on key user needs Sign in Option Visible search Auto- Date selection BIG Search Button ATL !
  14. 14. Site Search
  15. 15. Principles 5. Make site search visible 6. Ensure site search results are relevant 7. Implement filters to improve site search usability 8. Guide users to better search results Site Search
  16. 16. On-Site Search What the Amazon site does well: Search prominent Auto-completion of search queries
  17. 17. Search Results Sale Price Urgency!!! Product Rating
  18. 18. Search Results Large lists of filters Users know what to expect when applying a filter
  19. 19. On-Site Search What the alpharooms site does well: Clean list of results with various display options including map view Users can send filtered list of results via email
  20. 20. Commerce Put in screenshot of advertiser
  21. 21. Principles 9. Let users explore before they commit 10. Let users purchase as a guest 11. Use existing information to maximise convenience 12. Use click-to-call button for complex tasks 13. Make it easy to finish converting on another device Commerce & Conversion
  22. 22. Product Pages
  23. 23. Product / Offer Pages What the Garmin site does well: Progressive disclosure Prominent ever-present CTA Multiple images available - swipe
  24. 24. Product / Offer Pages What the Lowes site does well: Shows in-store availability Additional CTA appears when scrolling down the page Product reviews, progressive disclosure
  25. 25. Form Entry Put in screenshot of advertiser
  26. 26. Principles 19. Optimize your entire site for mobile 20. Don’t make users pinch to zoom 21. Make product images expandable 22. Tell users which screen orientation work best 23. Keep your users in a single browser window 24. Avoid full site labelling 25. Be clear why you need a user’s location Form Factor and Usability
  27. 27. Recommendation Minimize the number of fields in your forms, and autofill information wherever possible. Use clearly-labeled progress bars to help users get through multi-part forms. Best in Class Insert client site example here Design efficient forms
  28. 28. Form Entry What the rentalcars.com landing page does well: Clean landing page with city pre-populated based on search query Clear branding and site purpose immediately clear
  29. 29. What the Crate and Barrel site does well: Field labels and form fields are visible at the same time Amount of input required is limited (zip code populates city and state) Form fields have the correct input type set Form Entry
  30. 30. What the Vueling site does well: Homepage clean and focussed on key user needs Touch friendly input methods, visual calendar provided Form Entry
  31. 31. Recommendation Offer the option to check out as a guest, and encourage registration with tangible benefits. Insert client site example here Let users purchase as a guest
  32. 32. Usability Put in screenshot of advertiser
  33. 33. Recommendation Use clearly visible labels to let users know what you need, and validate for errors in real time to let them know if there s a problem before they submit a form. Insert client site example here Minimize form errors with labeling and real-time validation
  34. 34. Recommendation Always make it clear why you need a user s location, and how the information will influence their experience. Be clear why you need a user s location
  35. 35. Recommendation Always make it clear why you need a user s location, and how the information will influence their experience. Font Size & Colors
  36. 36. Summary Review The 25 principles of Mobile Site design Divide your review per page… (HP, Search, Product etc.) Always Measure (Before & After) Test, Test & TEST!
  37. 37. © Copyright 2014 Google. All rights reserved. Google and the Google logo are registered trademarks of Google Inc. Thank You!

×