Gombok állapotváltásának animációs fejlesztése

Gombok animációja

A gombok animációja akkor hasznos, ha a felhasználó azonnal látni akarja, hogy a kattintás megtörtént, a felület reagált, és a következő lépés elindult. Egy jó mozgás nem dísz, hanem visszajelzés. Ezen az oldalon olyan szakembereket lehet találni a Qjob.hu felületén, akik gombanimáció, kattintási visszajelzés és állapotváltás tervezésében segítenek magánügyfeleknek is. Ide tartozik a weboldal, a mobilos felület, a regisztrációs folyamat, az űrlapok és a foglalási képernyő is.

Sokan azt hiszik, hogy elég, ha a gomb szép. De a használat közben inkább az számít, hogy egyértelmű legyen, mikor nyomható meg, mikor tiltott, mikor dolgozik a rendszer, és mikor sikeres a művelet. A finom mozgás ebben segít. Nem kell feltűnőnek lennie. Sőt, személy szerint én a rövid, halk megoldásokat szeretem, mert ezek támogatják a feladatot, nem vonják el a figyelmet.

Magánügyfeleknél ez gyakran akkor kerül elő, amikor valaki saját weboldalt készít, új időpontfoglalót rendel, egyszerűsítené a kapcsolatfelvételi űrlapot, vagy azt látja, hogy sok a félbehagyott kattintás. Ilyenkor egy felhasználói felület tervező vagy egy kezelőfelületet építő fejlesztő nemcsak a mozgást nézi, hanem azt is, hol bizonytalanodik el az ember. Egy jó kattintási animáció megmutatja az okot és a következményt. Ezért fontosabb, mint elsőre látszik.

Mikor segít a gombanimáció

A gombanimáció főleg akkor javít a használhatóságon, ha több állapot között kell gyorsan és tisztán váltani. Ilyen az alapállapot, az érintett állapot, a lenyomott állapot, a töltés, a sikeres küldés és a hiba. Ha ezek között nincs különbség, a felhasználó bizonytalan lesz. Újra kattint. Vagy azt hiszi, nem történt semmi. És ott kezdődik a gond.

Saját tapasztalatom szerint a leggyakoribb hiba az, amikor a mozgás túl hosszú. Sok megrendelő először látványos megoldást kér, mert annak erős vizuális hatása van. De amikor éles használatban kipróbálják, már zavarja őket. Egy gomb állapotváltása jobb, ha gyors és következetes. A túl hosszú átmenet lassúnak mutatja a rendszert akkor is, ha technikailag gyors.

Volt egy eset, amikor egy ügyfél online jelentkezési oldalt készíttetett. A beküldés gomb szépen mozgott, de nem volt külön töltési állapot. Az emberek kétszer is rányomtak, mert a rendszer egy másodpercig hallgatott. A vége dupla beküldés lett. Nem kellett teljes újratervezés. Elég volt egy rövid lenyomott állapot, utána egy dolgozik jelzés, végül egy tiszta sikeres visszajelzés. A hibaarány rögtön csökkent.

És van még egy fontos rész. A mozgás nemcsak azt mutatja, hogy történt valami, hanem azt is, hogy miért történt. Ha egy gomb le van tiltva, annak látszania kell. Ha egy lépés még nem érhető el, azt is jelezni kell. Ilyenkor a visszafogott átmenet, a színváltás és a kis méretbeli változás együtt sokkal érthetőbb, mint bármilyen hosszú magyarázat.

Gyakori hibák a gomboknál

Sok magánmegrendelő ott veszít időt és pénzt, hogy külön kezeli a kinézetet és külön a működést. Pedig a kettő ugyanazt a feladatot szolgálja. A gombok animációja nem választható le a gomb szövegéről, a helyéről, a méretéről és a környezetéről. Ha maga a gomb nem elég egyértelmű, a mozgás sem menti meg.

Gyakori hiba az is, amikor minden gomb ugyanúgy mozog. Elsőre következetesnek tűnik, de valójában nem minden művelet egyforma. Más visszajelzés kell a küldéshez, más a mentéshez, és más a veszélyes törléshez. A felhasználó ebből tanul. Ha minden állapot ugyanazt az érzetet adja, romlik az érthetőség. Szerintem itt sokan túlságosan a látványra figyelnek, miközben a feladat logikája háttérbe szorul.

Sokan hibáznak akkor is, amikor mobilon ugyanazt az animációt akarják viszontlátni, mint asztali gépen. Pedig az érintés más. Nincs lebegő állapot, rövidebb a figyelem, és gyakoribb a bizonytalan visszajelzés. Mobilon a megnyomott állapot és a töltési jel sokszor még fontosabb. Egy tapasztalt szakember ezt külön kezeli. Nem másol, hanem a használati helyzethez igazít.

És ott van az akadálymentesség kérdése. A túl erős mozgás nem mindenkinek jó. Van, akit zavar, van, akinek felesleges. Egy jó felhasználói felület tervező ezért finoman dolgozik. Rövid ideig tartó, kis kiterjedésű és egyértelmű mozgást használ. Ezt több használhatósági irányelv is támogatja, és a gombállapotok közti kisebb vizuális eltérések épp azt a célt szolgálják, hogy a felhasználó meg tudja különböztetni az elérhető, tiltott, fókuszált vagy lenyomott állapotot. citeturn217823search6turn217823search8turn217823search12

