WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA
ERGONÓMIA Ergonómia: a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása 1. Ez a szó a görög ergos szóból származik, ami munkát jelent, és a nomos szóból, ennek jelentése törvény. Az ergonómia fogalom jelentése a munkafolyamatokkal, illetve ezeknek az ember számára gazdaságos és a legkisebb erőkifejtést igénylő kialakításával foglalkozó tudomány 2. Ergonómikus a tervezésben: a test és a lélek sajátosságait tudatosan figyelembe vevő. Ergonómikus a kivitelezésben: a használó testét és lelkét nem károsító. Forrás: http://erg.bme.hu/emania/1999/bara0001/ergo.html, 2012. Az Idegen Szavak Gyűjteménye: http://idegen-szavak.hu/ergon%c3%b3mia, 2012.
WEBERGONÓMIA A webergonómia az ergonómiának az internetes világra értelmezett formája, amelyik a használható weboldalak megtervezésével és kialakításával foglalkozik. Azt értjük egy weboldal használhatósága alatt, hogy használható-e bárki, átlagos (vagy akár átlag alatti) képességekkel és tapasztalatokkal rendelkező számára rendeltetésszerűen. Egy weboldal használhatósága annál jobb, minél kevesebb erőfeszítést kell tennie a felhasználónak a kezelése során. (Steve Krug)
HASZNÁLHATÓSÁG USABILITY A használhatóság (usability) fogalmát a szakirodalomban, illetve a különböző szabványokban eltérően definiálják. Tekintsünk át ezek közül néhányat! 1. ISO 9241-11 (Guidance on Usability, 1998) definíció: Annak mértéke, ahogy a terméket meghatározott felhasználók meghatározott célokért eredményesen, hatékonyan és elégedetten használják egy adott környezetben. 2. ISO/IEC 9126 (Software product evaluation Quality characteristics and guidelines for their use,1991) definíció: A használhatóság a jellemzők azon összegzése, amelyet a használathoz szükséges erőfeszítés mértéke, illetve a felhasználók által arról kialakított értékelés határoz meg.
HASZNÁLHATÓSÁG USABILITY 3. A szabvány továbbfejlesztett változatában (ISO/IEC FDIS 9126-1) a használhatóság a következőképp van meghatározva: A szoftvertermék azon adottsága, hogy a felhasználó számára érthető, tanulható, használható és vonzó, amikor azt meghatározott feltételek mellett használja. Összefoglalva: Az ISO szabványokban a használhatóság két szerepkörben is megjelenik, egyrészt egy szoftver tervezési tevékenységként, másrészt egy olyan átfogó célként, hogy a szoftver teljesítse a felhasználói igényeket (Bevan, 1999).
HASZNÁLHATÓSÁG USABILITY A következő idézet Krugtól, a használhatóság mellett, nagyon sokat elárul a weben szörföző felhasználók hozzáállásáról és weblaphasználati szokásairól. Gyakran felteszik nekem a következő kérdést: Mi a legfontosabb teendőm, ha Gyakran olyan honlapot felteszik szeretnék nekem a következő készíteni, kérdést: amit biztosan Mi a legfontosabb könnyen lehet teendőm, használni? A ha válasz olyan egyszerű. honlapot szeretnék Nem olyasmi, készíteni, hogy: amit Ami biztosan lényeges, könnyen nem lehet használni? távolabb két kattintásnál, vagy Beszéld a felhasználók nyelvét!, és nem is az, hogy A válasz egyszerű. Nem olyasmi, hogy: Ami lényeges, nem lehet távolabb két Légy következetes! Csupán ennyi: NE TÖRD A FEJEM! kattintásnál, vagy Beszéld a felhasználók nyelvét!, és nem is az, hogy Légy következetes! Csupán ennyi: NE TÖRD A FEJEM! A lényeg tehát, hogy minél kevesebb erőfeszítésébe teljen a felhasználónak az oldal használata. Azaz ne terheljük feleslegesen az agyát felesleges döntéshozások elvárásával, minden legyen egyértelműen megfogalmazva és vizuálisan megjelenítve. FORRÁS: KRUG, Steve: Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Bp. 2008. 18. p.
MEGFOGALMAZÁSRA PÉLDA A példában a felhasználó egy állást keres, nézzük meg, hogy a különböző szöveges megfogalmazásokra miként reagál gondolatban.
VIZUÁLIS MEGJELENÍTÉSRE PÉLDA Miként lehet egyértelműsíteni vizuálisan azt, hogy valamire rá lehet kattintani?
HASZNÁLHATÓSÁGI FAKTOROK U S A B I L I T Y Megtanulhatóság (Learnability): Amikor a felhasználó először találkozik a felülettel, mennyire egyszerű számára az alapvető feladatok elvégzése? Hatékonyság (Efficiency): Ha a felhasználó már megismerkedett a felülettel, akkor milyen gyorsan tud különböző feladatokat megoldani? Megjegyezhetőség (Memorability): Amennyiben a felhasználó egy ideig nem használta a felületet, a korábban megszerzett tudását mennyire gyorsan tudja újra felidézni? Hibák (Errors): Hány hibát ejt a felhasználó, milyen mértékűek ezek, és mennyire tudják a hibáikat könnyen javítani? Elégedettség (Satisfaction): Mennyire megfelelő, kényelmes a felület használata a felhasználó számára?
FELHASZNÁLÓI SZOKÁSOK Ahhoz, hogy érthetőbbé váljon számunkra, mivel tudjuk a felhasználók számára használhatóbbá (magától érthetővé) tenni weboldalainkat ismernünk kell a felhasználók viselkedését. 1. A felhasználók nem olvassák végig az oldalakat, csak átfutják. 2. Nem a lehető legjobb döntésre törekszenek, hanem megragadják az első elfogadható lehetőséget. 3. Nem gondolják végig, hogy hogyan működik valami, csak használják azt valahogyan.
FELHASZNÁLÓK VISELKEDÉSE A tartalomra koncentrálnak, ha nem releváns, a lap további felépítésével sem törődnek Amikor az oldalra érnek, figyelmen kívül hagyják a navigációs sávokat és átfogó szerkezeti elemeket. Nem értik, hol tartózkodnak a website egészét tekintve Rendkívül célirányosak Fő stratégia a keresésre hagyatkozás Elkerülik a reklámokat, szlogeneket Ha az oldal irreleváns, hamar otthagyják Ha nem értenek valamit az oldalon, nem szánnak időt az elsajátításra
FELHASZNÁLÓI ÉLMÉNY USER EXPERIENCE Olyan formában adjuk az információt, amely a felhasználói szokásoknak megfelel. Cél, hogy a felhasználó jól és biztonságban érezze magát a felületen. Jelezni kell, ha a felhasználónak várnia kell Jól nyomtatható oldalakat kell létrehozni Ne kelljen a felhasználónak emlékeznie korábbi oldalakon lévő információra Jól használható Gyakran ismételt kérdések gyűjtemény biztosítása
1. VIZSGÁLATI MÓDSZEREK Analitikus módszerek A felhasználók várható tevékenységének szimulálása Irányelv vizsgálat Bejárások Empirikus módszerek Az alkalmazást, vagy annak működő prototípusát vizsgáljuk Megfigyelés Használhatósági teszt (pl. Papír prototípus) Papír prototípus A rendszer egy papíron megvalósított változata, amelyen a felhasználók egy reprezentatív csoportjával a valós életben is előforduló feladatok interaktív tesztelése történhet, a kísérletet vezető személy (facilitátor) működtetése által.
SZEMMOZGÁSVIZSGÁLAT Mozgásútvonal, időzítés hossza Hőtérképes felvétel
A WEBLAPOK ERGONÓMIA ELVEI ÉS TIPIKUS HIBÁK 1. Tartalomtervezés (Fontos a tartalomtervezés és a megjelenés szétválasztása) 2. Oldaltervezés 3. Linkek (hivatkozások) 4. Olvashatóság (A szöveggel kapcsolatos tudnivalók) 5. Navigáció 6. Megjelenés (design, színek, grafika) 7. Multimédiás tartalom
1. TARTALOMTERVEZÉS Jakob Nielsen vizsgálatai ébresztették rá a weblapfejlesztőket arra, hogy a felhasználók a weben nem olvasnak, hanem scannelnek, azaz csak végigpásztázzák az oldalt kulcsszavakat és fontos információkat keresve => a lényeget akarják kiszűrni. 1. A felhasználók elsősorban a tartalomra koncentrálnak nem a designra! 2. A látogatók a főcímeket, szövegeket tekintik át először. 3. Összefoglalással kezdődjön az oldal! 4. Legyünk tömörek! 5. Könnyű áttekinthetőség. 6. Rövid szövegek (lassabban olvasunk a képernyőről, mint könyvből (230/250 szó/perc nyomtatásban, képernyőről kb. 25%-kal kevesebb.) 7. Bekezdésenként egy gondolat! 8. Az oldal felső része értékesebb, mert gördítés nélkül elérhető.
A TEKINTETEK HŐTÉRKÉPES MEGJELENÍTÉSE Eltérő tartalomnál a mintázatok különböznek, 3 alapoldal típus létezik: Bemutatkozás jellegű oldal ( akasztófa) Termékbemutató (F betű) Kereső találati oldal (E betű) Forrás: http://www.useit.com/alertbox/reading_pattern.html
ÉRTÉKES INFORMÁCIÓTARTALOM - 31% keret (oprsz. és böngésző) - kék - 20% értékes információ (térkép) - zöld - 23% navigáció - sárga - 10% hirdetés - rózsaszín - 16% kihasználatlan terület - fehér Jakob Nielsen vizsgálatainak köszönhetően alakították a szoftverfejlesztők a böngészőket úgy, hogy kisebb helyet foglaljanak el a képernyőből!
2. OLDALTERVEZÉS ALAPELVEK 1. Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! 3. A navigációt a minimálisra kell csökkenteni! 4. Ne legyenek túlságosan nagy méretű, üres képek az oldalon! 5. A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból! 6. Tartalom-kiemelés és elhagyás elve. 7. A fehér terület fontos szerepe (tipográfiailag, oldalelrendezésben). => 8. Böngészőben való megjelenítés! (fix szélességű, alkalmazkodó szélességű (liquid), rugalmas (responsible))
OLDALTERVEZÉS Weblaptervezési normák, sémák Szabvány Logó az oldal bal felső sarkában van (ráklikkelve visszatérés a főoldalra) Keresődoboz a nyitóoldalon Bevezető Splash oldalak mellőzése Vízszintes nyomvonal morzsa (breadcrumb, kenyérbél) navigáció Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
OLDALTERVEZÉS Weblaptervezési normák, sémák Közmegegyezés A laptérkép neve: laptérkép, vagy oldaltérkép A látogatott link színét meg kell változtatni Webáruházaknál a bevásárlókosár linkje a jobb felső sarokban legyen Testvérterületekre mutató linkek megléte Segítség elhelyezése jobb felső sarokban A bejelentkezési folyamat a jobb felső sarokban Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
OLDALTERVEZÉS Homályos: Weblaptervezési normák, sémák A fő navigációs sémák (oszlop balkézről, felső sáv/fülek, középre tolt telefonkönyv, stb ) Keresőszolgáltatás elhelyezése (Balra fent, jobbra fent, középen ) Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
3. LINKEK, LINKEK FAJTÁI Beágyazott link: Aláhúzott szöveg a főszövegben, ami jelzi hogy bővebb információ található egy másik oldalon. Strukturális link A lapszerkezet különböző szintjeire (testvér, gyermek) Mutatnak. Asszociatív linkek (külső linkek) Aktuális oldalhoz hasonló, ahhoz kapcsolódó oldalak eléréséhez.
LINKEK SZÍNE ÉS ALÁHÚZÁSA A linkek színe Még nem látott és már meglátogatott linkek színét meg kell különböztetni. (Ajánlott a kék illetve lila színek megtartása, a szabványos színek használata elősegíti a felhasználók tájékozódását. Ha megváltoztatjuk, akkor ugyanazon szín eltérő árnyalatait érdemes használni.) A piros linkszínek kerülendők! A linkek aláhúzása: A link legyen aláhúzva! Kivételt jelenthet a navigációs menü és a linklista. Ami nem link, az NE legyen aláhúzva, félrevezeti a felhasználót! A linkek ne kerüljenek túl közel egymáshoz!
LINKEK HASZNÁLATA Linkek hossza, elnevezése: Ne legyen a link túl hosszú, 2-4 szó, max. 60 karakter A kattintson ide kifejezés nem szerencsés Önmagában értelmes legyen a link neve! ROSSZ! Linkekhez fűzött rövid magyarázat Milyen típusú információt várhat a felhasználó a linktől? A hivatkozott oldal neve Oldalrész neve Milyen információ található a céloldalon Figyelmeztetés az esetleges problémára (pl. csak regisztrált felhasználóknak) JÓ!
4. SZÖVEGGEL KAPCSOLATOS KÖVETELMÉNYEK A WEBEN Értékes információtartalom -> a weboldal tartalmában valami, fontosat, újat közöljön -> a többség számára érdekes és figyelemfelkeltő legyen Jól megfogalmazott szövegek (nyelvezet!) -> objektív (tényszerűen közöljük) -> tömören fogalmazzunk -> világosan fogalmazzunk Gyors és könnyű információszerzés -> a felhasználók javarészt az információért jönnek a weboldalainkra -> cél az információ gyors és hatékony megszerzése - > legyen belső kereső beépítve - > figyelnünk kell a letöltési időre, ne legyenek nagy méretű animációk Jól olvashatóság -> karakterméret -> karakterszín -> karakter háttér színe Jól tagoltság ->kiemelések alkalmazása ->listák, felsorolások és számozások alkalmazása
5. NAVIGÁCIÓ Hol vagyok? Hol jártam már / honnan jöttem? Hova mehetek innen? Hát itt meg mit lehet csinálni?
HOSSZÚ OLDALAK ESETÉN A NAVIGÁCIÓ: Hosszú oldalak esetén legyen megjelenítve tartalom menü is Ezzel a felhasználók a lap megfelelő részére ugorhatnak. Fontos, hogy legyen Vissza link is
MENÜSOR A menüsornak színezett hátteret kell adni, hogy a tartalomtól elválasztott legyen Az oldal bal felén kell lennie, vagy vízszintesen felül Megjegyzés: A jobboldali igazítás előnyösebb lenne, de a normától való eltérés miatt nem szerencsés használni A jobbra igazított menü közelebb van a gördítősávhoz, az egérmozgás csökkenne ezzel a megoldással
OLDALTÉRKÉP
MENÜ, AMELY ELTÉR A SZOKÁSOSTÓL
A SZOKÁSOSTÓL ELTÉRŐ NAVIGÁCIÓ
NAVIGÁCIÓS HIBÁK Navigációs eszközök hibái Nem egyértelmű navigációs eszközök Link? Nem, csak Aláhúzott szöveg!
6. DESIGN, MEGJELENÉS Áttekinthetőség Nem egységes oldalkinézet Design /olvashatóság Zavaró színek Szövegszerkesztési hibák Nem megfelelő háttér és szöveg színek Nem koordinált megjelenés Gyenge minőségű képek használata Túl nagy, vagy kis méretű szövegek használata Nem megfelelő háttérkép Átlátszó képek nem megfelelő használata
SZÍNSÉMA BEÁLLÍTÁS (TIPP) Hasznos oldal: http://colorschemedesigner.com/
SZÖVEGSZERKESZTÉSI HIBÁK
NEM MEGFELELŐ HÁTTÉR ÉS SZÖVEGSZÍN
GYENGE MINŐSÉGŰ KÉPEK, KOORDINÁLATLAN MEGJELENÉS
TÚLSÁGOSAN NAGY/KICSI MÉRETŰ BETŰK
NEM MEGFELELŐ HÁTTÉRKÉP
ÁTLÁTSZÓ KÉPEK NEM MEGFELELŐ HASZNÁLATA Mind helytelen Az első jó, a többi helytelen
7. MULTIMÉDIÁS TARTALOM 7.1. Válaszidők A multimédiás tartalom letöltése lassú a fájlformátumot, méretet, lejátszási időt tüntessük fel Előzetest tegyünk fel pl. videoból kivágott képkockákat
ESETTANULMÁNY Látszik a videóelőzetes, a tartalom rövid leírása, elérhető a videó teljes szövegű leírása, megtekinthető on-line a felvétel és letölthető különböző formátumokban is. (Forrás: Abonyi-Tóth Andor: A SCORM és WCAG szabványnak megfelelő e-tananyagok fejlesztési módszerei és tapasztalatai az ELTE Informatikai Karán)
VIDEÓ A sávszélesség növekedésével egyre nagyobb szerepet kap WEB-es TV adások Videómegosztók (pl. youtube.com, indavideo.hu) Távoktatás (beszélő személyiségének átvitele) Tananyagok gazdagítása Probléma lehet rossz kép- és hangminőség
HANG Magyarázó, segítő szövegek lejátszása Zenei illusztrációk Csak indokolt esetben használjuk Letöltési sebesség Idegesítő tulajdonságok (ugyanaz a hangminta perceken keresztül) Munkahelyen zavaró Legyen kikapcsolható, lehalkítható
ANIMÁCIÓ Lefoglalják az ember periférikus látását Nehéz a tartalomra koncentrálni Ne hagyjuk az animációt végtelen ciklusban futni Még a ma már elavult GIF formátumban is volt lehetőség az animációs állományban rögzíteni, hogy hányszor menjen végbe az animáció.
KÉPEK KIVÁGÁSA, MÉRETEZÉSE Sok az indokolatlan grafika képként megjelenített szöveg Egy kép felér 1000 szóval letöltéskor mindenképp :-) Kép kicsinyítése lényegkiemelő képkicsinyítés Körbevágás, képkicsinyítés
MANIPULÁCIÓ A KÉPEKKEL Egy kép különböző részlete mást-mást sugallhat!
AZ AKADÁLYMENTESÍTÉS A KÓD SZINTJÉN TÖRTÉNIK Forrás: Tömösközi Péter
FORRÁSOK Abonyi-Tóth Andor: A weblapkészítés ergonómiája, példák, elvek, módszerek és eszközök (előadás - FSZK KKOP IKT képzés, 2012) KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Budapest. ISBN: 9789639686533.
AJÁNLOTT IRODALOM NIELSEN, Jakob (2002): Web-design. Typotex Kft. Elektronikus Kiadó, Budapest. ISBN: 109639548162. KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Budapest. ISBN: 9789639686533. LEISZTER, Attila (2011): Webergonómia - Jakob Nielesen nyomán. Typotex Kft. Elektronikus Kiadó, Budapest. ISBN: 9789632795782.
AJÁNLOTT IRODALOM ABONYI-TÓTH Andor; PATAKI Máté, MÁTÉTELKI Péter (2011): Bevezetés az info-kommunikációs akadálymentesítés világába I., Fogyatékos Személyek Esélyegyenlőségéért Közalapítvány, ISBN: 978-615-5043-18-5. PATAKI Máté, ABONYI-TÓTH Andor (2011): Bevezetés az infokommunikációs akadálymentesítés világába II., Fogyatékos Személyek Esélyegyenlőségéért Közalapítvány, ISBN: 978-615-5043-62-8.
AJÁNLOTT IRODALOM BEAIRD, Jason: The beautiful web design. Sitepoint Pty. Ltd., Australia, 2007. (~170 old.) FORGÓ, Sándor-HAUSER Zoltán-KIS-TÓTH Lajos:Médiainformatika. Líceum Kiadó, Eger, 2001 (~400 old.) ITTEN, Johannes: A színek művészete (A szubjektív élmény és objektív megismerés, mint a művészethez vezető utak). Göncöl Kiadó, Bp., 1978. (~100 old.) RUNG, András-KISS, Orhidea Edith: Felhasználóbarát honlapok Webergonómiai tanulmányok. Gondolat Kiadó, Bp., 2006. (205 old.) TÖREKY Ferenc: Vizuális kommunikáció (Látáskultúra, rajzkultúra, képi látás). Nemzeti tankönyvkiadó Rt., Bp., 2002. (214 old.) VIRÁGVÖLGYI, Péter: A tipográfia mestersége számítógéppel. Osiris Kiadó, Bp., 1999. WEST, Suzan: Stílusgyakorlatok A tipográfia és az oldaltervezés hagyományos és modern megközelítése. Virágvölgyi Péter fordításában. ÚR Könyvkiadó, 1999. (~220 old.) WILLIAMS, Robin: Tervezz bátran Oldartervezés és tipográfia egyszerűen. Bp., Scolar Design, 2006.)
AJÁNLOTT LINKEK http://juex.blog.hu/ http://ergomania.blog.hu/ http://www.webreference.com/greatsite.html http://www.useit.com/ http://www.usability.gov/pdfs/guidelines.html http://weblabor.hu/ http://onlinemarketing.blog.hu/