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.

How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]


Published on

How do you know what consumers expect from your site? Every shopper is different and every visit is different. Industry stats tell only part of the story. You need to crack the hood and analyze your own real user data. This talk covers how and why to gather real user data and connect the dots between the metrics that matter most -- IT, UX, and business -- in order to create better shopper experiences and improve your business.

Published in: Internet

How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]

  1. 1. the small things that add up how to fix the design issues that matter on the pages that matter @tameverts #smashingconf
  2. 2. performance matters
  3. 3. Every 1 second of median load time improvement equals a 2% conversion rate increase for shaves 1 second from median load time, improves conversion rate by 10% Intuit cuts median load times by more than half, increases conversions by 14% @tameverts #smashingconf
  4. 4. fast slow @tameverts #smashingconf
  5. 5. @tameverts #smashingconf
  6. 6.
  7. 7. which design issues matter? which metrics matter? which pages matter?
  8. 8. which metrics matter?
  9. 9. what we used to think…
  10. 10. @tameverts #smashingconf
  11. 11. what we know now…
  12. 12. not everything matters
  13. 13. machine learning FTW! Foundation/beacon-ml
  14. 14. collected beacon data for 93 attributes • top-level – domain, timestamp, SSL • session – start time, length (in pages), total load time • user agent – browser, OS, mobile ISP • geo – country, city, organization, ISP, network speed • bandwidth • timers – base, custom, user-defined • custom metrics • HTTP headers • much more… @tameverts #smashingconf
  15. 15. finding 1 DOM ready (aka DOM content loaded) and average session load time were the best combined indicators of bounce rate @tameverts #smashingconf
  16. 16. Up to 89.5% accuracy @tameverts #smashingconf
  17. 17. @tameverts #smashingconf bounce probability jumps to ~60% at 4.5s
  18. 18. finding 2 start render is important, too @tameverts #smashingconf
  19. 19. NB: first paint is not start render! first paint (Chrome) start render @tameverts #smashingconf
  20. 20. finding 3 mobile-related metrics were not meaningful predictors of conversions @tameverts #smashingconf
  21. 21. @tameverts #smashingconf
  22. 22. start render repeat visits
  23. 23. wow!
  24. 24. UserTiming measure performance of your applications through high-precision timestamps
  25. 25. how long does it take to display the main product image on my site? <img src=“image1.gif” onload=“performance.mark(‘image1’)”>
  26. 26. measure hero image delay measure aggregate times to get “above the fold” time
  27. 27.
  28. 28. which pages matter?
  29. 29. what we used to think…
  30. 30. what we know now…
  31. 31. it depends
  32. 32. source: @tameverts #smashingconf
  33. 33. load times for “checkout” pages goes from 4 to 9 seconds conversion rate barely decreases @tameverts #smashingconf
  34. 34. load time for “browse” pages grows from 1 to 6 seconds conversion rate shrinks by ~50% @tameverts #smashingconf
  35. 35. Conversion Impact Score The Conversion Impact Score (CIS) is a relative score that ranks page groups by their propensity to negatively impact conversions due to high load times. For each page group, the Conversion Impact Score is calculated using the proportion of overall requests that are associated with that group, along with the Spearman Ranked Correlation between its load times and number of conversions. The Conversion Impact Score will always be a number between -1 and 1, though scores much greater than zero should be very rare. The more negative the score, the more detrimental to conversions that high load times for that page group are, relative to the other page groups.
  36. 36. TL;DR How much impact does the performance of this page have on conversions?
  37. 37. what you need access to 100% of your user data (including historical data) tag pages into meaningful groups, (products, departments, search, promotions, checkout) correlate performance data to conversion rate
  38. 38. avoid these mistakes wasting massive optimization resources on the wrong pages continuing to optimize pages that are already fast enough ignoring pages that have relatively good performance forgetting that every site is different
  39. 39.
  40. 40. which design issues matter?
  41. 41. what we used to think…
  42. 42. @tameverts #smashingconf
  43. 43. @tameverts #smashingconf
  44. 44. @tameverts #smashingconf
  45. 45. what we know now…
  46. 46. it’s the same (but we know more)
  47. 47. pages with more scripts are less likely to convert @tameverts #smashingconf
  48. 48. @tameverts #smashingconf 160+ scripts… uh-oh
  49. 49. the number of DOM elements on the page matters… A LOT @tameverts #smashingconf
  50. 50. @tameverts #smashingconf optimal: 400-700
  51. 51. sessions that convert have fewer images than sessions that don’t @tameverts #smashingconf
  52. 52. number of images per page (median) @tameverts #smashingconf
  53. 53. image format matters @tameverts #smashingconf
  54. 54.
  55. 55. @tameverts #smashingconf
  56. 56. quick case study
  57. 57. issue 1 image quality and compression issue 2 image sprite blocking page load
  58. 58. average site Fanatics
  59. 59. 2-second improvement in median page load time almost doubled mobile conversions
  60. 60. takeaways
  61. 61. 1 Every site and app is different 2 User behaviour is context sensitive and always changing 3 Performance issues are unpredictable 4 You can’t understand what you don’t measure 5 You don’t have to optimize everything 6 Even small design changes can make a big difference @tameverts #smashingconf
  62. 62. thank you! @tameverts