I really love this “Perceived Performance” presentation from Eli Fitch.
The audience for this presentation were front-end engineers. I find it useful for a designer as well.
Eli’s presentation(click on the presentation to focus, use left/right keys to navigate):
We humans are subjective. No question about that, right?! Yet, when we measure performance, we are used to look for objective measures.
On Objective Time vs Subjective Time (starting from page 9), Eli brought up a few interesting points:
- Engineers are doing great jobs on objective time optimization, such as code minimization and image optimization. Yet, users may not feel perceive any improvement, subjectively. Thus, it’s important to understand how users perceive time.
- Active wait time vs passive wait time. Active wait time means that a person can actively work on something while waiting; passive wait time means that a person has to do nothing but wait, e.g. Amy waits for a blank webpage to load. See Eli’s screen capture below.
- Keep user from passive wait state, because a passively waiting user can exaggerate the “slowness” of the wait time.
I really love examples below on loading time tricks — scroll down to click on the ❤️, see the contrast:
- Clicks on ❤️wait to give feedback after HTTP request:
- Clicks on ❤️gives immediate feedback:
A few other experiments I really liked:
- Tiny time difference on onmousedown vs onclick. The point is that engineers don’t have wait for an onclick event to trigger the loading process; utilizing onmousedown for a head start.
- Progress bar vs spinning vs others (starting from page 54). If loading time is < 1s, try some pre-loading tricks (like above) to reduce wait time perception; if the wait is > 2 secs, use a progress bar; spinner works somewhere in between but doesn’t give user an accurate expectation. Page 76 demos how Slack effectively occupies user’s time. Page 78 demos a how a soccer game does it.
- Predictive Preloading (starting from page 80) on how we can reduce wait time even more. A game example on page 84. I really love the contrast of two shopping cart examples below — see the magic of predictiveness on the 2nd one!
- Another cool example for predictive preloading! The improved speed is amazing.
The quality of presentation is as amazing as the content.
To be honest, I never thought of such details, as a designer (sadly). When we slot in loading icons and transitions for that all wait time, we should think about how we can improve user experience on micro levels like loading time.