Lépésről lépésre: Egyedi animált előrehaladási mutatók készítése!

Animált jelzők online felületekhez

Az Animált jelzők akkor hasznosak, ha egy webes felületen az ügyfélnek azonnal értenie kell, hogy valami történik, halad vagy még feldolgozás alatt áll. Ilyen lehet egy betöltési állapot, egy elküldött űrlap visszajelzése, egy fájlfeltöltés folyamata vagy egy több lépésből álló rendelés. A cél nem a látvány önmagáért. A cél az, hogy a felhasználó ne bizonytalanodjon el. Én azt látom, hogy sok magánügyfél akkor kezd ezzel foglalkozni, amikor a meglévő oldal már működik, de a használata mégis darabosnak érződik.

Egy jó animált állapotjelző rövid, tiszta és nem vonja el a figyelmet a feladatról. A túl sok mozgás zavaró. A túl kevés visszajelzés viszont bizonytalanságot okoz. Szerintem ez a terület pont azért kényes, mert kicsinek látszik, mégis sokat ront vagy javít az összképen. Egy gomb körüli apró jel, egy lépésmutató vagy egy finom töltési animáció el tudja dönteni, hogy a látogató vár, kattint még egyszer vagy bezárja az oldalt.

A Qjob.hu felületén olyan magánszakembert lehet keresni, aki távolról vállal ilyen feladatot. Itt a megbízó általában képernyőképet, leírást, mintát vagy meglévő oldalcímet ad át. A szakember ezek alapján tervezi meg vagy fejleszti le a mozgó jelzést. Nincs szükség személyes találkozóra. A munka egyeztetéssel, fájlküldéssel, próbanézettel és javítási körökkel halad.

Mikor kell animált jelző

Animált jelző akkor kell, amikor a felhasználó egy művelet után nem kap elég gyors visszajelzést. Ez gyakori űrlapoknál, foglalási folyamatoknál, belépési oldalaknál, fizetési előkészítésnél, ügyfélfiókoknál és fájlfeltöltésnél. A mozgó állapotjelzések segítenek abban, hogy a látogató értse a rendszer állapotát. Nem kell találgatnia, hogy lefagyott az oldal vagy csak várni kell.

Tapasztalatom szerint sokan ott hibáznak, hogy minden apró részletet mozgatni akarnak. Ez nem javítja a felületet. Inkább fárasztóvá teszi. A jó jelzés ott jelenik meg, ahol döntési helyzet van. Például küldés után, mentés közben vagy lépésváltásnál. Egy magánügyfélnek nem kell minden szakmai kifejezést ismernie. Elég, ha pontosan leírja, hol bizonytalan a felhasználói út.

Volt olyan eset, amikor egy ügyfél csak annyit kért, hogy a gomb legyen modernebb. A beszélgetés közben kiderült, hogy a gond nem a gomb formája volt, hanem az, hogy kattintás után nem történt látható változás három másodpercig. A felhasználók emiatt többször kattintottak, és ez hibás beküldéseket okozott. Egy egyszerű töltési jel és egy rövid állapotszöveg megoldotta a problémát. Nem nagy fejlesztés volt, de valódi hibát szüntetett meg.

Animált jelző árak

Az ár főként attól függ, hogy kész felülethez kell apró módosítás, vagy teljesen új jelzőrendszert kell megtervezni. Számít az is, hogy csak látványterv készül, vagy működő kód is kell. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert a mozgás időzítése, a reszponzív viselkedés és a hibajelzések ellenőrzése időt kér. Nem mindig sokat, de elég figyelmet ahhoz, hogy ne legyen esetlen.

Magánmegbízásnál érdemes előre tisztázni, hogy az ár tartalmazza e a javításokat. Egy kör módosítás általában reális. Három vagy négy kör már csak akkor fér bele, ha ez külön meg van beszélve. Szerintem a legjobb ár nem mindig a legalacsonyabb. Jobb egy érthető ajánlat, amelyben látszik a feladat, a határidő, az átadott fájlok köre és a javítás módja.

Animált állapotjelző szakember választása

A megfelelő szakember kiválasztásánál nem elég azt nézni, hogy tud e szép mozgást készíteni. Fontosabb, hogy érti e a felhasználói helyzetet. Egy felülettervező akkor dolgozik jól, ha megkérdezi, hol jelenik meg a jelzés, meddig tart a folyamat, mi történik hiba esetén, és milyen eszközön használják a felületet. Ezek egyszerű kérdések, mégis sokat mondanak a hozzáállásról.

Érdemes portfóliót kérni. Nem hosszú bemutatkozást, hanem konkrét példát. Olyat, ahol látszik a mozgás, az állapotváltás és a végeredmény. Ha a szakember csak általános képeket mutat, abból nehéz eldönteni, hogyan dolgozik valós felületen. Egy fejlesztő esetében hasznos, ha meg tudja mondani, milyen formában adja át a munkát. Lehet rövid kódrészlet, beépíthető összetevő vagy tervezőfájl.

