How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]
•Download as PPTX, PDF•
4 likes•1,584 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]
Similar to How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona] (20)
Recently uploaded
Recently uploaded (20)
How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]
- 1. the small things that add up how to fix the design issues that matter on the pages that matter @tameverts #smashingconf
- 3. Every 1 second of median load time improvement equals a 2% conversion rate increase for Walmart.com Staples.com 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
- 6. WPOstats.com
- 7. which design issues matter? which metrics matter? which pages matter?
- 10. what we used to think…
- 12. what we know now…
- 15. 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… https://docs.soasta.com/whatsinbeacon/ @tameverts #smashingconf
- 16. finding 1 DOM ready (aka DOM content loaded) and average session load time were the best combined indicators of bounce rate @tameverts #smashingconf
- 17. Up to 89.5% accuracy @tameverts #smashingconf
- 18. @tameverts #smashingconf bounce probability jumps to ~60% at 4.5s
- 19. finding 2 start render is important, too @tameverts #smashingconf
- 20. NB: first paint is not start render! first paint (Chrome) start render @tameverts #smashingconf
- 21. finding 3 mobile-related metrics were not meaningful predictors of conversions @tameverts #smashingconf
- 23. start render repeat visits
- 24. wow!
- 25. UserTiming measure performance of your applications through high-precision timestamps https://www.w3.org/TR/user-timing/
- 26. how long does it take to display the main product image on my site? <img src=“image1.gif” onload=“performance.mark(‘image1’)”>
- 27. measure hero image delay http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/ measure aggregate times to get “above the fold” time http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html
- 30. what we used to think…
- 33. what we know now…
- 34. it depends
- 39. load times for “checkout” pages goes from 4 to 9 seconds conversion rate barely decreases @tameverts #smashingconf
- 40. load time for “browse” pages grows from 1 to 6 seconds conversion rate shrinks by ~50% @tameverts #smashingconf
- 41. 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.
- 42. TL;DR How much impact does the performance of this page have on conversions?
- 44. 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
- 45. 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
- 47. which design issues matter?
- 48. what we used to think…
- 53. what we know now…
- 54. it’s the same (but we know more)
- 55. pages with more scripts are less likely to convert @tameverts #smashingconf
- 56. @tameverts #smashingconf 160+ scripts… uh-oh
- 57. the number of DOM elements on the page matters… A LOT @tameverts #smashingconf
- 59. sessions that convert have fewer images than sessions that don’t @tameverts #smashingconf
- 60. number of images per page (median) @tameverts #smashingconf
- 61. image format matters @tameverts #smashingconf
- 64. quick case study
- 65. issue 1 image quality and compression issue 2 image sprite blocking page load
- 68. 2-second improvement in median page load time almost doubled mobile conversions
- 69. takeaways
- 70. 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
Editor's Notes
- .