Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Speed Design

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.

Sergey Chernyshev

June 07, 2024
Tweet

More Decks by Sergey Chernyshev

Other Decks in Design

Transcript

  1. 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)
  2. 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
  3. 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
  4. 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