Bevezetés Manapság már nem elegendő, ha egy cégnek, vagy akár egy magánszemélynek weboldala van, elvárás, hogy az jól is nézzen ki, élvezhető legyen.

Átírás

1 Webalkalmazások ergonómi miája Starkné dr. Werner Ágnes

2 Bevezetés Manapság már nem elegendő, ha egy cégnek, vagy akár egy magánszemélynek weboldala van, elvárás, hogy az jól is nézzen ki, élvezhető legyen. A web túlnőtt azon, hogy csupán információközlési média legyen: egyre fontosabb eszköz az ügyfelekkel, vevőkkel fenntartott kapcsolatban. A weboldalak kialakítása, ergonómiája ezért olyan fontos lehet, mint az ügyfélszolgálati helyiségeké. Kevés, ha csupán egy webes alkalmazás képernyője jól áttekinthető. Az ügyfelek csak akkor lesznek elégedettek, ha a teljes folyamaton, tranzakción végigsegíti őket a rendszer.

3 Zsebre megy Nagyon téved, aki azt hiszi, hogy a weblapok helyes megtervezése csak arra szolgál, hogy néhány morgolódó felhasználó elégedettebb legyen. Ahogy Jakob Nielsen, a webalkalmazások nemzetközileg elismert tervezője fogalmaz: A rossz webhely olyan, mint a mogorva eladó. (lásd. )

4 Az alábbi példp ldákat a Usability Net szervezet szedte össze: A Zona Research kutatóintézet egy felmérése szerint a weben vásárolni akarók 62 százaléka állt el szándékától, mert nem találta meg azt az árucikket, amit éppen keresett; 20 % pedig egy kéthónapos időszak alatt több mint háromszor vallott kudarcot. Egy időben az IBM weblapján a leggyakrabban használt elem a kereső volt, mert a webhelyen annyira nehéz volt navigálni. A második leggyakrabban használt elem a Help gomb volt, mert a keresőtechnológia nem volt elég hatékony. Az IBM több száz ember 10 heti munkájával, több millió dolláros költséggel áttervezte az oldalt. Az áttervezés utáni első héten a Help gomb használata 84 %-kal csökkent, az értékesítés pedig a négyszeresére nőtt.

5 Az Internet rohamosan növekszik Nielsen szerint: 2000 január 2000 december millió site, 200 millió user 25 millió site 100 millió site 200 millió site, 500 millió user 2010 (előrejelzés) 400 millió site, 1 milliárd user Ez a hatalmas és áttekinthetetlen bőség már most oda vezet, hogy a felhasználó türelmetlen és ha egy perc alatt nem jön rá, hogy egy honlapot hogyan kell használni, általában odébbáll (a konkurencia csak egy kattintásnyira van )

6 Használhat lhatóság g fontossága A használhatóság (usability) az Internet világában még fontosabb lett, mint más területeken Ennek alapvető okai: míg a hagyományos (fizikailag testet öltött) termékek és nem hálózatos szoftverek esetén a vásárló először fizet és csak később tapasztalja meg a használhatóság mértékét, addig az Interneten többnyire először kap képet a használhatóságról és csak utána fizet (ha még szándékában áll )

7 A reklámok szerint napjainkban minden ergonómikus: a billentyűzet, a televízió távirányítója, a babakocsi, a fékpedál, az esztergapad és az űrszonda Gyakran érezzük, mit is takar a fogalom valójában, de konkrétan megfogalmazni igazán nehéz: kényelmes használat, finom tapintás, sima felület és persze még sok minden. Zavarba jöhetünk akkor is ha egy weboldal ergonómiáját kell meghatároznunk: ha az egeret nem kell milliószor ide-oda rángatni az alkalmazás használata közben, ha a kezelése nem nehézkes, ha a színek harmonizálnak, ha az elrendezés logikus, máris jó úton haladunk.

