Motion - Part 1

Posted by Jon on 28 February 2015 | Comments

Tags: , ,

Our visual system is highly attuned to motion. Biologically speaking this serves several vital functions, including finding prey and escaping predators.

Below we have a nice peaceful scene.


Now, let's add some motion.

Suddenly the scene has changed. Our eyes snap instantly to the motion, whereas on the static scene it may have taken several seconds of viewing to spot the octopus.

ScreenLab's engine also responds to motion. Below are the heatmaps generated from the two images above.

octopus heatmap static
Static image heatmap with distributed hotspots

octopus heatmap static
Movie heatmap with concentrated hotspots

As you can see, the static image has distributed hotspots reflecting the lack of any prominent features. The second image shows how the motion pulls the attention of ScreenLab just as it does with a human observer.

What does this mean for web design? Motion is a powerful tool for grabbing attention and can be used to very strongly highlight something on a site. Be careful though because overuse of strong attractors can make websites seem jumpy or aggressive. No-one wants to return to the 1990s pages full of scrolling marquees and animated gifs.

In part 2 we'll take a look at just how we perceive motion.

(Images derived from video courtesy of Diver Jackie.)

comments powered by Disqus

What do your users really see?

Use ScreenLab to find out and rapidly optimise your websites, apps and UIs