Egyedi kurzorok és hover hatások fejlesztése

Egyedi kurzorok fejlesztése

Az egyedi kurzorok fejlesztése akkor hasznos, ha a felületen a mutató nem csak dísz, hanem tényleg segít az eligazodásban. Ilyenkor a látogató hamarabb érti meg, hogy melyik elem kattintható, mi húzható, hol indul el egy galéria, és hol változik meg az állapot. A Qjob.hu oldalon sok magánügyfél nem kész rendszert keres, hanem olyan szakembert, aki egy meglévő oldalon vagy alkalmazásban rendbe teszi ezt az apró, de feltűnő részletet.

Sokan túl könnyen kezelik ezt a témát. Pedig a kurzor viselkedése rögtön elárulja, mennyire átgondolt a felület. Ha a mutató késik, villog, eltakar tartalmat, vagy más alakot mutat, mint amit a helyzet indokol, az ember bizonytalan lesz. És ha bizonytalan, kevesebbet kattint. Nekem az a tapasztalatom, hogy egy visszafogott saját mutató sokkal többet ér, mint egy látványos, de nehezen használható megoldás. Személy szerint az olyan munkát preferálom, ahol a mozgás rövid, a váltás tiszta, és a kurzor csak akkor tér el az alapformától, ha annak világos oka van.

Az is gyakori, hogy valaki csak azért kér saját mutatót, mert látott egy erős vizuális példát egy portfólió oldalon. De egy bemutatkozó oldal, egy időpontfoglaló felület és egy regisztrációs oldal más logika szerint működik. Magánügyfeleknél sokszor fontosabb a kiszámíthatóság, mint a különlegesség. Egy jó felülettervező vagy frontend fejlesztő ezt már az elején megmondja, és nem épít be olyan effektet, ami pár nap után idegesítővé válik.

Mikor működik jól a saját mutató

A saját mutató akkor jó, ha egyértelmű feladatot kap. Például jelezheti, hogy az elem mozgatható, hogy a kép nagyítható, vagy hogy a kártya fölött egy másik réteg nyílik meg. Ilyenkor az egyedi kurzorok fejlesztése nem öncélú, hanem a használhatóság része. Ezt sok ügyfél későn veszi észre, mert először csak a látványra figyel.

Sok hiba abból adódik, hogy a kurzor túl nagy. Vagy túl lassan követi az egeret. Vagy annyira díszes, hogy elfedi a gomb szélét és a link pontos helyét. Sokan ott rontják el, hogy ugyanazt a megoldást akarják asztali gépre és mobilra is ráhúzni. De mobilon nincs klasszikus mutató, ezért ott inkább az érintési visszajelzés számít. Egy felületfejlesztő ezt külön kezeli, és nem próbál minden eszközön ugyanazzal a trükkel dolgozni.

Volt már olyan eset, amikor egy ügyfél ragaszkodott egy kör alakú, folyamatosan növekvő mutatóhoz, mert elegánsnak látta. A tesztelésnél viszont kiderült, hogy a felhasználók nem találták elsőre a szövegmező végét, és a kisebb linkekre is rosszabb arányban kattintottak. A végén a szakember csak két állapotot hagyott meg, egy alap mutatót és egy finom nagyítási jelzést a képeknél. Kevésbé volt látványos, de érezhetően jobb lett. Szerintem pont ez a különbség a divatos és a használható megoldás között.

Érdemes azt is figyelni, mennyi helyen vált állapotot a mutató. Ha minden második elemnél történik valami, a látogató hamar elfárad. Ha viszont csak a fontos pontokon kap visszajelzést, akkor a mozgás természetesnek hat. Egy rutinos UX szakember vagy frontend fejlesztő általában már a drótváz alapján látja, hol van szükség váltásra, és hol jobb békén hagyni az alap viselkedést.

Egyedi kurzorok fejlesztése árak

Az ár attól függ, hogy csak egy egyszerű állapotváltás készül, vagy teljes viselkedésrendszert kell építeni animációval, hover logikával és teszteléssel. Aki olcsón kér ilyet, gyakran csak egy gyors látványelemet kap, ami pár böngészőben működik, máshol meg szétesik. Őszintén szólva a túl olcsó ajánlatokkal én mindig óvatos lennék. A nagyon alacsony díj sokszor azt jelzi, hogy a szakember nem számolt a finomhangolással, pedig pont az viszi el az időt.

