Betöltési animációk és oldalközötti átmenetek fejlesztése

Animációk fejlesztése

Az animációk fejlesztése akkor ad valódi értéket, ha a felület mozgása segíti a használatot, nem pedig elvonja a figyelmet. Egy magánmegrendelő számára ez általában azt jelenti, hogy a weboldal, a kisebb alkalmazás vagy a személyes szolgáltatói oldal finomabban reagál, gyorsabbnak érződik, és érthetőbben vezeti végig a látogatót. A Qjob.hu felületén sokan nem nagy stúdiót keresnek, hanem olyan szakembert, aki külön is elvállalja a betöltési animációk, az átmeneti mozgások és a kisebb felületi visszajelzések elkészítését.

Én személy szerint azokat a megoldásokat kedvelem, ahol a mozgás rövid, tiszta és célszerű. Nem hiszek a túl látványos effektekben, mert a legtöbb ember nem azért érkezik egy oldalra, hogy nézze a trükköket. Azért jön, hogy elolvasson valamit, időpontot kérjen, ajánlatot küldjön vagy rendeljen. Ha a mozgó elemek ebben segítenek, akkor jók. Ha lassítanak, akkor inkább ártanak. És sokan pont itt hibáznak, amikor az animációt dísznek tekintik, nem pedig használati eszköznek.

A betöltési animációk és az átmeneti animációk fejlesztése ma már nem ritka kérés. De attól még nem egyszerű. Egy frontendesnek vagy felületi fejlesztőnek azt is néznie kell, hogyan viselkedik a mozgás mobilon, gyengébb készüléken és eltérő képernyőméreten. És azt is, hogy a látvány ne ütközzön a használhatósággal. Szerintem egy jó munka ott kezdődik, hogy a szakember előbb megérti, miért kell a mozgás, és csak utána kezd el bármit felépíteni.

Mire jók a betöltési animációk

A betöltési animációk nem csak díszek. Akkor működnek jól, ha azt jelzik, hogy a rendszer dolgozik, vagy segítenek áthidalni egy rövid várakozást. Ha valaki rákattint valamire, de semmi nem történik, hamar azt hiszi, hogy az oldal megállt. Egy jól elhelyezett visszajelzés ezt a bizonytalanságot csökkenti. Ilyen lehet egy finom forgó jelzés, egy egyszerű töltési sáv vagy egy vázlatos helykitöltő megoldás, ami mutatja, hogy hamarosan tartalom jelenik meg.

Sokan követik el azt a hibát, hogy a betöltési állapotot túl hosszúra vagy túl látványosra tervezik. Ettől a felület nem lesz modernebb. Inkább türelmetlenebb lesz tőle a látogató. Az én tapasztalatom szerint a rövidebb, világosabb mozgás sokkal jobb. Az ember csak azt akarja tudni, hogy történt valami. Nem akar egy kisfilmet végignézni két kattintás között. Ez különösen igaz akkor, ha a megrendelő saját szolgáltatást, oktatást, rendelést vagy időpontfoglalást kínál.

Volt egy eset, amikor egy ügyfél azt mondta, hogy nagyon szereti a látványos nyitó animációt az oldalán. A gond csak az volt, hogy a látogatók egy része már azelőtt bezárta az oldalt, hogy a fő tartalom megjelent volna. Nem azért, mert rossz volt az oldal. Hanem azért, mert úgy érezték, várniuk kell. Ilyenkor a mozgás már nem segít, hanem akadály lesz.

Átmeneti animációk a felületen

Az átmeneti animációk fejlesztése főleg ott hasznos, ahol egy elem állapota változik. Megnyílik egy űrlap, becsukódik egy menü, megjelenik egy sikeres küldést jelző üzenet, előtűnik egy kép vagy eltűnik egy panel. Ezek az apró mozgások segítenek az embernek megérteni, mi honnan hová került. És ez fontosabb, mint elsőre látszik. A szem könnyebben követi a változást, ha van rövid átvezetés.

