Hogyan használjunk animációt a weboldalon?

Animációk használatának az előnyei Hol érdemes animációt használni Hogy ne használjuk az animációkat Animálva de csak okosan

Ma már szinte evidens a webdesign készítés során, hogy weboldalunknak nemcsak képekből és szövegekből kell állnia, hanem életteltelinek is kell lennie. Le kell nyűgöznie a látogatót és egy önálló világot kell teremtenie, ahol a felhasználó szívesen nézelődik és még máskor is vissza szeretne térni. Ezt a hatást az igényes grafikai megjelenés mellett igényes animáció vagy animációk használatával tudjuk elérni.

Milyen is az igényes animáció? Először is segíti vagy legalábbis nem akadályozza a felhasználót és növeli a felhasználói élményt. Ez mit is jelent pontosan? Azt, hogy a látogató könnyebben tud tájékozódni, navigálni a weboldalon és mellette még jól is szórakozik. Ha Ön is ezt szeretné elérni, akkor olvassa végig a bejegyzésemet és alkalmazza az itt leírtakat.

ANIMÁCIÓ HASZNÁLATÁNAK AZ ELŐNYEI

Először is nézzük meg bővebben, hogy a már leírt előnyök mellett milyen további hasznunk is származik abból, ha weboldalunkon helyesen használjuk az animációkat.

  •  Kitölti a várakozási időt: A weboldalak az egyre gyorsabb sávszélességnek köszönhetően egyre gyorsabban töltődnek be, de még mindig nem azonnal. Az animációk segítségével leköthetjük a felhasználó figyelmét a betöltődési időre. Amellett, hogy már előre felkeltjük az érdeklődését a honlapunk iránt, csökkenthetjük annak az esélyét is, hogy idő előtt bezárja az oldalt, mert túl sokat kellett várnia.
  •  Profi hatást kelt: Ha izléses és a weboldal designjába illeszkedő animációkat használunk, akkor a weboldalunk minőségi hatást fog kelteni, és a látogatók ezért szívesebben fognak nézelődni a honlapunkon.
  •  Élettel teli lesz a weboldalunk: Weplapunkat az animációk segítségével élettel tudjuk megtölteni. Nem az az érzése lesz a felhasználóknak, hogy egy szöveggekkel és képekkel teli unalmas és egyhangú felületet néz.
  •  Könnyebb navigálás: Nemcsak diszítésre használhatjuk az animációkat, hanem gyakorlati haszna is van. Segítségével könnyebben észrevehetőek a navigációs elemek és egyértelműbb lehet, hogy milyen viselkedést várunk el a látogatóktól.
  •  Hosszabb látogatási idő: Szép, igényes és egyedi weblap maradásra bírja a látogatókat. Mégha nem is érdekli őket a szolgáltatásunk, akkor is sokkal nagyobb lesz rá az esély, hogy végignézik a honlapunkat. Az animációk pedig pont ezt is elősegítik.
  •  Elnézőbbek a látogatók az esetleges hibákért: Tökéletes weboldal nincsen. Minden honlapnál előfordul egy-két kisebb probléma vagy esetleg olyan rész, amit lehetett volna szebben és jobban megoldani. Ez sajnos elkerülhetetlen. Az  igényes oldalak esetén a látogatók elnézőbbek az ilyen hibákért. Az animációk használata elősegíti az igényességet.

HOL ÉRDEMES ANIMÁCIÓT HASZNÁLNI A WEBLAPON

Szeretnénk feldobni a weboldalunkat pár animációval, de nem tudjuk, hogy lenne érdemes használni őket. A következőkben bemutatom azokat a lehetőségeket, ahol talán érdemes lenne nekünk is alkalmazni őket.

VÁRAKOZÁS A BETÖLTÉSRE (PRELOADER)

Azzel az animáció típussal találkozhatunk a leggyakrabban a weblapoknál. Az oldal betöltődési ideje alatt le tudjuk kötni a látogatók figyelmét egy egyszerű és ötletes animációval. Itt nem kell túl bonyolúltra gondolni.

Preloader használata a weblapomon

FŐOLDALI KÉPVÁLTÓ (SLIDER)

Legtöbb mai modern weboldal betöltődése után egy képváltó vagy más néven slider fogad minket. Ez egy remek lehetőség arra, hogy pár igényes képpel és pár sornyi lényegretörő szöveggel sok információt jutassunk el a felhasználóhoz. Használata egyszerű és ha még a slider animál is, akkor nyert ügyünk van.

BOXOK ANIMÁLT MEGJELENÉSE

A legegyszerűbb módja, hogy egy már kész weboldalon animációkat használjunk, ha a meglévő boxokat, elemeket valamilyen effektel jelenítjük meg. Például lassan előtűnik vagy a weblap valamelyik oldaláról csúszik be. Igazából a lehetőségek száma végtelen és ami még mellette szól, hogy a honlap kódjához csak minimálisan kell hozzányúlni.

