Hogyan érdemes ikont tervezni?

Ikonok vesznek körül bennünket mindenhol; olyan koncentrációban járják át a mindennapi életünket, hogy talán már észre sem vesszük őket. Ez persze az a luxus, amit egy designer nem engedhet meg magának. Az ikonok használata éppolyan elengedhetetlen része a webdesignnak, mint pl. a tipográfia vagy a reszponzív töréspontok, ergo alaposabban meg kell ismerkedni velük, hogy átláthassuk, mitől működik egy ikon önmagában, a készletben és a tágabb értelemben vett designban.

Mi az az ikon egyáltalán?

Az ikon közvetlenül megjelenít egy ötletet, gondolatot, funkciót vagy cselekvést. Ezt a megjelenítést természetesen vizuálisan, egyszerűsítve teszi, mintegy grafikus esszenciájában közvetíti azt a felhasználó felé. Az UI/UX interfészekben és a reszponzív webdesignban az ikonok kulcsszerepet töltenek be, képviselik az alkalmazásokat, vagy könnyen értelmezhető módon vizuálisan megjelenítik a lehetséges cselekvéseket. Ne keverjük össze az ikont a logóval, ami elsősorban a brand, cég vagy szervezet megjelenítésére hivatott. Az ikonok jellemzően nem magukban állnak, hanem egy több, adott esetben akár több tíz, vagy akár több száz tagú, egységes formanyelvvel rendelkező készlet elemei. 

Akárhogyan is, az ikon elsődleges célja, hogy:

• magára terelje a felhasználó figyelmét
• segítsen egyértelműsíteni a kapcsolódó funkciókat
• segítse a felhasználó tájékozódását az interfészben
• helyet takarítson meg a kezelőfelületen
• kapcsolatot létesítsen a felhasználóval
• termékcsoportok, azonos brandhez tartozó termékek esetében erősíti a brand imázsát és vizuális egységességét 

Ikonmentes felhasználói felületet manapság gyakorlatilag már nem is találhat az ember: még ha alapvetően szövegcentrikus az interfész, akkor is a legtöbb esetben megjelennek bizonyos ikonok a fő kapcsolók szövegei mellett, de az olyan elengedhetetlen UX funkciók, mint a menü vagy a keresés gyakorlatilag mára elképzelhetetlenek ikonok nélkül.

Mitöl lesz jó egy ikon-készlet? 

Az ikon elsődleges feladata az egyértelműség, tehát hogy a hozzá tartozó koncepciót gyorsan és egyértelműen továbbítsa a felhasználó irányába, anélkül, hogy alaposabban meg kelljen nézni. Ez az alapvetés ugyan egyértelműnek és logikusnak hangzik, mégsem képes mindenki a maradéktalan betartására, nemrégiben éppen a Google kapott rengeteget a nyakába, amikor a legutóbb szép, egységesített designjával áttervezte az alkalmazáscsomagj gyakrabban használt ikonjait.

Ahogy egy designer megjegyezte, a design forma- és színnyelve éppenséggel egységes lett, de ezzel a szép színes ikonok pont azt veszítették el, hogy egyetlen pillantással könnyen megkülönböztessük őket egymástól – főleg, hogy a redesign azt a hibát is elkövette, hogy a korábbi jól ismert ikonokat zavarta össze egymással: a Gmail piros-fehér boríték ikonját és a Drive három színű háromszögletű szalagját már rég megszoktuk, de az a vizuális kulcs, amivel korábban az egyiket vagy a másikat kereste a szemünk, már mind a kettőhöz (no meg a többihez is) tartozik. Lényegében annyit lehet csak egy pillantásból megállapítani, hogy egy alkalmazás a Google-é vagy sem. 

Hogyan kerülhetjük el az ilyen balfogásokat?   

A Nielsen Norman Group egy cikkében alaposan körüljárta az ikon használhatóság témakörét és arra jutottak, hogy a használhatóság (usability) tesztelésében négy szempont alapján érdemes megvizsgálni egy ikont, vagy ikonkészletet. 

Megtalálhatóság: 

Mennyire könnyű vagy nehéz megtalálni, felismerni az ikont a teljes felhasználói interfész kontextusából vizsgálva.

Felismerés: 

Felismerésről akkor beszélhetünk, amikor a figyelem már az ikonra összpontosul. Ez mutatja, mennyire ismerhető fel első látásra, mit jelenít meg az ikon. A felismerhetőség kritériuma maga a grafika értelmezhetőségére utal, ezért a legjobb kontextusából kiragadva vizsgálni, fel tudja-e ismerni egy felhasználó, mi is az, amit lát. 

Információ-szag: 