De itt is sok a túlzás. Gyakori hiba, hogy minden egyes elem mozog. Külön csúszik be a cím, külön ugrik a gomb, külön halványodik a kép, külön remeg az ikon. Ettől a felület fárasztó lesz. Én inkább azt mondanám, hogy két-három jól megválasztott mozgási szabály sokkal többet ér, mint tíz különleges effekt. A felhasználó nem azért marad az oldalon, mert sok minden mozog. Azért marad, mert könnyű rajta haladni.

Egy jó frontend fejlesztő vagy mozgásra érzékeny tervező figyel arra, hogy az átmeneti animációk ne legyenek öncélúak. A mozgásnak szerepe van. Visszajelzést ad, kapcsolatot mutat, vagy csökkenti a hirtelen váltás érzetét. Ha egyik sem teljesül, akkor jobb elhagyni.

Animációk fejlesztése árak

Az árak attól függnek, hogy egyetlen kisebb részletet kell megoldani, vagy komplett felületi mozgásrendszert kell kialakítani. Nem ugyanaz egy gomb visszajelzése, egy betöltési animáció, egy több lépéses oldalváltás vagy egy teljes nyitó szakasz mozgásának megtervezése. Az is számít, hogy a szakember csak elkészíti az animációt, vagy teszteli is több eszközön, javítja a sebességet, és összehangolja a meglévő felülettel.

Az én véleményem az, hogy túl olcsón ritkán kap az ember kiforrott munkát ezen a területen. Lehet találni nagyon alacsony árat, de ott sokszor előre gyártott megoldás, rövid próbálkozás vagy nehezen módosítható kód kerül átadásra. Olcsóbban ugyan csábító a választás, de később több javítás lehet belőle. Szerintem a gyanúsan olcsó animációs munka gyakran pontosan annyit ér, amennyibe kerül.

Az árak tájékoztató jellegűek, de érzékeltetik a különbséget. Én úgy látom, hogy 12.000 forint alatt inkább csak apró igazítás fér bele. A teljesebb, átgondolt munka ennél többe kerül. És szerintem a 90.000 forint feletti sáv sem túlzás, ha többféle átmeneti animációt, mobil igazítást és javítás utáni ellenőrzést is kér a megrendelő.

Kit érdemes megbízni

Nem minden fejlesztő jó választás animációs feladatra. Van, aki gyors a kódban, de nem érzi, mikor válik sokká a mozgás. Más nagyon jól tervez, de nem tudja tisztán átültetni a felületbe. Magánmegrendelőként én azt nézném először, hogy a szakember meg tudja-e mutatni korábbi munkáit valós használati helyzetben. Nem csak különálló látványokat, hanem olyan példákat, ahol az animáció tényleg segít a használatban.

Jó jel, ha kérdez a célról. Rossz jel, ha rögtön effektet ajánl. Egy felületi fejlesztőnek vagy mozgásra specializált szakembernek tudnia kell, hogy mire szolgál az oldal, milyen közönség használja, és melyik rész lassú vagy zavaró most. Sokan ott rontják el, hogy a leglátványosabb portfóliót választják. Pedig a legjobb választás sokszor nem a legfeltűnőbb, hanem a legfegyelmezettebb munka.

Én személyesen jobban bízom abban, aki mer egyszerűt javasolni. Ha valaki mindenre nagy mozgást ajánl, ott gyanús, hogy a látvány fontosabb neki, mint az eredmény. Egy jó szakember néha azt mondja, hogy ide elég egy rövid halványítás, oda pedig semmi sem kell. És ez nekem meggyőzőbb, mint a folyamatos mutatvány.

Mobilon másként működik

