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.
DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT Sergey Chernyshev | @SergeyChe WebPerf Camp, 2016
Sloooowly
SPEED MATTERS to your users and to you
SLOW MEANS LOWER CONVERSION RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
CONVERTED USERS HAVE FASTER EXPERIENCE RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
STATS ➤ Google: +500ms => -25% searches (2006) ➤ Amazon: +100ms => -1% revenue (2008) ➤ Netflix: +GZip => -43% Traffic cost (...
WHAT DOES MY SITE COST? (WHATDOESMYSITECOST.COM) http://www.disney.com/
% OF DAILY BUDGET (WHATDOESMYSITECOST.COM) http://www.disney.com/
DESIGN
 FOR SPEED and progressive enhancement
MOVIES OR PAINTINGS? Speed vs. Fluency, What drives user engagement? Kent Alstad, Velocity NY 2015
PERFORMANCE CHOREOGRAPHERS Performance Choreography Tim Kadlec, WebPerfDays NY 2014
PROGRESSIVE ENHANCEMENT ➤ Enhance page features progressively as it loads and renders ➤ Main goals: 1. Enable features bas...
FEATURES BASED ON CAPABILITIES book by Filament Group
 http://filamentgroup.com/dwpe/
RENDER & INTERACTION STAGES 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary conten...
VERIFY DESTINATION ➤ Core branding ➤ Maybe a breadcrumb
PROVIDE PRIMARY CONTENT ➤ Leaderboards, article text and photo, product images
ALLOW INTERACTION ➤ Call to action, video play button, carousel arrows
SHOW SECONDARY CONTENT ➤ Sidebars, secondary content ➤ Additional navigation ➤ User-generated content, sharing buttons, ads
INVISIBLE TASKS ➤ Below the fold content ➤ Analytics calls (“pixels”)
RENDER & INTERACTION STAGES 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary conten...
ACKNOWLEDGE ACTION ➤ Disable submit button with “in progress” label,
 disable form elements ➤ Show transitional overlay (e...
INCREMENTAL MOCKUP 1
INCREMENTAL MOCKUP 2
INCREMENTAL MOCKUP 3
INCREMENTAL MOCKUP 4
INCREMENTAL MOCKUP 5
STAGES & TECHNICAL CONSTRAINTS Stage 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show seconda...
THROUGHOUT DESIGN & DEV PROCESS ➤ Wires (multiple) ➤ PSD / Sketch Mockups (multiple files) ➤ HTML Mockups (separate HTML fil...
SPEED
 (ANTI-)
 PATTERNS set best practices
ANTI-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
FAST-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
FAST-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
ANTI-CAROUSEL
FAST-CAROUSEL just static image, HTML & CSS
FAST-CAROUSEL fully loaded, JavaScript, click & touch / swipe
ANTI ADS
PUSHY ADS
EXPECTED ADS
EXPECTED ADS
SPEED PROCESS ➤Identify design components ➤Set Constraints ➤Measure and compare to baseline ➤Avoid Anti-Patterns,
 define b...
THANK YOU @SergeyChe | sergey.chernyshev@gmail.com
Designing speed with progressive enhancement
Designing speed with progressive enhancement
Upcoming SlideShare
Loading in …5
×

Designing speed with progressive enhancement

513 views

Published on

Progressive enhancement techniques are used to improve perceived performance. Incorporating progressive enhancement early in product design and development process can ensure that fast user experience is not an afterthought but is baked into the product.

Published in: Technology
no profile picture user

  • Be the first to comment

  • Be the first to like this

Designing speed with progressive enhancement

  1. 1. DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT Sergey Chernyshev | @SergeyChe WebPerf Camp, 2016
  2. 2. Sloooowly
  3. 3. SPEED MATTERS to your users and to you
  4. 4. SLOW MEANS LOWER CONVERSION RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
  5. 5. CONVERTED USERS HAVE FASTER EXPERIENCE RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
  6. 6. STATS ➤ Google: +500ms => -25% searches (2006) ➤ Amazon: +100ms => -1% revenue (2008) ➤ Netflix: +GZip => -43% Traffic cost (2008) ➤ Shopzilla: -5s => +12% Conversion rate (2009) ➤ Google: +400ms => -0.21% searches after experiment! (2009) ➤ Mozilla: -2.2s => +15.4% Downloads (2010) ➤ Edmunds: -77% load time => +20% page views (2011) ➤ DoubleClick: -1 redirect => +12% CTR (2011) ➤ Etsy: +160Kb => +12% bounce rate (2014) ➤ Trainline: -0.3s => +$11.5M / year revenue http://WPOStats.com/
  7. 7. WHAT DOES MY SITE COST? (WHATDOESMYSITECOST.COM) http://www.disney.com/
  8. 8. % OF DAILY BUDGET (WHATDOESMYSITECOST.COM) http://www.disney.com/
  9. 9. DESIGN
 FOR SPEED and progressive enhancement
  10. 10. MOVIES OR PAINTINGS? Speed vs. Fluency, What drives user engagement? Kent Alstad, Velocity NY 2015
  11. 11. PERFORMANCE CHOREOGRAPHERS Performance Choreography Tim Kadlec, WebPerfDays NY 2014
  12. 12. PROGRESSIVE ENHANCEMENT ➤ Enhance page features progressively as it loads and renders ➤ Main goals: 1. Enable features based on browser capabilities
 (e.g. JavaScript, image formats, local storage, gyro/compass) 2. Reveal features as page is being downloaded and rendered
 (render basic html + CSS, add JS handlers, fonts, etc)
  13. 13. FEATURES BASED ON CAPABILITIES book by Filament Group
 http://filamentgroup.com/dwpe/
  14. 14. RENDER & INTERACTION STAGES 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary content 5. Invisible tasks
 Acknowledge action
 1. Verify destination 2. …
  15. 15. VERIFY DESTINATION ➤ Core branding ➤ Maybe a breadcrumb
  16. 16. PROVIDE PRIMARY CONTENT ➤ Leaderboards, article text and photo, product images
  17. 17. ALLOW INTERACTION ➤ Call to action, video play button, carousel arrows
  18. 18. SHOW SECONDARY CONTENT ➤ Sidebars, secondary content ➤ Additional navigation ➤ User-generated content, sharing buttons, ads
  19. 19. INVISIBLE TASKS ➤ Below the fold content ➤ Analytics calls (“pixels”)
  20. 20. RENDER & INTERACTION STAGES 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary content 5. Invisible tasks
 Acknowledge action
 1. Verify destination 2. …
  21. 21. ACKNOWLEDGE ACTION ➤ Disable submit button with “in progress” label,
 disable form elements ➤ Show transitional overlay (e.g. “Opening PayPal…”) ➤ Erase content area of the page ➤ No spinners!
  22. 22. INCREMENTAL MOCKUP 1
  23. 23. INCREMENTAL MOCKUP 2
  24. 24. INCREMENTAL MOCKUP 3
  25. 25. INCREMENTAL MOCKUP 4
  26. 26. INCREMENTAL MOCKUP 5
  27. 27. STAGES & TECHNICAL CONSTRAINTS Stage 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary content
 5. Invisible tasks Acknowledge action Technology Constraints 1. Inline CSS & Logo, 14K 2. no JS, CSS, just HTML, image 3. Skeletal CSS, async JS 4. All CSS, above the fold images, fonts, AJAX-in content 5. The rest Pre-transition feedback,
 fake transition
  28. 28. THROUGHOUT DESIGN & DEV PROCESS ➤ Wires (multiple) ➤ PSD / Sketch Mockups (multiple files) ➤ HTML Mockups (separate HTML files) ➤ Front-end implementation (query string params)? ➤ Full implementation (in dev / test / pre-prod)? http://test.mysite.com/page.html?stage=1 http://test.mysite.com/page.html?stage=2 ...
  29. 29. SPEED
 (ANTI-)
 PATTERNS set best practices
  30. 30. ANTI-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
  31. 31. FAST-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
  32. 32. FAST-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
  33. 33. ANTI-CAROUSEL
  34. 34. FAST-CAROUSEL just static image, HTML & CSS
  35. 35. FAST-CAROUSEL fully loaded, JavaScript, click & touch / swipe
  36. 36. ANTI ADS
  37. 37. PUSHY ADS
  38. 38. EXPECTED ADS
  39. 39. EXPECTED ADS
  40. 40. SPEED PROCESS ➤Identify design components ➤Set Constraints ➤Measure and compare to baseline ➤Avoid Anti-Patterns,
 define best practices
  41. 41. THANK YOU @SergeyChe | sergey.chernyshev@gmail.com

×