8 Honlapok fejlesztésének általános ergonómiai problémái A webes alkalmazások mindig a hálózati erőforrásokra építenek. Ha elindítunk egy alkalmazást, 1-2 másodpercen belül választ várunk, ha a betöltés 10 másodpercnél tovább tart, idegesek, feszültek leszünk, és esetleg le is mondunk futtatási szándékunkról. Rendkívül fontos tehát, hogy weboldalaink kis méretűek, gyorsan letölthetőek legyenek. Ha ez valamilyen ok miatt nem valósítható meg (pl. a háttérben futó bonyolult adatbázis-műveletek miatt), két lehetőségünk van.

9 Egyrészt mérlegelhetjük, nem jobb-e mégis egy asztali alkalmazás az adott célra. Pl. a szokásos irodai szoftverek tipikusan azért futnak lokálisan, mert funkcionalitásuk betöltéséhez, felületük megjelenítéséhez nem elegendő a rendelkezésre álló hálózati infrastruktúra. A másik alternatíva az lehet ha feltétlenül ragaszkodunk a webes megjelenítéshez, és a szükséges adatmennyiség sem csökkenthető, hogy az adatok letöltésének idejére megfelelő üzenetekkel tájékoztatjuk a felhasználót, mi is történik éppen, és hol tart a folyamat. Ezáltal elkerülhetjük, hogy a felhasználó türelmetlenségében és bizonytalanságában (vajon a szerverhez eljutott-e a kérdése?) újra és újra elindítja a letöltést, többletterhelést róva ezáltal a kiszolgálóra és a hálózatra egyaránt.

10 A felhasználók k viselkedésének jellemzői Nielsen szerint a tartalomra figyelnek; kerülik a navigációs eszközöket; a felhasználók nem tudják, hol vannak a website információtömbjében; erősen cél-vezéreltek, csak arra az elemre figyelnek, amit előzőleg kerestek; nem figyelnek a számukra jelentéktelen elemekre (reklámok, logók, szlogenek); ha az oldal nem releváns a célok szempontjából, hamarjában a Vissza nyomógombbal távoznak innen; ha nem értenek egy elemet, nem töltik az idejüket a megtanulásával, hanem elkerülik azt. Ezért az alapelv: biztosítsunk minél több sikert a felhasználónak!!

11 Az általános tervezés irányelvei Általános elvárás a weboldalakkal szemben a minőségi tartalom, a minimális letöltési idő, a gyakori frissítés, és a könnyű használhatóság. A weblapokon minden oldalon elérhetőnek kell lennie a navigációnak, méghozzá kiemelt helyen, a felhasználók által azonnal azonosítható formában. A weboldalakon fontos szerepe van a linkeknek. Általában ezeket kék színű, aláhúzott szavakkal jelölik. Amiatt, hogy elkerüljük a felhasználó megtévesztését, érdemes kerülni az aláhúzást, mint kiemelési módszert, helyette inkább félkövér, vagy dőlt betűtípust, esetleg csupa nagybetűt ajánlott alkalmazni egy weboldal fontos információinak hangsúlyozására. (Bár ha azt szeretnénk, hogy oldalunk tipográfiailag is helyes legyen, akkor a nagybetűs kiemelést kerülni kell.)

12 Egy weboldal esetén a legeslegfontosabb szempont, hogy a felhasználó mindig megtalálja azt, amit keres, méghozzá a lehető legrövidebb időn belül.

