Monokróm ikonák tervezése UI/UX-hoz

Ikonák tervezése UI/UX-hoz

Az Ikonák tervezése UI/UX-hoz akkor működik jól, ha a felhasználó első ránézésre érti, mit lát és mit kell tennie. Egy jó ikon nem dísz. Irányt ad, gyorsítja a használatot, és leveszi a terhet a szövegről. Magánmegrendelőként általában nem egy teljes arculati rendszert keresel, hanem olyan megoldást, amely egy weboldalban, alkalmazásban vagy ügyfélfelületen tényleg használható. Ezért fontos, hogy ne csak szép rajz készüljön, hanem olyan ikonrendszer, amely kis méretben is tiszta marad, következetes, és illeszkedik a képernyős felület logikájához. Szerintem itt sok félreértés abból indul, hogy az ügyfél képet kér, miközben valójában működő vizuális jelölésekre van szüksége.

Az ilyen munka tipikusan távolról zajlik. A brief írásban érkezik, a példák és képernyőképek online jönnek, a javítások körökben történnek, a végső átadás pedig rendezett fájlcsomagban. Ezen a felületen magánszemélyként olyan szabadúszó szakembert kereshetsz, aki nem csapatnevek mögé bújik, hanem saját portfólióval és saját munkamóddal dolgozik. Én azt látom, hogy a legtöbb gond nem a rajzolásnál kezdődik, hanem ott, hogy a megrendelő túl későn mondja el, hol és mekkora méretben jelennek meg majd az ikonok.

Mikor érdemes felületi ikonokat kérni

Felületi ikonokra akkor van szükség, ha a kezelőfelületben ismétlődő műveletek, állapotok vagy kategóriák jelennek meg. Ilyen lehet egy személyes költségkövető felület, egy foglalási oldal, egy családi fotókezelő, tanulási felület vagy bármilyen kisebb alkalmazás. A cél nem az, hogy minden elem egyedi legyen, hanem az, hogy együtt olvasható rendszert alkossanak. A nem megfelelően megrajzolt alkalmazásikonok zavaróak lehetnek. Túl részletesek, eltérő vastagságúak, vagy egyszerűen nem ugyanazt a vizuális nyelvet beszélik.

Az ismert szakmai ajánlások visszatérően azt emelik ki, hogy az ikon legyen egyszerű, gyorsan felismerhető, és ne önmagában, hanem készletként legyen átgondolva. A Nielsen Norman Group a gyors felismerést és az egyszerű formát emeli ki, a Toptal pedig azt, hogy a készlet egésze legyen következetes, ne különálló rajzok gyűjteménye. Ez a megrendelő oldaláról azért fontos, mert ha ma kérsz tíz darabot, két hónap múlva pedig még húszat, akkor a rendszernek bővíthetőnek kell maradnia. Egy ügyes UI/UX tervező ezt előre kezeli.

UI/UX ikonrendszer kiválasztása

A megfelelő szakember kiválasztásánál először ne az árat nézd. Előbb azt nézd meg, hogy a portfólióban valódi képernyőn szerepelnek-e az ikonok, vagy csak üres bemutatóképeken. Nagy különbség. Ha egy grafikus csak szépen elrendezett mintalapokat mutat, abból még nem derül ki, hogyan működik a készlet gombsorban, menüben, sötét háttéren vagy kisebb mobilnézetben. Tapasztalatom szerint jobb jel, ha látszanak a méretezési szabályok, a vonalvastagság következetessége, a rácshoz igazítás, és az is, hogy a tervező tud beszélni a használhatóságról.

Sokan ott hibáznak, hogy olyan szabadúszót választanak, aki bármilyen stílust azonnal elvállal, de nem kér vissza semmit. Pedig jó jel, ha a szakember rákérdez a célfelületre, a funkciókra, a felhasználókra, a nyelvre és a méretekre. Aki ilyet kérdez, az jellemzően nem csak rajzolni akar, hanem jó döntést hozni. A Qjob.hu oldalán is ezt érdemes figyelni, amikor profilokat és mintamunkákat nézel.

Online együttműködés és átadás

Az online munka menete általában egyszerű. Először jön egy rövid brief. Ebben szerepel, hány ikon kell, milyen felületre, milyen stílusban, és kell-e hozzá állapotváltozat. Ezután a tervező egy kisebb mintacsomagot készít, hogy lásd az irányt. Ha ez rendben van, jöhet a teljes készlet. A javítások többnyire egy vagy két körben zajlanak, képernyőképekkel és rövid megjegyzésekkel. A végén a fájlok rendezett csomagban érkeznek meg.

