Aktív elemek kiemelése és fejlesztése egyedi megoldásokkal

Aktív elemek kiemelése online felületeken

Az Aktív elemek kiemelése akkor hasznos, amikor a felhasználónak azonnal látnia kell, hol tart, mire kattintott, vagy melyik rész vár tőle döntést. Ez nem díszítés. Ez a kezelhetőség része. Egy online felületen a gomb, menüpont, mező, fül vagy ikon állapota sokat mond. Ha ez nem egyértelmű, az ember bizonytalan lesz, lassabban halad, és gyakrabban hibázik. Én azt látom, hogy a legtöbb magánügyfél nem külön animációt keres, hanem tisztább működést. Csak később derül ki, hogy ehhez jól megtervezett vizuális visszajelzés kell.

Az ilyen munka távolról is jól végezhető. A megrendelő elküldi a jelenlegi oldalt, alkalmazástervet, képernyőképeket vagy rövid leírást. A szakember megnézi, hol hiányzik a visszajelzés, hol túl erős a hatás, és hol kell finomabb kiemelés. Qjob.hu felületén olyan magánszakembert lehet keresni, aki nem teljes céges folyamatban gondolkodik, hanem konkrét online feladatot old meg. Itt a legfontosabb a pontos brief, a használati helyzet és a várható eredmény.

Aktív kiemelés szerepe a felhasználói élményben

Az aktív kiemelés lényege, hogy a felület visszajelezzen. A látogató ne találgasson. Látnia kell, melyik menüpont aktív, melyik mező van fókuszban, melyik gomb nyomható, és melyik művelet indult el. Szerintem ez különösen fontos akkor, ha a felület sok választási lehetőséget ad. Ilyenkor egy apró színváltás, árnyék, aláhúzás, méretváltozás vagy rövid mozgás sokkal többet segít, mint egy hosszú magyarázó szöveg.

Nem minden elem igényel látványos hatást. Sokan ott hibáznak, hogy minden kattintható részre erős mozgást kérnek. Ettől a felület nyugtalan lesz. A jó kiemelés inkább irányít. A felhasználó szinte észre sem veszi, mégis könnyebben érti, mit kell tennie. Ez a különbség a hasznos jelzés és a felesleges animáció között.

Volt olyan eset, amikor egy ügyfél egy egyszerű rendelési felülethez kért aktív állapotokat. A gond nem a dizájnnal volt, hanem azzal, hogy a választott csomag nem látszott elég jól. A felhasználók újra és újra visszaléptek. Egy finom keret, világosabb háttér és rövid átmenet után a folyamat érthetőbb lett. Nem kellett új oldalt készíteni. Csak a fontos elemek kaptak értelmes hangsúlyt.

Aktív elemek kiemelése árak

Az ár attól függ, hány elemről van szó, kell-e tervezés, van-e kész arculat, és milyen formában kell átadni az eredményt. Egy egyszerű állapotterv olcsóbb, mint egy komplett felülethez készített mozgásrendszer. Tapasztalatom szerint a túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert a szakember nem teszteli végig az állapotokat. Pedig itt pont a részletek számítanak.

A díj nem csak a rajzolásról szól. Benne van a döntés is, hogy mi legyen hangsúlyos és mi maradjon csendes. Egy jó online szakember ezt nem érzésre oldja meg, hanem a felület célja alapján. Ha a megrendelő pontos példákat küld, az ár általában jobban tartható.

Megfelelő szakember kiválasztása

A megfelelő szakember kiválasztása nem a leglátványosabb portfólióval kezdődik. Fontosabb, hogy értse az állapotok logikáját. Egy aktív gomb, egy kijelölt fül vagy egy fókuszban lévő mező nem önálló kép. A felület működésének része. Ezért érdemes olyan munkát keresni a portfólióban, ahol látszanak a különböző állapotok, nem csak a végleges képernyő.

Jó jel, ha a freelancer kérdez. Milyen eszközön használják a felületet. Mi történik kattintás után. Van-e hibaállapot. Kell-e sötét módhoz igazítani. Milyen arculati színek megengedettek. Ezek egyszerű kérdéseknek tűnnek, de sok későbbi félreértést megelőznek.

Én óvatos lennék azzal a szakemberrel, aki rögtön látványos mozgást ígér, de nem kérdez a felhasználói útról. Az aktív elemek kiemelése nem öncélú effekt. A cél az, hogy a magánügyfél weboldala, rendelési oldala, személyes projektje vagy kis online szolgáltatása érthetőbb legyen. Ehhez néha elég egy nyugodt keret. Máskor kell rövid animáció. A döntés nem ízlés kérdése csak részben.

Online munkamenet és átadás

