UI-komponensek, gombok, űrlapok és kapcsolók tervezése és fejlesztése

UI-komponensek tervezése

Az UI-komponensek tervezése akkor jó, ha a felület első használatra is érthető marad, és a gombok, mezők, listák vagy értesítések nem kényszerítik a felhasználót találgatásra. Magánmegrendelőként sokan azért keresnek ilyen szolgáltatást, mert van egy ötletük, egy induló oldaluk vagy egy készülő alkalmazásuk, de a képernyők szétesnek, a részek nem illenek egymáshoz, és minden új oldal újabb vitát hoz. Ilyenkor nem egy teljes céges csapat kell, hanem egy olyan UX tervező vagy felülettervező, aki rendet tesz a digitális elemek között, és követhető rendszert rak le.

Én személy szerint azt tartom hasznosnak, amikor már a legelején eldől, melyik elem mire való. Egy elsődleges gomb ne nézzen ki ugyanúgy, mint egy visszalépés. Egy beviteli mező ne legyen összekeverhető egy keresővel. Több szakmai forrás ugyanazokat az alapokat emeli ki, vagyis a gombok, űrlapmezők, menük, táblázatok és más navigációs elemek akkor működnek jól, ha nem önmagukban készülnek el, hanem közös szabályrendszer részeként. A magyar anyagok gyakran beszélnek vizuális stílusról, mintákról és dokumentált irányelvekről, a nemzetközi források pedig külön hangsúlyozzák az állapotokat, a billentyűzettel való használhatóságot és az egyértelmű gombfeliratokat. Ez a gyakorlatban azt jelenti, hogy a UI-komponensek tervezése nem díszítés, hanem döntések sora.

Milyen elemek kerülnek a tervbe

A legtöbb magánügyfél nem elemlistát kér, hanem használható képernyőt. Mégis érdemes tudni, miből áll össze a munka. Általában ide tartoznak a gombok, űrlapok, jelölőnégyzetek, választóelemek, lapfülek, lenyíló menük, kártyák, táblázatok, keresők, üzenetsávok, felugró ablakok és navigációs részek. Egy tapasztalt felülettervező ezeket nem külön rajzocskákként kezeli, hanem olyan készletként, amely több oldalon is ugyanúgy viselkedik.

Sok hiba ott kezdődik, hogy valaki csak a kinézetet nézi. Pedig egy elemnek mindig van nyugalmi állapota, rámutatás utáni állapota, kattintás közbeni állapota, letiltott állapota és hibajelzése is. Ha ezek nincsenek végiggondolva, a fejlesztés közben rögtön szétesik a rendszer. Volt olyan eset, amikor egy ügyfélnek már kész volt a webes felülete, de a mentés gomb három különböző oldalon háromféleképpen jelent meg. Az egyik helyen zöld volt, a másikon szürke, a harmadikon csak egy szöveges hivatkozás. A felhasználók emiatt rendszeresen megakadtak. A javítás végül nem a teljes oldal újrarajzolásából állt, hanem abból, hogy a digitális elemeket közös logika szerint újra meghatározták.

Árak és tipikus csomagok

Az ár attól függ, mennyi elemet kell megrajzolni, mennyire összetett a felület, kell-e állapottervezés, és szükség van-e rövid leírásra a fejlesztő számára. Olcsóbbnak tűnhet darabonként kérni pár gombot vagy űrlapot, de ez később sokszor drágább lesz, mert a részek nem illenek össze. Az én tapasztalatom az, hogy a túl alacsony ár itt gyorsan visszaüt. Olcsóbban 20.000 alatt ritkán lesz valóban átgondolt munka, főleg akkor, ha valaki nemcsak látványt, hanem használható rendszert vár.

Ezek nem merev díjak, inkább reális sávok. Ha valaki egyéni megrendelőként saját weboldalhoz, foglalási felülethez vagy ügyfélkapcsolati oldalhoz kér terveket, akkor a középmezőny szokott életszerű lenni. A nagyon olcsó ajánlatok gyakran csak szép képet adnak át, de nem derül ki, mi történik hiba esetén, mi lesz mobilon, és hogyan működik az adott elem több helyzetben.

Gyakori hibák a komponenseknél

Sokan elkövetik azt a hibát, hogy minden oldalon külön kezdenek gondolkodni. Ebből lesz az, hogy a belépés másképp néz ki, mint a regisztráció, a keresés más szabály szerint működik, mint a szűrés, és a figyelmeztetések sem ugyanazt az üzenetet adják. Később ez nemcsak zavaró, hanem drága is. Minden új képernyőn újabb egyeztetés indul.

