Mikor segít az animáció, és mikor zavar?

Az animáció a webdesign egyik legerősebb eszköze, és egyben a legkönnyebb vele túlzásba esni. Ugyanaz a technika az egyik oldalon kifinomulttá teszi az élményt, a másikon idegesítővé. A különbség szinte sosem technikai, hanem szándékbeli: tudjuk-e, mire való az adott mozgás.

Négy kérdés minden animáció előtt

1. Mit mond el?

A jó mozgás információt hordoz. Egy gomb, amely lenyomáskor finoman besüpped, azt mondja: „érzékeltem a kattintást”. Egy menü, amely abból az irányból csúszik be, ahonnan megnyitották, azt mondja: „itt vagyok, és oda tűnök vissza”. Ha egy animációról nem tudjuk megmondani, mit közöl, valószínűleg nincs rá szükség.

2. Hová vezeti a szemet?

A mozgó elemre a szem automatikusan odanéz – ez ősi reflex. Ezért a mozgás egyben rangsor is: amit mozgatunk, azt fontosnak jelöljük. Ha egyszerre öt dolog mozog, a látogató nem tudja, melyik számít. Egy képernyőn egy fő mozgás legyen, a többi csendes háttér.

3. Megvárakoztat?

A látogató nem azért jött, hogy végignézzen egy bevezetőt. Az a nyitóanimáció, amely másodpercekig takarja a tartalmat, türelmet kér – és a türelem a weben szűkös. A jó animáció párhuzamosan fut a használattal, nem előtte.

4. Másodszorra is jó?

Az első látogatáskor minden hatás újdonság. A tizedik alkalommal viszont már csak az marad meg, ami nem áll útba. Ha egy mozgás a harmadik alkalomra fárasztó, érdemes rövidebbre, halkabbra venni – vagy csak egyszer lejátszani.

Jelek, hogy az animáció zavar

• A szöveg olvasás közben is mozog vagy csúszik.
• Görgetéskor a tartalom csak késve jelenik meg, és a látogató „utoléri” az oldalt.
• Az oldal mobilon akadozik, a telefon felmelegszik.
• A mozgásnak nincs vége: folyamatosan pörög, villog, ugrál valami a látótérben.
• Nincs mód megállítani, és a mozgáscsökkentő rendszerbeállítást sem veszi figyelembe.

Az utolsó pont nem csak kényelmi kérdés: vannak, akiknek a képernyőn nagy felületen mozgó tartalom kifejezetten rosszullétet okoz. Egy gondosan épített oldal ilyenkor megállítja a mozgást.

Ahol a mozgás a legtöbbet hozza

• Visszajelzés: gombok, űrlapmezők, sikeres küldés.
• Irány és kapcsolat: honnan jön és hová tűnik el egy elem.
• Hangulat: lassú, háttérben futó fény vagy lebegés, amely nem vonja el a figyelmet a szövegről.
• Magyarázat: egy folyamat lépéseinek bemutatása, ahol a mozgás megmutatja a sorrendet.

A mérték a lényeg

Egy prémium hatású oldal ritkán mozog sokat, de amit mozgat, azt nagyon gondosan. A legjobb animáció az, amelyet a látogató nem vesz külön észre, csak annyit érez: ez az oldal „él”, és könnyű használni.

Ha a saját oldalán szeretne ilyen mozgó részleteket, az animáció és interakció szolgáltatásunknál bemutatjuk, mivel dolgozunk. A főoldalunk „Próbálja ki” blokkjában néhány mintát ki is próbálhat. Vagy írja meg, mit mozgatna meg szívesen.