Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing speed with progressive enhancement

Designing speed with progressive enhancement

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.

1e2ff8ee6ac0e790883b1cdc420f158d?s=128

Sergey Chernyshev

July 10, 2016
Tweet

Transcript

  1. DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT Sergey Chernyshev | @SergeyChe WebPerf

    Camp, 2016
  2. None
  3. None
  4. Sloooowly

  5. SPEED MATTERS to your users and to you

  6. SLOW MEANS LOWER CONVERSION RUM data. Aaron Kulick, Cliff Crocker

    @ Wallmart Labs
  7. CONVERTED USERS HAVE FASTER EXPERIENCE RUM data. Aaron Kulick, Cliff

    Crocker @ Wallmart Labs
  8. 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/
  9. WHAT DOES MY SITE COST? (WHATDOESMYSITECOST.COM) http://www.disney.com/

  10. % OF DAILY BUDGET (WHATDOESMYSITECOST.COM) http://www.disney.com/

  11. DESIGN
 FOR SPEED and progressive enhancement

  12. MOVIES OR PAINTINGS? Speed vs. Fluency, What drives user engagement?

    Kent Alstad, Velocity NY 2015
  13. PERFORMANCE CHOREOGRAPHERS Performance Choreography Tim Kadlec, WebPerfDays NY 2014

  14. 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)
  15. FEATURES BASED ON CAPABILITIES book by Filament Group
 http://filamentgroup.com/dwpe/

  16. 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. …
  17. VERIFY DESTINATION ➤ Core branding ➤ Maybe a breadcrumb

  18. PROVIDE PRIMARY CONTENT ➤ Leaderboards, article text and photo, product

    images
  19. ALLOW INTERACTION ➤ Call to action, video play button, carousel

    arrows
  20. SHOW SECONDARY CONTENT ➤ Sidebars, secondary content ➤ Additional navigation

    ➤ User-generated content, sharing buttons, ads
  21. INVISIBLE TASKS ➤ Below the fold content ➤ Analytics calls

    (“pixels”)
  22. 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. …
  23. 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!
  24. INCREMENTAL MOCKUP 1

  25. INCREMENTAL MOCKUP 2

  26. INCREMENTAL MOCKUP 3

  27. INCREMENTAL MOCKUP 4

  28. INCREMENTAL MOCKUP 5

  29. 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
  30. 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 ...
  31. SPEED
 (ANTI-)
 PATTERNS set best practices

  32. ANTI-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

  33. FAST-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

  34. FAST-PROGRESS Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

  35. ANTI-CAROUSEL

  36. FAST-CAROUSEL just static image, HTML & CSS

  37. FAST-CAROUSEL fully loaded, JavaScript, click & touch / swipe

  38. ANTI ADS

  39. PUSHY ADS

  40. EXPECTED ADS

  41. EXPECTED ADS

  42. SPEED PROCESS ➤Identify design components ➤Set Constraints ➤Measure and compare

    to baseline ➤Avoid Anti-Patterns,
 define best practices
  43. THANK YOU @SergeyChe | sergey.chernyshev@gmail.com