Ikonok a weben
A weben egyre gyakrabban használnak ikonokat, aminek az lehet az oka, hogy a jelenlegi weblapoknak jóval több mindenre kell képesnek lenniük, mint elődjeik. Egyre több minden kerül be a webes alkalmazásokba, amelyek már jól beváltak a hagyományos szoftverekben. Az ikonok népszerűségéhez nagyban hozzájárul az is, hogy egyre kevesebb helyünk van az alkalmazásokban, és az ikonokkal lehet helyet spórolni.
Az ikonhasználat a következő előnyökkel járhat:
• kevesebb helyet foglal el, mint a szöveg
• gyorsan beazonosítható
• egyértelműbben kommunikálja, hogyha rákattintunk, akkor történni fog valami
• esztétikus: az ikonok szép jószágok, ha igényesen vannak megtervezve, akkor növelhetik a weblap esztétikai értékét
• figyelemfelkeltő
• hangulatot és stílust közvetít
• nem kell hozzá nyelvtudás
Mivel azonban igazán jó ikont tervezni nem csak design, hanem ergonómiai feladat is, gondoljuk meg jól, hogy belevágunk-e oldalunk elikonosításába. Ha nem tudjuk eldönteni, hogy kell-e nekünk ikon vagy sem, akkor inkább nem kell.
A hatékony ikon a következő szempontoknak felel meg:
• az ikonok egységes vizuális hatást keltenek (Mac felhasználói csoportok)
• az esetleges folyamatokra jól utalnak (lejátszás)
• ha az adott területen kialakult konvenciót követi (word lementés)
• ha az ikon nem biztos, hogy megállja magában a helyét akkor rövid szöveg tartozik 
hozzá (aláírás vagy legalább egér rámozgatására elmondja, hogy mit csinál, itt lehetünk kicsit hosszabbak is: 3-4 szó; mac iwork)
• az ikon vizuálisan egyszerű, viszonylag kevés elemet tartalmaz (keresés)
• gyorsan beazonosítható (előbbi ikon)
• nem kelt negatív érzéseket, asszociációkat a felhasználóban (ha ehhez hasonlít, az rossz emlékeket idéz fel)
• a tartalom lényegét megragadva némileg torzíthatja is a valóságot (beállításokra jól utal, hiába nincs a számítógépben fogaskerék)
• az összes lehetséges háttérrel kontrasztos, kiugrik belőlük
• több méretben is előállítható, úgy hogy az esztétikai és ergonómiai elvárásoknak is megfelel (előző ikonok)
• ne használjunk már meglévő ikont a megszokottól más értelemben
• a célközönség tudásszintjének és kulturális hátterének megfelelő ikont dolgozzunk ki
Készülő ikonjainkat Jakob Nielsen nyomán kétféleképpen is tesztelhetjük:
• Az ikonokat címke nélkül megmutatjuk a felhasználóknak, hogy megtippeljék vajon mire is utalnak. Ez alapján látjuk, hogy ikonjaink a környezetből kiragadva mennyire megfelelőek.
• Átlagos használhatósági tesztelésben találkoznak a felhasználó az ikonokkal (itt gyakran címkével is rendelkeznek), amikor a feladatok közben hangosan kell gondolataikat, véleményeiket megfogalmazni. Ilyenkor megtudhatjuk, mit gondolnak ikonjainkról is.
Az ikonokat célszerű több lépésben tesztelni. Először dolgozzunk fekete-fehér vázlatokkal, majd folyamatosan haladjunk az életképesebb változatokkal, hogy közben színesítjük őket és javul a kidolgozottságuk is.
Sose bízzunk abban, hogy az emberek majd rákattintanak az ikonra, rájönnek a jelentésére és megjegyzik. Nem fognak próbálkozni, vagy ha mégis, de nem a várt hatást hozza az ikon, akkor nagyon bosszúsak lesznek. Ritkán használt alkalmazásokban, weblapokon pedig általában annyira ritkán használnak az emberek egy-egy ikont, hogy csak kis esélyünk van arra, hogy ezek helyes használatát meg is jegyezzék.
Jakob Nielsen írása az ikonok tervezéséről
Apple irányelvek ikontervezéshez
7 alapelv a jó ikontervezéshez
Dr. Rung András
Ügyvezető, UX Vezető
Rung András 2002 óta foglalkozik UX-szel. Az innovációt és az üzleti fókuszt mindig szem előtt tartja. Az első magyar webergonómiai könyv a Felhasználóbarát honlapok társszerzője. Cikkei a nemzetközileg is jelentős Smashing magazinban is megjelentek.
Mind a 19 hozzászólás mutatása
Kedves Ergo,
ajánlott
cikkek
Tudj meg többet a témáról
Lépj velünk kapcsolatba!
Alkossunk együtt felejthetetlen dolgokat!
Kedves Ergo,
Bartók Béla út 39.
1114 Budapest
Látogatóknak
19 hozzászólás
Oszd meg velünk véleményed
Rung András | 2009. Jul. 02.
@RolFic: Izgalmas téma, gondolkozom rajta. Szerintem az rss-nél az a gond, hogy még a viszonylag számítógéphez értők sem tudják mi az, holott szükségük lenne rá. Igazán a kis ikon habár jól látható semennyire nem vonzza azokat, akik nem értik, hogy mi. Egyébként szerintem valahol a jobb felső tartományban van a helye.
RolFic | 2009. Jul. 02.
nekem manapság sok-sok kérdést vet fel az RSS ikonja! -> maga az ikon, az annak ismerőknek egyértelmű, de mi van a többiekkel? -> nem kéne őket valahogy belevezetni a rejtelmeibe?
Illetve, ami nagyon fontos kérdés, hol legyen az Ikon? Mekkora legyen?
Örülnék egy posztodnak, ami ezt feszegeti! :)
Nekem van róla egy véleményem... amit majd kommentként megosztanék!
Rung András | 2009. Jun. 20.
Általában ikonokra szerintem komplexebb weboldalakon van szükség. Pl. egy viszonylag bonyolultabb, de nem vásárlós céges weboldalon is el vagy ikonok nélkül.
Rung András | 2009. Jun. 20.
@Bővíz László - JUEX: Hm, nekem is puskáznom kellett. Felhasználói csoport, kontra összes felhasználó. Mondjuk az eredetiben van szöveg mellette.
Bővíz László - JUEX | 2009. Jun. 20.
András: Én máris zavarban vagyok a Mac felhasználói csoportok ikonjaival. Mi a különbség a kettő, illetve a három emberes jelentése között?
Tetszik a téma. Az általad felsorolt szigorú elvárások rámutatnak arra is, hogy az ikonkészítő már-már külön szakember, aki csak egy kiválló grafikussal és egy használhatósági szakértővel együtt helyettesíthető.
Bővíz László - JUEX | 2009. Jun. 20.
@Blinking12: Irtó óvatosan kell bánni velük szerintem is. Ott van például a Chrome fájlletöltési folyamatjelzője, ami számomra kérdéses, hogy változozatlanul hagyva kiállja-e majd hosszú távon is használhatóság próbáját, ugyanis nem látszik rajta eléggé, hogy épp mennyinél jár. Viszon szintén a Chrome böngészőben igen el van találva az oldal betöltésének folyamat jelzője.
Akkora körültekintést igényelnek az animációk, hogy a befektetett tervezési és tesztelési munkát, csak speciális körülmények között érik meg. Óriási számú felhasználótábor esetén.
Ugyanezért hanyagolják az ikonokat is. Sokkal könnyebb elrontani, mint jól megcsinálni. Felülete válogatja, hogy érdemes-e, általában a helytakarékosság indokolja, ezért van belőlük sok a kézi eszközökön.
András azon mondata, hogy ha kételyeink vannak a használata felől akkor inkább ne használjuk nagyon igaz. Magam is ezt szoktam szem előtt tartani és legtöbbször lemondok róla. Néha nem.
Nézzük meg mennyi ikon van például a Gmail-ben, és hány van felirat nélkül. Két ujjamon meg tudom számolni :) Nem véletlenül, de a Gmail ettől még kiválló marad.
Blinking12 | 2009. Jun. 17.
@Rung András: Egyrészt indokolatlanul alábecsülik a jelentőségét. Másrészt rengeteget adhat a felhasználói élményhez és a használhatósághoz. Harmadrészt nagyon jó érzék, tapasztalat és önmérséklet kell a megfelelő használatához. És végül, ahogy te is írtad, szinte mindig elrontják :) Szóval összetett, érdekes téma, ezért szeretem.
Rung András | 2009. Jun. 16.
@Blinking12: miért a kedvencek? mi az ami tetszik neked ebben? Az animációk nagyon érzékeny téma. Általában mindig elrontják.
Blinking12 | 2009. Jun. 16.
@Rung András: Az UI animációk megérnének egy külön postot és nemcsak azért mert nekem ez az egyik kedvenc témám :)
Rung András | 2009. Jun. 16.
@Zsuzsanna.webdesign: Jó ez a link! Hát igen, sokan nem tudják rendesen használni, de remélhetőleg ennek is kialakul a maga kultúrája. én is az egyszerű ikonok híve vagyok, de persze ha szép akkor az még nagyobb öröm. Sokat segítene, egyébként ha legalább mouseoverre elmondanák ezek, hogy mik is.
Rung András | 2009. Jun. 16.
@PAStheLoD: Az automatikusan átrendeződő felületeket én sem szeretem. Néha kellenek, akkor viszont nagyon fontos a nagyon egyértelmű kommunikácó és vizuális eszköztár. Ezért jók pl. a mac-en ezek az átúszások, sokan csak mosolyognak, hogy a hülye maceseknek milyen játékokra van szüksége. Közben amellett, hogy szép alapvetően ergonómia, mert tudod, hogy a cuccod honnan hova megy, mi jelenik meg helyette.
Zsuzsannadesign | 2009. Jun. 16.
Az írás nagyon jó témát feszeget, mert az ikonokat nagyon sokan keverik az illusztrációkkal. Persze a használatuk esztétikai élményt is fokozza, az alapvető funkciójuk a böngészés, használat megkönnyítése, gyakorlatilag egy vizuális súgó funkció. Ezt weben kevésbé töltik be, mint egyéb alkalmazásokban, az un. dekoratív (webkettes) ikonok erre nem is igazán alkalmasak - kis méretben ember meg nem mondja mi az a szép színes paca. Nekem a pixel ikonok a kedvenceim, portálos munkáknál user funkciók jelölésére nagyon beváltak - egyszerűek, és egyértelműek pl: icondock.com/free/mini-pixel-icons
Ezek egyébként néhány vonallal előállíthatóak, és egyszínűként értelmezhetőek. Nagyon sok ikonszettel találkozom, a 60%-uk inkább dekorációs célokra, mint UI tervezésre használhatóak.
Pas | 2009. Jun. 16.
Igen, ez volt az: juex.blog.hu/2009/05/22/egyertelmu_hogy_mi_egyertelmu
Az már maga a zavaros, amikor dinamikus az UI. Hisz' míg egy alap felületkiosztás memorizálását elvárhatjuk a póruljárt júzereinktől, viszont elég csak az IE-ben, Office-ban előforduló átrendezhető, hozzáadható mindenféle eszköztárra gondolni.
blogs.walkerart.org/newmedia/files/2008/07/too-many-toolbars1.jpg
dylan.tweney.com/wp-content/uploads/2006/11/word-all-toolbars-small.png
És nem ezek a nevetségesen szélsőséges esetek okozzák a problémát, hanem mikor Pistike anyukája nem találja a saját mappáját, mert Pistike megváltoztatta a sajátgép ikonját, átvariálta a Word-ben az eszköztárakat és nem balról a harmadik a "megnyitás", és így tovább.
(Nyílván, a retardált felasználókról egyszerűen le kell mondani, majd ha csigaként újjászületnek egy nagyobb aggyal, akkor .. :P)
Rung András | 2009. Jun. 16.
@PAStheLoD: Abszolút ide tartozik. Ilyesmiről írt Bőviz Laci is a juex.blog.hu -n. Ha eszedbe jut az írás, akkor tedd be ide kommentnek, biztos mások is örülnének neki. Az állapotjelzés fontos, bár nem minden esetben kell, főleg, ha utána továbblépsz valamivel, vagy azt az akciót akár többször egymás után is végrehajthatod
Érdekes az is, amikor egy dolog többször is végrehajtható, de értelmetlen pl. logóra kattintani a nyitón, vagy ha még nem írtál új dolgot de save-elsz. Ezek egyértelmű jelzése is külön művészet.
Rung András | 2009. Jun. 16.
@kázé: Igen az nagy királyság én is erről nézem már le, bár eleinte gyanakodtam, hogy a legutóbbi megnyitás időpontját mutatja be. Ezek a rossz régi windowsos berögződések:)
Pas | 2009. Jun. 16.
Van valahol az INTERNETS-en egy jó kis magyar írás a felhasználói felületek tervezéséről, ikonokról, gombokról. Pár személetes példán keresztül mutaja be, hogy mekkora félreértés lenne, ha mondjuk egy repülőgépben olyan ikonok lennének, mint a youtube és pár egyéb webapp kezelőfelületén.
Röviden a lényege, hogy az a jó ikon, gomb, ami:
- egyértelmű funkciójú (play vagy pause, döntsd el)
- egyértelmű állapot (most akkor a play gomb be van nyomva, vagy nincs?)
- egyértelmű esemény (nem OK, Mégse, Igen, Nem gombok kellenek, hanem Másol, Megtart, Töröl, Kilép)
Csak gondoltam, ha már UI-Web-Ikonok, akkor ez még idekívánkozik :)
kollinz | 2009. Jun. 16.
azért OS X-ben az az über, ahogy az iCal ikon az aktuális dátumot jeleníti meg :)
Rung András | 2009. Jun. 16.
igazad van, ezek valóban értékes és jó dolgok. Iphone-on néha vannak kisebb gondok azért, mert ott pl. a mailnél nem lehet az összes emailt olvasottnak jelezni, ezért nem túl informatív a dolog, de más alkalmazásoknál nagyon hasznos. Másutt ez nincs csak OS X?
Blinking12 | 2009. Jun. 15.
Nagyon jó összefoglaló, esetleg érdemes lenne megemlíteni még (példával) az OS X speciális ikonjait, amik extra információkat is megjelenítenek - pl. a Mail az olvasatlan üzenetek számát.