En omfattende guide til webanimasjonsdesign i 2023

Tro det eller ei, du har ikke mye tid til å overbevise besøkende om å bo. Vinduet ditt er faktisk mye kortere enn du antar.

I hovedsak tar det bare 0.05 sekunder etter at siden din er lastet inn for besøkende å danne seg en mening. Mer spesifikt, det betyr 50 millisekunder. Overraskende kort, ikke sant?

Ok, noen av dem vil forlate. Men andre velger kanskje å bli.

Så kommer inntrykkstadiet, som i utgangspunktet varer bare 10 sekunder. Hvis nettstedet ditt ikke kan administrere et solid nettsted, mister du mesteparten av trafikken din før de til og med starter på konverteringsprosessen. De bare for å fortsette å trykke på baksiden eller lukke knappene.

Og hvis du hadde noen forhåpninger om å gjenopprette dem, her er den harde sannheten. 88% av dem vil sannsynligvis ikke komme tilbake til et nettsted etter en dårlig opplevelse.

Men hold et øyeblikk. Hvem jobb er det å beholde nettrafikken når de har kommet på siden?

OK, selvfølgelig er det bare naturlig å skylde på nettstedets innholdssjef. Og du har kanskje rett. Men bare delvis.

Det viser seg at det hele starter med webdesigneren. Faktisk, en studie som omfattende kartla et bredt spekter av tilbakemeldinger fra forbrukerne, slo fast at 94% av de negative var design relatert.

Hva betyr dette?

For det første er det ikke noe som slipper unna dette. Hovedansvaret ligger hos deg. I tillegg til å implementere all den beste designpraksisen vi har dekket i våre tidligere brikker, må du bruke en PR-hatt og vurdere elementer som effektivt kobler til trafikken.

Jeg snakker om ting som nettanimasjoner.

Og hvorfor foreslår vi det spesifikt?

Det er noe jeg kommer til å avsløre om kort tid. Denne guiden vil lede deg gjennom alle de kritiske aspektene ved webanimasjoner. Men først, la oss utforske det grunnleggende ...

Grunnleggende om nettanimasjoner

Se for deg din favoritt tegneseriefigur som rusler over skjermen. Eller kanskje telefonens logo danser rundt på skjermen når du starter enheten på nytt. Hva har de til felles?

Vel, de er begge grunnleggende eksempler på animasjoner.

Animasjon skjer hovedsakelig når et stille element blir "brakt til liv". Den begynner deretter å vise en form for bevegelse.

Vi vet ikke nøyaktig når denne praksisen begynte. Men vi har en ide om at første animasjonsfilm i historien ble laget for over et århundre siden. Trenden har utviklet seg ganske omfattende siden den gang, takket være progressive fremskritt innen teknologi.

En ting har imidlertid forblitt konstant - prinsippene for animasjon. Faktisk skrev Disneys Ollie Johnston og Frank Thomas senere om dem i sin bok, "Illusjonen av livet: Disney-animasjon". Her er den komplette listen:

• Attraktivitet
• Solid tegning
• overdrivelse
• timing
• Sekundær handling
• Arc
• Sakte inn og sakte ut
• Følg gjennom og overlappende handling
• Rett foran handlingen og poser for å posere
• Iscenesettelse
• Forventning
• Squash og strekk

De tolv gir fortsatt rammene for design av animasjoner i dag, inkludert de som er publisert på nettet som videoer, WebGL, SVG, CSS og GIF.

Nå kan nettanimasjoner være så enkle som et høydepunkt som dukker opp når du svever over en bokstav, til en kompleks flerlags serie med fullskjermvideoer. Med andre ord kan du ta en subtil tilnærming, eller velge å gå ut med dominerende animasjoner som skriker etter oppmerksomhet. Det kommer an på situasjonen.

Og det stiller spørsmålet - når skal du til og med bruke animasjoner?

Når bør du bruke webanimasjoner?

De er selvfølgelig søte. Og de vil absolutt være interessante tillegg til nettstedets oppsett.

Men, vet du hva? Deres påfølgende effektivitetsnivåer er en helt annen ting. Så det sier seg selv at animasjoner ikke passer for alle nettstedsprosjekter. Og viktigst av alt er det en dårlig idé å adoptere dem tilfeldig.

Det skjer bare slik 46% av online forbrukere bedømme et nettsteds troverdighet ut fra dens generelle visuelle appell og estetikk. Du har rett og slett ikke råd til å omfatte det med et dårlig utformet animasjonsrammeverk. Samtidig vil det være uheldig å vedvarende gå glipp av gyldne konverteringsmuligheter ved å ikke utnytte animasjoner.

