Animated images and motion on the website can be annoying and drive away visitors. On the other hand, moving elements can also be used to draw the attention of visitors. There is a "too much. And a "too little". And where is the golden mean?
Image change. Timer. Flashing banner. There are terrible home pages of websites and online stores. Still. Sites like this once discredited animation. But animations have never completely disappeared from web design – and recently also appeared again in trend lists for 2016.
This leads us to the question: How much movement is actually good for a home page??
Animation even without interaction
Let’s first clarify what exactly this article is about. It’s all about animations and tools that create a motion or. show a change in the website that is not consciously brought about by the visitor.
Thematized are thus for example Sliders that change the start page images, as well as timers, layers and pop-ups. The visitor remains passive here, while website elements or the entire website change. On the other hand, links or buttons that change, for example, during a mouseover are not themed. Nor is it about additional information that is displayed when the mouse pointer rests on a menu item.
Sliders for exchanging images can now be found in almost all major online shops. Another is also relatively common, though often considered annoying: the layer or pop-up that slides in front of page content to draw attention to discount promotions or the newsletter, for example. Ultimately, this is also a type of animation, a very striking one. Not all of them are so striking:
The Planet Sports online store displays a small gray bar at the very top of the home page, listing special customer benefits. This bar is animated at Planet Sports and shows different customer benefits in each case:
Another example: In the input fields of some on-page search engines, a cursor is already blinking. It also belongs to the animated elements, which show a movement without interaction.
Timers that count down a time are much more striking (e.g.B. This special offer is valid for X hours and Y minutes). A rather inconspicuous example of this type can be found at Redcoon. Here, the time is counted in which orders can still be placed and shipped on the same day.
Probably the most eye-catching variant of movement on start pages are video backgrounds, but these are rarely seen in online stores. Somewhat more frequently appearing, for example, on websites for restaurants. Here the video takes up the entire background of the website (and even plays music to it).
Advantages of moving website elements
Let’s stay for a moment at the restaurant with the video background. The background really stands out here and is best suited to create an emotional impact. The winter landscape in the example of the Vau restaurant literally invites you to spend time in a cozy place, at a richly set table and by candlelight.
If you are looking for strong emotions, a video background is often a good choice. For most online stores, on the other hand, he would clearly be too much.
Other animations make much more sense here. What speaks for them?
- Only static is rather boring. Animations can have a loosening effect and make the page seem more lively.
- Animations can attract attention. Used selectively and sparingly, a movement can temporarily draw the visitor’s attention to the moving element and its surroundings. This can be advantageous for example with the customer benefits bar of Planet Sports.
The large images on the home page vie for attention in the sports store with such power that the small bar would normally be drowned out very quickly. And that would be a pity, because the information published there is quite suitable to convince visitors to make a purchase at Planet Sports. Movement increases the chance that this information will become the stars of the home page, at least for a moment.
Animations can provide extra impetus in a space-saving way. For this reason, almost every online store now has a slider, through which the large-scale start page images change. Through the slider, the bargain hunter might get the hint to the current discount campaign, winter sports fans will get the hint to the new ski fashion collection and products for the start of school after the winter vacations can also be attractively staged.
And the disadvantages?
Any movement on a website can also be perceived by the visitor as an annoying distraction. The more movement that occurs independent of any interaction by the store visitor, the more likely they are to perceive the movement as too much.
Website owners and online store owners should therefore test how much movement their home page can handle and where to target it to increase conversion rates. Animated customer benefits that vie for increased attention through movement can create that. Flashing cursors that draw attention to useful product search tool, too. You just must not exaggerate.
When testing, you should therefore not only pay attention to individual moving elements and their influence on the conversion rate, but always keep in mind that it may not be the individual element in its animated variant that has a negative influence on the conversion rate (if it has a negative influence!).
Maybe instead with the additional animated element it just became too many elements of this kind. Then it could have a positive effect on the conversion rate to reduce the number of animated elements – without necessarily having to choose the one currently tested.
Other countries..
Finally, let’s take a look at Taobao. Taobao is a Chinese online auction house and is one of the top 10 most popular websites in China according to the Alexa information service.
Taobao is probably overwhelmingly gaudy from the point of view of most Western Europeans and with its many animations much too restless. But the Chinese taste obviously feels differently!
This makes it clear once again that ultimately everything is relative, and even in web design every certainty is only absolutely valid until someone points out examples where it is not valid or only valid to a limited extent. By the way, one of the basic rules of conversion optimization.