Animált gombok tervezése és fejlesztése, amelyek megragadják a figyelmet!

Animált gombok tervezése online felületekhez

Az Animált gombok akkor hasznosak, ha a látogató gyorsan megérti, mire érdemes kattintania, és a mozgás nem zavarja a döntésben. Én azt látom, hogy sok weboldalon a gomb csak dísz, pedig egy jó gomb viselkedése irányt ad. Megmutatja, hogy az elem aktív, visszajelzést ad a kattintásra, és segít abban, hogy a felhasználó ne bizonytalanodjon el. Egy magánügyfélnek általában nem egy nagy rendszer kell, hanem néhány jól átgondolt mozgó gomb, amely illik a meglévő oldalhoz, rendelési felülethez, bemutatkozó oldalhoz vagy kisebb webes projekthez.

Az ilyen munka távolról is jól elvégezhető. A megrendelő elküldi az oldal linkjét, képernyőképét, arculati anyagát vagy a meglévő tervet. A szakember ez alapján javaslatot készít a gomb állapotaira, a mozgás hosszára, a színváltásra, a lebegő hatásra és arra, hogy mi történjen kattintás után. Szerintem itt a legfontosabb kérdés nem az, hogy mennyire látványos az animáció, hanem az, hogy érthető marad-e a felület. Egy túl erős villanás vagy állandó mozgás olcsó hatást kelthet. Egy visszafogott átmenet viszont sokszor többet ad.

Mozgó gombok szerepe a felületen

A mozgó gombok első feladata a visszajelzés. A felhasználó szeretné látni, hogy amit megnyomott, az működik. Ez lehet enyhe színváltozás, méretváltás, árnyék, rövid betöltési jel vagy finom rezdülés. Tapasztalatom szerint a jó gombanimáció nem önmagáért van. Akkor működik, ha a látogató magabiztosabban halad tovább az oldalon.

Gyakori feladat a vásárlási gomb, ajánlatkérő gomb, regisztrációs gomb, űrlap elküldése, letöltés, időpontfoglalás vagy kapcsolatfelvétel animálása. Ezeknél a felhasználó már közel van a döntéshez. Egy tiszta, kiszámítható animáció csökkentheti a bizonytalanságot. De nem pótolja a rossz szöveget, a gyenge ajánlatot vagy a nehezen érthető oldalt.

Volt olyan eset, amikor egy ügyfél csak egy villogó rendelési gombot szeretett volna, mert úgy gondolta, ettől több kattintást kap. A végén nem villogó elemet kapott, hanem finom kiemelést, rövid lenyomási állapotot és egy betöltési visszajelzést. Az oldal nem lett hangosabb, de használhatóbb lett. Ez a különbség a puszta díszítés és a valódi felületi döntés között.

Animált gombok ára

Az ár főleg attól függ, hogy csak látványterv kell, vagy működő kód is. Más munka egyetlen gombállapot megtervezése, és más egy teljes gombkészlet elkészítése több méretben, több állapottal, átadási dokumentációval. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert kimarad a tesztelés, a reszponzív ellenőrzés és az akadálymentességi szempont. Ez később javítási költséget okozhat.

Szerintem magánügyfélként akkor érdemes többet fizetni, ha a gomb üzleti döntési ponton áll. Ilyen például a rendelés, fizetés, ajánlatkérés vagy regisztráció. Egy dekorációs elemnél elég lehet az egyszerűbb megoldás. De ahol a kattintásból bevétel vagy kapcsolatfelvétel lesz, ott a részletek többet számítanak.

Animált gomb tervező választása

Animált gomb tervező választásánál nem elég azt nézni, hogy szépek-e a képek a portfólióban. Érdemes megnézni, hogyan gondolkodik a szakember a használhatóságról. Kérdez-e a célról. Tudni akarja-e, hogy a gomb mit indít el. Érdekli-e, hogy mobilon és asztali nézetben hogyan viselkedik az elem. Egy jó szabadúszó nem csak megrajzolja a hatást, hanem elmagyarázza, miért pont olyan hosszú az átmenet, és miért nem kell minden állapotba külön mozgás.

A Qjob.hu oldalán magánszemélyek is kereshetnek olyan szakembert, aki távolról vállal kisebb felületi munkákat. Itt fontos a pontos feladatleírás. Nem elég annyi, hogy szép gomb kell. Jobb megadni, hol jelenik meg a gomb, mit csinál, milyen eszközökön kell működnie, és milyen formában kell átadni a végeredményt. Ha van meglévő oldal vagy terv, azt is érdemes elküldeni.

Sokan ott hibáznak, hogy csak az árat hasonlítják össze. Pedig egy olcsó ajánlat mögött lehet, hogy nincs tesztelés, nincs több állapot, nincs mobilnézet, és nincs javítási kör. A másik gyakori hiba, amikor a megrendelő nem ad példát. A szakember így találgatni kezd, és az első verzió könnyen félremegy.

