Interaktív elemek hover-effektusainak létrehozása

Hover-effektusok létrehozása

A hover-effektusok létrehozása akkor hasznos, ha egy weboldalon vagy kisebb felületen azonnal láthatóvá kell tenni, mire lehet kattintani és mi reagál a felhasználóra. A látogató így nem találgat, hanem rögtön érzi, hogy egy gomb, kártya vagy menüpont élő elem. Ez a munka elsőre apróságnak tűnik, de valójában sokat számít. A Qjob.hu oldalon ezért keresnek sokan olyan szakembert, aki nem egy teljes céges csapat részeként dolgozik, hanem önállóan vállal felületi finomításokat magánmegrendelőknek is.

Én személy szerint jobban szeretem azokat a megoldásokat, ahol a reakció finom, gyors és tiszta. Nem kell nagy mozgás, nem kell harsány színváltás, és nem kell minden elemre ugyanaz az erős jelzés. A cél az, hogy az ember érezze, hogy a felület figyel rá. Sok megbízó ott hibázik, hogy túl kevés visszajelzést ad, vagy éppen túl sokat. Az egyik esetben az oldal halottnak hat. A másikban idegesítővé válik. A hover hatások létrehozása akkor jó, ha egyensúlyt teremt.

A legtöbb ember nem szakmai szemmel néz egy oldalt. Csak használni akarja. Ha ráviszi az egeret valamire, és semmi nem történik, bizonytalan lesz. Ha túl sok minden ugrál, akkor szintén. Szerintem pontosan ezért éri meg ezt a munkát külön is megrendelni. Nem csak szebb lesz tőle a felület, hanem érthetőbb is.

Hol működik jól a hover hatás

A hover hatás leginkább ott hasznos, ahol döntést kell segíteni. Ilyen a fő gomb, a menü, a szolgáltatáskártya, a képre épített link, a galéria, a termékdoboz vagy az ajánlatkérő felület egy része. A jó reakció egy pillanat alatt azt mondja a látogatónak, hogy itt történni fog valami, ha kattintasz. Ez egyszerűnek hangzik, mégis sok felületen hiányzik. Az emberek ilyenkor gyakrabban haboznak.

Volt egy eset, amikor egy magánmegrendelő azt hitte, hogy a szövegeivel van baj, mert a látogatók kevés ajánlatkérést küldtek. Az oldal rendben volt, a képek jók voltak, a tartalom sem volt rossz. A probléma végül ott derült ki, hogy a kattintható elemek egy része teljesen ugyanolyan maradt egér fölé húzva is. A látogató nem kapott biztos jelzést. Miután egy felületi szakember átdolgozta a fő gombokat és a kártyák kiemelését, az oldal sokkal érthetőbb lett. Nem történt csoda. Csak megszűnt a bizonytalanság.

Én úgy látom, hogy a hover-effektusok létrehozása különösen jó befektetés akkor, ha az oldal egyszerű, de döntésre akar vezetni. Egy rövid bemutatkozó oldalnál, kisebb portfóliónál, időpontfoglaló résznél vagy kapcsolatfelvételi felületnél nagyon gyorsan kijön a különbség. A visszajelzés hiánya csendes hiba. Nem látványos, de veszteséget okoz.

Gyakori hibák interaktív elemeknél

Sok megbízó azt gondolja, hogy minél látványosabb a reakció, annál jobb. Szerintem ez az egyik leggyakoribb tévedés. A túl erős árnyék, a nagy méretváltás, a lassú lebegés, a hirtelen villanás vagy a sokféle szín egyszerre inkább elrontja az összképet. A felhasználó nem egy mutatványt akar látni, hanem megerősítést. És ez nagy különbség.

Másik tipikus gond, hogy ugyanaz a visszajelzés kerül mindenhová. Ugyanúgy reagál a fő gomb, a törlés, a menüpont, a kép és a másodlagos link. Ettől a rendszer lapos lesz. Nem látszik, mi fontosabb és mi kevésbé fontos. Én inkább azt szeretem, amikor a szakember rangot ad az elemeknek. A fő cselekvés kap egy tiszta és kicsit erősebb reakciót, a másodlagos enyhébbet, a díszítő elemek pedig szinte semmit.

Sok hiba abból adódik, hogy a tervező csak saját gépén próbálja ki az oldalt. Ott minden gyorsnak és simának tűnik. De egy régebbi laptopon vagy gyengébb böngészőben már darabos lehet a mozgás. Volt olyan munka, ahol egy ügyfél ragaszkodott a látványos kártyaemelkedéshez és a nagy árnyékhoz, mert szerinte ettől lett modern az oldal. Később kiderült, hogy a látogatók egy része ettől inkább olcsó hatásúnak érezte a felületet. Nekem az a véleményem, hogy a túl sok effektus ritkán tűnik prémium megoldásnak. Inkább erőlködésnek látszik.

Hover-effektusok létrehozása árak

Az ár attól függ, hogy hány elemet kell átdolgozni, kell-e hozzá tervezés is, vagy csak fejlesztési megvalósítás, és szükség van-e utólagos finomhangolásra. Nem ugyanaz egyetlen gomb állapotának kialakítása és egy teljes kártyarendszer, menü, galéria és cselekvési sor összehangolása. Az is számít, hogy a szakember csak megépíti a látványt, vagy használhatósági szempontból is átgondolja a működést.

