Simply animate pictures - arouse play instinct

Much more possibilities than with print media we have with websites over animations (which are difficult to represent in printed form). We can create animations with a few lines of CSS3 code. The first question is of course: Why should you do this??

If we manage to arouse the play instinct in the human being, the website will get much more attention. Small and fine animations (please, with sense and not puffery) can put a smile on visitors’ faces or simply clarify possibilities. The play instinct is easily aroused by user actions and animations. The next step after arousing curiosity and playfulness is gamification. But one thing at a time. Here we deal first with the play instinct.

Some try it on the variant "search an element" that we have repeatedly hidden on the site more or less obviously (for example, a beer table manufacturer and his cats). We want to look at how we can fire up the play instinct via technical possibilities. This includes that the visitor has to do something (without diligence, no prize). And if the doing is done only by moving the mouse.

For example, we can animate images that serve as eye-catchers at the beginning of texts very easily via CSS3. If the visitor now moves the mouse over the image (usually the images are large enough that this is very likely to happen), the image is animated and the visitor not expecting it is (hopefully) positively surprised.

Here are simple animations, that the image is zoomed in or out, colored or dances and jumps and sings (which is definitely too much of a good thing).

Image enlarges when mouse is touched

Example animation: Image shrinks when mouse is touched

In the following example, the image rotates when the mouse is touched. Depending on where the mouse cursor sits, there are funny effects and the image wants to return to its original position and jumps between 2 states.

Example animation: Too much of a good thing

Or simply coloring the image with a chosen color:

Colorize cat on mouse touch

Of course, it is even better if the animation has something to do with the goal of the website. if we have a phone support page, then it is obvious that the employee takes the phone to his ear (I already know that there are headsets – but my cat does not like that!).

animated employee sleeping/telephoning – gimme a call

Animations with added value!

If we manage to add value to the animation and play instinct it is all the better. If, for example, a product overview page contains further detail pages, then it would be nice if there was not only a link in the form of "to the detail page".

So we provide an existing product image with text that only appears when the mouse is touched. And if the image is then expanded as a link to the detail page, the visitor has added value and likes to click.

Especially since a picture is usually larger than a link and therefore better clickable by mouse than a small link.

In the following example the text is shown in 2 different ways. How soft or hectic the effects are created is an implementation story. We can adjust all effect in speed and effect.

Please move the mouse over the image in the following example. There is no detail page yet (the following example serves as an illustration).

animated (soft) product photo as link to detail page – image is enlarged when mouse is touched, darkened and a text appears

click for details

So we are helped by the targeted use of animations to "keep the user happy" resp. to awaken the play instinct in the first step. Therefore, when creating a design, it is also important to consider which animations should be integrated. It is already clear that designers of the old type get problems with it at first, because they mostly start from printed media and have no temporal dimension (i.e. the temporal flow of animations).

So have courage to be playful with design and user – even if the content of the website is rather dry matter.