Online munkafolyamat és átadás

Az online munkafolyamat rövid feladatnál is legyen egyértelmű. Először jön a cél tisztázása. Ezután a szakember megnézi a meglévő felületet, majd javaslatot ad a mozgás irányára. A következő lépés lehet egy rövid látványos bemutató, egy animált minta vagy közvetlenül a működő változat. A javítások után történik az átadás.

Az átadás formája többféle lehet. Kaphat a megrendelő képernyőfelvételt, tervfájlt, rövid leírást, HTML és CSS részletet, vagy olyan fájlt, amelyet a fejlesztő be tud illeszteni. Ha nincs fejlesztő, akkor érdemes már a munka elején tisztázni, hogy a szabadúszó csak tervez, vagy be is építi a gombot. Ez sok félreértést megelőz.

A határidő egy egyszerű gombnál lehet akár egy nap is, de egy egységes gombrendszerhez több idő kell. Nem azért, mert maga a mozgás mindig bonyolult. Hanem azért, mert ellenőrizni kell a különböző állapotokat. Alap, lebegő, aktív, tiltott, betöltés alatti és sikeres állapot. Ezek együtt adják ki a használható felületet.

Egyedi gombanimáció minősége

Az egyedi gombanimáció minősége akkor látszik, amikor a felhasználó nem gondolkodik rajta. Csak használja. A mozgás rövid, a gomb olvasható, a kattintás után történik valami érthető, és az egész illik az oldal hangulatához. Én azt látom, hogy a legjobb megoldások sokszor alig feltűnőek. Nem azért jók, mert sokat mozognak, hanem mert pontosan akkor mozdulnak, amikor kell.

Fontos a sebesség is. A túl lassú animáció idegesítő. A túl gyors hatás viszont észrevehetetlen. Általában a rövid, finom átmenetek működnek jól. A kontraszt, az olvashatóság és a kattintható méret legalább olyan fontos, mint maga a látvány. Mobilon különösen. Ott nincs lebegő állapot, ezért más visszajelzés kell érintésre.

Ha a gomb egy űrlap elküldéséhez kapcsolódik, akkor a betöltési állapot sokat segít. A felhasználó látja, hogy a rendszer dolgozik. Nem kattint újra feleslegesen. Ha sikeres a művelet, rövid visszajelzés jöhet. Ha hiba van, akkor nem elég a piros szín. Érthető jelzés is kell.

Tipikus hibák animált gomboknál

A leggyakoribb hiba a túlzás. A gomb ugrál, villog, pulzál, árnyékot vált, közben ikon is mozog, és a felhasználó nem tudja, mire figyeljen. Ez nem prémium hatás. Inkább bizonytalanságot kelt. Sokan azt hiszik, hogy a több animáció több figyelmet hoz. Rövid távon lehet. De ha zavaró, akkor rontja az élményt.

Másik gond, amikor a mozgó gombok nincsenek összhangban az oldal többi elemével. Egy komoly szolgáltatáshoz nem biztos, hogy játékos ugrás illik. Egy fiatalos felülethez viszont túl merev lehet a teljesen statikus gomb. A szakember dolga az, hogy ezt az arányt megtalálja. Nem sablonból, hanem a cél alapján.

Az is hiba, ha a gomb csak egy nézetben működik jól. Asztali gépen látványos, mobilon viszont túl kicsi, túl gyors vagy nehezen érinthető. Egy online feladatnál ezért mindig kell legalább alapellenőrzés több képernyőméreten. Nem nagy dolog, de sok kellemetlenséget megfog.

Animált gombok javításokkal

Az Animált gombok készítése ritkán zárul le az első verzióval. Általában kell legalább egy javítási kör. A megrendelő látja a mozgást, érzi a ritmust, és csak akkor derül ki, hogy túl gyors, túl erős vagy nem elég egyértelmű. Ez természetes. A jó feladatleírás mégis csökkenti a felesleges köröket.

Érdemes előre megállapodni abban, hány módosítás tartozik az árba. Más egy szín finomítása, és más teljesen új animációs irányt kérni. A korrekt együttműködéshez a megrendelő rövid, pontos visszajelzést ad. Például azt, hogy a mozgás legyen lassabb, a színváltás legyen enyhébb, vagy a betöltési jelzés legyen egyértelműbb. Így a szakember gyorsabban tud javítani.

Végül a jó gomb nem különálló látványelem. Része az oldal logikájának. Segít dönteni, jelez, irányít, de nem nyomja el a tartalmat. Ha ezt sikerül eltalálni, akkor az animáció nem felesleges dísz lesz, hanem használható felületi rész.