Sokan ott hibáznak, hogy kizárólag látvány alapján választanak. Egy mozgás lehet szép, de lassíthatja az oldalt, zavarhatja az olvasást vagy nem működik jól kisebb kijelzőn. A jó online szakember nem csak elkészíti az animációt, hanem jelzi, ha az ötlet túl sok lenne. Ez nem akadékoskodás. Ez szakmai felelősség.

Online munkafolyamat és átadás

Az online munka akkor halad jól, ha a megbízó röviden leírja a célt. Nem kell hosszú dokumentum. Elég egy képernyőkép, egy mondat a problémáról és egy példa arra, milyen jellegű mozgás tetszik. A szakember ez alapján visszakérdez, majd javaslatot ad a megoldásra. Ezután jöhet a látványterv vagy a működő próba.

A folyamat többnyire négy részből áll. Egyeztetés, első változat, javítás, végső átadás. A határidő egyszerű feladatnál akár egy két nap is lehet. Összetettebb felületnél inkább néhány munkanap. Ha több állapot van, például betöltés, siker, hiba és megszakítás, akkor a munka nem csak rajzolásból áll. Át kell gondolni, hogy a felhasználó mit lát minden helyzetben.

Az átadásnál fontos, hogy a megbízó pontosan tudja, mit kap. Kép vagy videó önmagában nem mindig elég. Ha a jelzést be kell építeni egy oldalba, akkor fájlokra, kódra vagy fejlesztői leírásra is szükség lehet. De ha csak terv kell egy későbbi fejlesztéshez, akkor elég lehet egy szerkeszthető látványfájl és egy rövid magyarázat. A világos átadás sok félreértést megelőz.

Minőség és gyakori hibák

Az Animált jelzők minősége nem attól jó, hogy sokat mozognak. Attól jó, hogy pontosan jelzik az állapotot. A túl gyors animáció idegesítő lehet. A túl lassú azt sugallja, hogy az oldal nehézkes. A túl nagy mozgás elviszi a figyelmet. A túl halvány jelzést pedig sokan észre sem veszik. Ezért kell arányban gondolkodni.

Gyakori hiba, hogy a megbízó nem beszél a hibás állapotokról. Pedig a felület nem csak akkor működik, amikor minden sikerül. Lehet sikertelen küldés, megszakadt kapcsolat, hiányzó adat vagy túl nagy fájl. Ezekre is kell visszajelzés. Ha nincs, a felhasználó magára marad. Én azt látom, hogy egy egyszerű hibaüzenet és egy tiszta vizuális visszajelzés többet ér, mint egy bonyolult animáció.

Másik tipikus gond a következetlenség. Az egyik gomb máshogy jelez, mint a másik. Az egyik oldalon kör jel van, a másikon sáv, a harmadikon csak szöveg. Ettől a felület szétesettnek tűnik. Nem kell mindent egyformára készíteni, de legyen felismerhető rendszer. A felülettervező ebben tud segíteni, mert nem különálló díszeket néz, hanem a teljes használati helyzetet.

Brief animált jelző készítéséhez

Egy jó brief rövid és konkrét. Tartalmazza, hol jelenjen meg a jelzés, milyen művelethez kapcsolódik, mennyi ideig tarthat a várakozás, és mi legyen a sikeres vagy hibás állapot. Hasznos az is, ha a megbízó megadja a meglévő színeket, betűtípust, gombformát és a felület hangulatát. Így a mozgó jelzés nem idegen elem lesz, hanem illeszkedik a környezetéhez.

Nem baj, ha a megbízó nem tudja pontosan, milyen megoldás kell. A szakember dolga, hogy ebből működő javaslatot készítsen. De a célt akkor is meg kell fogalmazni. Például legyen látható, hogy a rendelés feldolgozás alatt áll. Vagy legyen egyértelmű, hogy a fájl feltöltése még tart. Ezek egyszerű mondatok, mégis irányt adnak.

Tapasztalatom szerint a legjobb együttműködés ott alakul ki, ahol a megbízó nem csak azt mondja el, mit szeretne látni, hanem azt is, mitől fél. Fél attól, hogy a látogató türelmetlen lesz. Fél attól, hogy a felület olcsónak tűnik. Fél attól, hogy a jelzés nem működik telefonon. Ezek valós szempontok. És gyakran pontosabbak, mint egy hosszú technikai leírás.

Az Animált jelzők készítése kis feladatnak tűnhet, de a végeredmény a használhatóság része. Ha a jelzés érthető, a felhasználó nyugodtabb. Ha a mozgás visszafogott, a felület rendezettebb. Ha az átadás pontos, a további fejlesztés is könnyebb. Ezért érdemes olyan szakemberrel dolgozni, aki nem csak mozgatni tud elemeket, hanem érti, miért van szükség a jelzésre.