Ikonok a weben

  • Rung András
  • 2009. jún. 15.
  • 19 hozzászólás
  • 3 perc

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


A SZERZŐRŐL

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.

  1. Blinking12 Válasz
    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.
  2. Rung András Válasz
    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?
  3. kollinz Válasz
    azért OS X-ben az az über, ahogy az iCal ikon az aktuális dátumot jeleníti meg :)
  4. Pas Válasz
    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 :)
  5. Rung András Válasz
    @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:)
  6. Rung András Válasz
    @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.
  7. Pas Válasz
    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)
  8. Zsuzsannadesign Válasz
    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.
  9. Rung András Válasz
    @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.
  10. Rung András Válasz
    @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.
  11. Blinking12 Válasz
    @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 :)
  12. Rung András Válasz
    @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.
  13. Blinking12 Válasz
    @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.
  14. Bővíz László - JUEX Válasz
    @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.
  15. Bővíz László - JUEX Válasz
    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ő.
  16. Rung András Válasz
    @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.
  17. Rung András Válasz
    Á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.
  18. RolFic Válasz
    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!
  19. Rung András Válasz
    @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.

Szólj hozzá

 
Kérjük, írja be nevét!
Kérjük, írja be email hozzászólását!