Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2019-03-070 komment

Teli vagy körvonalas ikonokat használj? Melyik a hatékonyabb?

Ha azt gondolod, hogy egy ikon esetében mindegy, hogy az színnel kitöltött vagy csak a körvonala van meghúzva, akkor tévedsz. Egy ikon stílusa befolyásolja a felhasználói élményt és a hatékonyságot.

Sokan vannak, akik pusztán ízlésbeli kérdésnek tekintik, hogy milyen ikonstílust használnak. Pedig a kutatások azt mutatják, hogy egyik vagy másik típusú ikont eltérő gyorsasággal képesek feldolgozni a felhasználók. Ha egy adott stílusú ikont könnyebben képesek értelmezni, akkor az azt jelenti, hogy egyszerűbben érik el a céljukat, végzik el a feladatukat egy alkalmazásban vagy egy weboldalon.

A Uxmovement egy olyan kutatásra hívta fel a figyelmet, melyben az úgynevezett színnel teljesen kitöltött, illetve az üres, csak körvonalat megjelenítő ikonokat hasonlított össze. A kutatás megállapította, hogy az ikonstílus hatással van egy feladat végrehajtására. Utóbbit az ikon felismerésének és kiválasztásának sebessége és pontossága alapján mérték.

Teli és körvonalas ikonok

Ami alapvetően kiderült, hogy a telibe színezett ikonok hatékonyabbak: könnyebben felismerhetők, mint a körvonalas ikonok. Ugyanakkor akad néhány kivétel, valamint vannak olyan ikonok is, ahol nem fedezhető fel különbség a feladat végrehajtásának sebességét tekintve.

Utóbbi elsősorban a karakterisztikus jellemzők jelenlétével függött össze. Ha ezek a jellemzők hiányoztak, vagy nehezen voltak észrevehetők, akkor nem tudták azonosítani az ikont a felhasználók. Mit ezek a meghatározó részletei egy-egy ikonnak?

(Forrás: uxmovement.com)

Mint a fenti ábrán látható, ha hiányzik a kis farok a hozzászólás-buborékról, akkor már nem lehet hozzászólásra utaló ikonként értelmezni. Egyszerűen csak egy fekete folt. Ugyanez figyelhető meg a lakat ikonnál: ha eltávolítjuk a kulcslyukat, akkor már inkább egy táskára hasonlít. Ahogy a fogaskerék is csak egy lyukas körré válik fogak nélkül.

A kutatásból kiderült, hogy a kulcslyuk nélküli lakat tévesztette meg leginkább az embereket, a hibák negyedét okozva. A kulcslyuk itt egy meghatározó részlete az ikonnak, mely szükséges ahhoz, hogy a felhasználók azonosítani tudják.

Tehát, amikor ikonokat használsz, mindig győződj meg arról, hogy az ikon minden olyan meghatározó részletet tartalmaz, mely által könnyen azonosítható. Ha egy ikon egy másik tárgyra hasonlít, akkor egy olyan karakterisztikus jellemzőt kell elővenni, mely által önmagává válik.

Ez úgy kapcsolódik a körvonalas ikonok hatékonyságának kérdéséhez, hogy a karakterisztikus jellemzőnek könnyen észrevehetőnek, jól láthatónak kell lennie. Márpedig akadnak olyan ikonok, amikor ez a részlet sokkal feltűnőbb egy körvonalas ikonon, mint egy színnel kitöltöttnél.

(Forrás: uxmovement.com)

A fenti képen látszik, hogy melyik az a három ikon, melyeknél a körvonalas stílus hatékonyabb. A körvonalak ugyanis a karakterisztikus jellemzőket sokkal határozottabban kirajzolták. Egy színnel kitöltött hozzászólásbuboréknál nehezebb felfigyelni a kis farokra, mint a körvonalasnál, de a szemetes fedelénél is ugyanez a helyzet.

Mindebből az az általános következtetés vonható le, hogy amikor a karakterisztikus jellemző nem elég erőteljes, és a forma szélén helyezkedik el, akkor egy körvonalas ikon a hatékony megoldás. Ezáltal hangsúlyosabbá válik a karakterisztikus jellemző és gyorsabban feldolgozható az ikon.

Ugyanakkor persze, amikor ikonokat használsz, akkor egyfajta stílust kell következetesen használni az alkalmazásban vagy a weboldalon. Vagyis nem keverhető a körvonalas és a színnel kitöltött ikon stílus. Ezért, ha a színnel kitöltött ikonok mellett döntesz, akkor olyan ikonokat kell használnod, melyeknél jobban látható a karakterisztikus jellemző: élesebb szögben és jobban kiemelkedik.

(Forrás: uxmovement.com)

A fenti képen tisztán látható, hogy miként lehet ezt megoldani.

Mikor rossz választás egy körvonalas ikon?

Az előbb láttuk, hogy mikor teljesítenek jobban a körvonalas ikonok. Ugyanakkor vannak olyan tipikus esetek, amikor a színnel kitöltött ikonok a hatékonyabbak. Elsősorban akkor, ha az ikonok valamilyen valós tárgyat ábrázolnak, melynek van egy határozott sziluettje. Ilyenkor a körvonalas ábrázolás nem annyira valószerű, hiszen eltér attól, mint amivel a valóságban találkozunk.

(Forrás: uxmovement.com)

Természetesen az emberek ezekben az esetekben is képesek értelmezni a körvonalas ikonokat, a különbség csak annyi, hogy a feldolgozás lassabb, amikor az ikon formáját adó vonalak túlságosan közel kerülnek egymáshoz. A fenti képen látható körvonalas ikonok azért értelmezhetők nehezebben, mert a túl keskennyé váló belső tér miatt vizuális zaj keletkezik.

Következtetésként levonható, hogy színnel kitöltött ikonokat érdemes használni olyan ikonok esetén, ahol szűk belső terek jelennének meg a vonalak között. Az árnyképes megjelenítés ilyenkor egy egyszerűbb formát mutat, így az ikon könnyebben értelmezhető.

Mikor nincs különbség?

A tanulmány olyan ikonokat is talált, melyeket mindkét stílus esetén ugyanolyan könnyen lehetett azonosítani. Ilyen volt például a csillag, a bevásárlókocsi vagy a zászló.

(Forrás: uxmovement.com)

Ezeknél látszik, hogy nincs olyan keskeny rész, melynél a körvonal vizuális zajt okozhatna.

Amire még érdemes kitérni, hogy sokan úgy használják a színnel kitöltött és a körvonalas ikonokat, hogy előbbi az aktív, utóbbi az inaktív állapotot jelzi.

(Forrás: uxmovement.com)

Ezt azonban pont fordítva lenne érdemes használni. Itt abból kell kiindulni, hogy az emberek könnyebben felismernek egy olyan ikont, melyet már használtak. Vagyis, mivel a színnel kitöltött ikonok általában könnyebben értelmezhetők, ezért a nem aktív ikonoknál kellene őket használni. Ugyanakkor, ha egy ikon aktív, azt már nyugodtan lehet körvonalas ikonnal jelezni. Emellett persze egy megváltozó színnel is utalni kell arra, hogy melyik ikon aktív, mert nem elegendő, ha csak átváltunk teliről körvonalasra.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.