Speed Design

Proper speed design is a collaboration between product managers, UI designers and developers as all the aspects of the page composition must be balanced to achieve fast experience.

In his talk, Sergey Chernyshev discusses how to start bringing speed into the design process early on and looks at the most common set of design patterns that can help you drive design decisions.

Transcript

1. SPEED DESIGN Sergey Chernyshev | @SergeyChe
2. SPEED MATTERS to your users and to you
3. SLOW MEANS LOWER CONVERSION RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
4. WPOSTATS.COM ➤ Carpe: -52% LCP & -42% CLS => +10% tra ffi c, +5% conversion, +15% revenue (2023) ➤ Sunday Citizen: -25% LCP & -61% CLS => -4% bounce, +6% conversion (2022) ➤ Renault: -1s in LCP => -14% bounce, +13% conversion (2021) ➤ Vodafone: -31% LCP => +8% sales, +15% cart visits (2021) ➤ Yelp: -45% FCP @ 75%ile => +15% conversion (2021) ➤ Tokopedia: -55% LCP => +23% session time (2021) ➤ Carousell: -65% Page Load => 3x in ad clickthrough, +46% fi rst time chatters (2018) ➤ Zolando: -100ms load time => +0.7% revenue (2018) ➤ DoubleClick: 5s vs. 19s => up to 2x revenue on mobile (2016) ➤ Trainline: -0.3s => +$11.5M / year revenue (2016) ➤ Etsy: +160Kb => +12% bounce rate (2014) ➤ DoubleClick: -1 redirect => +12% CTR (2011)
5. SEO WEB.DEV/WEB-VITALS CORE WEB VITALS
6. % OF DAILY BUDGET http://www.disney.com/ WHATDOESMYSITECOST.COM
7. SLOWNESS TAKES TIME AWAY SLOWNESSKILLS.COM
8. PROCESS CHANGE include speed early
9. SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC) https://www.mindbowser.com/software-product-engineering-lifecycle/
10. SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC) https://www.mindbowser.com/software-product-engineering-lifecycle/
11. DESIGN FOR SPEED with 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. REVEAL FEATURES as page is being downloaded and constructed
15. 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. … Experience
16. YOUTUBE HOME MOCKUP
17. INCREMENTAL MOCKUP 1
18. INCREMENTAL MOCKUP 2
19. INCREMENTAL MOCKUP 3
20. INCREMENTAL MOCKUP 4
21. FINAL MOCKUP
22. UX & PRODUCT: STORYBOARD WIREFRAMES
23. DESIGN: STORYBOARDS IN FIGMA OR SKETCH
24. YOUTUBE HOME STORYBOARD http://bit.ly/yt-animated-storyboard
25. 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, 1/2 images 3. Skeletal CSS, async JS 4. All CSS, above the fold images, fonts, AJAX-in content 5. The rest Pre-transition feedback, fake transition Experience Complexity
26. SPEEDPATTERNS speedpatterns.com
27. FAST START
28. FAST START
29. FAST START
30. FAST START FIRST CONTENTFUL PAINT
31. FAST START LARGEST CONTENTFUL PAINT
32. IMMUTABLE LAYOUT
33. IMMUTABLE LAYOUT
34. IMMUTABLE LAYOUT
35. IMMUTABLE LAYOUT
36. CUMULATIVE LAYOUT SHIFT IMMUTABLE LAYOUT
37. Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ ff /entry.asp?1797 SKELETAL DESIGNS
38. SKELETAL DESIGNS
39. SKELETAL DESIGNS CONTENT AND LAYOUT CONTENT TASK COMPLETION TASK COMPLETION NAVIGATION STARTS LAYOUT TIME WITH SKELETAL DESIGN NO SKELETAL DESIGN USE OF CONTENT UNDERSTANDING CONTENT STRUCTURE REDUCED PERCEPTION TIME SPEED PATTERNS.COM
40. SKELETAL DESIGNS USE IMMUTABLE LAYOUT
41. SKELETAL DESIGNS USE IMMUTABLE LAYOUT
42. DON’T USE SLOWNESS-INDICATORS
43. THANK YOU @SergeyChe | sergey.chernyshev@gmail.com Q&A