Het nut van animaties in UX-design

Animaties en effecten

Met de komst van sneller internet en nieuwe webtechnieken kunnen wij rijkere gebruikerservaringen creëren voor onze digitale oplossingen. Animaties en effecten spelen hierbij een grote rol. Animaties trekken je aandacht naar de juiste elementen in een webpagina en zorgen hiermee voor een bepaalde focus. Ook maken animaties de onderliggende relaties in de webpagina duidelijk. Dat betekent dat de bezoeker begrijpt dat de pop-up die opende, bij het icoontje hoort, waar hij of zij op klikte. Tevens kunnen animaties en effecten een ervaring 'leuker' maken. Belangrijk hierbij is dat er geen overdaad aan effecten en animaties zijn.

Animaties in een website leiden dus voor drie dingen: een positieve indruk, meer focus en begrip van relaties (en context) in de website. Dit maakt een website gebruikersvriendelijk, intuïtief en innovatief. De nadruk ligt daarin nooit op opvallende animaties die schreeuwen om aandacht, maar juist op functionele, subtiele animaties.

Animaties in UX-design

Voorbeelden UX-animaties

Animaties zijn op te delen in drie verschillende categorieen: 

  • Focus en oriëntatie-elementen
    Op de pagina Vrijwilligersonline.nl verschijnt niet alle tekst in een keer, maar stuk-voor-stuk tijdens het scrollen. Dat houdt de aandacht van de lezer gefocust op het te lezen deel. Het begeleidt daardoor de bezoeker door het verhaal.
  • Locatie en relatie-elementen
    Een bezoeker begrijpt de relatie tussen verschillende elementen in een online omgeving. Bijvoorbeeld wanneer je op een icoontje klikt, verschijnt niet plots een pop-up, maar zie je dat deze animeert vanuit het icoontje. Of een knop voor een formulier, die na de klik transformeert in het formulier (voorbeeld)
  • Trigger en feedback
    Naast de bekende hover-effecten, zie je bijvoorbeeld ook vaker dat iconen en knoppen animeren. Zoals een upload-knop die na de klik volloopt zodat de gebruiker de verstuurprogressie ziet. 

Uitdagingen animaties

Er zijn een paar uitdagingen waar ontwerpers en ontwikkelaars rekening mee moeten houden. Namelijk:  

  • Browservereisten: niet alle browsers ondersteunen animaties. Van te voren moet er geïnventariseerd worden welke animaties in welke browsers goed werken. 
  • Animaties moeten responsive (en dus voor elk apparaat) ontworpen en ontwikkeld worden.

Met mate

Animaties kunnen dus een krachtige tool zijn ter verbetering van de gebruikerservaring. Zorg er alleen altijd voor dat het nuttig is voor je gebruiker. Niemand zit te wachten op overdadige effecten die alleen maar bijdragen aan langere laadtijden in plaats van het verbeteren van de gebruikerservaring.