13 ISO (Human( Human-centred design process for interactive systems) kereskedelmi, oktatási, egyéb célok meghatározása a felhasználás kulcsjeleneteinek kidolgozása az oldal struktúrájának megtervezése navigációs eszközök megtervezése informatív, nem túl rövid megfogalmazású menük biztosítása a linkek kiemelése jó konceptuális modell - konzisztencia és koherencia megbízható összekötések

14 Ahhoz, hogy egy honlapot megtervezhessünk, tisztában kell lennünk nk néhány n ny alapvető dologgal, mint példp ldául: Mi a honlap tárgya? Kinek a számára készítjük honlapunkat, vagyis ki lesz a felhasználói célcsoport? Milyen típusú feladatokat kell a felhasználóknak végrehajtania? Hogyan jelezzük a honlap megjelenését? Hogyan szerkesztjük és frissítjük weblapunkat? Hogyan és milyen gyorsan válaszolunk a látogatói kérdésekre? Hogyan tudjuk lemérni honlapunk hatékonyságát?

15 Honlapok fejlesztési si szintjei Tartalom-tervezés (Content Design) Site-tervezés (Site Design) Laptervezés (Page Design)

16 Tartalomtervezés Egy weblap esetében a tartalom a legfontosabb, hiszen egy lapra a felhasználók a tartalom miatt jönnek. A tartalomtervezés alapelvének tekinthetjük azt, hogy úgy tervezzük meg weboldalunkat, hogy a kívánt tartalmat a felhasználók minél könnyebben megtalálják. A színházi előadás után a nézők általában arról beszélnek, hogy milyen volt az előadás, nem pedig arról, hogy milyenek voltak a kosztümök. A jó kosztümök természetesen nagyban hozzájárulnak az előadás sikeréhez, de azért mégiscsak a színészek játéka a legfontosabb.

17 Site-tervez tervezés Mivel a felhasználó közvetlenül csak lapokat lát, ezért általában a laptervezésen van a fő hangsúly. Mindamellett, hogy a site nem jelenik meg teljes egészében a képernyőn, a használhatóság szempontjából ez mégis fontosabb, mint a lapok minősége külön-külön. Alapvető szempont a struktúra pontos kialakítása, amelyet szakszerűen információs architektúrának is neveznek. Információs architektúra felállításán olyan funkcionális és intuitív terv felállítását értjük, amely kijelöli a felhasználó számára azt az utat az A pontból a B pontba, ahol a legkisebb ellenállással találkozik.

18 Site-tervez tervezés A struktúra fontosságának alábecslése gyakori hiba: Sok site-nak zavaros az információs-struktúrája; ezeket a felhasználók elkerülik. Sok site-on a lényeges strukturális információ a kevésbé lényegesek közé van elrejtve. A felhasználók türelmetlenek: nem áldoznak időt az egyes web siteok struktúrájának tanulmányozására, hanem a következőre ugranak. A weboldalakon fontos szerepe van a böngészésnek. A böngészési lehetőség három fontos szerepet is betölt: egyrészt navigációs feladatokat (eligazodás, útvonaltervezés, útvonalvégrehajtás), másrészt információszerzési feladatokat lát el, harmadrészt pedig feladat-menedzselési feladatokat végez.

19 Példa elfogadható sitemap-re

20 Példa elfogadható sitemap-re

21 Site-tervez tervezés Navigációs segédeszközök megtervezése: a feladat, a felhasználó és a környezet jellemzőinek figyelembe vétele az aktív területek, linkek vizuális hozzáférhetősége kiemelése (szín, betűtípus stb.) elhelyezése egyéb információk logikus elrendezése. Célszerű linkekkel ellátni az oldalakat a hierarchia valamennyi szintjéhez. Ennek két oka van: a linkek segítségével a felhasználók jobban megértik az aktuális oldal összefüggéseit; a linkek lehetővé teszik, hogy általuk közvetlenül a site magasabb szintjére juthasson a felhasználó, ha épp nem a megfelelő oldalon van, de valami hasonlót keres.

22 Site-tervez tervezés Általános irányelvnek tekinthető, hogy a linkek mélységét és szélességét úgy kell kombinálni, hogy a legjobb végrehajtási időt biztosítsuk a felhasználó számára, valamint, hogy a hierarchia alján és tetején legyenek a nagyobb kiterjedésű linkek. Amennyiben kevesebb számú standard linket alkalmazunk (célszerű csupán 5-6 linket elhelyezni egy oldalon), azt a felhasználók sokkal jobban meg tudják jegyezni.

23 Laptervezés A kezdőlapot meg kell különböztetni a honlapunk többi lapjától. A kezdőlapot (home page) az összes többi laptól eltérően kell megtervezni. A kezdőlap megpillantásával a felhasználónak választ kell kapnia olyan kérdésekre, hogy Hol jár most?, Miről szól az a site? stb., valamint a kezdőlapnak kiindulási pontul kell szolgálnia a site-on belüli navigációhoz.

24 Elfogadható kezdőlap

25 Laptervezés A lapok tervezésének legfontosabb célja a tartalom szempontjából az optimális kihasználtság. Habár azt szeretnénk, hogy a lapunk jól nézzen ki, ügyelni kell arra, hogy ne használjunk túl sok kiegészítő grafikai és díszítőelemet, mert azok zsúfoltabbá és nehezen áttekinthetővé teszik a lapot (főként, ha még ezek az elemek mozognak is, akkor elterelik a felhasználó figyelmét), és ezáltal megnehezítik a lényeges információ megtalálását és feldolgozását. Alapvető elv, hogy a felhasznált terület több mint felét ajánlott a tartalomra fordítani.

26 A lapok tervezéséhez is ad az ISO es szabvány irányelveket: a lapokat úgy kell megtervezni, hogy a bennük levő szöveg könnyen olvasható legyen, a lapoknak támogatniuk kell a különböző böngésző környezetet, a lapoknak biztosítaniuk kell az interakciók konzisztenciáját, a lapoknak emlékeztetniük kell a felhasználót az elkezdett feladat befejezésére, a nyomógombok funkcióját pontosan meg kell határozni,

27 A lapok tervezéséhez is ad az ISO es szabvány irányelveket: keretekre vonatkozó irányelvek: ha kereteket alkalmazunk egy lap felépítésében, akkor: kerülni kell a zavaró keretek alkalmazását, a kereteknek nem szabad túllépniük a képernyő méretét, maximum 3-4 keretet szabad alkalmazni, ügyelni kell arra, hogy a navigációs keretet ne lehessen görgetni, ha nem alkalmazunk kereteket, akkor minden oldalt el kell látni navigációs linkekkel, a lap alján és tetején egyaránt, site-map-et vagy grafikus áttekintést kell a lapnak nyújtania, mely az oldal hierarchiáját és struktúráját tükrözi,

28 A lapok tervezéséhez is ad az ISO es szabvány irányelveket: oldalak hosszára vonatkozó irányelvek: rövidebb oldalak tervezése esetén: a dokumentum mentésére és nyomtatására szolgáló linket kell az oldalnak tartalmaznia, biztosítani kell az egy oldalon levő információ modularitását, hosszabb oldalak tervezése esetén: kerülni kell, hogy 3-4 képernyőnagyságot túlhaladjanak az oldalak, kerülni kell a vízszintes irányú görgetést.

29 Laptervezés A laptervezés esetében fontos törődni a nyomtathatóság kérdésével is. Hiszen gyakran előfordul, hogy egyik nap megnézünk egy lapot, amely számunkra hasznos információkat tartalmaz, de nem mentjük le és nem is nyomtatjuk ki, gondolván még úgyis meg tudjuk nézni, és mire másnap keresnénk, már nem találjuk meg, mert a lapot megszüntették. Ahhoz, hogy webalkalmazásaink megfeleljenek minden követelménynek, alapos tervezésre és kivitelezésre van szükség. Ez a fejlesztésre fordítandó időt mindenképp megnöveli valamelyest, ám ez a ráfordítás a használat során többszörösen megtérül.

30 Speciális szüks kségletű felhasználók A speciális szükségletű felhasználók is hozzá kell, hogy férhessenek a WEB-en megtalálható tartalomhoz. Ezen ajánlások kiadásában élen járó szervezet a World Wide Web Consortium (W3C). Beszélhetünk akadálymentesített weboldalról: Látássérült, Hallássérült, Mozgássérült, Értelmileg sérült, Halmozottan sérült felhasználók számára.

31 WEB mindenkinek A W3C célja: a WEB nyújtotta lehetőségeket mindenki számára elérhetővé tenni, bármilyen hardverrel, szoftverrel, hálózati infrastruktúrával, anyanyelvvel, kultúrával, vagy fizikai vagy mentális sérültséggel rendelkezzenek. W3C szabványokat, jelentéseket, valamint a különböző publikációkat több nyelvre lefordítják. W3C-irodák 15 országban. W3C Magyar Iroda: Célja: a magyar intézmények és cégek minél szélesebb körében megismertesse a W3C tevékenységét és segítséget nyújtson az azokban való részvételhez. webes szabvány: Web Akadálymentesítési Útmutató 2.0

32 Felhasználói i igények Aki hallássérült, az az elhangzott hanganyag vizuális megjelenítését igényli. Aki látássérült, a vizuális információ hangzó vagy tapintható megfelelőjét szeretné. Aki nem tud gyorsan vagy könnyedén mozogni, a lehető legkevesebb mozgást szeretné igénybe venni, valamint szeretné, hogy számára elegendő idő álljon rendelkezésre, hogy a WEB-en a különböző beállításait elvégezhesse. Aki nem jól olvas, valószínűleg szeretné meghallgatni a leírt információkat. (diszlexia)

33 Tervezési alapelvek A tartalomnak több érzékszervvel is érzékelhetőnek kell lennie. A tartalom minden elemének elérhetőnek kell lennie. A tartalomnak és a vezérlőelemeknek a felhasználó számára érthetőeknek kell lenniük. A tartalomnak elég robusztusnak kell ahhoz lennie, hogy a jelenlegi és a jövőbeli technológiákkal is együtt tudjon működni.

34 1.. alapelv: érzékelhető tartalom A nem szöveg típusú (pl. audiovizuális) tartalom mellett biztosítsuk annak szöveges megfelelőjét is a felhasználók számára. Példa: nyomógombként használt jobbra mutató nyíl ikon = következő oldal Az előtérben lévő szavak és képek könnyen megkülönböztethetőek legyenek a háttértől. Színlátási rendellenességgel rendelkezők is könnyen el tudjanak olvasni mindent (Fekete-fehérben is nézzük meg honlapunkat).

35 2. alapelv: elérhet rhetőség Minden funkciót lehessen billentyűzeten keresztül működtetni. A vakok például nem használnak egeret. Olvasást vagy interakciót érintő időhatárokat a felhasználó szabályozhassa Példa: villogó vagy továbbgördülő szöveg, rövid idő múlva eltűnő dialógusablak: - legyen lehetőség kikapcsolni vagy nagyon meghosszabbítani az időkorlátot, - mozgó tartalmak megállíthatók legyenek. Epileptikus rohamot előidézhető tartalmak elkerülhetősége: - villogó tartalmak kikapcsolása annak megjelenése előtt, - bizonyos minták megjelenítésének letiltása azok megjelenése előtt.

36 3. alapelv: érthetőség A tartalom jelentése mindenki számára érthető legyen: - helyes szóhasználat, nyelvtan, igeidők Következetesen rendezzük el a tartalmat lapról lapra : - egységes legyen a felhasználói felület.

37 4. alapelv: robusztus tartalom A technológiákat az előírásoknak megfelelően használjuk: - tartsuk be mindazt, amit a specifikációban leírtak. Különböző operációs rendszerek alatt is ugyanazt a megjelenítést, elérhetőséget biztosítsuk!

38 Weblapok tesztelése se Fókuszcsoportos vizsgálat: Öt-nyolc ember körbeül egy asztalt, ötleteket és dizájnterveket mutatnak nekik Reagálnak ezekre Előnye: a résztvevők továbbgondolják egymás ötleteit, pillanatképet kaphatunk a felhasználók véleményéről, benyomásairól feltárja, helyes-e az oldal mögött álló koncepció, kellően vonzó-e a szolgáltatás Hátránya: nem derül ki, hogy a honlapunk használható-e

39 Használhat lhatósági teszt Egyszerre csak egy felhasználónak mutatunk valamit (ez lehet honlap, egy honlap tervezete, vázlatok vagy egyes weboldalak), és arra kérjük, hogy Találja ki, mi az, amit lát Próbálja meg rendeltetésszerűen használni

40 Néhány tény t a teszteléssel ssel kapcsolatban Ha igazán jó honlapot akarunk, tesztelnünk kell! A tesztelés segít szem előtt tartanunk, hogy mások nem úgy gondolkodnak, mint mi, nem tudják azt, amit mi, és mások a webhasználati szokásaik is. Egy tesztalany ezerszer jobb, mint egy sem. Jobb egyetlen felhasználót tesztelni a projekt elején, mint ötvenet a legvégén. Sokszor túlértékelik a reprezentatív mintából származó felhasználókat. Nem azért tesztelünk, hogy bizonyítsunk valamit, vagy valaminek az ellenkezőjét. Újra és újra tesztelni kell! Egy teszt nem teszt. A puding legjobb próbája a tesztelés.

41 Az öt t legnépszer pszerűbb indok arra, hogy egy cég c miért nem végez v használhat lhatósági tesztelést st Nincs elég időnk Nincs rá pénzünk Nincs meg a kellő szaktudásunk Nincs laboratóriumunk Nem tudjuk, hogyan értékeljük az eredményt. Stb.

42 Ha nincs időnk és s nincs pénzp nzünknk Felhasználók száma tesztelésenként Kik a teszt alanyai? Hol tesztelünk? Hagyományos tesztelés Általában legalább 8, hogy legyen mivel megindokolni a magas költséget A célcsoport gondosan kiválasztott tagjai Megfigyelő helyiséggel és egy irányban átlátszó tükörrel ellátott laboratóriumban Fapados tesztelés 3-4 Bárki, aki internetet használ Bármilyen irodában Ki tesztel? Tapasztalt webergonómiai szakember Bárki, akinek van hozzá türelme Tervezés szükséges? Több hetes felkészülés, előkészítés Minimális előkészület Felkészülés Mit és mikor tesztelünk? Vázlatok, vita, ellenőrzött tesztelési napló Egyetlenegyszer elemezzük a szinte kész munkát El kell döntenünk, mit mutatunk meg az alanyoknak A tervezési folyamat során folyamatosan Mennyibe kerül? euro euro vagy még kevesebb Mi történik a tesztelés után? Hosszú beszámoló a tanulságokkal, majd ennek megvitatása, javítás Még aznap ebéd mellett megbeszélhetők a tapasztaltak

43 Hány felhasználóval teszteljünk? Egyetlen teszt nyolc felhasználóval Megtalált problémák száma: 5 Két teszt három felhasználóval Megtalált problémák száma: 9

44 Validálási eszközök A W3C ellenőrző eszközei jól használhatóak a leírónyelvek és a stíluslapok érvényességének ellenőrzésére: A WebXACT képes a WCAG 1.0 alapján ellenőrizni (és a szokásos ellenőrzési funkciók is megvannak benne, ezáltal eléggé komplex szolgáltatás, egy átlagos méretű weblapot több percig ellenőriz), rendkívül részletes eredményeket szolgáltat, sorról sorra elemezve: A ContentQuality.com WCAG 1.0 és Section 508 ( alapján is ellenőriz, beállítható, hogy milyen böngészőt emuláljon az ellenőrzés során. Sajnos csak 1 percig használható demóverzió, a teljes szoftver külön vásárolható meg, de ez is hasznos eszköz. A Microsoft Visual Studio 2005-ös, webfejlesztésre szolgáló verzióiban is lehetőség van WCAG 1.0 és Section 508 szerinti validálásra, ami igen kényelmes, hiszen a fejlesztőkörnyezetet el sem kell hagyni ez esetben az ellenőrzés kedvéért. Az Opera böngésző remekül használható kis képernyős böngészők szimulációjára, ugyanezen böngésző (és cég) mobilváltozata ingyenes letölthető, és közvetlenül mobiltelefonon is kipróbálható:

45 További ellenőrz rzési eszközök RDF Validator: Feed Validator: P3P Validator: Platform for Privacy Preferences (P3P) Project: XML Schema Validator: MUTAT:

46 További irodalom Magyar Elektronikus Könyvtár: Akadálymentes honlapok tervezése: W3C: Web Content Accessibility Guidelines 1.0: W3C: Web Content Accessibility Guidelines 2.0: Universal Usability in Practice: W3Schools: HTML tutorial: W3Schools: XHTML tutorial: W3Schools: JavaScript tutorial: W3Schools: PHP tutorial: