De complete webanimatieontwerphandleiding

Geloof het of niet, je hebt niet veel tijd om je sitebezoekers te overtuigen om bij hen in de buurt te blijven. Uw venster is eigenlijk veel korter dan u aanneemt.

In essentie is het precies nodig 0.05 seconden nadat uw pagina is geladen voor bezoekers om een ​​mening te vormen. Meer specifiek vertaalt dit zich naar 50 milliseconden. Verrassend kort, toch?

Ok, sommigen van hen zullen vertrekken. Maar anderen kunnen ervoor kiezen om te blijven.

Dan komt de vertoningsfase, die eigenlijk duurt maar 10 seconden. Als uw site geen solide kan beheren, verliest u het grootste deel van uw verkeer voordat ze zelfs beginnen aan het conversieproces. Ze gaan gewoon door om de knoppen achteraan of dicht te klikken.

En als je enige hoop had ze terug te krijgen, hier is de harde waarheid. 88% van hen zullen waarschijnlijk niet terugkeren naar een website na een slechte ervaring.

Maar wacht even. Wiens taak is het om webverkeer te behouden zodra ze op de site terechtkomen?

Ok, het is natuurlijk natuurlijk om de content manager van de site de schuld te geven. En misschien heb je gelijk. Maar slechts ten dele.

Het blijkt dat het allemaal begint bij de webdesigner. In feite heeft een onderzoek dat uitgebreid onderzoek deed naar een breed scala aan feedback van consumenten dat vastgesteld 94% van de negatieve waren design gerelateerd.

Wat houdt dit precies in?

Om te beginnen, er is hier geen ontkomen aan. De hoofdverantwoordelijkheid ligt bij jou. Naast het implementeren van alle ontwerpbest practices die we in onze eerdere werken hebben behandeld, moet je een PR-hoed dragen en elementen overwegen die effectief aansluiten op het verkeer.

Ik heb het over dingen zoals webanimaties.

En waarom suggereren we dat specifiek?

Wel, dat is iets dat ik binnenkort ga onthullen. Deze gids leidt u door alle kritische aspecten van webanimaties. Maar laten we eerst de basis verkennen ...

De basis van webanimaties

Stel je favoriete stripfiguur voor die over het scherm slentert. Of misschien steekt het logo van uw telefoon over het scherm wanneer u het apparaat herstart. Wat hebben zij gemeen met elkaar?

Nou, het zijn beide basale voorbeelden van animaties.

Animatie vindt hoofdzakelijk plaats wanneer een stilstaand element "tot leven wordt gebracht". Vervolgens begint het een vorm van beweging te vertonen.

We weten niet precies wanneer deze oefening begon. Maar we hebben wel een idee dat het eerste animatiefilm in de geschiedenis werd meer dan een eeuw geleden gemaakt. De trend heeft zich sindsdien behoorlijk ontwikkeld, dankzij de voortschrijdende vooruitgang in technologie.

Eén ding is echter constant gebleven - de principes van animatie. In feite hebben Disney's Ollie Johnston en Frank Thomas later over hen in hun boek geschreven, "The Illusion of Life: Disney Animation". Hier is de volledige lijst:

  • Hoger beroep
  • Stevige tekening
  • Overdrijving
  • timing
  • Secundaire actie
  • Boog
  • Traag in en vertragen
  • Volg door en overlappende actie
  • Recht vooruit actie en poseren om te poseren
  • Regie
  • Verwachting
  • Squash en stretch

De twaalf vormen nog steeds het kader voor het ontwerpen van animaties van vandaag, waaronder video's, WebGL, SVG, CSS en GIF.

Webanimaties kunnen nu net zo eenvoudig zijn als een highlight die wordt weergegeven wanneer u met de muis over een letter beweegt, naar een complexe reeks van meerdere video's in meerdere lagen. Met andere woorden, je kunt een subtiele aanpak kiezen, of ervoor kiezen om alles uit te voeren met dominante animaties die schreeuwen om aandacht. Het hangt allemaal af van de situatie.

En dat roept de vraag op - wanneer moet je zelfs animaties gebruiken?

Wanneer moet u webanimaties gebruiken?

Natuurlijk zijn ze schattig. En het zijn zeker interessante toevoegingen aan de lay-out van uw site.

Maar weet je wat? Hun daaropvolgende werkzaamheidsniveaus zijn totaal verschillend. Het spreekt voor zich dat animaties niet geschikt zijn voor alle website-projecten. En nog belangrijker, het zou een slecht idee zijn om ze lukraak te adopteren.

