Tro det eller ej, du har ikke meget tid til at overbevise dine besøgende på stedet om at blive. Dit vindue er faktisk meget kortere, end du antager.
I det væsentlige tager det bare 0.05 sekunder når din side er indlæst, så besøgende kan danne sig en mening. Mere specifikt betyder det 50 millisekunder. Overraskende kort, ikke?
Okay, nogle af dem vil forlade. Men andre kan vælge at blive.
Så kommer indtryksfasen, som dybest set varer kun 10 sekunder. Hvis dit websted ikke kan administrere et solidt, mister du størstedelen af din trafik, før de endda starter med konverteringsprocessen. De bare for at fortsætte med at slå på ryggen eller lukke knapperne.
Og hvis du havde håb om at komme dem tilbage, her er den hårde sandhed. 88% af dem vil sandsynligvis ikke vende tilbage til et websted efter en dårlig oplevelse.
Men hold et minut. Hvilket job er det at bevare webtrafik, når de lander på webstedet?
Ok, det er naturligvis kun naturligt at bebrejde webstedets content manager. Og du har måske ret. Men kun delvist.
Det viser sig, at det hele starter med webdesigneren. Faktisk konstaterede en undersøgelse, der omfattende undersøgte en bred vifte af forbrugernes feedback, det 94% af de negative var designrelaterede.
Hvad betyder dette?
Til at begynde med, er der ingen undslippe dette. Hovedansvaret ligger hos dig. Ud over at implementere al den bedste designpraksis, vi har dækket i vores tidligere stykker, skal du bære en PR-hat og overveje elementer, der effektivt forbinder trafikken.
Jeg taler om ting som webanimationer.
Og hvorfor foreslår vi det specifikt?
Det er noget, jeg snart vil afsløre. Denne guide leder dig gennem alle de kritiske aspekter af webanimationer. Men først skal vi udforske det grundlæggende ...
Grundlæggende om webanimationer
Forestil dig din yndlings tegneseriekarakter, der går rundt på skærmen. Eller måske din telefons logo danser rundt på skærmen, når du genstarter enheden. Hvad har de tilfælles?
De er begge grundlæggende eksempler på animationer.
Animation forekommer i det væsentlige, når et stille element er "bragt til live". Det begynder derefter at udstille en eller anden form for bevægelse.
Vi ved ikke nøjagtigt, hvornår denne praksis begyndte. Men vi har en idé om, at første animerede film i historien blev lavet for over et århundrede siden. Tendensen har udviklet sig meget omfattende siden da takket være progressive fremskridt inden for tech.
Én ting er dog forblevet konstant - animationens principper. Faktisk skrev Disneys Ollie Johnston og Frank Thomas senere om dem i deres bog, "Illusion of Life: Disney Animation". Her er den komplette liste:
- Appel
- Solid tegning
- Overdrivelse
- Timing
- Sekundær handling
- Arc
- Langsomt ind og langsomt ud
- Følg og overlappende handling
- Lige foran handlingen, og posér for at udgøre
- Iscenesættelse
- Forventning
- Squash og stræk
De tolv giver stadig rammerne for design af animationer i dag, inklusive dem der er offentliggjort på nettet som videoer, WebGL, SVG, CSS og GIF.
Nu kan webanimationer være så enkle som et højdepunkt, der vises, når du holder musepekeren over et bogstav, til en kompleks flerlagsserie med fuldskærmsvideoer. Med andre ord kan du tage en subtil tilgang eller vælge at gå helt ud med dominerende animationer, der skrige om opmærksomhed. Det hele afhænger af situationen.
Og det rejser spørgsmålet - hvornår skal du engang bruge animationer?
Hvornår skal du bruge webanimationer?
Selvfølgelig er de søde. Og det ville helt sikkert være interessante tilføjelser til dit websteds layout.
Men ved du hvad? Deres efterfølgende effektivitetsniveauer er en helt anden ting. Så det siger sig selv, at animationer ikke er egnede til alle webstedsprojekter. Og vigtigst af alt er det en dårlig ide at adoptere dem tilfældigt.
Det sker bare så 46% af online forbrugere bedømme et websteds troværdighed baseret på dets overordnede visuelle appel og æstetik. Du har simpelthen ikke råd til at omfatte det med en dårligt designet animationsramme. Samtidig ville det være uheldig at vedvarende gå glip af gyldne konverteringsmuligheder ved ikke at udnytte animationer.
Så hvornår skal du udnytte dem?
Nå, her er det. Webanimationer er primært ideelle, når du har brug for at øge brugervenligheden ved måske at opmærke eller hjælpe brugere med navigationsprocessen.
Hvordan?
Generelt tager det 2.6 sekunder for et besøgs øjne til at lande på webstedssektion, der primært påvirker deres første indtryk. Dygtigt ved hjælp af en animation kan imidlertid fremskynde tingene ved straks at henlede opmærksomheden på de mest kritiske områder på webstedet.
Animationer er også nyttige, når du søger at dirigere brugere gennem konverteringstragten. En animeret form dukker op, for eksempel, ville være en tankevækkende strategi til opbygning af mailinglister. Når det kommer til købsprocessen, kan du overveje at indlejre videoer. De har vist sig at overbevise 73% af køberne for at fortsætte og købe et produkt eller en tjeneste.
Endelig kan du bruge webanimationer rent til æstetiske formål. En dekorativ animation, der er glat og sømløs, kan forbedre den samlede visuelle appel ganske markant og derefter etablere en følelsesmæssig forbindelse mellem brugerne og interface. Og det er sådan, du gradvist øger niveauet for brugerengagement.
Webanimationsværktøjer
Klar til at begynde at oprette webanimationer? Perfekt! Men hvor skal du starte?
Hvad med at søge et robust værktøj til at konvertere dine ideer til faktiske animationer? Heldigvis findes der en bred vifte af pæne indstillinger på nettet, som er optimeret til forskellige brugere og forskellige typer animationer. Hvad du vælger til dine projekter afhænger af dine evner, primære mål, budget og den type websted, du arbejder på.
Når det er sagt, her er nogle prominente eksempler, hver med sin egen unikke sag:
- js
- 3D Lines Animation med Three.js
- js
- Flubber
- Farveanimation
- jqClouds
- Scrollissimo
- Cel-animation
- js
- js
- CSS3-animation
- Transformationsbaseret når
- js
- Slap af
- AOS
- js
- ScrollTrigger
- Scrollanim
- js
- js
- js
- js
- Ræveholder
- Animatelo
- css
- Animista
- js
- CAAT
- AnimateMate
- js
- Stylie
- GFX
- js
- js
- js
- jQuery DrawSVG
- Ramjet
- Wallop
- MixItUp
- css
- css
- js
- ceaser
- CSSynth
- Saffron
- CSShake
- css
- js
- Rocket
- Transit
- css
- js
- Popmotion
- GSAP af GreenSock
- js
- js
- CSS Animer
- Det er tirsdag
- Shifty
- js
- js
- js
- js
- js
- Vente! Animate
- Motion UI
- js
- Lazy Line Painter
- js
- js
- js
- AnijS
- js
- Magic Animationer
- css
Design af webanimationer
Hover Effects
Hover-animationer er uden tvivl nogle af de enkleste på nettet. De kommer til live og fremhæver valgte elementer, når markøren bevæger sig over dem. Selve animationen kan forekomme i forskellige former - som skift i størrelse eller ændring i farve.
Tricket her er at adoptere virkningerne sparsomt. Andetwise, risikerer du at fremhæve alt for mange elementer, som efterfølgende kan forvirre brugerne.
Det anbefales også at opretholde en form for konsistent med metodikken på hele webstedet. Hvis dine startside-knapper for eksempel bliver fra grøn til rød, skal du bruge den samme ramme til yderligere højdepunkter på andre websider.
Baggrundsanimationer
Indlejring af en baggrundsanimation er en effektiv strategi for at tilføje spænding og vitalitet til din webside uden nødvendigvis at forstyrre hovedvægten. Du kan bruge alt fra videoer til subtile billeder, der skifter sekventielt.
Den bedste tilgang her er at holde tingene strukturerede og enkle. Hvis du vælger at integrere en video, skal du afkorte den i overensstemmelse hermed og vedligeholde en løkke, der er relevant for dit websted. Sørg derefter for, at bevægelserne er subtile nok til at tiltrække opmærksomhed uden at overvælde brugere.
GIF-stil animationer
En GIF er værd at overveje, hvis du er specielt interesseret i en animation, der er usædvanligt let at konfigurere. En typisk kan måske være noget som at skifte tekst eller en smilende klovn indlejret i dit indholdslayout.
Alt du skal gøre er at komme med en solid idé, få en relevant video eller et relevant billede og derefter konvertere det til en perfekt GIF ved hjælp af et passende redigeringssoftware. Uploader den resulterende oprettelse i GIF format genererer en videolignende animation, der indlæses lige så hurtigt som et lille billede.
Overgangsanimationer
Overgangsanimationer bruges til at introducere kraft, når brugerne flytter fra et afsnit af webstedet til et andet. De svarer til diasshow-animationer, der vises, når du flytter fra det ene dias til det næste.
Billede kreditter: Shutterstock
For at få et perfekt resultat skal du sikre dig, at animationerne er glatte og konsistente på hele siden. De skal også være korte nok til ikke at forsinke den egentlige overgangsproces.
Indlæser animationer
Fakta er- 47% af online forbrugere forventer, at dine websider indlæses på mindst 2 sekunder. Hvis du ikke opnår dette, oversættes hvert ekstra sekund til 7% færre konverteringer.
Går forbi nuværende gennemsnitlig indlæsningstid på 22 sekunder, er det temmelig tydeligt, at det er ret vanskeligt at imødekomme forventningen på 2 sekunder. Men du kan redde en betydelig del af trafikken ved at holde dem travlt med animationer, da andre sideelementer fortsætter med at indlæse.
Fokuser på at oprette enkle, der er lette nok til at indlæse næsten øjeblikkeligt trafik omdirigeres til dit websted. De skal designes til systematisk at introducere besøgende til mærket og det overordnede webstedstema.
Scroll-triggede animationer
Eye tracking-undersøgelser har vist, at webstedets brugere bruger ca. 57% af deres tid over folden. Men det viser sig, at mange af dem er villige til at rulle ned, så længe du giver en gunstig designstruktur og mekanisme.
Og det er netop her scroll-udløste animationer kommer ind. De går i gang med det samme, brugerne begynder at scrolle for at skabe en illusion af en glat, uendelig side. Det er en tankevækkende måde at eliminere overgange, der ville andrewise fraråde scrollning.
Navigation og menuanimationer
Lad os være ærlige. Menupunkter tager en betydelig mængde skærmplads, især på holistisk dynamiske websteder med flere niveauer af valg. Heldigvis kan du kapitalisere på animationer for at skjule indstillingerne og derefter afsløre dem kun, når en bruger klikker på eller svæver over de tilsvarende knapper.
Denne type animation strømline og forenkler også navigationsprocessen ved at komprimere hele strukturen i visuelt tilsluttede menupunkter. Rammen skal designes med undermenu-segmenter, der systematisk dukker op, hver gang en bruger klikker eller peger på overlaying-menuindstillingerne.
Galleri og lysbilledshows
Måske overraskende gennemsnitlige opmærksomhedsspænd for mennesker er 8 sekunder - i det mindste ifølge en nylig undersøgelse foretaget af Microsoft. Selv en guldfisk er i stand til at være opmærksom i længere tid end en typisk idividobbelt. Derfor kan du satse på, at de fleste af dit websteds besøgende ikke vil være vedholdende nok til at klikke gennem alle dine galleriprodukter.
Men gæt hvad? Du kan smart anvende galleri og lysbilledshow-animationer til automatisk at fremvise adskillige billeder uden nødvendigvis at tvinge brugerne til at navigere gennem dem.
Den vigtigste ting her er billedets visningstid. Korte skærme med hurtige overgange ville føle sig forhastede, mens lange skærme med langsomme overgange viser sig at være kedelige og træg. Med det i tankerne skal du designe det samlede layout til at vise hvert billede i ca. 5 til 8 sekunder, før du hurtigt går over til det næste.
Konklusion
Alt i alt skal du analysere animationer baseret på, hvor meget de derefter forbedrer brugeroplevelsen. En stor bør enten udløse en følelsesladet forbindelse fra brugere eller lette navigationsprocessen. En perfekt skal på den anden side være i stand til komfortabelt at nå begge på samme tid.
For at opnå det, skal du tage dig tid til kritisk at vurdere alle de relevante parametre, mens du designer og integrerer animationer på dit websted. Og husk - hold det enkelt, let og godt tilpasset dit brand.
header image med tilladelse fra Alfrey Davilla | vaneltia
Kommentarer 0 Responses