Az egyedi kurzorok fejlesztése általában nem önálló nagy projekt, hanem egy nagyobb felületi javítás része. Ezért a szakember sokszor óradíjban vagy kisebb csomagban gondolkodik. Tapasztalatom szerint a túl olcsó sáv alatt ritkán lesz valóban jó a végeredmény. Főleg akkor nem, ha az oldal már kész van, és utólag kell beleilleszteni az új viselkedést. Ilyenkor a javítás néha több munka, mint a tiszta fejlesztés lett volna.

Hogyan válassz szakembert

Először ne azt nézd, hogy mennyire látványos a portfóliója. Inkább azt, hogy tud-e egyszerűen beszélni a használhatóságról. Egy jó szakember megkérdezi, kik használják az oldalt, milyen képernyőn, milyen célból, és melyik ponton zavaró most a működés. Ha rögtön csak effektekről beszél, az nekem intő jel. A megbízás előtt érdemes konkrét példát kérni arra, milyen állapotokat különböztetne meg, és mit hagyna érintetlenül.

Szerintem a legjobb választás az, aki tud nemet mondani. Sok magánügyfél úgy érkezik, hogy valami különlegeset akar. Ez teljesen érthető. De sokan hibát követnek el, amikor a saját tetszésüket fontosabbnak veszik, mint a használat közbeni egyértelműséget. Egy tapasztalt UI tervező vagy frontend fejlesztő nem minden ötletet teljesít szó szerint. Inkább megmutatja, melyik megoldás működik nyugodtan és melyik okoz majd félrekattintást.

Nézd meg azt is, hogy a szakember vállal-e javítást teszt után. Ez fontos. A kurzor viselkedése sokszor csak használat közben mutatja meg a hibáit. Lehet, hogy egy asztali gépen rendben van, de kisebb kijelzőn már túl közel kerül egy szöveghez. Lehet, hogy sötét háttéren jó, világos képnél viszont elveszik. Ilyen helyzetekben nem az számít, ki készítette gyorsabban, hanem ki tudja pontosan kijavítani.

Én külön figyelnék arra, hogy legyen rövid átadás a végén. Nem hosszú dokumentáció kell, hanem tiszta összefoglaló. Mi változott, hol aktív a mutató, hol nem, és melyik elemekhez nyúlt a fejlesztő. Ez később rengeteg félreértést megelőz.

Budapest kerületei és az agglomeráció

Bár az ilyen munka legtöbbször online zajlik, sok magánügyfél mégis jobban szereti, ha a szakember elérhető Budapest valamelyik kerületében vagy az agglomerációban. Ennek főleg akkor van értelme, ha a megbízás nem csak saját mutatóról szól, hanem több felületi javításról is. A belső kerületekben sok szabadúszó UX szakember és fejlesztő dolgozik, de gyakori a munka Budaörs, Érd, Dunakeszi vagy Szentendre felől is. A helyszín ilyenkor inkább bizalmi kérdés, mint technikai szükséglet.

Ha valaki budapesti találkozót kér, szerintem érdemes előre összegyűjteni azokat az oldalakat és képernyőket, ahol a probléma látszik. Így a beszélgetés nem általános marad, hanem rögtön konkrét. A külső kerületekben élő megrendelők gyakran keverik a grafikai igényt és a használati hibát. Pedig nem ugyanaz, ha valami unalmas, és nem ugyanaz, ha zavaró. Egy rövid személyes vagy videós egyeztetés ezt gyorsan tisztázza.

De akkor sincs gond, ha a szakember nem ugyanabban a városrészben dolgozik. Ennél a feladatnál a képernyőfelvétel, a kattintási útvonal és a pontos visszajelzés fontosabb, mint a fizikai közelség. Sokszor a legjobb eredmény úgy születik, hogy az ügyfél röviden leírja a célt, a fejlesztő készít egy kísérleti változatot, majd jön egy kör finomítás. Ez gyorsabb és olcsóbb is lehet, mint a túl sok egyeztetés.

A lényeg az, hogy a saját mutató ne legyen önmagáért való mutatvány. Ha segíti a használatot, van értelme. Ha csak elvonja a figyelmet, akkor inkább teher. Én ezért mindig azt mondom, hogy előbb a viselkedést kell rendbe tenni, és csak utána a látványt. Így lesz az eredmény nyugodt, tiszta és valóban használható.