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.

Tim Ash - Mobile Conversion Strategy

1,772 views

Published on

INBOUND 2015

Published in: Marketing
  • Be the first to comment

Tim Ash - Mobile Conversion Strategy

  1. 1. #Pubcon #CRO @tim_ash INBOUND15 Mobile Conversion Strategies Tim Ash CEO, SiteTuners & Chair, Conversion Conference
  2. 2. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash About SiteTuners • San Diego based conversion rate optimization agency • Large and small company clients worldwide Practice areas: – Conversion-focused website blueprints (full redesigns & quick facelifts) – Landing page test plans & testing strategy development – Ongoing conversion management and knowledge transfer
  3. 3. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash M O R E T H A N s i n c e 2 0 0 2 1200CLIENTS
  4. 4. #Pubcon #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash Foundational Concepts
  5. 5. #Pubcon #CRO @tim_ash We Need A “Responsive” Website!
  6. 6. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Yesterday - a handful of incompatible browsers
  7. 7. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Today - an explosion of diverse devices
  8. 8. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash The answer is to draw pretty boxes…
  9. 9. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash …and code them into “responsive” one-page sites
  10. 10. #Pubcon #CRO @tim_ash
  11. 11. #Pubcon #CRO @tim_ash “[Most responsive websites] are infinitely scrolling pieces of crap.” - Richard Banfield, CEO of Fresh Tilled Soil
  12. 12. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash We need to be responsive to the context
  13. 13. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash We live in a multi-screen world
  14. 14. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Why “responsive-light” is a problem • Breaks the hypertext paradigm – nothing to optimize except the order of the linear presentation • Ignores visitor context, intra-day usage patterns, and multi-screen use – simply resizes within a column, and reflows multiple columns. • Distorts spatial relationships & undermines usability (proximity, ordering, containment, grouping, accessibility) • Requires massively increased QA costs
  15. 15. #Pubcon #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash What Makes Mobile Experiences Unique
  16. 16. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Context • With exception of some tablet usage, assume that user is: – Often in motion (which decreases coordination) – Multi-tasking – Using with one hand – Using outside (‘glary’ screen) – Impatient and interrupted (while waiting in short line) • And that she expects: – Context awareness - The device to know where she is, and show content accordingly – Recovery from interruptions - To be able to seamlessly pause and resume tasks – Hands-free usage - As much as possible (e.g. voice entry; fewer button touches)
  17. 17. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Context - Examples • Always there – Average of 130 touches per day – Using while driving, bathrooms • Short burst interactions – Look up NCAA tournament scores while walking • Time sensitive – I’m almost out of gas – need to find the nearest gas station ASAP • Location specific – Where can I find a good Indian restaurant around here?
  18. 18. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Multiple Device Usage & Device Switching • Remember that people often start their experience on one device, complete on another (watch Netflix show on smartphone in waiting room; resume on tablet in bedroom) • Implication: Strive to create a more connected user experience across devices and usage scenarios
  19. 19. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Interaction Challenges • Small touch targets for typical finger and thumb sizes • Jiggling UI targets (while walking) • Focus required for longer form entries • Difficult keypad entries (mistyping; auto correct issues) • Lower bandwidth (loading delays) • Social interactions & interruptions • Too many touches necessary
  20. 20. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash Top 10 Mistakes to Avoid
  21. 21. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #1: Cramming All Features into Mobile Site • In desktop usage scenario: – User is typically seated, has larger screen – User can easily click navigation, links • Challenges in mobile usage scenario: – Navigation occupies too much screen real estate – Complex navigation (too many levels, options) – Long, content-heavy pages – Most-used features get pushed off the main screen – Poor experience and engagement (especially if desktop site already has usability and conversion issues)
  22. 22. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #2: Making It Hard to Find Location • In desktop usage scenario: – User can find location more easily with visible ‘contact us’ link – User can more easily find firm location via search, Google Maps • Challenges in mobile usage scenario: – Visitor will waste time (before realizing company is out of service area) – Visitor can’t easily find address, locations served (‘I’m looking for a coach to connect with remotely [via Skype]… not sure if you guys offer that’)
  23. 23. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #3: Using Non-Standard Buttons and Controls • In desktop usage scenario: – With wider view and longer linger time, user is better able to decipher controls – Mouse clicks are considerably easier than thumb touches • Challenges in mobile usage scenario: – More thought and time required to find and touch controls – User is unsure which things are clickable and which aren’t – Main Calls-to-Action buttons are too subtle, may be missed – Secondary links are too subtle, may be missed
  24. 24. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #4: Neglecting Visitor’s Limited Attention • In desktop usage scenario: – User is typically seated, has larger screen – User is free from most distractions (with some exceptions) • Challenges in mobile usage scenario: – Busy screens require too much thought, too many touches – Most-wanted answers do not bubble to the top – Can’t find desired information within shorter time – Interrupted experience
  25. 25. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #5: Forcing Your Visitor to Remember Info • In desktop usage scenario: – User doesn’t need to hold as much info in working memory – User can toggle between entry and ‘reference’ window – Environment (working, relaxing) puts less demands on memory • Challenges in mobile usage scenario: – User can’t remember info from screen 1 to enter on screen 2 (4 pieces of information rule) – User gets frustrated when has to copy/paste or write it down – Fewer Call-to-Action clicks (especially for forms, phone #s)
  26. 26. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #6: Using Too Much Screen for Navigation, Promos • In desktop usage scenario: – On larger screen user can see all main and sub navigation – User can see more topics of interest lower on page • Challenges in mobile usage scenario: – Top sales proposition content not visible – Extra navigation touches and scrolling required – Main Calls-to-Action are promotions (vs. categories) – Lower click-through for main (profitable) click paths
  27. 27. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #7: Making It Difficult to Contact You • In desktop usage scenario: – User can easily see phone, chat, email options – Most users know where to find them (header, footer) • Challenges in mobile usage scenario: – Users may not think to look behind navigation icons or menus – If phone # touch does not directly launch phone app, visitor may not remember the number to enter – Takes too much effort to find phone #
  28. 28. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #8: Using Too Many or Large Images • In desktop usage scenario: – User has a much wider view of your site – User has higher bandwidth (cable speed or higher) • Challenges in mobile usage scenario: – Larger, not-fully-optimized graphics slow down site’s load time – Graphics occupy too much real estate, often don’t add value (build trust, make selling point) – Too much scrolling to see Calls-to-Action – Lower engagement with content
  29. 29. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #9: Using Tiny Text, Buttons & Links • In desktop usage scenario: – User is typically seated, has larger screen – User can easily scale up the text size – User may be a bit more willing to read • Challenges in mobile usage scenario: – User can’t read text on screen without squinting – User has difficulty touching small Call-to-Action buttons – User won’t have patience to endure poor mobile experience
  30. 30. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Mistake #10: Using Long-Winded Content • In desktop usage scenario: – User has larger screen, can better see context – User often seated, feeling more patient • Challenges in mobile usage scenario: – User doesn’t have time to read long paragraphs! – User grows frustrated – ‘I don’t have time to read this… I just want to click and move’ – High likely bounce rate
  31. 31. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash Top 10 Must-do’s
  32. 32. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #1: Optimize Your Site’s Load Speed • The Problem: – Most users expect mobile sites to respond faster than desktop sites (but many don’t) – People will bail out of slow sites (especially in a ‘I need info ASAP’ context) – Lag is accentuated by data path (phone > cell tower > network > server queries, and back) and slower speeds (3G, 4G) • The Solution: – Use image sparingly, and only ‘zoomed in’ ones – Serve smaller images to smartphones (based on device detection) – Ruthlessly optimize graphics (see LukeW technique) – Hide latency – Start loading in background; ‘lazy load’ as user scrolls – Give the user some feedback if response takes longer than 2-4 sec
  33. 33. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Some Patience Level Data • Patience levels keep getting shorter (especially for Gen Y and younger) • Page needs to load within a few seconds to reduce chances of abandonment • Some Statistics: – 47% of consumers expect a web page to load in 2 seconds or less – 40% abandon a website that takes longer than 3 seconds to load Source: https://blog.kissmetrics.com/loading-time/
  34. 34. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash How to Communicate Delays to User • 2-4 seconds: – Show a general progress indicator/spinner • 4-8 seconds – Display indicator that shows progress in discrete terms • Longer response times – Show discrete progress indicator, along with a) distracting animation or b) later notification
  35. 35. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – Alaska Airlines • Focused on: – Top tasks – Loading speed • Uses: – Light, minimal graphics – Blue color for links
  36. 36. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Image Optimization Technique Steps: 1. Double image dimensions 2. Set quality to zero (0) 3. Save as jpg or gif Typical effect: Reduces file size by 50%!
  37. 37. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #2: Radically Reduce Features & Content • The Problem: – Smartphone users need info fast – especially if in a legal predicament – Users don’t want to wade through a lot of copy – Users often have small set of task intents • The Solution: – Serve content to mobile users that is tailored to their unique context and intents – Think of an ATM – how different that experience is from bank’s website – Implement a content management system (CMS) that tailors content to each type of mobile device
  38. 38. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – Chase Desktop Site • Visible and direct login • Prominent mortgage rate banner • ‘Open checking account’ and ‘find credit card’ entry points Desktop Site
  39. 39. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – Chase Mobile Site • Login is behind main navigation link • Focused on top 3 tasks: – Log on, Contact, Find ATM/Branch • Credit card offers disclosed on secondary page, with slider Mobile Site
  40. 40. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #3: Adapt Experience to Most-Used Devices • The Problem: – Desktop experiences on mini tablets and phablets are poor – Desktop experience on an iPad does not support gestural interaction • The Solution: 1. Review your analytics to see usage by device (mobile, tablet, desktop) 2. Decide which devices to support (require unique experience) 3. Decide which content to serve up per device (based on device detection) 4. Support most common gestural interactions for phones and tablets
  41. 41. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Progressive Enhancement At each ‘breakpoint’, offer more content with adjusted layout Typical breakpoints: • Phone • Tablet (or mini tablet) • Laptop / Desktop
  42. 42. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – NPR Desktop Site • Exposes all main navigation, search field and ‘support’ Calls-to-Action • Shows dual branding
  43. 43. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – NPR Mobile Sites • Tablet site eliminates for 3 navigation options • Phone site collapses main navigation into hamburger menu • Tablet and phone: – hides ‘From NPR News’ panel – Suppresses ad display
  44. 44. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #4: Make CTAs & Navigation Easy to Use • The Problem: Many Call-to-action buttons are missed, either because they are not visible or they don’t stand out from the background • The Solution: – Make navigation options easily accessible (one touch away) – Make Call-to-Action buttons large and easy to touch – see guidelines on next slide – Consider ‘floating’ main navigation and Calls-to-Action – Support ‘next steps’ navigation (next step: ‘Engagement Pricing’ or ‘How You Pay Us’)
  45. 45. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Minimum Button & Link Size Guidelines • The average width of human thumb is 1 inch, which equates to 72 pixels • Many users use thumb pad instead of thumb tip • Guidelines for minimum target (button, link) sizes – Apple: 7mm (44 pts) min width; 2mm min gap (where 1 pt = 1/72th of an inch) – Android: 9mm (48 dp) min width; 2mm min gap (where ‘dp’ is density independent pixels) – Windows Phone 7: 9mm (34px) min width; 2mm min gap
  46. 46. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – USSoccer.com • This site keeps a navigation layer (main menu, search) visible at all times, reducing need to scroll • For articles, both title and image are clickable (large target)
  47. 47. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #5: Leverage the User’s Location • The Problem: Prospects don’t want to waste their time with companies that do not serve their area • The Solution: – Incorporate the smartphone’s location awareness into the experience. • (If location detection turned off) ‘XYZ.com would like to use your location.’ OK / Cancel • For example, if your company only serves local clients, notify and geo-screen visitors early: [outside of service area] ‘We see you’re in Arkansas. Sorry, we only service clients in California. But that’s OK! Follow this link to find one of your partners in your area.’ [link to Arkansas affiliates] – Assert that since your company is local you are very in-tune with local tastes, offer value-adds like prompt service, fresh deliveries (when applicable)
  48. 48. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – Starbucks • Starbucks offers two ways to find a store: – Use current location – Enter location (Street Address or Zip Code) • 1 touch is easier than 7 (touch ‘find store’, enter 5 zip digits, touch ‘Go’ button)
  49. 49. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #6: Simplify Contact Form Entries • The Problem: – Forms with excess fields have high drop-off rates – Visitor will bail out if she doesn’t know what to input for required entry • The Solution: – Ensure Contact Us link and Phone # are always visible – Minimize the number of required fields (remember, this is lead gen form) – Place labels above or in field – Default entry mode to field type (number, letter, special) – Cookie previous entries for rapid resume (user is interrupted)
  50. 50. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – JedStone.com • JedStone mobile site contact form has only one required field – email address. • Suggested improvements: – Make ‘Contact Us’ link more visible – Remove State field – not necessary when asking for Zip – Increase vertical separation between fields – Make ‘Send this Message’ button darker
  51. 51. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #7: Maximize Content-to-Navigation Ratio • The Problem: – Most people scan the main site area first, only later consider header (main) navigation – Users are seeking answers and reassurances – not to learn your site’s organization! • The Solution: – Maximize the percentage of each page devoted to useful content – Embed links in content that address main visitor intents (not tangents) – Minimum wasted space, unnecessary navigation – Include ‘next step’ navigation that guides user closer to submitting a lead, contacting you
  52. 52. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Example – ESPN.com • ESPN mobile site and ESPNfc (soccer) section now have a more compact ‘hamburger’ menu (previously had 3 levels, consuming nearly 1/3 of screen) • Focus on home page is articles and scores (one touch away)
  53. 53. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #8: Avoid Pop-over Layers • The Problem: – Lightbox/similar layers are problematic for mobile – cause drop offs, disorientation – Smartphone users expect to interact in single screen ‘layer’ • The Solution: – Avoid layers that pop up over the main screen (especially annoying survey invites) – Support additional entries: • With separate screens • Using ‘expand on touch’ entries (touch ‘Enter Zip’; Zip field appears with ‘Go’ button)
  54. 54. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #9: Tailor Site Experience for Return Visitors • The Problem: – Most people use multiple devices in same day – out and about, home, work – Recognizing return visitor and continuing their experience shows you care • The Solution: – Resume the experience with ‘Welcome back! Here’s where you left off’ – Do with cookies or latest technology (without requiring login) – In the future support cross-device, cloud-based ‘cookies’
  55. 55. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Must Do #10: Test Your Mobile Site On Many Devices • The Problem: – While it’s hard for your testing team to keep up with the new devices hitting the market every month, it’s essential to do so because… – People have lower trust in sites with bugs and awkward interactions • The Solution: – First test your site with a tool like crossbrowsertesting.com – Then test your site on 20 most common devices (including some 1+ years old) – Don’t forget Windows Phone devices (comparable to iOS) – Verify that all your functionality (including videos) and content render correctly
  56. 56. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Get a Free Conversion Funnel Review • Interactive review of your key conversion paths, including how well your content, images and page flow match visitor expectations and intent • Conducted by SiteTuners conversion staff • Video transcript recorded via GoToMeeting • Offer good only for US or Canadian companies generating at least $2 million annually in online revenue. New customers only please. Only 10 Funnel Reviews Available – Book Yours Now! Bit.ly/ReviewMyFunnel
  57. 57. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash SAVE OVER $400•increaseyourrevenueandprofit •generatemoreleads •landmorecustomers •boostsalesandpaidmemberships •maximizeyourmarketingROI RioAll-suitesHotel &Casino LasVegas-May18-19, 2016
  58. 58. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash Contact Info and Q&A tim@sitetuners.com (619) 990-9062 mobile (619) 223-8020 work PST twitter @tim_ash www.linkedin.com/in/timash facebook.com/tim.ash1 skype tim_ash1
  59. 59. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashINBOUND15

×