Stílusos UI-készlet készítése

Stílusos UI készlet

A stílusos UI készlet akkor hasznos, amikor egy felületnek nem csak rendezettnek, hanem következetesnek is kell lennie. A legtöbb megrendelő valójában nem díszítést keres, hanem olyan gombokat, színeket, űrlapokat, kártyákat és képernyőmintákat, amelyekből később gyorsabban lehet dolgozni. Szerintem ez az a pont, ahol egy jó tervező valódi értéket ad, mert nem egyetlen látványtervet készít, hanem egy használható vizuális rendszert.

Sokan összekeverik a stílusos UI készlet fogalmát egy egyszerű képernyőtervvel. Pedig a kettő nem ugyanaz. Egy különálló oldal még nem rendszer. A jól felépített felületi készlet abban segít, hogy a későbbi oldalak, nézetek és funkciók ne essenek szét. A magánmegrendelők ezt gyakran akkor érzik meg, amikor új aloldalt, új foglalási felületet vagy új ügyfélfiókot szeretnének, és kiderül, hogy minden elemet újra kell rajzolni. Ilyenkor már látszik, hogy a kezdeti spórolás később sokkal többe kerül.

Qjob.hu oldalán is azért keresnek ilyen szakembert, mert egy felületet szeretnének rendbe tenni még azelőtt, hogy a fejlesztés felesleges köröket futna. És igen, személyes véleményem az, hogy az egyszerűség sokkal többet ér, mint a túlterhelt látvány. Egy csendes, tiszta és jól ismételhető készlet hosszabb távon jobb döntés, mint egy látványos, de nehezen bővíthető megoldás.

UI elemek és képernyőminták

Egy jól használható UI készlet általában alapokból indul. Ide tartozik a betűhasználat, a színrendszer, a térközök logikája, a gombok állapota, a mezők viselkedése, a hibajelzések, az ikonok mérete és a kártyák felépítése. Ezek nélkül a felület hamar esetlegessé válik. És ezt a felhasználó akkor is érzi, ha nem tudja megfogalmazni, mi zavarja.

Sok ügyfél ott hibázik, hogy túl korán kér kész látványt, miközben az alap komponensek még nincsenek rendben. A tervező elkészít néhány mutatós képernyőt, de amikor jön a bejelentkezés, a profiloldal, a fizetési folyamat vagy egy új űrlap, már nincs mire építeni. Én jobban szeretem, ha először a készlet váza készül el. Utána lehet gyorsan és nyugodtan haladni a részletes nézetekkel.

Volt egy eset, amikor egy ügyfél csak három képernyőt kért egy új szolgáltatási oldalhoz. Elsőre ez egyszerűnek tűnt. Aztán kiderült, hogy ugyanazt a kártyát hat helyen, háromféle méretben és kétféle állapotban akarja használni. Mivel nem volt előre kidolgozott rendszer, minden apró döntésnél megállt a munka. A végén nem a három képernyő vitte el az időt, hanem az, hogy minden elemnél újra meg kellett állapodni az alapokról.

Felületi következetesség a mindennapi használatban

A stílusos felületi készlet értékét a mindennapi használat mutatja meg. Ha ugyanaz a gomb hol kerek, hol szögletes, ha a mezők hol magasabbak, hol laposabbak, ha az egyik oldalon más színt kap a figyelmeztetés, a másikon pedig mást, akkor a felhasználó bizonytalanná válik. Nem drámai módon, csak éppen többet gondolkodik, mint kellene. Ez pedig lassít.

De nem csak a látogatót lassítja. A fejlesztő is lassabban dolgozik, mert nincs egyértelmű szabályrendszer. A megrendelő pedig nehezebben ellenőriz, mert nem tudja, mihez viszonyítson. Ezért hasznos, ha a készlet nem csak szép, hanem szabályos is. Legyen világos, mi az elsődleges gomb, milyen mező számít hibásnak, milyen árnyék tartozik a felugró ablakhoz, és hogyan néz ki a mobil nézet.

Az én tapasztalatom az, hogy az igazán jó munka nem a látványos elemeknél kezdődik, hanem a monoton döntéseknél. Ha ott rend van, később minden gyorsabb. És a végeredmény is nyugodtabb lesz. A stílusos UI készlet ettől lesz hasznos, nem attól, hogy divatos.

Stílusos UI készlet árak

Az ár általában attól függ, hogy a megrendelő valóban rendszert kér, vagy csak néhány alap elemet. Más a helyzet, ha valaki egy kisebb weboldalhoz kér gombokat, űrlapokat és színrendszert, és megint más, ha egy nagyobb ügyfélfelülethez kell teljes komponenskészlet több állapottal. Olcsóbban is lehet találni tervezőt, de szerintem a túl alacsony ár itt különösen kockázatos. A nagyon olcsó munka sokszor csak látványt ad, rendszert nem.

Őszintén szólva a gyanúsan olcsó ajánlatoknál én mindig óvatos vagyok. 30.000 forint alatt ritkán készül olyan UI készlet, amely később fejlesztésre is nyugodtan átadható. Lehet kivétel, de nem ez a jellemző. Aki valóban átgondolja a komponenseket, állapotokat, mobil viselkedést és az ismétlődő mintákat, az időt tesz bele. Az időnek pedig ára van.

Az árak természetesen változhatnak, de irányadónak jók. Aki teljes felületi rendszert kér, annak érdemes már az elején tisztázni, hogy hány képernyőre, milyen eszközre és milyen részletességgel kell a munka. Ez sok félreértéstől kímél meg mindenkit.

Milyen tervezőt érdemes választani

A megfelelő szakember kiválasztásánál nem az a legfontosabb, hogy mennyire látványos a portfólió. Inkább azt nézném, hogy látszik-e benne rendszerben gondolkodás. Készített-e már ismételhető elemeket. Tud-e egyértelmű szabályokat adni. És megérti-e, hogy a megrendelő nem dísztárgyat, hanem működő felületet kér.

Sok tervező nagyon erős a képi világban, de gyengébb a következetes felépítésben. Mások kevésbé látványosak, mégis sokkal hasznosabb anyagot adnak át. Én az utóbbi típust többre tartom, főleg akkor, ha a felületet később bővíteni is kell. Érdemes rákérdezni arra, hogy a tervező hogyan kezeli az állapotokat, a mobil nézetet, az üres képernyőket, a hibajelzéseket és az ismétlődő komponenseket. Ezekből gyorsan látszik, mennyire alapos.

Sokan elkövetik azt a hibát, hogy kizárólag az első látvány alapján döntenek. Pedig egy stílusos UI készlet mögött nem csak ízlés van, hanem rend, fegyelem és előrelátás is. Ha a szakember nem kérdez a tartalomról, a folyamatokról és a későbbi bővíthetőségről, az nekem intő jel lenne.

UI készlet a belvárosban és az agglomerációban

Magánügyfeleknél gyakori, hogy a projekt helyileg is eltérő igényekhez igazodik. A belvárosi szolgáltatóknál más a hangsúly, mint az agglomerációban működő kisebb vállalkozásoknál vagy egy külvárosi rendelő, stúdió, szalon esetében. A belső kerületekben sokszor fontosabb a gyors időpontfoglalás, a letisztult mobil felület és a tömör tartalom. Kijjebb gyakrabban jelenik meg a részletesebb szolgáltatáslista, az árak láthatósága és a kapcsolatfelvétel egyszerűsége.

Ezért a stílusos UI készlet nem teljesen helyfüggetlen feladat. Ugyanaz a vizuális rendszer más hangsúlyt kaphat egy belvárosi lakossági szolgáltatásnál és mást egy kertvárosi, bizalomra épülő magánszolgáltatásnál. A környék, a célcsoport és a használati helyzet mind számít. És bár a munka legtöbbször távolról is elvégezhető, a tervezőnek akkor is értenie kell a helyi működést.

Én például jobban szeretem, ha a kezdőképernyőn rögtön látszik, mire való az oldal, hol lehet továbblépni, és mennyire gyors a kapcsolatfelvétel. Egy belső kerületi ügyfélközönségnél ez különösen fontos. De az agglomerációban is sokat számít, hogy a mobilos használat egyszerű legyen, mert ott a felhasználók jelentős része útközben nézi meg az oldalt.