FIX MENÜ (STICKY MENÜ)

A fix menü név megtévesztő lehet. Itt most olyan menüre gondolok, ami akkor jön elő, ha elkezdünk lefelé görgetni az oldalon. Segítségével az egyes menüpontok folyamatosan elérhetőek, így nem kell mindig a lap tetejére görgetni vagy keresgélni az oldalon, ha valamelyik általunk keresett oldalra szeretnénk navigálni. A felhasználó élményt növeli a honlapunkon.

Ha már eddig elolvasta a cikkemet, akkor a lap tetején már biztosan megjelent a stiyky menü és a beuszó animáció segítségével jeleztem is Önnek, hogy ott tudja elérni a továbbiakban a menüpontokat.

GOMBOK ANIMÁCIÓJA

Nem szívesen írom le, mert mindenki saját maga dönti el, hogy használ-e animációkat a honlapján vagy sem, de a gombokra kötelező valamilyen effektet tenni, A látogatók figyelmét csak így lehet egyértelműen felhívni, hogy az a gomb vagy elem valahova navigálni fog minket vagy valamilyen eseményt indít el (pl.: felugró ablak).

PARALLAX TECHINKA HASZNÁLATA

Mostanában nagyon divatos megoldás a parallax effekt (parallax görgetés) használata. Lényege, hogy a háttérben lévő kép lassabban mozog, mint az előtte elhelyezkedő elemek, így azt a hatást kelti a nézőben, mintha többrétegű lenne a weblap és egyes elemek a másik fölé csúsznak. Nagyon látványos tud lenni, de csak ovatosan használjuk. Nagy méretű képek kellenek hozzá és elvonhatja a látogató figyelmét a lényegről, a tartalomról.

VISSZA A TETEJÉRE GOMB (TOTOP GOMB)

Ez is számomra egy olyan funckió, ami elegendhetetlen a weblapjaimnál. A navigáció megkönnyítését szolgálja. Bármikor fel tudunk görgetni a lap tetejére egy gombnyomással. Én úgy szoktam elkészíteni, hogy nemcsak feldob minket a lap tetejére, hanem animálva felgörget.

ŰRLAPOK KITÖLTÉSE

Az űrlapok kitöltése nem túl izgalmas dolog. Megadni az adataink, amiket már legalább ezer helyen megtettük eddig. Ráadásul ha valamit elrontunk, akkor megint. Nem a legjobb dolog az biztos.

Próbáljuk meg ezért, minnél inkább barátságosan megoldani ezt is. Ha valamit nem töltött ki vagy nem megfelelően a látogató, akkor jelezzük neki diszkréten. Esetleg egy-két animációval fel is érdemes dobni az adott oldalt. 

HOGYAN NE HASZNÁLJUK AZ ANIMÁCIÓKAT

Csak akkor fordíthatjuk a hasznunkra az animációkat, ha jól átgondoltad és a weboldalunknak megfelelően alkalmazzuk. Az alábbiakban felsorolom a legtipikusabb hibákat, amikre érdemes lesz odafigyelnünk.

NE ESSÜNK TÚLZÁSBA

Gyakran találkozhatunk olyan honlapokkal, ahol a weboldal készítő erősen túlzásba esett az animációk használatával és teljesen fölöslegesen telepakolta az oldalt. Az ilyen honlapok lehet, hogy először vonzza a látogatókat, de később már inkább idegesítő őket és el fognak navigálni az oldalunkról. Ezt nem szeretnénk, ugye?

ÜGYFELEK IGÉNYEIT TARTSUK SZEM ELŐTT

Minden weboldal az ügyfeleknek készül. Ezt mindig tartsuk szem előtt. Az animációk használata során is. Csak olyan animációt tegyünk a weblapra, ami segíti a látogatók abban, hogy könnyebben tudjanak navigálni az oldalon vagy bizonyos műveletek egyértleműek legyenek a számukra.

OLDAL BETÖLTŐDÉSI SEBESSÉGE NE NÖVEKEDJEN

Ha kibővítjük az oldalunkat, akkor természetesen bizonyos fájlok mérete növekedni fog, így a weboldal óhatatlanul is nagyobb méretű lesz. Ezzel nincsen semmi probléma. Kis mértékben nem is fogjuk észrevenni a betöltődési idő változását. Ha viszont nem figyelünk oda vagy túl sok mindent építünk be a weblapba, akkor pár animációért nagy árat fogunk fizetni. Akár ügyfeleket is veszíthetünk.

ANIMÁLVA DE CSAK OKOSAN

Mindenképpen használjunk animációkat a honlapunkon. Ez nem is kérdés. A látogatóinkat nemcsak a termékünkkel hanem a weboldalunkkal is meg kell győznünk arról, hogy jó helyen járnak. A meggyőzés egyik eszköze az igényes animációk alkalmazása. Vegyük figyelembe a fentieket és alkalmazzuk őket a saját weboldalunkon is.