What you see is faster than what you get - ways to speed up perception

Slide 1

Slide 1 text

What you see is faster than what you get! Ways to speed up perception

Slide 2

Slide 2 text

Radimir Bitsov Front-end developer who ❤ performance, accessibility, and interface animation.

Slide 3

Slide 3 text

@radibit GitHub · Twitter · CodePen

Slide 4

Slide 4 text

Lewis Carroll, Alice in Wonderland “Alice: How long is forever?   White Rabbit: Sometimes, just one second.”

Slide 5

Slide 5 text

Time is an objective quantity We can measure it very precisely.

Slide 6

Slide 6 text

source Humans Since 1982

Slide 7

Slide 7 text

We know the importance of measuring page load time Our performance budgets are primarily based on it.

Slide 8

Slide 8 text

However, time perception is subjective

Slide 9

Slide 9 text

The Kappa eﬀect 500km / 3h   800km / 3h

Slide 10

Slide 10 text

Steps in the right direction It’s important to consider TTI, ﬁrst contentful paint, above the fold time

Slide 11

Slide 11 text

Measure web performance WebPagetest Browser developer tools Lighthouse Find even more on perf-tooling.today

Slide 12

Slide 12 text

How fast users think your app is? It’s all about the experience.

Slide 13

Slide 13 text

Make your users happy

Slide 14

Slide 14 text

Why perceived performance matters? Make your users happy

Slide 15

Slide 15 text

How humans sense time? Why perceived performance matters? Make your users happy

Slide 16

Slide 16 text

How humans sense time? Why perceived performance matters? Which techniques can speed up perception? Make your users happy

Slide 17

Slide 17 text

Why perceived performance matters photo by pixabay.com

Slide 18

Slide 18 text

source pwastats.com Inﬂuences the perception of your brand Twitter Lite is interactive in less than 5s over 3G on most devices, with average load time reduced by over 30%

Slide 19

Slide 19 text

Inﬂuences the perception of your brand source pwastats.com housing.com increased conversions by 38% and sped up page load by 30%, while also lowering their bounce rate by 40%

Slide 20

Slide 20 text

May aﬀect users purchase intent source radware.com/mobile-eeg2013 500 ms delay resulted in ⬆ 26% in users’ frustration, ⬇ 8% engagement

Slide 21

Slide 21 text

May aﬀect users purchase intent source radware.com/mobile-eeg2013 Slow websites dramatically reduced the measured emotional aspect of purchase intent and brand functionality

Slide 22

Slide 22 text

Ilya Grigorik “Perceived performance = f(Expected Performance, UX, Actual Performance)”

Slide 23

Slide 23 text

Think like your users

Slide 24

Slide 24 text

How people perceive time photo by sciencenews.org

Slide 25

Slide 25 text

The internal clock model Start End Source Other stimulus Pacemaker Accumulator Decision taking

Slide 26

Slide 26 text

Our brains manipulate the perceived duration all the time

Slide 27

Slide 27 text

Chronostatis

Slide 28

Slide 28 text

What we know about perceived duration and web performance

Slide 29

Slide 29 text

Time durations Instant Immediate User Flow Attention Span 0s 2s 4s 6s 8s source

Slide 30

Slide 30 text

0.1s < < 1s < 3s < 8s Users’ expectation to get a feedback from a given action.

Slide 31

Slide 31 text

Providing joy at 60 fps source Allen Pike, former software engineer @ Apple

Slide 32

Slide 32 text

Providing joy at 60 fps ⬇ 16ms smooth experience at 60 fps

Slide 33

Slide 33 text

Providing joy at 60 fps ⬇ 16ms smooth experience at 60 fps ⬇ 100ms not perfect for animation, still good for feedback

Slide 34

Slide 34 text

Providing joy at 60 fps ⬇ 16ms smooth experience at 60 fps ⬇ 100ms not perfect for animation, still good for feedback ⬇ 1000ms users sense the delay, not frustrated if there is a visual feedback

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Just noticeable diﬀerence Weber–Fechner law

Slide 37

Slide 37 text

The 20% rule source Designing and Engineering Time, Steven C. Seow In order for users to see any diﬀerence, it has to be changed by a minimum of 20%

Slide 38

Slide 38 text

Aim for 30%, go beyond the threshold ⚡

Slide 39

Slide 39 text

Speed up perception

Slide 40

Slide 40 text

Favorite perceived perf techniques

Slide 41

Slide 41 text

Optimistic updates

Slide 42

Slide 42 text

Background operations Instagram starts uploading a picture as soon as users choose the one they want to share.

Slide 43

Slide 43 text

Background operations Register the like action, though the feed is still loading.

Slide 44

Slide 44 text

Skeleton screens

Slide 45

Slide 45 text

Launch screen source iOS Human Interface Guidelines Apple introduced skeleton screens in their interface guidelines as launch screens.

Slide 46

Slide 46 text

First screen source iOS Human Interface Guidelines “It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use.”

Slide 47

Slide 47 text

Skeleton screen in action It feels that the application on the left loads content faster! source tandemseven

Slide 48

Slide 48 text

Progressive image loading

Slide 49

Slide 49 text

source csswizardry

Slide 50

Slide 50 text

Automatically get the relevant colors color-extractor get-image-colors postcss-resemble-image

Slide 51

Slide 51 text

Using linear-gradient

Slide 52

Slide 52 text

Progress indicators It’s our chance to give users certainty!

Slide 53

Slide 53 text

source

Slide 54

Slide 54 text

What about spinners and loaders?

Slide 55

Slide 55 text

source

Slide 56

Slide 56 text

Avoid them as a single indicator! Yes, we all love creating them! However, they draw attention to the fact that the user is waiting.

Slide 57

Slide 57 text

Interface animation

Slide 58

Slide 58 text

Motion Animations can aﬀect the perception of time and duration for your website’s visitors.

Slide 59

Slide 59 text

Moving objects source Val Head

Slide 60

Slide 60 text

Content shifting UX source Sarah Drasner

Slide 61

Slide 61 text

Animation is a powerful technique! Performance and functionality however should always be the goal over anything else.