Gyakori hibák UI készlet tervezésnél

Az egyik leggyakoribb hiba a túl sok különleges elem. Elsőre izgalmasnak tűnik, de később nehéz vele dolgozni. Ha minden kártya más, minden gombnak külön személyisége van, minden blokk saját szabály szerint él, akkor a felület szétesik. A stílusos megjelenés nem azonos a túl sok ötlettel.

A másik tipikus probléma az, amikor valaki kihagyja a köztes állapotokat. Megvan az alap gomb és megvan a végleges képernyő, de nincs hover állapot, nincs hibaüzenet, nincs betöltési helyzet, nincs üres lista. A való életben viszont éppen ezek a helyzetek jönnek elő nap mint nap. Ha erre nincs felkészítve a készlet, a fejlesztés során gyors pótlások születnek, és az egész rendszer veszíteni kezd az erejéből.

Volt olyan ügyfél, aki azért keresett új szakembert, mert a korábbi munka első látásra szép volt, de a fejlesztők minden második komponensnél kérdeztek vissza. Nem azért, mert ügyetlenek voltak, hanem mert hiányzott a döntések fele. Sok pénz elment arra, amit egy átgondoltabb készlet már a legelején tisztázott volna.

És van még egy hiba, amit sokan nem vesznek komolyan. Ez pedig a tartalom figyelmen kívül hagyása. Egy UI készlet nem lebeghet a valós szövegek fölött. Ha a gombok, címek, listák és űrlapok csak rövid mintaszöveggel működnek jól, az később biztosan gondot okoz. A valódi használat mindig prózaibb, hosszabb és kuszább, mint a bemutatóképeken.

Mikor éri meg felületi rendszert készíttetni

Nem minden projekthez kell nagy és részletes komponenskönyvtár. De ha egy oldal várhatóan bővülni fog, több aloldal készül, új funkciók jönnek, vagy több ember dolgozik rajta, akkor a stílusos UI készlet általában megtérül. Nem feltétlenül az első héten, hanem később, amikor gyorsabban lehet új képernyőt készíteni, javítani vagy fejleszteni.

Különösen akkor hasznos, ha a megrendelő több lépésben építkezik. Először csak egy egyszerű bemutatkozó oldal készül, aztán időpontfoglalás, később ügyfélfiók, utána hírlevél feliratkozás vagy csomagválasztás. Ha nincs előre kialakított készlet, minden új rész külön kis projekt lesz. Ez fárasztó és drága.

Az én benyomásom az, hogy sok magánügyfél eleinte túl nagynak érzi ezt a feladatot. Aztán amikor meglátja, mennyivel gyorsabban és nyugodtabban halad a munka egy jó alapra építve, már nem kérdés számára az értelme. A stílusos UI készlet nem luxus. Inkább egyfajta rendrakás, ami megelőzi a későbbi káoszt.

Mit kérj a munka végén

A projekt végén érdemes nem csak képernyőket átvenni, hanem valódi rendszert. Kérj rendezett komponenseket, egyértelmű elnevezéseket, állapotokat, méreteket és rövid használati szabályokat. Jó, ha látszik, melyik elem elsődleges, melyik másodlagos, melyik mobilra készült, és melyik esetben nem ajánlott a használata.

Hasznos lehet az is, ha a szakember néhány mintaképernyőn megmutatja, hogyan állnak össze az elemek valódi oldalakká. Így nem csak különálló darabokat kapsz, hanem működő logikát is. Szerintem ez sokkal többet ér, mint egy látványos, de nehezen átadható csomag.

Végül azt mondanám, hogy a jó UI készlet csendesen dolgozik. Nem hivalkodik, nem zavar, nem akar mindenáron emlékezetes lenni. Egyszerűen csak rendet tesz. És amikor a felhasználó gyorsabban eligazodik, a fejlesztő kevesebbet kérdez vissza, a megrendelő pedig könnyebben bővít, akkor látszik igazán, hogy jó döntés volt szakembert keresni erre a feladatra.