Adminisztratív felületek UI-komponenseinek stílusának kidolgozása

UI-stílus fejlesztés

A UI-stílus fejlesztés akkor hasznos, amikor a felület már működik, de szétesik vizuálisan, vagy egyszerűen fárasztó ránézni és használni. Ilyenkor nem csak színekről van szó. A gond sokszor mélyebb. Más a gombok formája egyik oldalon és más a másikon. Ugrál a térköz. A címsorok nem ugyanazt a ritmust követik. A felhasználó ezt nem mindig tudja pontosan megfogalmazni, de érzi, hogy a rendszer darabos. Szerintem a jó stílus nem attól jó, hogy látványos, hanem attól, hogy nyugalmat ad használat közben.

Sok magánmegrendelő azt hiszi, hogy a felhasználói felület stílusának javítása főleg díszítés. De a valóságban ez hat a sebességre, a figyelemre és a hibák számára is. Ha egy elsődleges gomb hol sötét, hol világos, hol balra kerül, hol jobbra, akkor a felhasználó újra és újra alkalmazkodni kénytelen. Ez apróságnak tűnik, mégis lassít. Én személy szerint a következetes, visszafogott rendszereket szeretem, ahol a stílus nem versenyez a tartalommal, hanem alátámasztja azt.

Volt már olyan helyzet, amikor a megbízó új színpalettát kért, mert úgy érezte, elavult a felület. Amikor viszont végignéztük az oldalakat, kiderült, hogy a fő gond nem a szín volt. Hanem az, hogy ugyanaz a kártya háromféle árnyékkal, kétféle címsorral és négyféle gombbal jelent meg. A felület ezért tűnt öregnek és rendezetlennek. Miután rendbe tettük a szabályokat, az egész rendszer frissebb lett anélkül, hogy túldíszítettük volna. Nekem ez jó példa arra, hogy a UI-stílus fejlesztés valójában rendrakás is.

Vizuális következetesség az admin felületen

A vizuális következetesség az egyik legfontosabb alap. Ha a felhasználó egyszer megtanulja, hogyan néz ki egy aktív fül, egy figyelmeztető jelzés vagy egy mentés gomb, akkor ugyanezt várja mindenhol. És igaza van. Sok rendszer ott hibázik, hogy oldalanként külön logika épül be. Az egyik nézetben a szűrő fent van, a másikban oldalt. Az egyik listában a fő művelet jobbra kerül, a másikban balra. Ettől a rendszer nem csak csúnyább lesz, hanem bizonytalanabb is.

Az én tapasztalatom az, hogy a stílusbeli egység sokkal gyorsabban javítja az élményt, mint egy teljes látványváltás. Ha a címsorok, mezők, gombok és állapotcímkék ugyanazt a logikát követik, a felhasználó hamarabb érzi magát biztosnak. És ez főleg admin felületen fontos, ahol nem egyszeri látogatásról, hanem napi munkáról beszélünk. Egy weboldalon néha elfér több játékosság. Egy admin oldalon ritkábban. Ott a rend többet ér.

Sokan elkövetik azt a hibát, hogy minden új funkcióhoz új stíluselem születik. Új árnyék, új szegély, új címke. Rövid távon ez gyors megoldásnak tűnik. Hosszabb távon viszont szétveri az egységet. Én ilyenkor mindig azt javaslom, hogy inkább kisebb készletből dolgozzunk. Kevesebb gombtípus, kevesebb kártyaváltozat, kevesebb állapotjelzés. A kevesebb itt tényleg több. És olcsóbb is fenntartani.

Színek, betűk és komponensek

A felhasználói felület stílusának javítása sokszor ezen a ponton válik kézzelfoghatóvá. Milyen szín jelöli a fő műveletet. Milyen erősségű a figyelmeztetés. Mekkora legyen az alap betűméret. Mennyi hely maradjon két blokk között. Ezek apró szabályoknak tűnnek, de a teljes élményt ezek tartják össze. Személy szerint én azt preferálom, ha a fő szín visszafogottan jelenik meg, és nem fest be mindent. A túl sok erős kiemelés rövid idő után elveszíti a hatását.

A tipográfia különösen fontos. Sok felületen a betűméretek túl közel állnak egymáshoz, ezért a cím és a törzsszöveg nem válik el rendesen. Máskor minden túl nagy, és már nem marad elég levegő. Az is gyakori hiba, hogy a gombok felirata rövidítés vagy bizonytalan kifejezés. Én jobban szeretem az egyenes megoldást. Ha mentésről van szó, akkor az álljon rajta. Ha törlésről, akkor az. A UI-stílus fejlesztés nem csak látvány, hanem nyelv is.

A komponenseknél sok megrendelő túl gyorsan akar egyedi elemeket. Egyedi táblázat, egyedi lenyíló, egyedi kereső, egyedi kártya minden blokkhoz. Elsőre ez izgalmasnak tűnik. A gyakorlatban viszont nehezen karbantartható lesz. Volt olyan ügyfél, aki minden oldalon más gombkészletet használt, mert így próbálta megkülönböztetni a funkciókat. A vége az lett, hogy senki nem tudta, melyik elem mennyire fontos. Miután egységesítettük a komponenseket, sokkal tisztább lett a hierarchia.

