VOOZH about

URL: https://speakerdeck.com/sergeychernyshev/speed-design

⇱ Speed Design - Speaker Deck

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

Speed Design

Sponsored · 👁 Image
Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
👁 Avatar for Sergey Chernyshev
Sergey Chernyshev
June 07, 2024

Share

Embed

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.

More Decks by Sergey Chernyshev

Other Decks in Design

Featured

Transcript

  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)

  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

  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

  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