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

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 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. Ha egy weblap tervezői és kivitelezői könnyen kezelhetővé és egyértelművé tesznek egy weboldalt, akkor az bizalmat ébreszt használóiban a weboldallal és magával a céggel vagy vállalkozással szemben is, amelyet a weboldal képvisel.

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

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 Tartalomtervezés (Fontos a tartalomtervezés és a megjelenés szétválasztása) Oldaltervezés Linkek (hivatkozások) Olvashatóság (A szöveggel kapcsolatos tudnivalók) Navigáció Megjelenés (design, színek, grafika) 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 Szabvány Weblaptervezési normák, sémák 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 Közmegegyezés Weblaptervezési normák, sémák 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! JÓ! 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)

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

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

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

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: http://dev.opera.com/articles/view/11-tipografia-a-weben/

5. NAvigáció • Hol vagyok? • Hol jártam már / honnan jöttem? • Hova mehetek innen? • Hát itt meg mit lehet csinálni?

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

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

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)

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 info- kommuniká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/