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