Er kan van alles bewegen als je een website bezoekt. Je klikt, scrollt, ‘hovert’ met je muis, wacht op het laden van een scherm en ineens zie je allerlei interessante animaties voorbijkomen. Tot voor kort was dit ‘nice to have’ maar inmiddels worden websiteanimaties steeds meer toegepast en… steeds meer verwacht. Animatie en motion graphics op je website zijn dus een must geworden. Beweegt er niets op je site, dan bewegen je bezoekers ook niet. Ja, één keer: om je site te verlaten. Maak je site dus aantrekkelijk én functioneel met goedgekozen webanimaties.
Op vele plekken op je website kun je de bezoeker prikkelen, informeren, bezighouden en zijn ogen uit laten kijken. In het geval van laadschermen kan het zelfs bittere noodzaak zijn. Te lang moeten wachten zonder dat er iets gebeurt is voor veel bezoekers een goede reden om te vertrekken. Maar er zijn nog veel andere plekken en momenten waarbij animaties een goed idee kunnen zijn. Op zijn minst verrijken ze de ervaring van de bezoeker, versterken ze je huisstijl en zullen bezoekers geneigd zijn langer op jouw website te verblijven.
Met deze 8 typen website animaties kun je bezoekers op je site houden:
Een animatiesoort die steeds vaker op websites wordt toegepast is kinetische typografie. Dit betekent feitelijk ‘bewegende tekst’. Kinetische typografie is een vorm van motion graphics en wordt ook wel tekstanimatie of geanimeerde typografie genoemd.
Een voordeel van kinetische typografie is dat deze animatie tegelijkertijd een tekstueel/inhoudelijk als een grafisch element is. Je kunt er de aandacht mee trekken én een verhaal vertellen.
Dit verhaal hoeft vervolgens niet eens letterlijk in de woorden terug te komen, maar kan ook door de beweging, kleuren en het formaat van de letters gecommuniceerd worden.
Door letters en woorden een specifieke richting in te laten bewegen, kan de aandacht van de websitebezoeker ook deze richting op gaan. Zo wordt kinetische typografie een heel effectief middel om de bezoeker zijn weg te laten vinden op de site; een soort navigatietool dus.
Tenslotte kun je met kinetische typografie goed je huisstijl en merkidentiteit uitstralen. En wil je een unieke sfeer creëren, dan zijn hier met kinetische typografie enorm veel mogelijkheden toe.
Met de vele beschikbare – en maakbare – lettertypen en uiteenlopende animaties en bewegingen om uit te kiezen, kun je je website zo uniek maken als je wilt. En: hoe complex of eenvoudig de animatie ook is, je trekt er hoe dan ook de aandacht mee.
Hoe snel sommige verbindingen en websites vaak ook zijn, bezoekers kunnen nog steeds te maken krijgen met laadtijden tussen pagina’s of pagina-segmenten, zeker als er grafisch intensieve onderdelen geladen moeten worden.
Daarbij is het belangrijk om de bezoeker visueel te blijven prikkelen. Als hij alleen een leeg of statisch scherm voor zijn neus krijgt, kan hij ongeduldig worden en wegklikken of je site verlaten. Let wel op dat je de animatie niet al te druk maakt. Vergelijk het met wacht- of liftmuziek; deze moet ook ontspannend zijn en niet op de zenuwen werken.
Een animatie wanneer de bezoeker ‘hovert’ over een tekst of (ander) grafisch element op je site kan heel functioneel zijn. Door bijvoorbeeld een plaatje op te laten lichten, of kort te laten veranderen in iets anders kun je heel snel en subtiel laten zien dat het een interactief element is. Zo snapt de bezoeker dat hij erop kan klikken, om bijvoorbeeld een tekst te laten verschijnen of een bestand te downloaden.
Een klassiekertje. Wil je je bezoeker een moeiteloze overview geven van je producten of projecten? Laat dan je beste werk automatisch voorbijkomen op je website. De overgangen en manier waarop de afbeeldingen in beeld verschijnen kun je zo creatief maken als je zelf wilt, maar hier is de boodschap ook weer dat het vooral functioneel moet zijn. Natuurlijk mag het er aantrekkelijk uitzien – graag zelfs! – maar de bezoeker moet vooral een goed beeld krijgen van je aanbod. Hierbij is bijvoorbeeld ook de snelheid van de overgangen belangrijk. Deze moet precies goed zijn.
Met de juiste insteek is de galerij of slideshow een simpele en waardevolle toevoeging op je website.
(bron: samsung.com)
Animaties tijdens het scrollen kunnen een hele attractie zijn en verschillende functies vervullen. Ze kunnen verrassen, indruk maken, informatie overbrengen en simpelweg voor een krachtige merkbeleving zorgen.
Bovendien leg je de controle bij de bezoeker, wat ook verschillende voordelen heeft. Zo zal de bezoeker minder snel verveeld raken omdat hij tot actie wordt aangezet op de pagina. En… wanneer een bezoeker eenmaal een actieve houding heeft ingenomen, zal hij eerder andere acties ondernemen, zoals het het doen van een bestelling.
Scrolling-animaties kunnen dus heel veel betekenen voor je site. Zorg er alleen wel voor dat een scrolling-animatie van hoge kwaliteit is. Als er bijvoorbeeld teveel haperingen optreden, is de beleving weg voor de bezoeker wat juist averechts kan werken voor je conversie en gespendeerde tijd op de pagina.
Je kunt ook volledige achtergronden of pagina’s animeren. Hiermee wordt de bezoeker helemaal ondergedompeld in jouw sfeer en kan een ‘simpel’ websitebezoek een complete merkbeleving worden.
Al dan niet gecombineerd met een scrolling-animatie – waarbij de getoonde animatie afhankelijk is van je plek op de pagina – geef je de bezoeker hiermee voortdurend iets interessants om naar te kijken en kun je je merkidentiteit effectief overbrengen.
Animatie op je website kan vele vormen aannemen. Je kunt kiezen voor kleine, subtiele bewegende elementen – zoals je eigen logo – maar je kunt natuurlijk ook complete verhalen vertellen met animatie. Het hoeft dan niet te gaan om animatievideo’s van verschillende minuten lang. In 10 tot 30 seconden kun je al heel wat verduidelijken voor je bezoeker.
Laat in een kort en krachtige animatievideo zien wat je doet. Laat zien wat de mogelijkheden van je product zijn, hoe je product gebruikt moet worden, hoe het proces voor de bezoeker verloopt als hij van je diensten gebruikt maakt… alles wat het beeld van jouw bedrijf of merk kan verbeteren kan verwerkt worden in een verhalende animatievideo.
Nog een voorbeeld van een functionele animatie is animatie om menu’s, opties of navigatiemogelijkheden in beeld te brengen. Denk dan aan dropdowns of ‘ínschuifmenu’s’ zoals het veelgebruikte hamburgermenu met drie horizontale streepjes. Hierbij kun je ervoor zorgen dat de menu’s soepel, elegant en aantrekkelijk in beeld verschijnen. Maar je kunt ook de knoppen lichtelijk laten bewegen of highlighten om de plek van verborgen menu’s duidelijk te maken. Zo kan een hamburgermenu ruimte besparen, maar is – vooral op desktop – een potentieel nadeel dat bezoekers vrij laat de navigatiemogelijkheden zien.
Zorg er daarom altijd voor – bij elke vorm van animatie – dat de uitstraling niet ten koste gaat van de functionaliteit en gebruiksvriendelijkheid.
