Lépj be a jövőbe: Lenyűgöző animált jelölőnégyzetek és kapcsolók létrehozása!

Animált jelölők online felületekhez

Az Animált jelölők akkor hasznosak, ha a felhasználó azonnal látja, hogy egy választás, beállítás vagy kapcsolóállapot megváltozott. Ez lehet jelölőnégyzet, váltókapcsoló, választógomb, listaelem vagy bármilyen apró felületi elem, amely visszajelzést ad. A cél nem a látvány önmagáért. A cél az, hogy a kattintás után ne legyen bizonytalanság. A magánügyfélnek ezért olyan szabadúszó szakemberre van szüksége, aki érti a felület ritmusát, és nem csak mozgó grafikát készít.

Én azt látom, hogy sok online felületen a jelölők túl merevek vagy túl erősek. Az egyik véglet az, amikor semmi nem történik kattintás után. A másik, amikor az elem ugrál, villan, késik, és inkább elvonja a figyelmet. Egy jó animált jelölő rövid, egyértelmű és könnyen beilleszthető. Nem kell sokáig nézni. A felhasználó rákattint, látja a változást, és megy tovább.

Az ilyen feladatot gyakran mozgástervező, felülettervező vagy webes animációban jártas grafikus vállalja. A Qjob.hu ezen a felületen magánszakemberek munkáit teszi elérhetővé, nem céges szolgáltatásként. Ez különösen akkor jó, ha a megbízó konkrét, kisebb online feladatra keres embert, például kapcsolók, pipák, állapotjelzések vagy egyszerű interakciós mozgások készítésére.

Animált jelölők szerepe

Az animált jelölők szerepe a visszajelzés. A felhasználó megnyom valamit, és a rendszer válaszol. Ez lehet egy pipa finom kirajzolódása, egy kapcsoló átbillenése, egy kör kitöltése vagy egy ikon rövid állapotváltása. A mozgásnak itt világos jelentése van. Nem dísz, hanem információ.

Szerintem a legjobb jelölőanimációk szinte észrevétlenek. Pontosabban akkor tűnnek fel, amikor hiányoznak. Ha egy kapcsoló nem ad elég visszajelzést, a felhasználó újra rákattint. Ha túl lassú, a felület lassúnak érződik. Ha túl harsány, a kis döntés nagy eseménynek tűnik. Ezért kell arányosan megtervezni a mozgást.

A briefben érdemes megadni, hogy milyen állapotokat kell kezelni. Bekapcsolt és kikapcsolt helyzet. Hibás választás. Kötelező mező. Többes kijelölés. Részben kiválasztott állapot. Ezek más mozgást kérhetnek. Egy szabadúszó akkor tud jó munkát végezni, ha nem csak egy képet kap, hanem a használati helyzetet is érti.

Jelölő animáció típusok

A jelölő animáció lehet nagyon egyszerű, de lehet összetettebb is. Egy jelölőnégyzetnél gyakori a pipa rajzolása, a háttérszín váltása vagy a keret rövid kiemelése. Kapcsolónál fontos az átbillenés sebessége és az, hogy a gomb mozgása természetes legyen. Választógombnál a kitöltés és a méretváltozás adhat tiszta visszajelzést.

Az árak azért mozognak széles tartományban, mert nem mindegy, hogy egyetlen egyszerű elemről vagy teljes állapotkészletről van szó. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, főleg akkor, ha nincs tesztelés több háttéren és méretben. Egy kapcsoló például nagyban jól nézhet ki, de kis nézetben már bizonytalan lehet.

Tapasztalatom szerint az ügyfél akkor kap pontos ajánlatot, ha leírja az elemek számát, a kívánt állapotokat, a fájlformátumot és a javítási igényt. Jó, ha van képernyőkép vagy működő felület. Még jobb, ha az ügyfél megmondja, fejlesztőnek kell e átadni az anyagot, vagy csak látványtervként használja.

Animált jelölő szakember választása

Animált jelölő készítéséhez olyan szakembert érdemes választani, aki nem csak szépen rajzol, hanem ért az interakcióhoz is. A portfólióban érdemes figyelni a rövid mozgásokra. Nem a hosszú bemutatóvideó a fontos, hanem az, hogyan reagál egy kis elem kattintás után. Van e súlya. Nem késik e. Nem túl gyors e. Egy jó grafikus vagy mozgástervező ezekre figyel.