Az online munkamenet általában rövid egyeztetéssel indul. A megrendelő elküldi a képernyőket, a jelenlegi hibát vagy a kívánt működést. Ezután a szakember javaslatot ad. Lehet, hogy csak pár állapotot kell megtervezni. Lehet, hogy a teljes navigációt érdemes átgondolni. A távoli munka előnye, hogy minden anyag nyomon követhető. Képernyőkép, rövid videó, tervfájl, hivatkozás és visszajelzés egy helyen maradhat.

A határidő kisebb feladatnál akár egy nap is lehet. Összetettebb felületnél több kör kell. Először készül egy javaslat, utána jön a finomítás, majd az átadás. Az eredmény lehet képernyőterv, rövid mozgó előnézet, fejlesztői leírás vagy kész beállítás, attól függően, mire van szükség. Az a jó, ha az átadás nem csak szép képet tartalmaz, hanem pontos állapotneveket is. Például alap, lebegő, aktív, tiltott, betöltés alatt és hibás állapot.

A kommunikációban sokat segít, ha a megrendelő nem csak azt írja, hogy legyen feltűnőbb. Ennél jobb, ha leírja, milyen döntést kell könnyebbé tenni. Például a kiválasztott csomag legyen látható. A beküldés után legyen egyértelmű, hogy elindult a folyamat. A menü mutassa, melyik részen jár a látogató. Így a vizuális visszajelzés konkrét célt kap.

Gyakori hibák az aktív állapotoknál

A leggyakoribb hiba a túl gyenge különbség. Az aktív és az alap állapot majdnem ugyanolyan. A felhasználó nem látja, mi változott. A másik véglet a túl erős hatás. Villogás, nagy ugrás, zavaró mozgás vagy túl sok szín. Ez rövid ideig érdekes lehet, de hosszabb használatnál fárasztó.

Sokan elfelejtik a billentyűzetes használatot és az akadálymentességet. Pedig a fókuszállapot nem mellékes. Ha valaki billentyűzettel lép mezőről mezőre, látnia kell, hol jár. Ugyanez igaz a kontrasztra is. A kiemelésnek nem csak ízlésesnek kell lennie, hanem olvashatónak. Egy szakember akkor dolgozik jól, ha ezekre külön figyel.

Probléma az is, amikor a megrendelő csak egy állapotot kér, de a többit nem gondolja át. Egy gombnak lehet alap, lebegő, aktív, tiltott és betöltési állapota. Ha ezek nincsenek összhangban, a felület darabos lesz. Szerintem jobb kevesebb elemet rendesen kidolgozni, mint sok részletet félkészen hagyni.

Brief az aktív kiemeléshez

Egy jó brief rövid, de pontos. Nem kell hosszú dokumentum. Elég, ha a megrendelő elküldi, melyik felületen kell dolgozni, mely elemek fontosak, milyen eszközön használják őket, és mi most a gond. Hasznos lehet egy képernyőfelvétel is. Az megmutatja, hol akad el a folyamat.

A vizuális példák segítenek, de nem érdemes őket egy az egyben másolni. Egy üzenetküldő felület, egy foglalási oldal és egy személyes bemutatkozó oldal más ritmust kíván. Az aktív elemek kiemelése akkor működik jól, ha illeszkedik a saját tartalomhoz. Egy magánszakember ebben rugalmas tud lenni, mert nem kell nagy csapaton átvinni minden apró döntést.

A briefben érdemes leírni a javítási körök számát is. Egy kisebb feladatnál egy kör elég lehet. Bonyolultabb állapotoknál kettő vagy három kör reálisabb. Így nincs vita arról, mi számít módosításnak és mi új kérésnek. Ez mindkét oldalnak tisztább.

Minőségi eredmény távoli kivitelezéssel

A minőségi eredmény nem attól lesz jó, hogy sok minden mozog. Attól lesz jó, hogy a felhasználó biztosabbnak érzi a következő lépést. Az aktív kiemelés akkor erős, ha természetes. Látszik, de nem vonja el a figyelmet. Segít, de nem magyarázza túl a felületet.

Távoli kivitelezésnél különösen fontos a próbanézet. A szakember küldhet rövid videót vagy kattintható mintát. A megrendelő így nem csak állóképen látja az állapotokat. Ez sok félreértést megelőz. Egy apró átmenet papíron jól hangzik, de használat közben lehet lassú vagy idegesítő. Ilyenkor finomítani kell.

Én azt tartom jó megoldásnak, amikor a végeredmény fejlesztőnek és ügyfélnek is érthető. A fájlok neve egyértelmű, az állapotok le vannak írva, a színek és méretek követhetők. Nem kell találgatni, melyik elem mikor jelenjen meg. Így az online munka végén nem csak látványosabb felület marad, hanem rendezettebb működés is.