Az Információ-szag (Information scent) kicsit viccesen hangzó fogalma azt az általános érzést jelzi, ami a felhasználót a honlapon vagy alkalmazásban tovább vezeti a keresett információ vagy célpont irányába – úgymond “szagot fog”, és érzékeli, hogy jó nyomon jár. A megfelelően adagolt információ-szag biztosítja, hogy a felhasználó az oldalon maradjon, és ebben az ikonoknak is fontos szerepe lehet. Az ikonhasználat szempontjából itt azt vizsgáljuk, az oldal és az általános UI/UX kontextusában, de legalábbis minimális kontextus megadásával mennyire érthető az ikon funkciója. 

Vonzóság:

Az ikon esztétikai vonzereje nem csak tetszetősebbé, de használhatóbbá is teszi a termékeket – azaz nagyban megnöveli a felhasználói élményt. Az persze, hogy mi viszonyul esztétikusnak, szépnek, rengeteg szemponttól függ – gondoljunk csak arra, hogy egy modern, minimalista vagy flat felhasználói interfészben egy amúgy nagyon szépen kidolgozott, remekül megtervezett szkeumorf ikon kifejezetten rettenetesen fog festeni. 

Értelemszerűen láthatjuk, hogy az ikonok használhatósága nem választható külön a felhasználói interfésztől és az egész felület designjától. 

Ugyanígy a Nielsen Norman csoport egy másik, az ikonok használhatóságáról szóló cikkében még az alábbi szempontokat is kiemelte:

Fontos szemmel tartani az ikon relatív méretét az UI többi lényeges eleméhez képest, hiszen az észrevehetőség és klikkelhetőség avagy megbökhetőség az ikon legfontosabb tulajdonsága. Itt fontos észben tartani, hogy az ikonnak minden nézetben láthatónak kell maradnia: lehet, hogy a mobil nézethez képest az asztali nézetre tervezett UI arányai eltörpítik a hozzájuk igazodó ikonokat. 

A használhatóság egyik legfontosabb tanulsága, hogy akármit is diktál a szépérzéknek és a bennünk lakó graphic designer, az ikonokat fel kell címkézni. A szakértő szerint ez alól a szabály alól nem szabad kibújni, még olyan félmegoldásokkal sem, mint egy hover text beillesztése: minden potenciális kis zavar értékes klikkekbe és felhasználókba kerülhet az oldalunknak.

Egy tanulságos példa

Bár azt gondolnánk, hogy a web közel 30 éve alatt már egy sor olyan ikont találhatunk, aminek mostanra abszolút közmegegyezéses a jelentése, a Nielsen Norman cikkében rámutatnak, hogy használhatósági tesztelés közben többször is meggyűlt a felhasználók baja a szív és csillag ikonokkal – pedig ha valamiről, erről gondolhatnánk, hogy már abszolút bejáratott szimbólum lett. A tesztekben részt vevők számára viszont egyáltalán nem volt egyértelmű, hogy az adott oldalon a szívecske megbökésével mások számára jelzik, hogy tetszik nekik a jelzett cikk, vagy elmentik ezzel a cikket a kedvencek közé, ugyanis ezeket a funkciókat mindenki össze-vissza használja. 

Hogyan tervezz ikonokat?

Természetes, hogy a webdsignerek túlnyomó többsége hozott anyagból dolgozik, és egyszerűen keres egy olyan ikonkészletet, ami a legjobban megfelel a szükségleteinek. Erre számtalan lehetőség nyílik, mind az ingyenes, mind a fizetős variációból, de mégis eljöhet az a pillanat minden designer életében, amikor vagy kedve támad teljesen saját ikonokat használni a designjában, vagy annyira karakteresre sikerül a készülő oldal vagy UI grafikai terve, hogy érdemesebb az ikonokat is hozzá igazítani. A harmadik lehetőség persze az, hogy ha meg is találtad a tökéletes ikonkészletet, pont ahhoz a funkcióhoz nincsen igazán passzoló ikon benne, amire neked a legnagyobb szükséged volna, és ilyenkor bizony az a leghatékonyabb, ha magad állítod elő a hiányzó elemeket. Vegyük végig röviden, hogyan érdemes ennek nekikezdeni. 

Az első lépés persze, ha teljesen új készletet tervez, hogy az ember körülnéz és kikutatja, milyen ikonokat használ a konkurencia, avagy más, hasonló területen működő honlapok. Ez nem csak azért fontos, hogy beindítsa a fantáziádat: a felhasználók is bizonyos fokig elvárják az ismerős motívumokat, megoldásokat, és ha ettől nagyon eltérsz, bizony éppen, hogy az ellenkező hatást éri el. 

