HTML

Ergománia

Webergonómiai írások magyar és nemzetközi weblapokról Rung Andrástól, aki az első ilyen témájú kutatást vezette a Budapesti Műszaki Egyetemen. Az egyetlen ilyen témájú magyar könyvét Kiss Orhideával a Gondolat Kiadó jelentette meg Felhasználóbarát honlapok címmel.



Rung András, webergonómiai tanácsadó

rungandras@gmail.com
06-30-3975008
Rung András a twitteren

Friss topikok

Címkék

2009 (1) 5000 (1) ajánlás (4) amazon (2) angol (1) architektúra (1) autóvásárlás (1) bank (4) befektetés (2) bejegyzés (1) beszámoló (1) biztosítás (1) blog (2) canon (2) canon.hu (1) chat (1) cib (1) cnn (1) design (4) designer (1) digitális (1) drótváz (5) elektronika (1) elemzés (20) elnevezés (2) előadás (12) előny (1) ep (2) eredménynövekedés (2) ergonómia (6) ergonomus (1) értékelés (1) európa (1) facebook (2) fejlesztés (2) fejlesztő (1) felhasználó (1) felhasználóbarát (1) fényképezőgép (1) fidesz (1) figyelem (1) film (1) fizetés (1) folyamat (2) főnév (1) form (2) gazdaság (1) google (1) hangvezérlés (2) használhatóság (1) hatékonyság (21) ház (1) háztartási (1) hellókarácsony (1) hiba (1) hír (1) honlap (9) ige (1) ikon (1) információ (1) információszervezés (6) ingatlan (2) interjú (1) internet (1) iphone (2) ismerős (1) italia (1) iwiw (1) jakob (1) jegyvásárlás (2) jobbik (1) kamera (1) kategória (1) kávéfőző (1) keresés (14) keresőoptimalizálás (2) kereső optimalizálás (2) keress (1) kézikönyv (1) kiállítás (1) kiemelés (2) konkurencia (1) konverzió (6) könyv (1) közösségi (1) látogatottság (1) lbp (1) letöltés (1) lézernyomtató (1) lmp (1) magyar (2) marketing (1) mdf (1) megtérülés (5) menü (5) menünév (1) menüpont (3) milánó (2) mobil (7) mockup (1) módszer (2) mszp (1) munkamenedzsment (1) műsor (1) nap (1) navigáció (8) nielsen (1) nyertes (1) nyitó (1) nyitóoldal (1) ok (1) összehasonlítás (1) otp (1) parlament (1) photohall.hu (1) portál (1) praktikus (1) prezi (1) probléma (1) program (1) programozó (1) projekt (1) rádió (1) ragozás (1) recesszió (1) redundancia (1) regisztráció (1) repülőjegy (1) saab (2) seo (3) skype (1) smashing (1) stratégia (2) sturktúra (1) szakmai (1) szdsz (1) személyautó (1) szemmozgás (1) szerkezet (1) szervezés (1) szétesés (1) szín (2) szórakozás (1) szöveg (1) tab (1) találat (1) tech (1) technológia (1) tekintet (1) telekommunikáció (1) termékoldal (4) terv (1) tervezés (16) tesztelés (4) tipp (1) típushiba (2) tren (1) tv (1) twitter (2) url (1) utalás (1) üzenet (1) választás (2) válság (1) varese (2) vásárlás (4) vélemény (1) verseny (2) visszaesés (1) vizsgálat (1) vonat (1) web (2) webergonómia (28) weblap (15) weblaptervezés (4) weboldal (2) webshop (7) wekerle (1) wizzair (1) wudhu (2) zene (1) zui (1) Címkefelhő

Ikonok a weben

2009.06.15. 21:31 Rung András

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

19 komment

Címkék: design ikon weblap webergonómia

A bejegyzés trackback címe:

https://ergomania.blog.hu/api/trackback/id/tr261187530

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Blinking12 · http://www.twitter.com/phnandor 2009.06.15. 23:34: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.

Rung András · http://www.twitter.com/rungandras 2009.06.16. 01:08:41

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?

kollinz · http://twitter.com/kollinz 2009.06.16. 10:37:52

azért OS X-ben az az über, ahogy az iCal ikon az aktuális dátumot jeleníti meg :)

Pas · http://pasthelod.hell-and-heaven.org 2009.06.16. 11:05:03

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 :)

Rung András · http://www.twitter.com/rungandras 2009.06.16. 11:26:44

@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:)

Rung András · http://www.twitter.com/rungandras 2009.06.16. 11:30:02

@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.

Pas · http://pasthelod.hell-and-heaven.org 2009.06.16. 11:46:27

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)

Tóth Zsuzsanna · http://webdesigner.blog.hu 2009.06.16. 12:07:38

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.

Rung András · http://www.twitter.com/rungandras 2009.06.16. 12:17:59

@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.

Rung András · http://www.twitter.com/rungandras 2009.06.16. 12:20:53

@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.

Blinking12 · http://www.twitter.com/phnandor 2009.06.16. 16:43:56

@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 · http://www.twitter.com/rungandras 2009.06.16. 17:09:43

@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 · http://www.twitter.com/phnandor 2009.06.17. 09:22:44

@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.

Bővíz László - JUEX · http://juex.blog.hu 2009.06.20. 17:15:36

@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.

Bővíz László - JUEX · http://juex.blog.hu 2009.06.20. 17:28:41

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ő.

Rung András · http://www.twitter.com/rungandras 2009.06.20. 20:04:46

@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.

Rung András · http://www.twitter.com/rungandras 2009.06.20. 20:05:50

Á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.

RolFic · http://onlinetrendek.blog.hu 2009.07.02. 15:26:41

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 · http://www.twitter.com/rungandras 2009.07.02. 16:08:54

@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.