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

Átírás

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

2 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: Az Idegen Szavak Gyűjteménye:

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

4 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 (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.

5 HASZNÁLHATÓSÁG USABILITY 3. A szabvány továbbfejlesztett változatában (ISO/IEC FDIS ) 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).

6 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 p.

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

8 VIZUÁLIS MEGJELENÍTÉSRE PÉLDA Miként lehet egyértelműsíteni vizuálisan azt, hogy valamire rá lehet kattintani?

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

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

11 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

12 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

13 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 Heurisztikus módszerek 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.

14 SZEMMOZGÁSVIZSGÁLAT Mozgásútvonal, időzítés hossza Hőtérképes felvétel

15 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

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

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

18 É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!

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

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

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

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

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

24 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!

25 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Ó!

26 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

27 OLVASHATÓSÁG Relatív betűméretet használjunk ne abszolútat! (pl. 120%, 90%) Már az alap betűméret is elég nagy legyen, legalább 10pt-nak megfelelő. Idősebb célközönség esetén legalább 12pt. Alternatív, nagybetűs, nagy kontrasztú stílus változat javasolt a gyengénlátó felhasználóknak. Ellentétes színek használata a háttér és a szöveg elkülönítésére pozitív szöveg: fehér háttér, fekete szöveg (sötétszürke jobb) negatív szöveg: fekete háttér, fehér szöveg (világosszürke jobb) A szokatlanabb lelassítja a felhasználót, a színpreferenciánk befolyásolja az olvashatóságot

28 OLVASHATÓSÁG Egyszínű, finom mintájú háttér használata Kevésbé olvashatónak tartunk olyan szöveget, amely olyan háttéren van, ami nem tetszik nekünk Statikus (mozdulatlan) szöveget használjunk Hosszú, folyó szöveget balra igazítsunk Listáknál is a balra igazított a jól olvasható A kisebb szövegek talp nélküli betűkészlettel jobban olvashatóak (Arial, Verdana) NE ÍRJUNK CSUPA NAGY BETŰS SZÖVEGET Lassabban olvasható (kb. 10%-kal) Kiabálás

29 WEBES TIPOGRÁFIA KORLÁTAI Korlátozott (rendszerenként változó) betűkészlet Nincs elválasztás, így a sorkizárt elrendezés csúnya lesz keskenyebb oszlopok esetén. Nincs befolyásunk az egalizálásra (alávágásra) és a szóközökkel való feltöltésre. Nem lehet tudni, hogy hol és hogyan nézik majd meg a munkát, így a designereknek minden képernyőméretre, felbontásra és környezetre gondolniuk kell. Tipográfia: kép és szöveg együttes elrendezésével foglalkozik. A tipográfiát hagyományosan a grafikai tervezéssel, főként a nyomdai termékek tervezésével kapcsolatosan szokás említeni. A weboldalakon alkalmazandó sok szabály nagy része a nyomdászat régi szabályai közül került át. Forrás:

30 5. NAVIGÁCIÓ Hol vagyok? Hol jártam már / honnan jöttem? Hova mehetek innen? Hát itt meg mit lehet csinálni?

31 5. NAVIGÁCIÓ Hol vagyok? (Helyzetjelzők) A látogató külső linkről is érkezhetett az oldalunkra. Fel kell tüntetni, hogy milyen oldalon, a struktúra milyen szintjén helyezkedik el. Segít: logó szerepeltetése, az aktuális menüpont kiemelése, rovatra jellemző vizuális hatások Hol jártam már? (Színnel való megkülönböztetés) A visszafele gomb az egyik leggyakrabban használt funkció a böngészőkben Lehet egyfajta history is, vagy az adott site felépítésének vertikális metszete Hova mehetek innen? (Lehetőségek megmutatása) Lehetséges továbbhaladási irányok feltüntetése Logikus, könnyen használható menürendszer

32 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

33 MORZSANAVIGÁCIÓ BREADCRUMB NYOMVONAL MORZSA Az oldal tetején kell elhelyezni Hierarchikus felépítésű lapoknál működik Megmutatja, hogy az aktuális oldal milyen gyűjtőoldalak alá tartozik Az elemek közé > jelet, vagy / jelet érdemes tenni. A kezdőlapot nem kell szerepeltetni, mert oda a logóra kattintással is eljutunk (elvileg)

34 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

35 OLDALTÉRKÉP

36 MENÜ, AMELY ELTÉR A SZOKÁSOSTÓL

37 A SZOKÁSOSTÓL ELTÉRŐ NAVIGÁCIÓ

38 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!

39 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

40 SZÍNSÉMA BEÁLLÍTÁS (TIPP) Hasznos oldal:

41 SZÖVEGSZERKESZTÉSI HIBÁK

42 NEM MEGFELELŐ HÁTTÉR ÉS SZÖVEGSZÍN

43 GYENGE MINŐSÉGŰ KÉPEK, KOORDINÁLATLAN MEGJELENÉS

44 TÚLSÁGOSAN NAGY/KICSI MÉRETŰ BETŰK

45 NEM MEGFELELŐ HÁTTÉRKÉP

46 ÁTLÁTSZÓ KÉPEK NEM MEGFELELŐ HASZNÁLATA Mind helytelen Az első jó, a többi helytelen

47 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

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

49 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

50 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ó

51 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ó.

52 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

53 MANIPULÁCIÓ A KÉPEKKEL Egy kép különböző részlete mást-mást sugallhat!

54 AZ AKADÁLYMENTESÍTÉS A KÓD SZINTJÉN TÖRTÉNIK Forrás: Tömösközi Péter

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

56 AJÁNLOTT IRODALOM NIELSEN, Jakob (2002): Web-design. Typotex Kft. Elektronikus Kiadó, Budapest. ISBN: KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Budapest. ISBN: LEISZTER, Attila (2011): Webergonómia - Jakob Nielesen nyomán. Typotex Kft. Elektronikus Kiadó, Budapest. ISBN:

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

58 AJÁNLOTT IRODALOM BEAIRD, Jason: The beautiful web design. Sitepoint Pty. Ltd., Australia, (~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., (~100 old.) RUNG, András-KISS, Orhidea Edith: Felhasználóbarát honlapok Webergonómiai tanulmányok. Gondolat Kiadó, Bp., (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., (214 old.) VIRÁGVÖLGYI, Péter: A tipográfia mestersége számítógéppel. Osiris Kiadó, Bp., 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ó, (~220 old.) WILLIAMS, Robin: Tervezz bátran Oldartervezés és tipográfia egyszerűen. Bp., Scolar Design, 2006.)

59 AJÁNLOTT LINKEK