Hoe webanimaties de user experience verhogen!

Hoe webanimaties de user experience verhogen!

Sinds de komst van CSS3 wint het gebruik van animaties op het web steeds meer aan populariteit. Iedereen wil wat extra toeters en bellen op zijn website. Vaak worden deze animaties eerder als vervelend ervaren, of beletten ze de gebruiker bij het uitvoeren van zijn core tasks. Onze hersenen zijn geprogrammeerd om te focussen op bewegingen. Goochelaars gebruiken ze om je af te leiden, autodealers trekken je aandacht met grote opblaasbare poppen, … Ook op je website kan je dit in je voordeel gebruiken, door gebruik te maken van enkele simpele technieken.

  1. Creëer een mentaal model 
    Geef met animatie aan waar iets vandaan komt, en waar het naartoe gaat. In volgend voorbeeld maakt het hoofdmenu gedeeltelijk plaats voor het submenu. De gebruiker weet dat het hoofdmenu niet weg is, en dat het submenu erachter schuilt. 



    Google+ maakt van een 3D animatie gebruik om aan te geven dat er extra informatie ligt achter de posts.


     
  2. Begeleid taken
    Begeleid de gebruiker bij het uitvoeren van taken door aan te geven of de actie van de gebruiker gelukt is, en wat er precies gebeurd is. Onderstaand voorbeeld gebruikt animaties om items toe te voegen aan een lijst en ze eruit te verwijderen.


     
  3. Leg verbanden
    Toon aan dat het één bij het ander hoort. In volgend voorbeeld neemt de afbeelding uit het overzicht de plaats in van de afbeelding in het detailvenster. De animatie toont duidelijk aan dat het om hetzelfde item gaat.


     
  4. Demonstreer
    Mailchimp gebruikt op zijn homepagina een korte animatie van enkele seconden, om de gebruiker te tonen hoe simpel hij een nieuwsbrief kan samenstellen. (www.mailchimp.com). Hammer for Mac maakt handig gebruik van animaties om de gebruiker een demo te geven van hun software. De typische Mac animaties geven een getrouw gevoel en tonen de software al in zijn getrouwe omgeving. (http://hammerformac.com)
     
  5. Creëer geen obstakels
    ​Een voorbeeld van hoe het niet moet, vind je op https://squareup.com. De animaties bij het openklappen van het menu maken geen gebruik van bovenstaande principes en vormen een obstakel om snel door de website te navigeren.

Animaties op je website zijn dus zeker een aanrader, zolang ze er zijn met een doel. 
Onthoud het verhaal dat je brengt op je website, en zorg ervoor dat je animaties passen in het plaatje.

 

Deel dit bericht nu