Så når skal du utnytte dem?

Vel, her er det. Nettanimasjoner er hovedsakelig ideelle når du trenger å øke brukervennligheten ved å kanskje trekke oppmerksomhet eller hjelpe brukere med navigasjonsprosessen.

Hvordan?

Generelt tar det 2.6 sekunder for at besøkendes øyne kan lande på nettstedsseksjonen som først og fremst påvirker deres førsteinntrykk. Dyktig bruk av en animasjon kan imidlertid øke hastigheten på ting ved å øyeblikkelig trekke oppmerksomheten til de mest kritiske områdene på nettstedet.

Animasjoner er også nyttige når du søker å dirigere brukere gjennom konverteringstrakten. En animert form dukker opp, for eksempel, ville være en gjennomtenkt strategi for å bygge postlister. Når det gjelder kjøpsprosessen, kan du vurdere å legge inn videoer. De har vist seg å overbevise 73% av kjøperne for å fortsette og kjøpe et produkt eller en tjeneste.

Endelig kan du bruke nettanimasjoner rent for estetiske formål. En dekorativ animasjon som er jevn og sømløs kan forbedre den generelle visuelle appellen ganske betydelig, og deretter etablere en emosjonell forbindelse mellom brukere og grensesnittet. Og det er slik du gradvis øker nivåene av brukerengasjement.

Nettanimasjonsverktøy

Klar til å begynne å lage webanimasjoner? Perfekt! Men, hvor skal du begynne?

Vel, hva med å søke et robust verktøy for å konvertere ideene dine til faktiske animasjoner? Heldigvis finnes det et bredt utvalg av pene alternativer på nettet, som er godt optimalisert for forskjellige brukere og forskjellige typer animasjoner. Hva du velger for prosjektene dine, avhenger av ferdighetene dine, de primære målene, budsjettet og typen nettsted du jobber med.

Når det er sagt, her er noen fremtredende eksempler, hver med sin egen unike brukstilfelle:

• js
• 3D Lines-animasjon med Three.js
• js
• Flubber
• Fargeanimasjon
• jqClouds
• Scrollissimo
• Cel-animasjon
• js
• js
• CSS3-animasjon
• Transform-da
• js
• Slapp av
• AOS
• js
• ScrollTrigger
• Scrollanim
• js
• js
• js
• js
• Reveholder
• Animatelo
• css
• Animista
• js
• CAAT
• AnimateMate
• js
• stylie
• GFX
• js
• js
• js
• jQuery DrawSVG
• ramjet
• pryle
• MixItUp
• css
• css
• js
• ceaser
• CSSynth
• Saffron
• CSShake
• css
• js
• Rocket
• Gjennomreise
• css
• js
• Popmotion
• GSAP av GreenSock
• js
• js
• CSS Animer
• Det er tirsdag
• Shifty
• js
• js
• js
• js
• js
• Vente! Animate
• Bevegelsesgrensesnitt
• js
• Lat linjemaler
• js
• js
• js
• AnijS
• js
• Magic Animasjoner
• css

Designe Web-animasjoner

hover Effekter

Hover-animasjoner er utvilsomt noe av det enkleste på nettet. De kommer til live og fremhever utvalgte elementer når pekeren beveger seg over dem. Selve animasjonen kan forekomme i forskjellige former - som å skifte i størrelse eller endre farge.

Trikset her er å ta i bruk effektene med måte. Annenwise, risikerer du å fremheve alt for mange elementer, som senere kan forvirre brukere.

Det anbefales også å opprettholde en form for konsekvent med metodikken på hele nettstedet. Hvis hjemmesideknappene dine for eksempel blir fra grønn til rød, bruk den samme rammen for flere høydepunkter på andre websider.

Bakgrunnsanimasjoner

Å legge inn en bakgrunnsanimasjon er en effektiv strategi for å legge spenningen og vitaliteten til websiden din uten nødvendigvis å forstyrre hovedvekten. Du kan bruke alt fra videoer til subtile bilder som skifter sekvensielt.

Den beste tilnærmingen her er å holde ting strukturerte og enkle. Hvis du velger å integrere en video, kan du forkorte den tilsvarende og vedlikeholde en sløyfe som er relevant for nettstedet ditt. Så sørg for at bevegelsene er subtile nok til å tiltrekke seg oppmerksomhet uten å overvelde brukere.

GIF-animasjoner

