Websites worden steeds complexer. Tegelijkertijd moeten ze begrijpelijk zijn en er simpel uitzien. Eenvoud en ‘flat design’ zijn populairder dan ooit. Maar hoe banen we ons een weg door complexe informatie in die ogenschijnlijk eenvoudige websites? Iets dat daarbij kan helpen is animatie in je website.

Het woord ‘animatie’ associeer je misschien met Disney, cartoons en films voor kinderen; maar het is ook een prachtige tool om de website van je bedrijf nóg beter te maken voor je klanten.

Subtiele animatie-effecten werken goed om de navigatie, de bruikbaarheid en de toegankelijkheid van een website te verbeteren. Eenvoudige, kleine stukjes animatie kunnen de gebruiker leiden door complexe informatie, zonder de hele esthetiek te veranderen. Je kunt er dingen mee uitleggen zonder woorden, en zo mensen verder helpen.

Zo zorgt de animatie voor een goede brug tussen de uitgeklede eenvoud van ‘flat design’ en gebruiksvriendelijkheid. Hieronder beschrijf ik een paar manieren hoe animaties waarde kunnen toevoegen aan een ontwerp (met dank aan CSSanimations voor de inspiratie).

Het benadrukken van interactieve content

De eerste keer dat een gebruiker een website bezoekt, heeft zij tijd nodig om zich te oriënteren. Door kleine bewegingen en kleurveranderingen op te laten nemen in het website-ontwerp kun je haar door de inhoud leiden en laten zien welke stukjes van de site interactief zijn.

Het toevoegen en verwijderen van inhoud

Animatie kan de bezoeker goed helpen met de ruimtelijke structuur. Een bezoeker merkt het wel als er inhoud plotseling verdwijnt of verschijnt, maar kan niet altijd plaatsen waarheen en waarom dingen er niet meer zijn. Wat gebeurde daar nou?

Dat is een mooie kans om animatie toe te voegen. Een voorbeeld: in een online winkel kunnen je ontwerper en developer extra informatie toevoegen aan een knop. Wanneer je bezoeker een product koopt, kan de site een animatie laten zien van het product dat naar het winkelmandje beweegt. Zo weet de bezoeker dan ook meteen waar het winkelmandje staat.

Een verhaal vertellen en feedback

De website van je bedrijf hoeft zich niet meer te beperken tot statische beelden. Door bewegende, verschijnende of verdwijnende elementen neem de site de bezoeker mee op een reis en informeer je haar beter. De website wordt er levendiger van. En door kleine interactieve animaties kan de gebruiker zich sneller en beter bewegen door een webpagina.

Ook feedback helpt bij de gebruiksvriendelijkheid. Als er niets gebeurt nadat een bezoeker op een knop heeft geklikt, kan zij snel afhaken of onzeker worden. Kleine geanimeerde feedback kan de bezoeker helpen, zoals bijvoorbeeld het ‘laden’-icoon als je even moet wachten.

Voorbeeld 1: Gleb Stroganov.

Dit is een mooi voorbeeld van feedback. Als je op deze button klikt, krijg je meteen de voortgang van een download te zien, en of het goed gelukt is. Als deze knop niet geanimeerd zou zijn, zou het kunnen gebeuren dat je bezoeker niet weet of het goed is gegaan. Dan klikt ze opnieuw op de knop, en downloadt ze het document meerdere keren.

Aandacht trekken

Mensen zijn goed in het opmerken van dingen die visueel veranderen. Daarmee zijn animaties een goede trigger voor aandacht.

Voorbeeld 2: Colin Garven.

Het komt vaak voor dat websitebezoekers moeten zoeken hoe ze een bestand kunnen uploaden. Met deze animatie geef je een goede trigger om het snel te vinden. De kleine animatie laat ook zien hoever je bent en of het goed is gelukt - goede feedback dus.

Geloofwaardigheid en plezier

Animaties zijn een essentieel element om een goede website te maken. Als je dat vergeet bij het laten ontwerpen van een site kan het wel heel ‘flat’ worden.

Kleine animaties kunnen het ontwerp verbeteren en er voor zorgen dat de bezoekers er ook meer plezier aan hebben. Ze zorgen ervoor dat de website persoonlijker en specialer wordt, waardoor hij beter blijft hangen in de herinnering van je bezoekers.

Voorbeeld 3: Nick Frost.

Als je bezoeker op een knop klikt zonder een ‘waiting’ animatie, en er gebeurt niets, bijvoorbeeld omdat de verbinding traag is, kan er van alles door haar hoofd gaan. ‘Heb ik wel goed geklikt?’ ‘Moet ik het nog een keer doen?’. Door de kleine animatie in dit voorbeeld weet ze dat het proces in de gang is.

Goede animatie is zeer subtiel: kleine stukjes en details die de gebruiker ontdekt als ze de interactie gebruikt. Een krachtig hulpmiddel om een website naar een hoger niveau te tillen.