UX tanácsok: Óvatosan az ikonokkal!

Az ikonok szemet gyönyörködtetőek. Az ikonok izgalmasak, tele ravasz metaforákkal. Ikonokkal letisztulttá, minimalistává tehető egy felhasználói felület.
Ikonokkal teljesen tönkre lehet tenni a felhasználói élményt.

Használtál valaha akár mobil, akár webes alkalmazást, ahol csak ikonok voltak a kezelőfelületen? Neked egyből világos volt, mit csinálnak a gombok? Ha még nem volt frusztráló élményed ilyen alkalmazással, garantálom, hogy előbb-utóbb lesz. A napjainkban népszerű design nyelvet olyan erősen a letisztultság határozza meg, hogy a designerek gyakran nem tudnak ellenállni a kísértésnek, hogy használhatatlanságig fokozzák a tisztogatást. Az ikonok különösen vonzó megoldásnak tűnnek mobil appok esetében, ahol a kisebb képernyők miatt kevés terület áll rendelkezésre. Ha nagyon kevés funkció van, és az ikonok nagyon átgondoltan lettek kiválasztva, akár még jól is működhet egy ilyen UI (pl. Tinder). Sajnos, ez számít kivételnek.

A legtöbb ikont megtanuljuk, nem felismerjük

Az ikonokkal teli kezelőfelületek működhetnek a profi felhasználóknak szánt, munkaeszközként használt szoftverek esetében, ahol a userek energiát fektetnek bele, hogy megtanulják azt kezelni. Jó példa erre bármelyik Adobe grafikai program: ültess egy Photoshop elé valakit, aki most találkozik vele először és az ikonok 90%-ának funkciójáról fogalma sem lesz. Az Adobe a termékeit kizárólag grafikai szakembereknek szánja, akik megtanulják, melyik ikon mit csinál – megtanulják, nem pedig intuitív módon ráéreznek, ahogy sokan szeretnék hinni az ikonokról. Mire sok-sok óra használat után már ösztönösen tudja egy szakember, hova kell nyúlnia egy funkcióért, valóban kényelmessé válik, hogy kevés helyet vesznek el a gombok a munkaterületből. Azt se véletlenül írom, hogy tudják hova kell nyúlni: Jared Spool kutatásai szerint valójában erősebben tanuljuk meg azt, hol helyezkedik el egy ikon a kezelőfelületen, mint a konkrét kinézetét

Még munkára szánt szoftverek esetén se mindig működnek az ikonok, főleg, ha a programnak sokféle különböző háttérrel rendelkező felhasználónak kell megfelelnie. Jó példa erre az Outlook fejlődésének története. A PC korszak kezdete óta szinte minden irodai dolgozó használ néha Microsoft Office-t, ám töredékük ismeri azt profi szinten. A Microsoft kutatói még az Outlook 98 idejében figyelték meg, hogy a nem szakértő felhasználók gyakorlatilag soha nem használják a különböző ikonokat. Többféle változtatással próbálkoztak: lecserélni az ikonokat, átrendezni a sorrendjüket, feltűnőbb helyre tenni az egész eszközsort. Ezek nem hoztak komoly javulást, azonban egy változtatás igen: egyszerűen minden fontos ikonhoz kiírták, mit is csinál (labeling). Bumm, az emberek elkezdték használni őket, függetlenül attól, milyen háttértudással rendelkeztek a szoftverről. Az eszközsor a UI egyik legfontosabb részévé vált. 

Mindannyiunknak ismerős példa, ahol az ikonok teljesen csődöt mondanak, a designerek mégse hajlandóak lemondani róluk: az autók műszerfala. A legtöbben még évek után se értik autójukban összes kis ikon jelentését – éppen megtanulhatnák őket a felhasználói kézikönyvből, de találkoztál már emberrel, aki ezt meg is tette? Idővel a fontosabb funkciók működését kikísérletezzük, de a legtöbbünknek örökre rejtély marad egy-két ikon.

Ez a cikk nem arról szól, hogy ne használjunk ikonokat. Ez a cikk arról szól, hogy bánjunk óvatosan az ikonokkal, mert jó eséllyel a felhasználók sokkal kevésbé értik majd őket, mint ahogy azt elképzeltük. A fentiek alapján úgy tűnhet, hogy az ikonok a usability (használhatóság) legnagyobb ellenségei, de ez természetesen nem igaz, akkor nem találkoznánk velük lépten-nyomon remek designerek által tervezett kezelőfelületeken.

Az ikonok pszichológiája: egy kép nem mindig mond többet 1000 szónál…