Az én tapasztalatom szerint a gyanúsan alacsony árak itt sem jók. Olcsóbban sokszor csak gyors sablonmunka készül. Első pillantásra rendben levőnek tűnik, de valójában nem lesz következetes és nem javítja a felület érthetőségét. Szerintem 12.000 forint alatt ritkán kap bárki valóban használható megoldást, ha nem csak egyetlen apró elemről van szó. A gondosan felépített reakciós rendszer több figyelmet kér.

Az árak tájékoztató jellegűek, de nagyjából megmutatják, mire lehet számítani. Én úgy gondolom, hogy a középső ársávban található a legtöbb reális munka. A nagyon olcsó megoldás gyakran csak kozmetika. A drágább csomag pedig akkor indokolt, ha sokféle interaktív elemnek kell együtt, egységesen működnie.

Szakember választása ehhez a munkához

A hover-effektusok létrehozása nem csak kódolási kérdés. Emiatt nem elég azt nézni, hogy valaki tud-e megcsinálni egy színváltást vagy árnyékot. A jó szakember érti, hogy melyik elem miért fontos, hol kell erősebb reakció és hol kell visszafogottabb megoldás. Szerintem magánmegrendelőként azt érdemes figyelni, hogy kérdez-e a célról. Például arról, hogy az oldal ajánlatot gyűjt, bemutatkozást szolgál, képeket mutat, vagy kapcsolatfelvételt akar gyorsítani.

Jó jel, ha az illető beszél az összhangról és a sorrendről. Rossz jel, ha rögtön effekteket sorol. Nekem az a tapasztalatom, hogy aki az elején csak látványról beszél, az később is inkább mutatni akar, mint segíteni. A jobb felületi tervező vagy fejlesztő viszont először meg akarja érteni, mitől lesz könnyebb a használat. Ez sokkal többet ér, mint egy hangzatos bemutató.

Sokan elkövetik azt a hibát, hogy kizárólag portfólió alapján döntenek. Pedig egy szép bemutató még nem jelenti azt, hogy a szakember visszafogott, következetes rendszert is tud készíteni. Én jobban bízom abban, aki képes azt mondani, hogy ide nem kell semmi extra, ide viszont igen. Ez általában azt jelzi, hogy nem önmagát akarja megmutatni, hanem az oldalt akarja jobbá tenni.

Környékek, helyi oldalak és eltérő igények

Bár ez a munka többnyire távolról is elvégezhető, a helyi szolgáltatói oldalaknál sokszor mégis más szempontok kerülnek elő. Egy kerületi szolgáltatást bemutató oldal, egy agglomerációs vállalási területet mutató felület vagy több környéket felsoroló kártyasor másfajta hangsúlyokat kérhet. A hover hatások létrehozása ilyenkor nem csak esztétikai kérdés. Segíthet abban is, hogy a látogató gyorsabban megtalálja a saját körzetét, települését vagy szolgáltatási zónáját.

Én személy szerint szeretem, amikor az ilyen területi elemek nem túldíszítettek. Egy kerületet vagy környéket jelző kártyán elég lehet egy finom színkiemelés vagy enyhe árnyék. Nem kell nagy ugrás vagy erős mozgás. A cél az, hogy az ember könnyen felismerje, hol jár. Sok magánmegrendelőnél pont ez a fontos. Nem egy bemutató animációt akar, hanem gyors eligazodást. A túl sok reakció itt csak zavaró.

Volt olyan projekt, ahol több helyszínt mutató dobozok kerültek egymás mellé. A megrendelő eredetileg azt kérte, hogy minden kártya nagyot emelkedjen és sötétedjen hover állapotban. Később kiderült, hogy ettől nehezebb lett átfutni a listát. Amikor a szakember visszavett a látványból, az egész felület nyugodtabbnak és érthetőbbnek hatott. Nekem ez jó példa arra, hogy a kevesebb reakció néha többet segít.

Asztali használat, mobil és utólagos javítás

Fontos kimondani, hogy a hover-effektusok létrehozása főként asztali helyzetben látható közvetlenül, hiszen ott van klasszikus egér fölé húzás. Mobilon ez a logika részben eltűnik. Emiatt sok megbízó félreérti a feladatot. Azt hiszi, hogy ami jól néz ki laptopon, az mindenhol ugyanolyan jól működik. Pedig telefonon másféle visszajelzés kell. Ott inkább érintési állapotok, aktív jelzések és tiszta gombreakciók számítanak.

Szerintem egy jó szakember ezt előre elmondja. Nem ígéri azt, hogy ugyanaz a megoldás minden eszközön azonos élményt ad. Inkább külön kezeli az asztali és mobil logikát. Ez tisztességesebb és szakmailag is erősebb hozzáállás. Az interaktív elemek fejlesztése akkor válik valóban hasznossá, ha nem csak egy nézőpontból működik.

És van még egy fontos rész. Az utólagos ellenőrzés. Sok esetben az első változat után derül ki, hogy valamelyik reakció túl gyors, túl lassú vagy egyszerűen túl sok. Én jobban szeretem azokat a munkákat, ahol a szakember vállal egy rövid javítási kört is. Így a felület nem marad félkész érzésű. A jó eredmény általában nem az első próbálkozásból születik meg, hanem abból, hogy valaki hajlandó finoman igazítani rajta. Ez különösen igaz ennél a feladatnál, mert a határ a hasznos és a zavaró között elég vékony.