Akár hiszi, akár nem, nincs sok ideje arra, hogy meggyőzze webhelye látogatóit, hogy maradjanak itt. Az ablak valójában sokkal rövidebb, mint gondolnád.
Lényegében csak 0.05 másodperc az oldal betöltése után, hogy a látogatók véleményt alkothassanak. Pontosabban, ez 50 ezredmásodpercnek felel meg. Meglepően rövid, igaz?
Oké, néhányan elmennek. De mások dönthetnek úgy, hogy maradnak.
Aztán jön a benyomási szakasz, ami alapvetően mindössze 10 másodpercig tart. Ha webhelye nem tud stabilan kezelni, akkor a forgalom nagy részét elveszíti, mielőtt a konverziós folyamat elindulna. Csak azért, hogy megnyomják a vissza vagy a bezárás gombot.
És ha reménykedne, hogy visszaszerezheti őket, íme a kemény igazság. 88% -uk valószínűleg nem térnek vissza egy webhelyre egy rossz tapasztalat után.
De várj egy percet. Kinek a feladata az internetes forgalom megtartása, miután megérkezik a webhelyre?
Rendben, természetesen természetes, hogy az oldal tartalomkezelőjét hibáztatjuk. És lehet, hogy igazad van. De csak részben.
Kiderült, hogy minden a webdesignerrel kezdődik. Valójában egy tanulmány, amely széleskörűen felmérte a fogyasztói visszajelzések széles körét, ezt állapította meg A negatívak 94%-a tervezéssel kapcsolatosak voltak.
Mit is jelent ez?
Kezdetnek ez alól nem lehet megkerülni. Az elsődleges felelősség Önt terheli. Amellett, hogy be kell vezetnie a tervezési bevált gyakorlatokat, amelyeket korábbi darabjainkban ismertettünk, PR-sapkát kell viselnie, és figyelembe kell vennie azokat az elemeket, amelyek hatékonyan kapcsolódnak a forgalomhoz.
Olyan dolgokról beszélek, mint a web-animációk.
És miért ajánljuk ezt kifejezetten?
Nos, ez az, amit hamarosan elárulok. Ez az útmutató végigvezeti Önt a webes animációk kritikus szempontjain. De először nézzük meg az alapokat…
A webes animációk alapjai
Képzelje el kedvenc rajzfilmfiguráját, amint a képernyőn sétál. Vagy talán a telefon logója táncol a képernyőn, amikor újraindítja az eszközt. Mi bennük a kozos?
Nos, mindkettő alapvető példa az animációkra.
Az animáció lényegében akkor jön létre, amikor egy álló elemet „életre keltenek”. Ezután elkezd valamilyen mozgásformát mutatni.
Nem tudjuk pontosan, mikor kezdődött ez a gyakorlat. De van egy elképzelésünk arról, hogy a első animációs film a történelemben több mint egy évszázaddal ezelőtt készült. Azóta ez a trend meglehetősen kiterjedt fejlődésen ment keresztül, köszönhetően a technológiai fejlődésnek.
Egy dolog azonban változatlan maradt: az animáció alapelvei. Valójában a Disney-s Ollie Johnston és Frank Thomas később ezt írta róluk a könyvében: "Az élet illúziója: Disney animáció". Íme a teljes lista:
- Fellebbezés
- Szilárd rajz
- Túlzás
- Időzítés
- Másodlagos művelet
- Ív
- Lassíts be és lassíts
- Kövesse végig és átfedő műveleteket
- Egyenesen előre cselekvés és póz a pózhoz
- Staging
- előérzet
- Squash és stretch
A tizenkettő még ma is biztosítja az animációk tervezésének keretét, beleértve az interneten videók, WebGL, SVG, CSS és GIF formájában közzétett animációkat is.
Mostantól a webes animációk olyan egyszerűek is lehetnek, mint egy kiemelés, amely akkor jelenik meg, ha egy levél fölé viszi az egérmutatót, és a teljes képernyős videók összetett, többrétegű sorozatához vezet. Más szavakkal, alkalmazhat finom megközelítést, vagy dönthet úgy, hogy mindent megtesz a domináns animációkkal, amelyek figyelemért kiáltanak. Minden a helyzettől függ.
És ez felveti a kérdést: mikor kell egyáltalán animációt használni?
Mikor érdemes webanimációkat használni?
Persze aranyosak. És minden bizonnyal érdekes kiegészítések lennének webhelye elrendezésében.
De tudod mit? A későbbi hatékonysági szintjük egészen más dolog. Tehát magától értetődik, hogy az animációk nem alkalmasak minden webhelyprojekthez. És ami a legfontosabb, rossz ötlet lenne véletlenül örökbe fogadni őket.
Egyszerűen így történik az online fogyasztók 46%-a ítélje meg a webhely hitelességét annak általános vizuális vonzereje és esztétikája alapján. Egyszerűen nem engedheti meg magának, hogy ezt egy rosszul megtervezett animációs kerettel kiegészítse. Ugyanakkor sajnálatos lenne kitartóan elszalasztani az arany konverziós lehetőségeket azáltal, hogy nem használjuk ki az animációkat.
Szóval, mikor érdemes kihasználni őket?
Nos, itt van a dolog. A webes animációk alapvetően akkor ideálisak, ha a használhatóság fokozására van szükség azáltal, hogy felhívják a figyelmet vagy segítik a felhasználókat a navigációs folyamatban.
Hogyan?
Általában kell 2.6 másodperc hogy a látogató szeme olyan webhelyrészre bukkanjon, amely elsősorban az első benyomást befolyásolja. Az animáció ügyes használata azonban felgyorsíthatja a dolgokat, ha azonnal felhívja figyelmüket a webhely legkritikusabb területeire.
Az animációk akkor is hasznosak, ha a felhasználókat a konverziós csatornán keresztül szeretné irányítani. Például egy animált űrlap felugró ablaka átgondolt stratégia lehet a levelezési listák felépítéséhez. Aztán amikor a vásárlási folyamatról van szó, érdemes lehet videókat beágyazni. Bebizonyosodott, hogy meggyőznek A vásárlók 73%-a folytatni és megvásárolni egy terméket vagy szolgáltatást.
Végül a webanimációkat pusztán esztétikai célokra használhatja. Egy sima és zökkenőmentes dekoratív animáció jelentősen javíthatja az általános vizuális vonzerőt, és ennek következtében érzelmi kapcsolatot hozhat létre a felhasználók és a felület között. És így fokozatosan növelheti a felhasználói elkötelezettség szintjét.
Webes animációs eszközök
Készen áll a webes animációk készítésére? Tökéletes! De hol érdemes kezdeni?
Nos, mit szólnál ahhoz, hogy keressünk egy robusztus eszközt, amellyel ötleteit tényleges animációkká alakíthatja? Szerencsére az interneten számos ügyes beállítás található, amelyek jól optimalizáltak különféle felhasználókhoz és különböző típusú animációkhoz. Az, hogy mit választ projektjeihez, készségeitől, elsődleges céljaitól, költségvetésétől és a webhely típusától függ.
Ennek ellenére itt van néhány kiemelkedő példa, mindegyiknek megvan a maga egyedi használati esete:
- js
- 3D vonalak animáció a Three.js segítségével
- js
- Flubber
- Színes animáció
- jqClouds
- Scrollissimo
- Cel-animáció
- js
- js
- CSS3 animáció
- Átalakítás-mikor
- js
- Lazíts
- AOS
- js
- ScrollTrigger
- Scrollanim
- js
- js
- js
- js
- Rókatartó
- Animatelo
- css
- Animista
- js
- CAAT
- AnimateMate
- js
- Stylie
- GFX
- js
- js
- js
- jQuery DrawSVG
- Torlósugaras
- Nyakleves
- Keverd össze
- css
- css
- js
- Cézár
- CSSynth
- Saffron
- CSShake
- css
- js
- Rakéta
- Tranzit
- css
- js
- Popmotion
- GSAP a GreenSocktól
- js
- js
- CSS animáció
- Kedd van
- ravasz
- js
- js
- js
- js
- js
- Várjon! Élő
- Motion UI
- js
- Lusta vonal festő
- js
- js
- js
- AnijS
- js
- Magic animációk
- css
Webes animációk tervezése
Hover effektek
A hover animációk kétségtelenül a legegyszerűbbek az interneten. Életre kelnek, és kiemelik a kiválasztott elemeket, amikor a mutató föléjük kerül. Maga az animáció különféle formákban fordulhat elő – például méretváltozás vagy színváltozás.
A trükk itt az, hogy takarékosan alkalmazzuk a hatásokat. Egyébwise, akkor azt kockáztatja, hogy túl sok elemet emel ki, ami később megzavarhatja a felhasználókat.
Azt is tanácsos, hogy a módszertannak valamilyen formáját az egész webhelyen konzisztensen tartsa fenn. Ha például a kezdőlap gombjai zöldről pirosra váltanak, használja ugyanazt a keretet a további kiemelésekhez más weboldalakon.
Háttér animációk
A háttéranimáció beágyazása hatékony stratégia arra, hogy izgalmat és vitalitást adjon weboldalának anélkül, hogy szükségszerűen megzavarná a fő hangsúlyt. Használhat bármit a videóktól a finom képekig, amelyek egymás után váltanak.
A legjobb megközelítés itt az, ha a dolgokat strukturáltan és egyszerűen tartjuk. Ha úgy dönt, hogy integrál egy videót, akkor ennek megfelelően rövidítse le, és tartsa fenn a webhelye szempontjából releváns hurkot. Ezután győződjön meg arról, hogy a mozdulatok elég finomak ahhoz, hogy felhívják magukra a figyelmet anélkül, hogy túlterhelnék a felhasználókat.
GIF stílusú animációk
Érdemes megfontolni a GIF-et, ha különösen érdekli egy olyan animáció, amelyet rendkívül könnyű beállítani. A tipikus lehet például a szöveg eltolódása vagy egy mosolygó bohóc a tartalom elrendezésébe ágyazva.
Csak annyit kell tennie, hogy kitalál egy szilárd ötletet, szerezzen be egy releváns videót vagy képet, majd egy megfelelő szerkesztő szoftver segítségével tökéletes GIF-et alakítson át. Az eredményül kapott alkotás feltöltése GIF-ben format videószerű animációt generál, amely olyan gyorsan betöltődik, mint egy kis kép.
Átmeneti animációk
Az átmeneti animációk lendületet adnak, amikor a felhasználók a webhely egyik szakaszáról a másikra lépnek. Hasonlóak a diavetítés-animációkhoz, amelyek akkor jelennek meg, amikor egyik diáról a másikra lép.
Kép kredit: Shutterstock
A tökéletes eredmény érdekében ügyeljen arra, hogy az animációk egyenletesek és következetesek legyenek az egész webhelyen. Ezenkívül elég rövidnek kell lennie ahhoz, hogy ne késleltesse a tényleges átállási folyamatot.
Animációk betöltése
A tény az- az online fogyasztók 47%-a elvárja, hogy weboldalai legalább 2 másodpercen belül betöltődjenek. Ha ezt nem éri el, minden további másodperc 7%-kal kevesebb konverziót jelent.
Elhaladva a jelenlegi átlagos betöltési idő 22 másodperc, elég nyilvánvaló, hogy a 2 másodperces elvárás teljesítése meglehetősen nehéz. A forgalom jelentős részét azonban megmentheti, ha animációkkal foglalkoztatja őket, miközben más webhelyelemek továbbra is betöltődnek.
Koncentráljon olyan egyszerűek létrehozására, amelyek elég könnyűek ahhoz, hogy szinte azonnal betöltsék a forgalmat a webhelyére. Úgy kell megtervezni őket, hogy a látogatók szisztematikusan megismertessék a márkával és a webhely általános témájával.
Görgetéssel aktivált animációk
Szemkövető tanulmányok kimutatták, hogy a webhely felhasználói kb idejük 57%-a a hajtás felett. De kiderült, hogy sokan közülük hajlandók lefelé görgetni – mindaddig, amíg kedvező tervezési struktúrát és mechanizmust biztosítanak.
És pontosan itt jönnek be a görgetéssel indítható animációk. Azonnal működésbe lendülnek, és a felhasználók görgetésbe kezdenek, és egy sima, véget nem érő oldal illúzióját keltik. Ez egy átgondolt módszer a más átmenetek kiküszöbölésérewise gátolja a görgetést.
Navigációs és menüanimációk
Legyünk őszinték. A menüopciók jelentősen sok helyet foglalnak el a képernyőn, különösen a holisztikusan dinamikus webhelyeken, ahol több szint van kiválasztva. Szerencsére kihasználhatja az animációkat, hogy elrejtse a lehetőségeket, majd csak akkor fedje fel őket, ha a felhasználó rákattint a megfelelő gombokra, vagy rámutat az egérmutatóra.
Az ilyen típusú animáció leegyszerűsíti és leegyszerűsíti a navigációs folyamatot azáltal, hogy a teljes szerkezetet vizuálisan összekapcsolt menüopciókká tömöríti. A keretrendszert olyan almenüszegmensekkel kell megtervezni, amelyek szisztematikusan felbukkannak, amikor a felhasználó rákattint vagy rámutat az átfedő menüopciókra.
Galéria és diavetítések
Talán nem meglepő módon a az emberi lények átlagos figyelme 8 másodperc – legalábbis a Microsoft nemrégiben végzett tanulmánya szerint. Még egy aranyhal is képes hosszabb ideig figyelmes maradni, mint egy átlagos beltéridividupla. Ezért fogadhat, hogy webhelye látogatóinak többsége nem lesz elég kitartó ahhoz, hogy átkattintsa az összes galériaelemet.
De képzeld csak? Ügyesen kihasználhatja a galéria és diavetítés animációit, hogy automatikusan megjelenítsen számos képet anélkül, hogy a felhasználókat feltétlenül kényszerítené a rajtuk való navigálásra.
A legfontosabb itt a kép megjelenítési ideje. A gyors átmenetekkel rendelkező rövid kijelzők rohanónak tűnnének, míg a lassú átmenetekkel rendelkező hosszú kijelzők unalmasnak és lomhának bizonyulnának. Ezt szem előtt tartva alakítsa ki az általános elrendezést úgy, hogy minden kép körülbelül 5–8 másodpercig jelenjen meg, mielőtt gyorsan átváltana a következőre.
Következtetés
Összességében az alapján kell elemeznie az animációkat, hogy mennyit javítanak a felhasználói élményen. A nagyszerűnek vagy érzelmi kapcsolatot kell kiváltania a felhasználókból, vagy meg kell könnyítenie a navigációs folyamatot. Egy tökéletesnek viszont kényelmesen el kell érnie mindkettőt egyszerre.
Ennek elérése érdekében szánjon időt az összes releváns paraméter kritikus értékelésére, miközben animációkat tervez és ágyaz be webhelyére. És ne feledje: legyen egyszerű, könnyű és jól illeszkedjen a márkához.
fejléckép jóvoltából Alfrey Davilla | vaneltia
Hozzászólások 0 válaszok