Optimizing design: a UX practitioners guide
•
20 likes•8,756 views
The web is slow and bloated. The average web page is over 1.4MB and takes over 2 seconds to load, which is frustrating for users. See how speed impacts user perception of your site and key performance indicatiors (like satisfaction, bounce rate and conversion). Then learn how to design lighter speedier sites that delight users with their excellent performance. This presentation is crammed with practical tips for the interaction designer and site planner, as well as visual design techniques that will help you trim your flabby lumbering site down to a svelte nimble ninja.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Optimizing design: a UX practitioners guide
Similar to Optimizing design: a UX practitioners guide (20)
Recently uploaded
Recently uploaded (20)
Optimizing design: a UX practitioners guide
- 1. Design, optimized: a UX guide Improve Performance for User Satisfaction, Profit and Sustainability photo by likeaduck http://www.flickr.com/photos/thartz00/sets/72157624465684865/ Tuesday, July 2, 13
- 2. Me: James Christie @jc_ux Portsmouth | Boston | Louisville www.madpow.com Twitter: @madpow Web developer > usability > UX Designer UX Honeycomb: http://semanticstudios.com/publications/semantics/000029.php Tuesday, July 2, 13
- 3. The Web Is Slow http://www.flickr.com/photos/nuskyn/ Tuesday, July 2, 13
- 4. Is the web slow?Yup. • Users expect <2s page load • Web performance is second only to security in user expectations (Forrester) 2011 5.94s 2012 7.25s 2013 ~9s http://seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies http://gravitydept.com/blog/responsive-ecommerce/ Alexa Retail 2000 index of median load time Tuesday, July 2, 13
- 5. 1. User Perception http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ <0.1 sec Instant 1 sec Flow 4-5 sec Impatience 8-10 Sec Intolerable Load time Perception Slow: “Not credible” Fast: less frustration, lower blood pressure, deeper flow states, higher conversion rates, lower bailout rates, site interestingness and attractiveness Fogg, B. J., et al., "What Makes Web Sites Credible? A Report on a Large Quantitative Study" Tuesday, July 2, 13
- 6. 2. KPIs: slow bad, fast good • Bing: 2s load delay = 4.3% less revenue/user • Google: 400ms delay = 0.59% fewer searches • Yahoo! 400ms slowdown = 5 to 9% less traffic http://velocityconf.com/velocity2009/public/schedule/detail/8523 • Shopzilla: 5s faster = +12% conversions • Mozilla: 2.2s faster = +15.4% conversions (60 million more Firefox downloads) Tuesday, July 2, 13
- 7. 3. Mobile • 55% use mobile internet regularly • “Mobile Mostly”: 31% • 71% mobile users encounter slow speeds • 3G, 4G and EDGE • Cost of data: ~$10 for 100MB • Rule of thumb: pages at least x2 slower than desktop http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx Tuesday, July 2, 13
- 8. 4. Inclusion • People on mobile-only internet are more likely to be... • Young (18-25) • Earn less than $30k • People in overseas markets with poor internet infrastructure Tuesday, July 2, 13
- 9. “...entire populations of people simply could not use YouTube because it took too long to see anything” “By keeping your client side code small and lightweight, you can literally open your product up to new markets” Regular page: 1.2MB Feather: 250kB http://blog.chriszacharias.com/page-weight-matters Tuesday, July 2, 13
- 10. 5. SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html • Impact: • Some claiming 20-40% improvement in rankings after optimizing http://www.strangeloopnetworks.com/blog/13-questions-and-answers-about-google-site-speed-and-seo/ Tuesday, July 2, 13
- 11. 6. Sustainability • Serving web pages takes energy • Internet carbon footprint today: 620 Million Tons / year. x2 in 2020 http://keelingcurve.ucsd.edu/ http://goo.gl/nK0h1http://www.greentouch.org/ 0 500 1000 1500 2000 web ‘13 Aviation web ‘20 Russia CO2 Million tons / yr http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions http://www.atag.org/facts-and-figures.html Tuesday, July 2, 13
- 12. What’s slowing us down? (and what can we do?) Tuesday, July 2, 13
- 13. Frontend / Backend • “80-90% of the end-user response time is spent on the frontend. Start there.” Steve Souders stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ 0 25 50 75 100 backend frontend Page load delay average across top 50,000 websites Delay here Tuesday, July 2, 13
- 14. Size of pages http://www.websiteoptimization.com/speed/tweak/average-web-page/ Tuesday, July 2, 13
- 15. Current page size •1446kB! • That’s a floppy • >2 minutes on 56.6 kbps modem • 10s on 1mbps cable • USA Average: 7.4mbps • (5% still on dial-up) http://httparchive.org/interesting.php http://www.techspot.com/news/52338-average-broadband-speed-in-the-us-up-28-south-korea-still-far-ahead.html http://www.pewinternet.org/Reports/2010/Home-Broadband-2010.aspx Tuesday, July 2, 13
- 16. Frontend bulk 0 375 750 1125 1500 Page weight in KB HTML CSS JS Images Fonts Other Figures: http://httparchive.org/trends.php Most optimization talks are about the JavaScript Tuesday, July 2, 13
- 17. Frontend bulk 0 375 750 1125 1500 Page weight in KB Figures: http://httparchive.org/trends.php My tips are about the images, fonts and “other stuff” too. Tuesday, July 2, 13
- 18. More friction: object count Anatomy of an HTTP request Tuesday, July 2, 13
- 19. Do-it-yourself benchmarking • Plenty of online services and tools • ySlow, Google PageSpeed • Most browsers have their own inspector • We’ll use Google Chrome Tuesday, July 2, 13
- 20. Google PageSpeed Tuesday, July 2, 13
- 21. Tuesday, July 2, 13
- 22. 2.3MB 556 HTTP requests 11 seconds to load 8843 pixels high Tuesday, July 2, 13
- 23. The whole page Example inspired by Brad Frost’s “Death to BS” https://www.youtube.com/watch?v=ABd6U17YAdo Tuesday, July 2, 13
- 24. Just the content (in blue) Example inspired by Brad Frost’s “Death to BS” https://www.youtube.com/watch?v=ABd6U17YAdo Tuesday, July 2, 13
- 25. Ads Navigation Social sharing Comments Ads x-site content More Ads .... Example inspired by Brad Frost’s “Death to BS” https://www.youtube.com/watch?v=ABd6U17YAdo Tuesday, July 2, 13
- 26. Example inspired by Brad Frost’s “Death to BS” https://www.youtube.com/watch?v=ABd6U17YAdo 0 750 1500 2250 3000 Page weight in KB HTML CSS JS Images Fonts Other Images: 1MB Scripts: 1MB Article: 41kB Tuesday, July 2, 13
- 27. Speed things up • Speed up pages by... • having fewer objects • less data transfer • lots of technical tweaks • Time to reconsider: • UX design • Visual design • Code planning Tuesday, July 2, 13
- 28. Dan Saffer’s Disciplines of UX: http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/ UX design Tuesday, July 2, 13
- 29. Prime offender: carousels Tuesday, July 2, 13
- 31. Reduced carousels • Vectorize • Load on demand • Optimize http://www.unitedutilities.com/default.aspx645px wide, only 60kB http://www.starbucks.com/ Tuesday, July 2, 13
- 33. Brad Frost carousel challenge http://bradfrostweb.com/blog/post/carousels/ •Add tracking to your carousel •Collect data •Analysis (and publish) •A/B test University ofYork: removed panels, increased engagement http://yorkwebteam.blogspot.co.uk/2013/03/are-homepage-carousels-effective-aka.html Tuesday, July 2, 13
- 34. Ads • Less ads would be nice... • Better to have a few big ads than lots of little ones • “In marketing we measure impressions - not page speed.We don’t take the harm of the slow-down into account” Tuesday, July 2, 13
- 35. Share Buttons Typical payload: 400kB in images & scripts http://jcux.co.uk/cleanux/buttons.html Tuesday, July 2, 13
- 36. Share button script overhead Tuesday, July 2, 13
- 37. Button cure: kill, link, or lazyload “ What we know for sure is that these magic buttons promote their own brands — and that they tend to make you look a little desperate.” Sweep the Sleaze, Oliver Reichenstein, ia.net http://ia.net/blog/sweep-the-sleaze/ http://alistapart.com/article/designing-for-breakpoints Pure links: Kill: Lazy Load: http://wp.tutsplus.com/tutorials/add-lazy-loading-social-sharing-buttons-to-your-wordpress-blog/ Tuesday, July 2, 13
- 38. 3rd party content http://velocityconf.com/velocity2010/public/schedule/detail/15412 • “Don’t let 3rd parties get you down” - Google, at Velocity 2010 • Found an ~15% latency impact • (Sleazy impact: 1,000%) Tuesday, July 2, 13
- 39. The savings don’t stop • Maps: 400kB in images and scripts • Autoplay videos: many MB instantly • Animation JS: if poorly managed Tuesday, July 2, 13
- 40. Visual Design Savings Flickr mattdoucette http://bit.ly/14uFtEq Tuesday, July 2, 13
- 41. Image triage • Simply, have fewer images. • Optimize more • Smush.it (free) • jpg or png? 0 375 750 1125 1500 Page weight in KB Tuesday, July 2, 13
- 42. Rethink photos http://www.alistapart.com/articles/the-web-aesthetic @garrettc’s cat Tuesday, July 2, 13
- 43. Responsive Images We’re missing out on 72% image savings for mobile. Go read: http://timkadlec.com/2013/06/why-we-need- responsive-images/ Tuesday, July 2, 13
- 44. Image replacement: Icon Fonts http://www.heydonworks.com/article/using-icon-web-fonts http://glyphicons.com/ • Replace your icon gifs with one font file. • Free, paid, and roll-your-own options Tuesday, July 2, 13
- 45. Future: pure CSS icons http://nicolasgallagher.com/pure-css-gui-icons/demo/ Tuesday, July 2, 13
- 46. Image organization: Icon Sprites • Combine lots of small icons into one file • Big saving on HTTP requests • Free services like http://spriteme.org/ Tuesday, July 2, 13
- 47. Vectors • SVG now production-ready (mostly) • Files scale to any size • This guy is 20kB Tuesday, July 2, 13
- 48. Tame web fonts ✤20 to 100kB ✤Lots of HTTP requests Tuesday, July 2, 13
- 49. Code Savings Tuesday, July 2, 13
- 50. Code savings • Too many to mention here: • Minifiy Scripts. • Compress downloads. • Set Expire headers in .htaccess. • Use .gzip compression. • Server side concatenation of scripts. • Fix the script load order (put JS at the bottom). • Use asynchronous JS loading. • Use DNS pre-fetch. • Use cookie-less domains for static assets. • Use two domains for static assets (take advantage of parallel download). • Use conditional loading - only load scripts/images when needed. Tuesday, July 2, 13
- 53. Page budgets • Set a budget in kB that suits needs of audience • (More mobile? Smaller pages.) • Trade features and content against the budget http://clearleft.com/thinks/responsivedesignonabudget/ Tuesday, July 2, 13
- 54. Site budgets • Extend the idea to a whole site • How much data, and how much time loading the site, for each user? • Manage the delays Tuesday, July 2, 13
- 55. Wireframes Tuesday, July 2, 13
- 56. • 790kB in image saving • 100kB in script • 400kB in Share Buttons Tuesday, July 2, 13
- 57. Warm fuzzies Metric Before After Saving All users/ year Home Loading time/visit 4s 2s 2s 555 hours Total visit loading time 30s 16s 14s 162 days Data/visit 10MB 3MB 7MB 6,873 GB Tuesday, July 2, 13
- 58. Cold Hard ROI* Metric Before After Difference Conversion 5% 10% +5% Time-on site 1:13 1:55 +42s Bounce-rate 20% 15% -5% Mobile bounce 50% 20% -30% Hosting cost $50,000 $40,000 -$10,000 ecomm revenue $100k $300k +$200k *complete fabrication Tuesday, July 2, 13
- 59. Inspirational examples • Zappos: 1.2MB, 985ms • Mailchimp.com: 876kB, 2 seconds • 2013.dconstruct.org: 142kB, 925ms • “How low can you go?” approach • “This is a web page”: 13kB, 377ms http://justinjackson.ca/words.html Tuesday, July 2, 13
- 60. “Things should be as simple as possible, but no simpler.” Tuesday, July 2, 13
- 61. Summary • Images and scripts are where the main savings can be made • Think in terms of data footprint and object count • Set a budget per page or per user visit • Work with clients and users to find what content can be reduced or retired • Challenge orthodoxy! (cough carousels cough) Tuesday, July 2, 13
- 63. Thank you! • Thank you for your time! • I love feedback: • Twitter: @jc_ux • Email: jchristie@madpow.com • Big thanks to Mad*Pow for hosting! Tuesday, July 2, 13
- 64. Follow @madpow for more events and insights Tuesday, July 2, 13