Aandacht voor detail
Door Martijn de Ruijter

Aandacht voor detail

Websites worden alsmaar dynamischer. Je krijgt op subtiele manieren feedback, je aandacht wordt getriggerd door een kleine animatie en alles in de website is zo vanzelfsprekend. Maar is dit wel zo vanzelfsprekend?

Als webdesigner is het belangrijk dat je ervoor zorgt dat de gebruiker op een duidelijke en gebruiksvriendelijke manier door je applicatie of website geloodst wordt (user experience). Met gebruik van micro-interacties en -animaties kunnen we deze ervaring vergroten. Aan de hand van deze blog laat ik je zien wat het is en wat je ermee kan.

Wat zijn micro-interacties en -animaties

Micro-interacties zijn subtiele bewegingen in een website die de gebruiker triggeren om over te gaan tot actie. Deze kleine, eenvoudige animaties kunnen een gebruiker verrassen en vermaken. Of het nu gaat om een hover-status of een illustratie die tot leven komt, ze helpen informatie te verstrekken en de gebruiker op een intuïtieve en effectieve manier door een website te loodsen.

Micro-interacties en -animaties kom je overal tegen

Meestal zijn ze zo subtiel dat je het niet eens doorhebt dat er een interactie plaatsvindt. Wanneer je een simpele actie voorziet van feedback, zoals het klikken van button waar vervolgens een vinkje verschijnt, geeft dit de gebruiker het gevoel dat het goed werkt. En met onderstaand voorbeeld accentueert de groene kleur dat nog eens extra.


Het volgende voorbeeld heeft iedereen wel eens ervaren. De statische iconen van Facebook zijn enige tijd geleden tot leven gekomen. Voorheen had je alleen nog het ‘Like’ icoontje, tegenwoordig zijn daar nog vijf iconen bijgekomen en ieder met hun eigen animatie.


Via deze link kom je op een website waar je een aantal voorbeelden krijgt te zien van hoe je micro-animaties op verschillende manieren kan toepassen.

Tips & tricks

Micro-interacties en -animaties zijn dus super gaaf om toe te passen. Ze helpen de gebruiker bij het maken van de juiste keuzes en ze fleuren het design van de website op, maar houd het gebruik ervan subtiel en daarom deze tips.

  • Houd het bij één type animatie. Alleen zo versterk je de gebruiksvriendelijkheid. Wanneer je een applicatie of website helemaal vol propt met verschillende micro-interacties zal de gebruiker alleen maar afgeleid worden van de boodschap en dus niet over gaan tot actie.
  • Zorg ervoor dat je micro-interacties de functionaliteit niet vertragen. Dus ook hier geldt, prop niet de alles vol, want niks is zo vervelend als een trage applicatie of website.
  • Houd bij het maken van micro-interacties rekening met de huisstijl van je applicatie of website. Je interacties en animaties kunnen nog zo mooi zijn, maar als ze niet in dezelfde stijl gemaakt zijn wordt het een chaotische en drukke boel.

Conclusie

Gebruik micro-interacties als een toevoeging op je design en zorg ervoor dat ze de pagina niet overbelasten. Het moet de gebruiker triggeren om over te gaan tot bepaalde acties en het moet overeenkomen met het algehele design van de applicatie of website.


The details are not details. They make the design
- Charles Eames -

Typografie op je website. De do’s & don’ts

Bekijk bericht

De kostprijs van JavaScript

Bekijk bericht