Het gebeurt zo maar 46% van online consumenten oordelen over de geloofwaardigheid van een site op basis van de algehele visuele aantrekkingskracht en esthetiek. Je kunt het je gewoon niet veroorloven om dat uit te voeren met een slecht ontworpen animatiekader. Tegelijkertijd zou het jammer zijn om blijvend gouden conversiemogelijkheden mis te lopen door niet te profiteren van animaties.

Dus, wanneer moet je ze benutten?

Wel, hier is het ding. Webanimaties zijn vooral ideaal wanneer u de bruikbaarheid moet vergroten door misschien de aandacht te trekken of gebruikers te helpen bij het navigatieproces.

Hoe?

Over het algemeen duurt het 2.6 seconden om de ogen van een bezoeker te laten landen op de website sectie die voornamelijk hun eerste indruk beïnvloedt. Vakkundig gebruik van een animatie kan echter versnellen door onmiddellijk hun aandacht te vestigen op de meest kritieke delen van de site.

Animaties zijn ook handig als u gebruikers door de conversietrechter wilt leiden. Een pop-up met een geanimeerde vorm zou bijvoorbeeld een doordachte strategie zijn voor het samenstellen van mailinglijsten. Als het gaat om het koopproces, kunt u overwegen video's te embedden. Ze hebben bewezen te overtuigen 73% van de kopers om door te gaan en een product of dienst te kopen.

Ten slotte kunt u webanimaties puur voor esthetische doeleinden gebruiken. Een decoratieve animatie die vloeiend en naadloos is, kan de algehele visuele aantrekkingskracht behoorlijk aanzienlijk verbeteren en vervolgens een emotionele verbinding tot stand brengen tussen gebruikers en de interface. En dat is hoe u geleidelijk de niveaus van gebruikersbetrokkenheid kunt verhogen.

Webanimatietools

Klaar om te beginnen met het maken van webanimaties? Perfect! Maar waar zou u moeten beginnen?

Nou, hoe zit het met het zoeken naar een robuuste tool om je ideeën om te zetten in echte animaties? Gelukkig is er een breed scala aan nette opties op het web, die goed zijn geoptimaliseerd voor verschillende gebruikers en verschillende soorten animaties. Wat u kiest voor uw projecten hangt af van uw vaardigheden, primaire doelstellingen, budget en het type site waaraan u werkt.

Dat gezegd hebbende, hier zijn enkele prominente voorbeelden, elk met zijn eigen unieke use-case:

  • js
  • 3D Lijnen-animatie met Three.js
  • js
  • Flubber
  • Kleur animatie
  • jqClouds
  • Scrollissimo
  • Cel-animatie
  • js
  • js
  • CSS3 Animatie
  • Transform-when
  • js
  • Rellax
  • OM
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • ramjet
  • pardoes
  • mixitup
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Saffron
  • CSShake
  • css
  • js
  • Raket
  • doorvoer
  • css
  • js
  • Popmotion
  • GSAP door GreenSock
  • js
  • js
  • CSS Animate
  • Het is dinsdag
  • Onbetrouwbaar
  • js
  • js
  • js
  • js
  • js
  • Wacht! bezielen
  • Motion UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • anijs
  • js
  • Magische animaties
  • css

Webanimaties ontwerpen

Hover Effecten

Bewegende animaties zijn ongetwijfeld enkele van de eenvoudigste op internet. Ze komen tot leven en markeren geselecteerde elementen wanneer de aanwijzer eroverheen beweegt. De animatie zelf kan in verschillende vormen voorkomen, zoals verschuiven in grootte of veranderen van kleur.

De truc hier is om de effecten spaarzaam toe te passen. Anders riskeer je veel te veel elementen te markeren, waardoor gebruikers later in de war kunnen raken.

Het is ook raadzaam om een ​​vorm van consistentie te handhaven met de methodologie op de hele site. Als uw startknoppen van groen naar rood veranderen, gebruikt u hetzelfde kader voor extra markeringen op andere webpagina's.

Achtergrondanimaties

Het insluiten van een achtergrondanimatie is een effectieve strategie om opwinding en vitaliteit aan uw webpagina toe te voegen zonder noodzakelijkerwijs de belangrijkste nadruk te verstoren. U kunt alles van video's gebruiken tot subtiele afbeeldingen die sequentieel worden verplaatst.

De beste aanpak hier is om dingen gestructureerd en eenvoudig te houden. Als u ervoor kiest om een ​​video te integreren, moet u deze overeenkomstig inkorten en een lus bijhouden die relevant is voor uw site. Zorg er vervolgens voor dat de bewegingen subtiel genoeg zijn om de aandacht te trekken zonder overweldigende gebruikers.

Animaties in GIF-stijl

Een GIF is het overwegen waard als je bijzonder geïnteresseerd bent in een animatie die uitzonderlijk eenvoudig is in te stellen. Een typische kan misschien iets zijn als het verplaatsen van tekst of een glimlachende clown die is ingebed in uw inhoudlay-out.

