Performance Perception Trick: Processing Lists Faster

I’ve got a little trick to make the processing of lists appear to go faster than it actually does.

Let’s suppose we have a list of 10 items and there’s some kind of processing to be done on them, maybe sending them off to a service which returns a Boolean true/false response for each. In reality we post a single request with the data of the 10 items and we get a single response back after 3 seconds.

In the UI we can use animation to make it look as if each item is being sent one at a time by adding a 100 millisecond delay between each state change. This means that the user thinks the last item of the 10 is sent after 1 second but in reality it’s already gone a second ago buying us extra time.

When we get the response, rather than show all the results immediately, we can use a similar animation to make them appear one by one with a 100 millisecond delay again. Although this is slower than just showing them all it maintains the illusion of the items being processed one by one.

So, the reality, without the trickery, is like this:

0Request sent,
perceived waiting time begins
3Response returned,
UI updated,
perceived waiting time ends

This would mean a perceived waiting time of 3 seconds.

And with the trickery:

0Request sent,
animation started
1Animation ends,
perceived waiting time begins
3Response returned,
animation started,
perceived waiting time ends
4Animation ends

Even though the time to getting the final bit of data on screen is actually extended to 4 seconds, the perceived waiting time is reduced to 2 seconds.

Web Animation Tips

Here are a few techniques I use in making web animations in Codepen.

Zooming

By zooming all I really mean is moving things nearer or further by animating them along the Z axis with transform:translateZ(). This needs to be used in conjunction with the perspective and perspective-origin rules on a parent element. I tend to put this on the html element.

I like to set the opacity at 1 when elements are close up and fade them down to a lower opacity as they’re further away. This gives a very natural feeling of coming into focus or if exaggerated can give the impression of something emerging from a fog.

Example: Tie Fighter Waves

Rotation

I quite often use rotation to make 3D objects spin on screen. It would be a shame to go to the trouble of making a 3D object with detail on all sides only to see part of it. Turning it round slowly is an easy way showing it off. Use a keyframe animation for this rotating the object around the Y axis.

@keyframes spin {
0% { transform:rotateY(0deg); }
100% { transform:rotateY(360deg); }
}

.spin { animation: spin 5s linear infinite; }

Shaking

Making an object shake is a great way of drawing attention to it or giving the ipression taht something is alive or vibrating like an engine. It’s easy to make objects shake using keyframe animations.

@keyframes shake {
0% { transform:translateX(-2px); }
100% { transform:translateX(2px); }
}

.shake { animation: shake 100ms linear alternate infinite; }

Mother Nature in Web Design

How can we make designs feel more like the natural world and less like something created on a machine? Here are a few ideas…

Randomness

I’ve created a few pens on Codepen recently which involve JavaScript generating random elements in the DOM. Add a new element and assign it random position, dimensions or scale.

Furball
Tie Fighter Waves
Random Circles

Whilst these were just playing around, I am interested by the idea of bringing an element of randomness into designs. There’s a real feeling of the natural world or at least being outside in allowing things to be created and move around of their own accord or, at least, appear to.

Position

To do this we can use JavaScript to assign elements a random position. Set position:absolute and then generate random numbers for left and top values within the confines of the viewport width and height.

Movement

In nature things don’t generally move in a linear way. They accelerate, reach their desired speed and then decelerate again before stopping – its not sudden. Similarly, things don’t just appear or disappear but gradually fade in or out of view or move in gradually from outside the range of vision. Things don’t always stay upright. They turn and sway. They’re affected by wind outside.

Keyframe animation with transforms, especially translate and rotate, can help make things move quite subtly giving a very natural feel.

Lighting

Light is not a constant in nature, except maybe in the dessert. It is affected by cloud cover and so the lightness/darkness of things will vary. Shadows don’t stay fixed for long but may change direction and intensity outside.