Az ikonok velünk vannak a 80-as évek óta, mikor a Xerox Star számítógép kezelőfelületét megalkotó csapat munkája nyomán egyre népszerűbbekké váltak. Számos érv szól mellettük, a legfontosabbnak pszichológiai alapja van: képeket könnyebben és gyorsabban dolgoz fel az agyunk, mint szöveget. (Bővebben itt olvashatsz erről, Edward Sanchez remek cikkében). Kutatások szerint nem is kicsivel: hatvanezerszer gyorsabban! Az elolvasott szavak jelentését még vizualizálnunk kell agyunkban, a képek ehhez a folyamathoz sokkal több támaszt adnak elménknek a magukban értelmetlen betűknél. Azonban ez csak addig igaz, amíg nincs különösebb absztrakcióra szükség az ikon megértéséhez: abban a pillanatban hogy erre szükség lesz, valójában már nagyobb munka az agyunknak megérteni őket, mintha csak le lenne írva a jelentésük.

Az elvont koncepciókat bemutató ikonok valójában csak ritkán értelmezhetőek egyből a felhasználók számára. Egy ceruza szimbólum egyértelmű jele annak, hogy rajzolni tudunk a képernyőre, egy fényképezőgép világosan mutatja, hogy megnyomva fényképeket készíthetünk. Egy csapat pálcikafigura azonban már sok mindent jelenthet: barátok, csoportmunka stb. Sokkal bonyolultabb fogalmat próbál bemutatni ez az ikon, így jó eséllyel csak megtanulni tudja jelentését a felhasználó, amihez vagy kísérletezéssel jut el – megnyomja, és kiderül mi lesz -, vagy írásos segítségre támaszkodik (feltéve, hogy kínálunk neki). Egy ilyen komplexebb szimbólum csak akkor működhet intuitívan, ha az adott környezetben szinte félreérthetetlen.

Bizonyos ikonok elég erős elvonatkoztatást igényelnének a felhasználó részéről, de működnek, mert évtizedek óta következetesen használják őket a felhasználói felületeken – ilyen esetekben valójában nincs szükség agymunkára, mert már megtanultuk jelentésüket. Jó példája ennek a mentés a floppy szimbólummal: a mai 10 év alattiak már nem igen láttak ilyen tárolót, így számukra ez egyszerűen egy tanult dolog. Elveszett, vagy fölöslegessé vált az eredeti metaforikus tartalom, az újabb generációk valójában egy írásjelhez hasonlóan megtanulják a jelentésüket.

A teljesen intuitív kezelőfelület valójában csak egy álom, lehetetlen megvalósítani: minden UI megértése, megtanulása és használata igényel némi kognitív erőfeszítést a felhasználó részéről. A designer egyik dolga, hogy ezt a szükséges erőfeszítést a felhasználói szokások figyelembevételével optimalizálja. Ha sok az ikon a kezdeti fázis (a betanulás, szakértővé válás) lesz a több gondolkozást igénylő időszak, és később csökken a kognitív teher; míg egy zsúfoltabb, de szöveggel teli, így elsőre is értelmezhető felületet később fog több agymunkát igényelni a folyamatos használat során.

Van, amikor az ikonok magukban is elegek

Marli Mesibov cikkében remekül összegyűjtötte, hogy mik lehetnek azok az esetek, amikor javallott lehet ikonokat magukban, feliratok nélkül is használni. A listáját némi magyarázatokkal kiegészítve mutatom be.

  • Használd bátran azokat az ikonokat, amelyeket mindenki ismer és megért, mert már az informatikai alapműveltséghez tartoznak. Ilyen a mentést jelképező floppy lemez, a mappák ikonja, a zöld pipa (de ne feledkezz meg a színtévesztőkről), vagy az előre és vissza nyilak. Azért ezeknél is állj meg átgondolni, hogy az adott kontextusban biztosan világos lesz-e, milyen funkciót aktiválnak. Vedd figyelembe, hogy az univerzálisan ismert ikonokból tényleg nincs sok!
  • Használd bátran az ikonokat olyan esetekben, amikor a felhasználók időt és energiát szánnak a munkaeszköz megtanulására, illetve betanítják őket. Erre példa a Photoshop fent említett esete. Ilyenkor  is érdemes vigyázni: ha egy belső számlázó programban 50 különféle ikont használunk mindenféle felirat nélkül, pont úgy járhatunk mint az Outlookkal járt a Microsoft – senki nem fogja használni őket. Azonban, ha a felhasználóknak sikerül pontosan megtanulnia az ikonok jelentését és elhelyezkedését, akkor nagyon felgyorsíthatják a munkát, hiszen letisztult, gyorsan átlátható kezelőfelület hozható létre velük.
  • Az előző pont mobil-, vagy kis képernyőre szánt alkalmazásokra is igaz: pl. egy pincéreknek szánt rendelésfelvevő alkalmazás esetében jól megválasztott ikonokkal nagyon felgyorsítható az információbevitel, de számolni kell azzal, hogy ez lassítani fogja az új dolgozók betanítását. Ezzel szemben egy nagyközönségnek szánt alkalmazás esetén a felhasználók nagyon kevés időt hajlandóak a tanulásra és a megértésre szánni, így ha nem akarod gyorsan elveszíteni őket, azonnal érthető felületet tervezz.
  • Az ikonok remek módját jelenthetik a kommunikációnak olyan nemzetközi alkalmazások esetében, ahol a nyelvi korlátok problémát jelenthetnének a szöveges kezelőfelület értelmezésekor. Itt arra kell figyelned, hogy tényleg csak olyan szimbólumokat használj, amelyek a mindenhol célpiacon ugyanazt jelentik.
  • Az ikonok nagyon hasznosak olyan alkalmazások alkalmazások esetében, amelyeket még olvasni nem tudó gyerekeknek szánsz (egyre több ilyen készül pl. tabletekre).

