WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA

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, „Gyakran felteszik szeretnék nekem a következő „Mi a legfontosabb teendőm, ha olyan honlapot készíteni,kérdést: amit biztosan könnyen lehet használni?” Ahaválasz Nem olyasmi, hogy: „Ami lényeges, nem lehet lehethasználni?” távolabb két olyan egyszerű. honlapot szeretnék készíteni, amit biztosan könnyen 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

• 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?

L

• 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?

I

• 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?

I

T Y

• 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

Weblaptervezési normák, sémák

Homályos: • 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!

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)

ROSSZ!

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: 978615-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/