De van itt egy másik probléma is. Sokan a divatos látványt keresik, nem a tartós rendszert. Átlátszó panelek, túl finom kontraszt, halvány szövegek, gyenge határvonalak. Képernyőképen szépnek tűnnek. Napi használatban fárasztóak. Az én véleményem az, hogy ami olvasásban és kattintásban bizonytalan, az hiába modern, nem jó. Egy admin rendszerben a tiszta elválasztás és a jó kontraszt többet ér, mint a trendi megjelenés.

UI-stílus fejlesztés árak

Az ár attól függ, hogy csak kisebb finomításról van szó, vagy teljes stílusrend kialakításáról. Más költség, ha pár képernyőn kell rendet tenni, és más, ha egy egész admin felülethez kell komponenskészletet, tipográfiai szabályt és színrendszert kialakítani. Olcsóbban 20.000 alatt néha lehet találni gyors kozmetikai javítást, de szerintem az ritkán hoz tartós eredményt. A valódi haszna annak van, ha a stílus mögött szabályrendszer is készül.

Az én tapasztalatom az, hogy a túl olcsó munka itt ritkán jó. A nagyon alacsony díj sokszor csak felületi módosítást jelent. Új színt vagy új gombformát kap a rendszer, de a stílusbeli káosz megmarad. Később újra hozzá kell nyúlni. Ez tipikus eset, amikor az olcsóbb megoldás végül többe kerül. Szerintem 30.000 alatt ritkán készül olyan munka, ami több oldalra és több komponensre is valóban használható marad.

Szakember választása

A megfelelő szakember kiválasztása sokat számít, mert a UI-stílus fejlesztés könnyen félremegy, ha valaki csak látványban gondolkodik. Olyan tervező vagy fejlesztő kell, aki érti a napi használatot is. Nem elég szép képet készíteni. A jó szakember látja, hogy melyik stílusbeli eltérés okoz zavart, és melyik csak másodlagos kérdés. Én személy szerint jobban bízom abban, aki először mintákat, képernyőket és használati helyzeteket kér, nem pedig azonnal új színeket ajánl.

Sok megrendelő ott hibázik, hogy csak portfólió alapján dönt. Pedig fontosabb lenne rákérdezni arra, hogyan épít szabályrendszert az adott ember. Tud e komponensekben gondolkodni. Tud e egységes döntéseket hozni több oldalra. Tud e nemet mondani a felesleges látványelemekre. Volt olyan megbízás, ahol a korábbi tervező nagyon látványos mintákat adott át, de a fejlesztés során semmilyen következetes szabály nem maradt mögötte. A csapat minden új oldalon improvizált. Ebből lett a káosz.

Qjob.hu oldalon is lehet olyan tervezőt vagy fejlesztőt találni, aki magánmegrendelésben vállal felületi finomítást. Itt szerintem nem csak az árat kell nézni. Az is számít, mennyire világosan magyarázza el a döntéseit. Ha valaki meg tudja mondani, miért kell összevonni két gombstílust, miért kell ritkítani a színeket, vagy miért kell nagyobb kontraszt, az jó jel. A bizonytalan, túl általános válaszok engem kevésbé győznek meg.

Budapest kerületei és környéke

Ha a megrendelő személyes egyeztetést szeretne, Budapest erre kényelmes hely. A belső kerületekben gyorsan lehet találkozni, átbeszélni a képernyőket és közösen végignézni a stílusproblémákat. A XI. kerület, a XIII. kerület és Zugló sok ilyen digitális megbeszélésnél felmerül, de a budai oldalon is sok szabadúszó dolgozik. A UI-stílus fejlesztés gyakran már egy rövid közös átnézéssel elindítható, ha a minták és az oldalak kéznél vannak.

Az agglomerációban is lehet jó kivitelezőt találni. Érd, Budaörs, Dunakeszi vagy Szentendre felől ugyanúgy dolgoznak olyan szakemberek, akik admin felületekkel foglalkoznak. És őszintén szólva a távolság itt ritkán döntő. A fontos az, hogy a megrendelő tudjon példát mutatni arra, mi zavarja. Mi túl sötét. Mi túl világos. Mi tűnik túlzsúfoltnak. Mi nem következetes. Ha ez megvan, a munka sokszor online is jól halad.

Budapest előnye inkább a gyors egyeztetés és a személyes átbeszélés lehetősége. De én nem választanék csak azért valakit, mert közel van. Inkább azt nézném, hogy érti e a felület logikáját, és tud e rendszert építeni a szétesett megjelenés helyett. Mert végül ez a lényeg. A jó stílus nem dísz. Hanem olyan vizuális rend, ami mellett a felhasználó gyorsabban dolgozik, kevesebbet hibázik, és kevésbé fárad el a nap végére.