A mobilos használatnál a mozgások gyorsabban válnak idegesítővé. Kisebb a képernyő, rövidebb a figyelem, és gyakran gyengébb az eszköz is. Emiatt az animációk fejlesztése során külön kell figyelni arra, hogy a mozgás ne akassza meg a görgetést, ne nyomja lejjebb a fontos tartalmat, és ne fedje ki késve azt, amit a látogató rögtön látni akar. Az átmeneti animációk itt akkor jók, ha szinte észrevétlenül működnek.

Sok felületen az a gond, hogy asztali nézetben még elegáns a mozgás, mobilon viszont lomha lesz. És van még egy tipikus hiba. A tervező egérrel gondolkodik, a látogató viszont ujjal használja az oldalt. Ami lebegésre jól működik, az érintésnél sokszor már nem értelmezhető ugyanúgy. Ezért fontos, hogy a szakember ne csak megépítse, hanem kipróbálja valódi használat közben is.

Az én tapasztalatom szerint egy visszafogottabb mozgásrendszer szinte mindig jobban teljesít telefonon. És nem csak gyorsaságban, hanem bizalomban is. Az emberek kevésbé érzik úgy, hogy valami trükközik előttük.

Teljesítmény és kényelmes használat

Az animációk fejlesztése nem választható el a sebességtől. Ha egy oldal akadozik, késve reagál vagy darabosan mozog, akkor a felhasználó nem finomságot lát, hanem hibát. Sok megrendelő csak a látványt nézi, pedig a háttérben ott van a teljesítmény kérdése is. Egy jól felépített mozgás nem terheli feleslegesen a készüléket, nem lassítja le a betöltést, és nem okoz zavaró ugrásokat.

Itt szokott kialakulni a vita a megrendelő és a szakember között. A megrendelő többet szeretne mutatni, a fejlesztő pedig visszafogna. Szerintem ebben az esetben többnyire a visszafogottabb irány a jobb. Sok ember követ el hibát akkor, amikor minden üres helyet meg akar tölteni mozgással. De a jó felület nem attól jó, hogy állandóan történik valami rajta. Hanem attól, hogy a fontos pillanatokban történik valami, a többi részen pedig nyugalom van.

Volt már olyan helyzet, amikor egy megrendelő ragaszkodott a nagy nyitó mozgáshoz, több belépő elemhez és külön gombanimációhoz. A kész munka elsőre hatásosnak tűnt. Aztán kiderült, hogy régebbi telefonokon darabossá válik, és a látogatók gyorsabban kilépnek. Utána vissza kellett egyszerűsíteni az egészet. Ezért mondom, hogy a kevesebb itt gyakran tényleg több.

Mikor elég kevés mozgás

Nem minden oldalnak kell látványosnak lennie. Van, amikor egyetlen finom betöltési jelzés, egy rövid panelváltás és egy jól megoldott sikerüzenet elég. Különösen igaz ez személyes szolgáltatásoknál, kisebb bemutatkozó oldalaknál vagy egyszerű foglalási felületeknél. A látogató sokszor csak gyorsan akar dönteni. Ilyenkor az átmeneti animációk fejlesztése nem a figyelem megragadásáról szól, hanem arról, hogy ne legyen zavaró törés a használatban.

Én ezt a visszafogott irányt tartom biztonságosabbnak. Egy privát megrendelő ritkán akar hónapokig finomítani egy mozgásrendszert. Inkább azt szeretné, hogy az oldal rendezett, mai hatású és könnyen kezelhető legyen. Ehhez nem kell állandóan mozgó felület. Elég néhány jól elhelyezett reakció. A többi már csak ízlés kérdése.

Ha valaki szakembert keres erre a munkára, szerintem azt nézze, mennyire tud egyszerűen gondolkodni. A jó animáció nem azért jó, mert feltűnik. Hanem azért, mert természetesnek érződik. És ezt sokkal nehezebb megcsinálni, mint egy hangos látványelemet. A jó eredmény végül többnyire csendes. De éppen ezért működik.