Az átadásnál érdemes előre rögzíteni a formátumot. Más kell akkor, ha csak képként használod az ikonokat, és más akkor, ha fejlesztő is dolgozik velük. A legtöbb magánügyfélnél az SVG és a PNG a leggyakoribb. De van, amikor komponensszintű elnevezés, rács, vagy világos és sötét változat is kell. Volt olyan eset, amikor egy ügyfél tizenkét ikont rendelt, majd a végén kiderült, hogy mindegyikhez aktív és inaktív állapotot is szeretne. Ezzel a munka és az ár is rögtön más lett. Ezért jó, ha a feladat elején tiszta minden.

Ikonák tervezése UI/UX-hoz árak

Az ár attól függ, hogy egyedi rajzolásról, meglévő stílus folytatásáról vagy teljes ikonrendszer kialakításáról van-e szó. Számít a darabszám, a részletesség, a javítások száma és az is, hogy kell-e több méret vagy állapot. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent. Nem azért, mert minden olcsó munka rossz, hanem mert valahol időt kell spórolni. Ilyenkor általában a kutatás, a tesztelés vagy a rendszerben gondolkodás marad el.

Ezek tájékoztató sávok magánügyfeleknek. Egy tapasztalt tervező magasabb díjat kérhet, ha a felület összetett, ha több platformra készül az anyag, vagy ha szoros a határidő. Szerintem az a reális megközelítés, hogy nem a legalacsonyabb számot keresed, hanem azt, hogy az adott árért kapsz-e következetes rendszert és átlátható munkamenetet.

Gyakori hibák az ikonok megrendelésénél

A leggyakoribb hiba az, hogy a megrendelő túl általánosan fogalmaz. Azt írja, legyen letisztult, modern, egyszerű. De ebből még nem derül ki semmi fontos. Mekkora méretben használod majd az ikonokat. Sötét vagy világos háttéren jelennek meg. Kell-e kitöltött és körvonalas változat. Szükség van-e mozgó állapotra. Ezek nélkül a szép eredmény könnyen használhatatlanná válik.

Másik tipikus gond, hogy valaki túl sok jelentést akar egyetlen jelbe sűríteni. A UI/UX felületeken ez ritkán működik. Az ikon feladata a gyors felismerés, nem a teljes magyarázat. Ha az üzenet bonyolult, jobb rövid szöveggel együtt használni. A friss szakmai anyagok szerint a felismerhetőséget külön érdemes ellenőrizni, mert ami a tervezőnek egyértelmű, az a felhasználónak nem feltétlenül az. Én azt látom, hogy ez főleg saját projektekben csúszik el, ahol nincs külső szem.

Minőség és elvárások felületi ikonoknál

A jó minőségű felületi ikonoknál három dolog számít igazán. Az első a következetesség. A második az olvashatóság. A harmadik az illeszkedés a felület egészéhez. Lehet egy ikon önmagában szép, mégis rossz, ha nem harmonizál a többi elemmel. Egy szabadúszó tervező akkor dolgozik jól, ha ezeket együtt nézi, nem külön-külön.

És az elvárásokkal is érdemes óvatosnak lenni. Tíz ikonból ritkán lesz kész teljes terméklogika. Az ikonok sokat segítenek, de nem pótolják a rossz elnevezést, a zavaros navigációt vagy a túlterhelt képernyőt. Ha ezt előre tisztán látod, jobb döntést hozol a megbízásnál. Itt az a cél, hogy használható eredményt kapj, nem az, hogy látványos, de nehezen értelmezhető rajzok kerüljenek a képernyőre.

Ikonák tervezése UI/UX-hoz megrendelői szemmel

Magánügyfélként akkor jársz a legjobban, ha röviden, de pontosan fogalmazol. Írd le, milyen felületről van szó, hány ikon kell, milyen példák tetszenek, mi a határidő, és milyen formátumban kéred az átadást. Ezzel időt és pénzt spórolsz. Az Ikonák tervezése UI/UX-hoz nem különálló díszítőfeladat, hanem a használat része. Ha ezt a szakember is így kezeli, nagyobb eséllyel kapsz olyan ikonrendszert, amely nem csak esztétikus, hanem valóban működik.

És szerintem ez a legfontosabb. Egy jó online együttműködés nem attól jó, hogy hosszú levelezés zajlik, hanem attól, hogy világos a feladat, reális a határidő, és a végeredmény kis méretben is érthető marad. Ha itt keresel megfelelő embert, elsősorban olyan tervezőt válassz, aki kérdez, rendszert mutat, és nem ígér túl sokat túl kevésért.