Sokan ott hibáznak, hogy csak az árat nézik. Ez érthető, mert a feladat kicsinek tűnik. De egy rossz animált jelölő sok helyen ismétlődhet a felületen. Ha zavaró, minden használatkor zavaró lesz. Szerintem érdemes inkább olyan ajánlatot választani, amelyben benne van legalább egy javítási kör és a végleges fájlok pontos listája.

Kérdezni is kell. Milyen formátumban adja át az animációt. Tud e több méretet készíteni. Figyel e a lassabb, nyugodtabb változatra. Meg tudja e mutatni a mozgást világos és sötétebb háttéren. Ezek egyszerű kérdések, de sokat elárulnak. Ha a szakember csak annyit válaszol, hogy megoldja, az kevés.

Online egyeztetés és határidő

Távoli munkánál a jelölő animáció folyamata rövid lehet, ha az alapadatok tiszták. Az első körben a megbízó elküldi a felület képét, a kívánt állapotokat és a példákat. Ezután a szakember javasolhat mozgásirányt. Ez lehet gyors próba vagy egyszerű előnézet. A véglegesítés csak ezután jön.

A határidő egy egyszerű jelölőnél akár egy nap is lehet. Egy kisebb csomagnál már több nap kell. Ha fejlesztői átadás is van, akkor külön időt kell hagyni az export ellenőrzésére. Nem jó, ha az utolsó pillanatban derül ki, hogy a fájl túl nagy, rossz méretű vagy nem abban a formátumban készült, amelyet a felület kezelni tud.

Volt olyan eset, amikor egy ügyfél csak egy kapcsolót kért egy beállítási oldalhoz. A feladat egyszerűnek tűnt. A próba után derült ki, hogy három állapot is kell. Kikapcsolt, bekapcsolt és függőben lévő állapot. A munka nem lett sokkal bonyolultabb, de a brief hiánya miatt újra kellett gondolni a mozgást. Ezért jobb az elején végigmenni az állapotokon.

Az online kommunikációban a pontos visszajelzés gyorsít. Nem elég azt írni, hogy legyen finomabb. Hasznosabb, ha az ügyfél megmondja, hogy a kapcsoló túl gyorsan indul, a pipa túl későn jelenik meg, vagy a színváltás túl erős. A szakember így konkrétan tud módosítani.

Animált kapcsolók minősége

Az animált kapcsolók minősége a részleteken múlik. A mozgás legyen rövid. A kezdés és a megállás legyen természetes. A felhasználó lássa az állapotváltást, de ne kelljen megvárnia a mozgás végét. Egy beállítási felületen ez különösen fontos, mert ott sok elem szerepelhet egymás alatt.

A minőséghez tartozik a következetesség is. Ha az egyik jelölő lassan vált, a másik gyorsan, a felület szétesettnek érződik. Ha a kapcsolók más ritmusban mozognak, az ügyfél nem biztos, hogy meg tudja fogalmazni a hibát, de érzi, hogy valami nem jó. Ezért hasznos egy kis szabályrendszer. Milyen hosszú legyen a mozgás. Milyen legyen a visszapattanás. Mikor változzon a szín.

Én magánügyfélként mindig kérnék előnézetet több helyzetben. Egy animáció önmagában becsapós lehet. Másként hat világos háttéren, sötétebb sávban, kisebb méretben vagy sok elem között. Ha a szakember ezt megmutatja, az bizalomra ad okot.

Animált jelölők tipikus hibái

Az animált jelölők leggyakoribb hibája a túlzás. Túl sok mozgás, túl erős színváltás, túl hosszú átmenet. A jelölő nem főszereplő. Csak visszajelzés. Ha minden kattintás látványos esemény, a felület hamar fárasztó lesz.

A másik hiba a bizonytalan állapot. A felhasználó nem tudja, hogy sikerült e a választás. Ez akkor fordul elő, ha a pipa halvány, a kapcsoló mozgása túl kicsi, vagy a végállapot nem különül el eléggé. Ilyenkor az animáció nem segít, hanem rontja a használatot.

Gondot okozhat a fájlformátum is. Egy szép animáció nem sokat ér, ha nem illeszthető be a felületbe. A megbízónak ezért már az elején érdemes megkérdeznie a fejlesztőt vagy a használni kívánt rendszert, milyen anyagra van szükség. Így a szabadúszó nem rossz irányba dolgozik.

Az Animált jelölők jó használata nem nagy trükk. Tiszta cél, rövid mozgás, pontos állapotok és használható átadás kell hozzá. Ha ezek megvannak, egy kis elem is sokat javíthat az online felület érthetőségén.