Tech 5170 x bekeken

Animatie voor een betere gebruikservaring

11 mei 2016 - Fokkejan Meijer

Animatie zonder irritatie. Het lijkt onmogelijk, maar er zijn echt hele leuke trucjes te bedenken met behulp van CSS3.

Wat is animatie?
Animatie is de suggestie van een beweging door het achter elkaar afspelen van losse beelden. De techniek van geanimeerde beelden bestaat al meer dan 100 jaar. Een bekend voorbeeld is het beeld van ‘the horse in motion’ uit 1878.


266px-Muybridge_race_horse_animated

Beweging op het web

Het gebruik van bewegende beelden zal bij veel mensen algauw een irritatie oproepen, omdat er te vaak en te veel gebruik wordt gemaakt van reclamebanners in flash of gif. Dit heeft namelijk veelal een tegenovergesteld effect, het zogeheten banner blindness. De bewegende beelden waar ik in dit artikel op doel, zijn niet de schreeuwerige flashy banners of reclameblokken. 

In dit artikel wil ik dieper ingaan op subtiele animaties die door de juiste toepassing kunnen bijdragen aan de gebruiksvriendelijkheid en de focus van je website.  
Het eerste devies is dan ook: gebruik bewegende elementen met mate! Overkill leidt juist af en zorgt voor verstrooiing van de aandacht op de je site. Subtiliteit is key.

Toepassing op websites
De komst van moderne browsers biedt steeds meer mogelijkheden voor het gebruik van nieuwe technieken. CSS3 bestaat inmiddels al enkele jaren, maar wordt tegenwoordig steeds breder ondersteund. Een feature van CSS3 is het gebruik van animaties.
CSS animaties maken het mogelijk om onderdelen van je website, zoals een button of een stuk tekst, te laten bewegen. Dat wil zeggen dat je hier een visueel effect van beweging, zoals infaden, pulseren of knipperen op kan toepassen. Een aantal handige voorbeelden in CSS.

Door te zorgen voor de juiste timing van je animatie, kun je zorgen voor een subtiele beweging van bepaalde elementen van je site. Hiermee kan je zorgen voor extra focus op bijvoorbeeld je call-to-action, doordat de knop pas een seconde later in beeld verschijnt dan de rest van de content. Of zelfs pas op het moment dat de bezoeker naar de juiste positie van de pagina is gescrolled.  

Een andere toepassing van CSS animaties is het geven van feedback aan je bezoeker. Denk hierbij aan het animeren van een loading icoontje tijdens het wachten, het tonen van voortgang bij versturen van informatie of het inzichtelijk maken waar de bezoeker heeft geklikt.

Door gebruik te maken van CSS animaties, zorg je ervoor dat de overgangen soepeler gaan en maak je interacties op je site inzichtelijker, doordat het voor de gebruiker visueel duidelijk is hoe hij van A naar B is gekomen en maak je de achterliggende actie nét iets laagdrempeliger om uit te voeren. Bovendien krijgt je site een vloeiende, vriendelijkere uitstraling doordat overgangen minder abrupt gaan; het zijn de kleine dingen die het verschil maken.

Tot slot

Op de website van Can I Use staat overzichtelijk aangeven welke browsers ondersteuning bieden voor deze nieuwe technieken. CSS Animaties worden door bijna 90% van de meest voorkomende browser (versies) ondersteund.
Als een website is opgebouwd volgens progressive enhancement, dan zal je website in alle gevallen goed performen én – indien ondersteund – verrijking zoals animaties goed tonen.
 

Fokkejan Meijer

Als lid van het Front-end team ben ik verantwoordelijk voor de optimale prestatie van online applicaties. Hierbij kun je denken aan een snelle laadtijd, intuïtieve gebruikerservaring, goede toegankelijkheid en makkelijke onderhoudbaarheid. 
Bij Estate werken we in scrumteams intensief samen met klanten en krijg ik als teamlid veel verantwoordelijkheid over de uitvoering van mijn projecten en het faciliteren van klanten. 

Reacties ()