Speed Design - Speaker Deck

Slide 1

Slide 1 text

SPEED DESIGN Sergey Chernyshev | @SergeyChe

Slide 2

Slide 2 text

SPEED MATTERS to your users and to you

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

SEO WEB.DEV/WEB-VITALS CORE WEB VITALS

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

SLOWNESS TAKES TIME AWAY SLOWNESSKILLS.COM

Slide 8

Slide 8 text

PROCESS CHANGE include speed early

Slide 9

Slide 9 text

SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC) https://www.mindbowser.com/software-product-engineering-lifecycle/

Slide 10

Slide 10 text

SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC) https://www.mindbowser.com/software-product-engineering-lifecycle/

Slide 11

Slide 11 text

DESIGN FOR SPEED with progressive enhancement

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

PERFORMANCE CHOREOGRAPHERS Performance Choreography Tim Kadlec, WebPerfDays NY 2014

Slide 14

Slide 14 text

REVEAL FEATURES as page is being downloaded and constructed

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

YOUTUBE HOME MOCKUP

Slide 17

Slide 17 text

INCREMENTAL MOCKUP 1

Slide 18

Slide 18 text

INCREMENTAL MOCKUP 2

Slide 19

Slide 19 text

INCREMENTAL MOCKUP 3

Slide 20

Slide 20 text

INCREMENTAL MOCKUP 4

Slide 21

Slide 21 text

FINAL MOCKUP

Slide 22

Slide 22 text

UX & PRODUCT: STORYBOARD WIREFRAMES

Slide 23

Slide 23 text

DESIGN: STORYBOARDS IN FIGMA OR SKETCH

Slide 24

Slide 24 text

YOUTUBE HOME STORYBOARD http://bit.ly/yt-animated-storyboard

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

SPEEDPATTERNS speedpatterns.com

Slide 27

Slide 27 text

FAST START

Slide 28

Slide 28 text

FAST START

Slide 29

Slide 29 text

FAST START

Slide 30

Slide 30 text

FAST START FIRST CONTENTFUL PAINT

Slide 31

Slide 31 text

FAST START LARGEST CONTENTFUL PAINT

Slide 32

Slide 32 text

IMMUTABLE LAYOUT

Slide 33

Slide 33 text

IMMUTABLE LAYOUT

Slide 34

Slide 34 text

IMMUTABLE LAYOUT

Slide 35

Slide 35 text

IMMUTABLE LAYOUT

Slide 36

Slide 36 text

CUMULATIVE LAYOUT SHIFT IMMUTABLE LAYOUT

Slide 37

Slide 37 text

Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ ff /entry.asp?1797 SKELETAL DESIGNS

Slide 38

Slide 38 text

SKELETAL DESIGNS

Slide 39

Slide 39 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text