Het enige wat u hoeft te doen is een goed idee bedenken, een relevante video of afbeelding verkrijgen en deze vervolgens converteren naar een perfecte GIF met behulp van geschikte bewerkingssoftware. Het uploaden van de resulterende creatie in GIF-formaat genereert een video-achtige animatie die zo snel laadt als een kleine afbeelding.

Overgangsanimaties

Overgangsanimaties worden gebruikt om kracht bij te brengen wanneer gebruikers van de ene sectie van de site naar de andere gaan. Ze lijken op diavoorstellingsanimaties die verschijnen als u van de ene dia naar de volgende gaat.

Zorg voor een perfect resultaat dat de animaties soepel en consistent zijn op de hele site. Ze moeten ook kort genoeg zijn om het feitelijke overgangsproces niet te vertragen.

Animaties laden

Feit is- 47% van online consumenten verwacht dat uw webpagina's minstens 2 seconden zullen laden. Als dit niet lukt, vertaalt elke extra seconde zich in 7% minder conversies.

Gaan bij de huidige gemiddelde laadtijd van 22 seconden, het is vrij duidelijk dat het voldoen aan de 2-seconde verwachting tamelijk moeilijk is. Maar u kunt een aanzienlijk deel van het verkeer redden door hen bezig te houden met animaties terwijl andere site-elementen blijven laden.

Richt u op het maken van eenvoudige degenen die licht genoeg zijn om bijna onmiddellijk te laden, het verkeer wordt doorgestuurd naar uw site. Ze moeten zo worden ontworpen dat ze systematisch bezoekers van het merk en het algemene websitethema introduceren.

Door scrollen getriggerde animaties

Oogvolgstudies hebben vastgesteld dat websitebruikers ongeveer spenderen 57% van hun tijd boven de vouw. Maar het blijkt dat velen van hen bereid zijn om naar beneden te scrollen - zolang je maar een gunstige ontwerpstructuur en -mechanisme biedt.

En dat is precies waar scroll-getriggerde animaties binnenkomen. Ze komen onmiddellijk in actie en gebruikers beginnen te scrollen om de illusie te creëren van een soepele, eindeloze pagina. Het is een doordachte manier om overgangen te elimineren die anders het scrollen zouden ontmoedigen.

Navigatie en menu-animaties

Laten we eerlijk zijn. Menu-opties nemen een aanzienlijke hoeveelheid schermruimte in beslag, met name op holistisch dynamische sites met meerdere niveaus van selecties. Gelukkig kun je gebruik maken van animaties om de opties te verbergen en ze vervolgens alleen te onthullen wanneer een gebruiker klikt op of zweeft over de bijbehorende knoppen.

Dit type animatie stroomlijnt en vereenvoudigt ook het navigatieproces door de volledige structuur in visueel verbonden menuopties te comprimeren. Het raamwerk moet worden ontworpen met submenu-segmenten die systematisch verschijnen wanneer een gebruiker op de overlappende menu-opties klikt of erop wijst.

Galerij en diavoorstellingen

Misschien niet verrassend, de gemiddelde aandachtsspanne van mensen is 8 seconden - althans volgens een recente studie uitgevoerd door Microsoft. Zelfs een goudvis kan langer oplettend blijven dan een typisch individu. Daarom kunt u er zeker van zijn dat de meeste bezoekers van uw site niet persistent genoeg zijn om door al uw galerijitems te bladeren.

Maar Raad eens? U kunt handig gebruikmaken van galerij- en diavoorstellingsanimaties om automatisch talloze afbeeldingen weer te geven, zonder dat u gebruikers dwingt er doorheen te navigeren.

Het belangrijkste hier is de weergavetijd van de afbeelding. Korte schermen met snelle overgangen zouden snel overkomen, terwijl lange schermen met langzame overgangen saai en traag zouden blijken te zijn. Met dat in gedachten, ontwerp de algemene lay-out om elke afbeelding ongeveer 5 tot 8 seconden te laten zien, alvorens snel over te gaan naar de volgende.

Conclusie

Al met al moet u animaties analyseren op basis van de mate waarin zij vervolgens de gebruikerservaring verbeteren. Een geweldige moet ofwel een emotionele verbinding van gebruikers activeren of het navigatieproces vereenvoudigen. Een perfecte moet daarentegen in staat zijn beide tegelijk comfortabel te bereiken.

Neem daarvoor de tijd om alle relevante parameters kritisch te beoordelen terwijl u animaties ontwerpt en insluit op uw site. En onthoud - houd het simpel, licht en goed afgestemd op uw merk.

header afbeelding met dank aan Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.