Csak csínján az animációkkal!

2015. április 02., csütörtökWebdesign

Ki ne szeretné az animációkat?! Látványossá teszik a weboldalt, felhívják a figyelmet az adott tartalomrészre. Viszont itt is vannak alapszabályok, amiket jobb ha betartunk, vagy épp az ellentétét fogjuk elérni céljainknak.

Napjainkra nincs olyan eleme a weboldalaknak, amiket nem animálhatnánk. Csempészhetünk a főmenü legördülőjének megjelenésébe animációt, animálhatjuk a galériák képváltását, de még az oldal szövegeibe elhelyezett linkeket is feldobhatjuk némi effekttel.

 

De mikor válik egy animáció, egy effekt túlzássá, feleslegessé?!

 

A legegyszerűbben úgy tudnám ezt megfogalmazni, hogy azok az animációk rosszak, "feleslegesek", amik túl nagy elemeket mozgatnak, vagy állandóak - szinte minden oldalon megtalálható, és állandóan végrehajtásra kerülnek.

Hogy jobban megértsük, nézzünk inkább egy pár példát - aztán mindenki újraértékelheti saját weboldalát :)

 

PW CMS egyik demó weboldaláról a legördülő menü

a PW CMS egyik demó weboldaláról a legördülő menü

Az egyik leggyakrabban animált rész a menü. Gyakran használnak az almenüpontok megjelenésének valamilyen animációt. Szerencsésebb esetben csak egy sima áttűnő effektet használnak, ami 0.4 másodperc alatt végrehajtásra is kerül. Ez tényleg csak arra szolgál, hogy ne legyen olyan "hirtelen" a megjelenése - ez teljesen jó is így.

A másik 2 menüeffekt ami még gyakori, a legördülés, illetve amikor egy kis mozgást is adnak az almenünek - vízszintes menünél alulról felúszik, vagy egy kategórialista esetében ami rendszerint az oldalsávban található, jobbról balra megtesz némi mozgást.

Az előző bejegyzésben említett Presztízs, azaz bemutatkozó weboldal esetében ezek a mozgások teljesen jók. Viszont ha a weboldalt valóban "használják" is, tehát rendszeresen olvassák a bejegyzéseket, lekérik egy adott kategória cikkeit, vagy ez a weboldal egy webshop, ahol fő cél, hogy könnyen és gyorsan lekérhessék egy adott kategória termékeit, ezek az effektek pont az ellenkezőét fogják kiváltani.

Lehet hogy az első 1-2 használatkor még nem zavarja a látogatót, de ha azt szeretnénk, hogy kényelmesen keresgélhessen a különböző kategóriákban, hanyagoljuk az alkategóriák megjelenésének animálását - a látogató hálás lesz érte, hogy nem kell az animáció lejátszását megvárnia, hanem egyből navigálhat tovább az almenüpontokban.

felugró ablak

a PW CMS felugró ablaka, felszerkeszthető tartalommal

Egy másik gyakran animált elem, a felugró ablak. Csakhogy a látogató nem a felugró ablak miatt kattintott a weboldalra, és még várnia is kell, hogy bezárhassa... nem a legjobb eljárás. Ráadásul a gyakorlottabb felhasználók ilyenkor reflexből rákattintanak az elsötétült háttérre, aminek hatására már be is zárták a felugró ablakot, anélkül hogy bármit is láttak volna belőle. Ha animáltan is jelenik meg, akkor is csak valami nagyon szolid animációt javasolnék.

De találkoztam már olyannal is, amikor a bejegyzésekbe ágyazott linkek is animáltak voltak, ami az első pillanatban megmondom őszintén tetszett. Aztán amikor a 3. linkre akartam rákattintani már valahogy kezdett idegesíteni a dolog...

 

galéria

a PW CMS galériája

Persze az sem túl szerencsés, amikor egy galéria képváltását animáljuk. Az még belefér, hogy jobbról vagy balról "beúszik" a következő kép, ha ez nem tart tovább 0.2-0.3 másodpercnél, de amikor 40-50 képet akarunk megnézni egy galériában, könnyen frusztrálóvá válhatnak az effektek.

 

A világ legrosszabb animációja, a képernyő mozgatás

Itt most nem arról az animációról beszélek, amikor például egy AJAX-os lapozó esetén felgörgetik a látogató helyett a képernyőt (ez nagyon is helyénvaló így), hanem arról, amikor az oldal betöltése után, egyből elmozdítják a képernyőt anélkül, hogy a látogató bármire is rákattintott volna.

Ezt akkor szokták a webstúdiók alkalmazni, amikor a tényleges tartalom fölé (pl. egy cikk fölé), túl sok állandó tartalmat tesznek be. Ebből is a kedvencem, amikor egy SlideShow raknak be állandóra. De minek?! A főoldalon teljesen jó egy SlideShow, de minden aloldalakra is?!

Ráadásul ez nemcsak hogy felesleges és idegesítő, de riasztó is azzal szembesülnie a látogatónak, hogy mennyire befolyásolható a böngészője - mert ugye ő nem kattintott rá semmire sem, mégis "parancsokat" hajt végre a böngészője...

 

Mindezek mellett arról sem szabad megfeledkezni, hogy nem mindenki használ 4 magos processzort, sőt vannak még most is számítógépek amiknek 2Gb RAM-ot kell beosztaniuk. Ezért is nagyon fontos jól átgondolni az animációk mennyiségét, ne animáljunk túl nagy elemeket, mert ezeken a számítógépeken szaggatni fognak az effektek, amitől az egész értelmét veszti.

Másfelől egy responsive weboldalnál nem csak a képernyő szélességére kell figyelni, hanem arra is, hogy a mobil készülékek sokkal gyengébbek a számítógépeknél. Éppen ezért a PW Tartalomkezelő rendszerében a képek animálása, a szám "felpörgetésének" animálása, de még az integrált LayerSlider rétegeinek mozgatása is le van tiltva (a rétegek mozgatását még az újabb mobilok sem bírták...).

 

Tehát csak csínján az animálással...

A hamarosan megjelenő Tartalomkezelő Rendszeremben (PW CMS) rengeteg elem animálható. Természetesen figyeltünk rá, hogy a különböző készülékekhez alkalmazkodjanak ezek az animációk, és hogy ne lehessen olyan dolgokat elkövetni a weboldalon, ami a látogatók ellenszenvét válthatná ki, de ettől függetlenül fontosnak tartjuk felhívni a figyelmet arra, hogy jól gondoljuk át, mit látunk el effekttel.

Végszóként sose feledjük, "a kevesebb néha több"

 

Szólj hozzá Te is!
0 hozzászólás
PW CMS 1.4.71 · Adatvédelmi irányelvek · Visszajelzés küldése
A weboldal cookie-kat használ. Adatvédelmi irányelvekértem