Mások túl sok látványos megoldást akarnak egyszerre. Nekem az a benyomásom, hogy a magánprojektek többségénél a visszafogott és következetes megoldás működik jobban. Egy gomb ne akarjon egyszerre dísz is lenni, márkajel is, mozgó elem is és kiemelés is. Ha a felhasználó nem tudja elsőre, mit kell megnyomnia, akkor a terv már veszített az erejéből. És még egy dolog. A hibajelzés és a sikeres állapot sokszor teljesen kimarad a megrendelő fejéből, pedig a tényleges használat során ezekkel találkozik a legtöbbet az ember.

Volt egy kisebb magánprojekt, ahol a megrendelő ragaszkodott ahhoz, hogy minden gomb azonos hangsúlyt kapjon, mert így szerinte tisztább a felület. A kész képernyők valóban rendezettnek tűntek, de az emberek nem tudták, melyik a fő művelet. A próbák után vissza kellett tenni az elsődleges és másodlagos különbséget. Ez apróságnak látszik, mégis ezen múlik, hogy valaki gyorsan halad-e tovább vagy megakad az oldalon.

Hogyan válassz szakembert

A UI-komponensek tervezése akkor lesz hasznos szolgáltatás, ha a szakember nemcsak rajzolni tud, hanem kérdezni is. Jó jel, ha rákérdez a célokra, a képernyők típusára, a mobil és asztali használatra, a fontos műveletekre és arra is, hogy később bővül-e a rendszer. Egy UX tervező vagy felülettervező akkor dolgozik jól, ha nemcsak színeket választ, hanem logikát épít.

Én a portfóliónál nem azt nézem először, hogy mennyire látványos, hanem azt, hogy mennyire következetes. Vannak-e ugyanazon elemhez állapotok. Látszik-e, hogy a mezők, gombok és navigációs részek tényleg egymás rokonai. Kiderül-e, hogy tudott gondolkodni hibákról, üres állapotokról, mobil képről. Sok megrendelő hibázik, amikor kizárólag a nyitóképet nézi. A napi használat minősége nem ott dől el, hanem a kisebb, ismétlődő részleteknél.

A Qjob.hu felületén vagy más hasonló helyen érdemes olyan szakembert keresni, aki mutat korábbi kezelőfelület elemeket, tud beszélni az átadás módjáról, és vállalja, hogy a készlet nemcsak egy kép lesz, hanem használható alap. Kérj rövid mintát arra, hogyan nevez el elemeket, milyen állapotokat ad hozzájuk, és mit kap a fejlesztő a végén. Ha erre nincs világos válasz, abból később vita lehet.

Hol érdemes külön figyelni a helyi használatra

Városon belül is más lehet az igény. Egy belvárosi apartmanoldal, egy elővárosi szolgáltató felülete vagy egy kisebb településre készülő időpontfoglaló oldal nem ugyanazt kívánja. Ha a célközönség idősebb, egyszerűbb és nagyobb elemek kellenek. Ha sok a mobilos belépés, akkor a navigációs részeket és az űrlapokat ehhez kell igazítani. Ha a felhasználók gyors ügyintézést várnak, akkor a fő gomboknak és megerősítéseknek erősebb szerepet kell kapniuk.

És igen, a környék, az agglomeráció vagy a kisebb települések felhasználói szokásai is számítanak. Nem feltétlenül ugyanúgy keres valaki egy helyi szolgáltatót, mint egy országos rendszert. A jó digitális elemek ezt is bírják. Nincs túlbonyolított menü, nincs apró kattintási felület, és a fontos lépések nem tűnnek el a képernyő sarkában. Aki magánprojektet indít, annak szerintem érdemes már a tervezéskor tisztázni, hogy helyi ügyfélszerzésre készül-e, vagy szélesebb közönséget céloz.

Mit kapsz a munka végén

Jó esetben nemcsak néhány képernyőképet kapsz, hanem egy rendezett elemkészletet. Ebben szerepelnek a méretek, térközök, tipográfiai szabályok, a fő és mellékes műveletek kinézete, az állapotok, a hibák és az üres helyzetek. A kezelőfelület elemek megtervezése akkor térül meg, amikor új oldal készül, és nem kell mindent elölről kitalálni.

Az UI-komponensek tervezése emiatt hosszabb távú döntés is. Ha a projekt később bővül, új funkciók jönnek, vagy más szakember veszi át a munkát, a rendezett rendszer sok pénzt és ideget takarít meg. Nem állítom, hogy minden magánoldalnak nagy és részletes szabálykönyv kell. De egy alap szintű, következetes komponenskészlet majdnem mindig jobb, mint az alkalmi javítgatás. Szerintem ezt sokan túl későn látják be, általában akkor, amikor már a harmadik ember nyúl ugyanahhoz a felülethez.

Ha röviden kell összefoglalnom, a UI-komponensek tervezése azoknak való, akik nemcsak szebb képernyőt szeretnének, hanem kiszámíthatóbb működést is. A jól átgondolt digitális elemek, a következetes kezelőfelület elemek és az érthető szabályok együtt adják azt az alapot, amelyre később nyugodtabban lehet építeni.