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.

Transcript

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

   View Slide

2. View Slide

3. View Slide

4. Sloooowly
   

   View Slide

5. SPEED
   MATTERS
   to your users and to you
   

   View Slide

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

   View Slide

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

   View Slide

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/
   

   View Slide

9. WHAT DOES MY SITE COST? (WHATDOESMYSITECOST.COM)
   http://www.disney.com/
   

   View Slide

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

    View Slide

11. DESIGN

    FOR SPEED
    and progressive enhancement
    

    View Slide

12. MOVIES OR PAINTINGS?
    Speed vs. Fluency, What drives user engagement?
    Kent Alstad, Velocity NY 2015
    

    View Slide

13. PERFORMANCE CHOREOGRAPHERS
    Performance Choreography
    Tim Kadlec, WebPerfDays NY 2014
    

    View Slide

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)
    

    View Slide

15. FEATURES BASED ON CAPABILITIES
    book by Filament Group

    http://filamentgroup.com/dwpe/
    

    View Slide

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. …
    

    View Slide

17. VERIFY DESTINATION
    ➤ Core branding
    ➤ Maybe a breadcrumb
    

    View Slide

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

    View Slide

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

    View Slide

20. SHOW SECONDARY CONTENT
    ➤ Sidebars, secondary content
    ➤ Additional navigation
    ➤ User-generated content, sharing buttons, ads
    

    View Slide

21. INVISIBLE TASKS
    ➤ Below the fold content
    ➤ Analytics calls (“pixels”)
    

    View Slide

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. …
    

    View Slide

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!
    

    View Slide

24. INCREMENTAL MOCKUP 1
    

    View Slide

25. INCREMENTAL MOCKUP 2
    

    View Slide

26. INCREMENTAL MOCKUP 3
    

    View Slide

27. INCREMENTAL MOCKUP 4
    

    View Slide

28. INCREMENTAL MOCKUP 5
    

    View Slide

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
    

    View Slide

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
    ...
    

    View Slide

31. SPEED

    (ANTI-)

    PATTERNS
    set best practices
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. ANTI-CAROUSEL
    

    View Slide

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

    View Slide

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

    View Slide

38. ANTI ADS
    

    View Slide

39. PUSHY ADS
    

    View Slide

40. EXPECTED ADS
    

    View Slide

41. EXPECTED ADS
    

    View Slide

42. SPEED PROCESS
    ➤Identify design
    components
    ➤Set Constraints
    ➤Measure and
    compare to baseline
    ➤Avoid Anti-Patterns,

    define best practices
    

    View Slide

43. THANK YOU
    @SergeyChe | sergey.chernyshev@gmail.com
    

    View Slide