Gombok animációja árak

A gombok animációja ára attól függ, hány állapotot kell megtervezni, van-e meglévő arculat, kell-e prototípus, és a szakember csak tervet ad át vagy a megvalósításban is részt vesz. Olcsóbb lehet, ha csak egyetlen fő gombot kell javítani egy egyszerű oldalon. Drágább, ha teljes folyamatot kell átnézni, több képernyővel, hibakezeléssel és mobilos igazítással.

Én úgy látom, hogy a túl alacsony ár itt gyanús. Olcsóbban 12.000 forint alatt ritkán lesz valóban átgondolt munka, mert a szakembernek nemcsak rajzolnia kell, hanem végig is kell gondolnia a használatot. Aki csak egy látványos mozdulatot ad, de nem vizsgálja meg a kattintás utáni állapotot, az könnyen félmunkát végez. De a túl magas ár sem mindig indokolt. Egy kisebb oldalon sokszor pár jól kiválasztott állapotváltás is elég.

Ezek irányadó összegek magánügyfeleknek. Ha a munka része a kutatás, a próbaverzió vagy a fejlesztővel közös ellenőrzés, az külön emelheti a végösszeget. De jobb tisztán látni előre, mint később javítgatni egy rosszul működő felületet. A javítás végül szinte mindig többe kerül.

Hogyan válassz szakembert

Ha ilyen munkára keresel embert, ne csak azt nézd, mennyire szépek a mintaképei. A fontos kérdés inkább az, hogy tudja-e megmutatni, melyik mozgás milyen problémát old meg. Egy jó felhasználói felület tervező vagy mozgó felületekkel dolgozó fejlesztő el tudja mondani, mi történik kattintás előtt, alatt és után. És azt is, mi változik mobilon.

Én személy szerint jobban bízom abban a szakemberben, aki egyszerű nyelven beszél. Ha valaki csak divatos szavakat használ, de nem tudja megmutatni a gyakorlati hasznot, abból ritkán lesz jó együttműködés. Kérj példát korábbi munkára. Nézd meg, hogy a gomb láthatóan reagál-e, van-e sikeres és hibás állapot, és érthető-e a folyamat első ránézésre.

Sokat segít az is, ha a megbízott röviden felméri a teljes helyzetet. Nemcsak a gombot, hanem a mezőket, a hibaüzenetet, a képernyő ritmusát is. Sok félresikerült megoldásnál nem a gomb az egyetlen gond, csak ott látszik meg először. Aki ezt felismeri, az valószínűleg használhatóbb eredményt ad.

A webes használhatósági források is azt emelik ki, hogy az animáció legyen rövid, visszafogott és célhoz kötött, a gombállapotok pedig kis, de jól érzékelhető eltéréssel kommunikálják, hogy egy elem éppen használható, lenyomott, fókuszált vagy tiltott. Ezért a jó szakember nem önmagáért mozgat, hanem a rendszer állapotát teszi világossá. citeturn217823search2turn217823search6turn217823search10turn217823search15

Hol érdemes javítani a gombállapotokat

A legtöbb magánügyfélnél nem az egész oldalt kell újratervezni. Elég megtalálni azokat a pontokat, ahol a felhasználó bizonytalan lesz. Ilyen a regisztráció, a bejelentkezés, az ajánlatkérés, az időpontfoglalás, a kosár véglegesítése és a visszahívás kérése. Ezeken a helyeken a gomb állapotváltása közvetlenül hat a befejezett műveletek számára.

Jó megoldás lehet akkor is, ha egy régebbi oldalon sok a félbeszakadt folyamat. Néha nem kell új rendszer. Elég egy tisztább kattintási animáció, egy rövidebb visszajelzés, vagy egy jobban látható tiltott állapot. A gombok animációja akkor működik jól, ha szinte észrevétlen. A felhasználó nem azt mondja, milyen szép volt a mozgás, hanem azt, hogy könnyű volt használni.

És butaság lenne azt állítani, hogy minden felületnek szüksége van rá. Van olyan egyszerű oldal, ahol a túl sok finomítás csak időhúzás. De ahol több lépés van, ott a jó gombanimáció gyorsan megtérül. Nem feltétlen pénzben mérhető először, hanem kevesebb hibában, kevesebb bizonytalanságban és tisztább működésben. Ez magánoldalnál ugyanúgy számít, mint egy nagyobb rendszerben.

Ha valaki most keres erre embert, szerintem az a legjobb indulás, ha pontosan leírja, hol akadnak el a látogatók, melyik gombnál bizonytalan a működés, és mi a kívánt végállapot. Ebből egy tapasztalt szakember hamar meg tudja mondani, hogy elég-e egy kisebb korrekció, vagy érdemes teljesebb felülvizsgálatot kérni. Így a munka nem lesz túlzó, de félkész sem.