Ikonokat jellemzően vektoros rajzolóprogramokban érdemes elkészíteni. Egyfelől a mai divatos design formanyelvekhez a vektoros, flat grafika illik a legjobban, másfelől az így elkészült rajzokat könnyebben lehet bármilyen méretre kicsinyíteni illetve nagyítani (avagy egy vektoros formátum esetén ezzel nem is kell foglalkoznod)

Készíts rácsot!

Ha egy egész csokornyi ikont készítesz nulláról, el kell döntened, milyen formába szeretnéd elhelyezni őket: az ikonkészlet alapja kör lesz, négyzet vagy fekvő, esetleg álló téglalap? Akárhogyan is, ha ez a döntés megszületett, szükséged lesz egy segédrácsra, ami jellemzően kiméri az ikon befoglaló külső keretét, a belső margót és a jellemző ikonformák (horizontális, vertikális formák) kereteit is: ennek a gridnek a segítségével sokkal könnyebb lesz arányaiban egységes ikonokat rajzolni. 

Csak világosan!

Az ikontervezésben abszolút a “kevesebb több” a vezérelv, világos, jól kivehető vonalak és jól érthető metaforák kell hogy a készletedet jellemezzék. Általános szabály, hogy csak a fontos részleteket tartsuk meg a képből, az ábrázolt tárgyaknak pedig csak a legszükségesebb belső részleteit jelezzük. Amennyire lehetséges, koncentráljunk a sziluettekre.

Figyelj a távolságokra!

Nem csak az ikon belső margóit kell szemmel tartanod, épp annyira fontos (főleg a flat stílusú designokban) a különböző elemek közötti belső távolság egységessége is. 

Töltsd ki a teret!

Egyes formák, mint pl. egy felkiáltójel vagy egy ceruza, hiába jelentik a tökéletes szimbólumot, magukban állva túlságosan kiegyensúlyozatlanok, sok üres tér marad körülöttük. Ilyenkor érdemes kicsit eljátszani velük, tudsz-e kicsit forgatni rajtuk, vagy hozzájuk tenni valami olyan grafikai elemet, amitől jobban kitöltik az ikon használható belső terét.

Egy vagy több szín?

Fontos döntés, hogy az ikonjaid a modern UI vezérlő ikonok többségéhez hasonlóan tisztán monokróm, minimalista stílusban készülnek, vagy a mobil alkalmazás-ikonokhoz hasonlóan tarka stílusban, esetleg valahol a kettő között, 2-3 fokú színtónus használatával? 

Érthetőség

Vannak ikonok, amiken egy percet sem kell gondolkozni, ilyen például a keresés nagyítója, de mivel jelzel absztraktabb fogalmakat, vagy az alkalmazásodban lényeges, részletes fogalmakat vagy akciókat (pl adatbázis szerkesztése)? Egyes szimbólumok lehetnek kulturálisan beágyazottak is, ilyenkor az egyik ország vagy kontinens lakói számára egyértelműek, másoknak viszont könnyen lehet, hogy nem mondanak semmit, vagy éppen ellentétes jelentést hordoznak. (Mint pl. a japán térképeken a buddhista templomokat jelző – fordított – horogkereszt.)

Csak egységesen!

Az egységes vizuális hatás az ikonkészlet legfontosabb eleme. A legalapvetőbb, hogy figyelj a vonalvastagságra, a lekerekítések rádiuszára, a kitöltés stílusára, színére. Az ikonkészlet teljes vizuális egységességét még a tervezési fázisban érdemes kritikus szemmel végiggondolni, különös tekintettel az alábbi szempontokra:

• egységes paletta
• egységes megvalósítás (2D vagy 3D, kitöltött vagy körvonal, ívelt vagy szögletes, stb.)
• egységes részletesség (hiába éreznéd úgy egyértelműbbnek a szimbólumot, ha 1-2 ikon részletgazdagabb a többinél, az egész készletet összezavarja)
• egységesen statikus vagy dinamikus karakter
• egységes árnyalás (már ha van ilyen)
• illeszkedés az oldal általános design formanyelvébe
• igazodás a kapcsolódó betűtípus karakteréhez

Egyéniség

Az ikon egyénisége egyrészt vonatkozik az ikonkészlet általános felismerhetőségére, azaz mennyire lehet megkülönböztetni a készlet elemeiet a többi készlet hasonló elemeitől, másfelől viszont legalább ennyire fontos, hogy az egyes ikonok a készleten belül mennyire ismerhetőek fel, és mennyire különböztethetőek meg a többi ikontól (ahogy ezt a cikk elején a Google ikonok példáján láthattuk).

_{Borítókép: Trinh Ho, Dribbble}