En GIF er verdt å vurdere om du er spesielt interessert i en animasjon som er usedvanlig enkel å sette opp. En typisk kan kanskje være noe som å skifte tekst eller en smilende klovn som er innebygd i innholdsoppsettet.

Alt du trenger å gjøre er å komme opp med en solid idé, skaffe en relevant video eller et bilde, og deretter konvertere det til en perfekt GIF ved hjelp av en passende redigeringsprogramvare. Laster opp den resulterende opprettelsen i GIF format genererer en videolignende animasjon som lastes inn like raskt som et lite bilde.

Overgangsanimasjoner

Overgangsanimasjoner brukes til å introdusere handlekraft når brukere flytter fra en del av nettstedet til en annen. De ligner på lysbildefremvisning animasjoner som vises når du går fra det ene lysbildet til det neste.

Bilde studiepoeng: Shutterstock

For et perfekt resultat, sørg for at animasjonene er jevne og konsistente på hele siden. De bør også være korte nok til ikke å utsette selve overgangsprosessen.

Laster inn animasjoner

Fakta er- 47% av online forbrukere forventer at nettsidene dine lastes inn i minst 2 sekunder. Hvis du ikke oppnår dette, blir hvert ekstra sekund til 7% færre konverteringer.

Går av nåværende gjennomsnittlig lastetid på 22 sekunder, er det ganske tydelig at det er ganske vanskelig å møte forventningen om 2 sekunder. Men du kan berge en betydelig del av trafikken ved å holde dem opptatt med animasjoner når andre sideelementer fortsetter å laste.

Fokuser på å lage enkle som er lette nok til å laste nesten øyeblikkelig trafikk blir omdirigert til nettstedet ditt. De skal utformes for å systematisk introdusere besøkende til merkevaren og det generelle nettstedstemaet.

Scroll-triggede animasjoner

Øyesporingsstudier har vist at nettstedsbrukere bruker omtrent 57% av tiden over brettet. Men det viser seg at mange av dem er villige til å rulle ned - så lenge du gir en gunstig designstruktur og mekanisme.

Og det er nettopp her scroll-utløste animasjoner kommer inn. De går i gang med en gang brukere begynner å rulle for å skape en illusjon av en jevn, uendelig side. Det er en gjennomtenkt måte å eliminere overganger som ville andrewise fraråde rulling.

Navigasjon og menyanimasjoner

La oss være ærlige. Menyalternativer tar en betydelig mengde skjermplass, spesielt på helhetlig dynamiske nettsteder med flere nivåer av valg. Heldigvis kan du utnytte animasjoner for å skjule alternativene, og deretter avsløre dem bare når en bruker klikker på eller henger over de tilsvarende knappene.

Denne typen animasjoner strømlinjeformer og forenkler også navigasjonsprosessen ved å komprimere hele strukturen til visuelt tilkoblede menyalternativer. Rammeverket skal utformes med undermenysegmenter som systematisk dukker opp hver gang en bruker klikker eller peker på menyalternativene for overlegg.

Galleri og lysbildefremvisning

Kanskje overraskende nok gjennomsnittlig oppmerksomhetsspenn for mennesker er 8 sekunder - i det minste ifølge en nylig studie utført av Microsoft. Selv en gullfisk er i stand til å holde seg oppmerksom lenger enn en typisk idiviDobbel. Derfor kan du satse på at de fleste besøkende på nettstedet ikke vil være vedvarende nok til å klikke gjennom alle gallerigjenstandene dine.

Men gjett hva? Du kan smart utnytte galleri og lysbildefremvisning animasjoner for automatisk å vise frem mange bilder, uten nødvendigvis å tvinge brukere til å navigere gjennom dem.

Det viktigste her er visningstid for bilder. Korte skjermer med raske overganger ville føle seg ruset, mens lange skjermer med langsomme overganger skulle vise seg å være kjedelige og trege. Med det i bakhodet utformer du den generelle utformingen slik at de viser hvert bilde i omtrent 5 til 8 sekunder, før du raskt går over til det neste.

konklusjonen

Alt i alt bør du analysere animasjoner basert på hvor mye de deretter forbedrer brukeropplevelsen. En flott bør enten utløse en emosjonell forbindelse fra brukere eller lette navigasjonsprosessen. En perfekt, derimot, skal kunne oppnå begge deler samtidig.

For å oppnå det, ta deg god tid til å vurdere alle relevante parametere kritisk når du designer og legger inn animasjoner på nettstedet ditt. Og husk - hold det enkelt, lett og godt tilpasset merkevaren din.

header image med tillatelse fra Alfrey Davilla | vaneltia