Ikonok mint támogatók

Mint fentebb rámutattam, a képek remek mankót adnak az agyunknak, és felgyorsítják az információk megértését, emellett megkönnyítik a visszaemlékezést is. Így a szöveg és ikon együttes használata tökéletes választás lehet számos esetben, ahol nem elsődleges szempont a helyspórolás vagy a nemzetközi érthetőség. Míg az ikon segít vizualizálni a leírtakat, addig a szöveg mindenki számára teljesen világossá teszi az információkat. A jól megválasztott ikonok emellett segítenek átláthatóbbá tenni listákat, felsorolásokat, strukturálni a szövegeket.

Az ikonok emellett erősíthetik és szavakkal nehezen megfogalmazható többlet tartalommal tölthetik meg a hozzájuk kapcsolódó szöveget: érzelmi hatást érhetünk el velük, vagy felébreszthetjük a felhasználó képzeletét. A képek a felhasználó agyának egész más területeit stimulálják, mint a szövegek.

Ha nincs felirat, legalább egy tooltip legyen!

Ha egy kezelőfelületen végül amellett döntünk, hogy valamit kizárólag ikonokkal jelölünk, soha ne felejtkezzünk el a tooltipekről: mindig biztosítsunk félreérthetetlen magyarázatot, ha a felhasználó egerét az ikon fölé húzza. Ezt trükkösebb megoldani érintőképernyőkön, ahol a föléhúzás (hover) nem megvalósítható: ilyenkor az ikon mellett elhelyezett extra információs gombbal operálhatunk, de az is bevett megoldás, hogy az első kattintás még nem aktiválja a funkciót, csak az ikon magyarázatát hozza elő (ezzel bánjunk óvatosan, gyakran használt funkcióknál lassítja a használatot).

Ikonok: apró képek, amiket nagyon át kell gondolni

A fentiekben röviden bemutattam olyan szempontokat, amelyeket érdemes megfontolni, ha ikonokhoz nyúlunk bármilyen kezelőfelületen. Az ikon kifejezés eredetileg a kereszténységhez kötődik, de a jelentéssel bíró kis szimbólumok valójában évezredek óta velünk vannak (gondoljunk csak a különféle képírásokra, vagy akár barlangrajzokra) így a téma szinte végtelen kutatási lehetőségeket rejt, több tudományterületen is; ezeknek azonban nagy része nem bír gyakorlati jelentőséggel a felhasználói felületekre. Ha igazán érdekel a téma felhasználói élményre gyakorolt hatása, javaslom átolvasni a cikk során linkelt remek forrásokat. Az ikonok a UX jó barátai és ádáz ellenségei is lehetnek, attól függően, hogyan alkalmazod őket. Mindig tedd világossá magadban, hogyan is fognak interakcióba lépni alkalmazásoddal a felhasználók: mennyi időt hajlandóak a betanulásra szánni, milyen gyakran használják majd, miként tekintenek rá… Ha nincsenek meg a válaszaid, ideje megkérdezned a felhasználóidat és elemezned az eredményeket, mert csak ezeket a válaszokat megismerve tudod eldönteni, milyen kezelőfelületre is van szükség, és abba hogyan illenek az ikonok.

Oszd meg bátran: Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someone

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.