Animaties op een bedrijfswebsite helpen als ze iets duidelijk maken: een knop die reageert op je muis, een menu dat rustig openschuift, een foto die zacht verschijnt als je hem in beeld scrolt. Ze werken tegen zodra de bezoeker moet wachten, moet raden of moet zoeken waar de tekst gebleven is. Vuistregel: beweging die de site sneller laat voelen is goed, beweging die je moet uitzitten is dat niet.
Waarom beweging soms wél werkt
Een website is stil papier, tot je hem aanraakt. Kleine bewegingen vertellen de bezoeker wat er gebeurt. Een knop die iets donkerder wordt als je erover gaat, zegt: hier kun je klikken. Een menu dat in een halve tel openvouwt in plaats van keihard omklapt, is makkelijker te volgen. Een bevestiging die zachtjes verschijnt nadat iemand het contactformulier heeft verstuurd, geeft rust: het is gelukt.
Dat soort animatie is functioneel. De bezoeker merkt hem nauwelijks op, en dat is precies de bedoeling. Je zou hem pas missen als hij weg was.
De test die je zelf kunt doen
Vraag je bij elke bewegende zaak op je site af: maakt dit iets duidelijk, of is het versiering? Maakt het iets duidelijk, houden. Is het versiering, dan is de vraag of het bij je bedrijf past. Bij een ontwerpbureau of een fotograaf mag een site wat meer sfeer hebben. Bij een loodgieter, een installateur of een praktijk wil de bezoeker vooral snel weten wat je doet en hoe hij je bereikt.
Waar het meestal misgaat
De klassieker is de tekst die pas verschijnt als je hem in beeld scrolt. Op de laptop van de bouwer ziet dat er elegant uit. Op een telefoon met haperend 4G scrolt de bezoeker langs een lege witte lap en denkt: de pagina is stuk. Hij is dan al weg voordat je zin is ingeladen.
Twee andere veelvoorkomende problemen:
De draaiende fotoslider bovenaan. Drie of vier foto's die vanzelf doorschuiven. Bezoekers lezen de eerste boodschap half, waarna de volgende erin schuift. Wat je kwijt wilde, is dan niemand bijgebleven. Eén goede foto met één duidelijke zin en één knop doet meer.
Alles tegelijk in beweging. Tellertjes die oplopen, iconen die pulseren, een achtergrondvideo, een balk die over het scherm kruipt. Als alles aandacht vraagt, krijgt niets aandacht, en je knop 'Offerte aanvragen' verdwijnt in het geweld.
Beweging die de bezoeker moet uitzitten, is geen ontwerp maar een wachtkamer.
Wat het kost aan snelheid en toegankelijkheid
Zware animaties kosten laadtijd en rekenkracht. Op een nieuwe telefoon merk je het niet, op een toestel van vier jaar oud gaat het schokken. Google kijkt bovendien naar hoe stabiel en hoe snel een pagina in beeld komt. Elementen die verschuiven terwijl iemand al aan het lezen is, tellen daarin negatief mee.
Er is ook een groep bezoekers voor wie veel beweging vervelend of zelfs misselijkmakend is. Zij kunnen in hun telefoon of computer aangeven dat ze minder beweging willen zien. Een goed gebouwde site luistert daarnaar en zet de animaties dan uit of houdt ze minimaal. Dat is een instelling die je bouwer regelt, niet iets waar jij aan hoeft te denken. Vraag er wel naar.
Een werkbare grens
Houd het bij beweging die kort is, die één keer gebeurt en die nooit de inhoud verbergt. Tekst en knoppen staan er gewoon, ook als de animatie niet zou werken. Automatisch startende video met geluid: nooit doen.
Samengevat
- Beweging die iets duidelijk maakt (knoppen, menu's, bevestigingen) helpt.
- Tekst die pas bij het scrollen verschijnt, kost je bezoekers op een trage verbinding.
- Eén goede hero met één boodschap verslaat een draaiende fotoslider.
- Zware animaties kosten laadtijd en maken je pagina onrustig voor Google.
- Laat je site de instelling 'minder beweging' van de bezoeker respecteren.
Zo bekijk je je eigen site
Pak je telefoon, geen laptop. Zet wifi even uit. Open je homepage en tel hoe lang het duurt voordat je de eerste zin kunt lezen en de belangrijkste knop kunt aanraken. Scroll daarna rustig naar beneden en let op wat er springt, verschuift of pas laat verschijnt.
Stoort iets jou in dertig tellen, dan stoort het je klant ook. Zet die punten op een lijstje en leg ze voor aan degene die je site beheert. Bij joepa zijn sites bewust rustig gebouwd: beweging waar het helpt, stilstaand waar het moet, zodat de pagina snel blijft en zowel bezoekers als zoekmachines er gewoon doorheen komen.