Honlapok használhatóságának ergonómiai szempontjai

Átírás

1 Honlapok használhatóságának ergonómiai szempontjai (Web-site usability) Izsó Lajos Lux et Color Vespremiensis szimpozium HCI&DfA szekció okt. 6., Veszprém

2 Honlapok használhatósága Honlapok fejlesztésének általános ergonómiai problémái Tartalom-tervezés (Content Design) Site-tervezés (Site Design) Laptervezés (Page Design) A fogadtatás vizsgálata Az INTERFACE módszer A szemmozgás-követés A web-bányászat

3 Honlapok fejlesztésének általános ergonómiai problémái

4 Honlapok fejlesztésének általános ergonómiai problémái

5 Honlapok fejlesztésének általános ergonómiai problémái Az internet hatalmas és áttekinthetetlen bősége már most oda vezet, hogy a felhasználó türelmetlen és ha kb. egy perc alatt nem jön rá, hogy egy honlapot hogyan kell használni, általában odébbáll (a konkurencia csak néhány kattintásnyira van )

6 Honlapok fejlesztésének általános ergonómiai problémái A magas használhatóság biztosításának feltétele: a felhasználók igényeinek/ viselkedésének megfelelő mélységű ismerete. Ehhez ma már nem elég a tervező természetes érzéke vagy józan köznapi logikája. Új, kifinomult innovatív módszerekre van (lenne) szükség. A fejlesztők technokrata csőlátása : általában ezen akarnak takarékoskodni.

7 Honlapok fejlesztésének általános ergonómiai problémái Általános ajánlások High-quality content Often updated Minimal download time Ease of use HOME

8 Minimális letöltési idő A szubjektív, egyénileg megélt idő nem folytonos, hanem kvantált Sok összecsengő adat utal arra, hogy a pszichológiai jelenidő tartama kb. 100 ms

9 Minimális letöltési idő Adatok a kb. 100 ms (0,1 s) kitüntetett jellege mellett: Ha a t=0 időpontban igen rövid időre fény villan fel, akkor az a kb. t=100 ms időpontban a vizuális tárban még rendelkezésre áll, de később már nem. A retinában a lebomlott látóbíbor újratermelődése ms késéssel indul meg. A kb. t<100 ms feltétel mellett tapasztalható látszatmozgás és érvényes az I x t = k (Bloch, illetve Bunse-Roscoe törvény). Ha a kísérleti személyeknek másodpercenként kb. 10 kattanó hangot exponálnak, akkor valamennyit külön képesek hallani, de másodpercenként kb. 30 kattanó hang esetén is csak kb. 10 kattanásról számolnak be. stb.

10 Minimális letöltési idő Az időkésleltetést a látogatók akadályként, frusztrációként élik meg. A felgyülemlett tapasztalatok szerint: 0,1 sec azonnali válasz élménye (összhangban a kísérleti pszichológia különböző területein kimért 100 ms-al) 1 sec megszakítottság-érzés határa 10 sec a fenntartott figyelem határa (efölött a felhasználó mással kezd foglalkozni)

11 Minimális letöltési idő A megengedhető maximális lap-, illetve objektumméretek az 1, illetve 10 másodperces válaszidők biztosításához 1 másodperc 10 másodperc Modem (56kbit/s) 6 k Byte 60 kbyte ISDN (64kbit/s) 7 kbyte 70 kbyte T1 (100Mbit/s) 100 kbyte 1 MByte

12 Az általános tervezés irányelvei Több platformra kell tervezni Hagyományos (nem hálózatos) grafikus felhasználói felületek (GUI) tervezése során a tervező minden pixelt kontrollál bizonyos lehet abban, hogy minden pontosan úgy jelenik meg a felhasználó képernyőjén, mint az övén A fontok túlzottan konkrét megadása az Interneten különösen veszélyes bizonyos gépeken a felhasználók olvashatatlan szövegeket kaphatnak Tudomásul kell venni, hogy egy adott web-design különböző gépeken különbözőképpen jelenik meg WYSIWYG is dead felbontásfüggetlen megjelenítést kell tervezni

13 Hogyan kezdődik a WEB tervezés? Előzetesen tisztázandó kérdések Ki a felhasználói célcsoport? Mi a tárgya a honlapnak? Milyen típusú feladatokat kell a felhasználónak végrehajtani? Hogyan jelezzük a honlap megjelenését? Hogyan és milyen gyorsan válaszolunk a látogatók kérdéseire? Hogyan történik a szerkesztés és a frissítés? Hogyan mérhető a honlap hatékonysága? (Pl. egy specifikus módszer: log-fájl elemzés)

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

15 Tartalomtervezés (Content Design)

16 Tartalomtervezés Alapelvek A tartalom a legfontosabb: a site-okra, illetve lapokra a felhasználók a tartalomért jönnek A tartalom-tervezés alapelve, hogy a felhasználók a kívánt tartalmakat minél könnyebben meg is talá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

17 Site-tervezés (Site Design)

18 Site-tervezés Általában a laptervezés kapja a legnagyobb figyelmet, mivel a látogató közvetlenül csak lapokat lát. Annak ellenére azonban, hogy a site egésze explicit módon nem jelenik meg a képernyőn, a használhatóság szempontjából ez általában fontosabb, mint az egyes lapok külön-külön vett minősége. A struktúra - az ún. információs architektúra szerepe alapvető

19 Site-tervezés Az információs architektúra kialakítása: olyan funkcionális és intuitív terv felállítása, 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 (Shel Kimen).

20 Site-tervezés A struktúra fontosságának alábecslése gyakori hiba: sok site-nak zavaros az információ-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 rejtve a böngészők figyelmen kívül hagyják a strukturális információk megjelenítésének igényét a felhasználók türelmetlenek: nem áldoznak időt az egyes web site-ok struktúrájának tanulmányozására, hanem a következőre ugranak.

21 Laptervezés (Page Design)

22 Laptervezés A kezdőlap A kezdőlap (home page) az egész site zászlóshajója, ezért a többi laptól eltérően kell tervezni (tkp. a site-tervezés része). A kezdőlapnak meg kell válaszolnia a látogató azon kérdéseit, hogy hol vagyok?, miről szól ez a site? Ezek a válaszok nem lehetnek bonyolult, bürokratikus nyelvezetű küldetésnyilatkozatok, hanem az egész megjelenésből azonnal nyilvánvalóvá kell válni. A kezdőlapnak kiindulási pontul is kell szolgálnia a site-on belüli navigációhoz.

23 Laptervezés Az oldal megtervezésének irányelvei: ISO hatékony kezdőoldal és oldalak megtervezése könnyen olvasható szöveg biztosítása különböző böngésző környezettel való támogatottság csak szöveges böngészővel rendelkező, vizuálisan fogyatékos felhasználók támogatása

24 Laptervezés Az interakció konzisztenciájának biztosítása. A felhasználó emlékeztetése az elkezdett feladat befejezésére Visszajelzés biztosítása (confirmation) A nyomógombok funkcióinak világos definiálása

25 Laptervezés A lapokra a felhasználók a tartalomért jönnek A lapok tartalom szempontjából optimális nem maximális! kihasználtsága ezért a legfontosabb cél Az eltúlzott mértékben üres - híg lapok olyan érzést keltenek a felhasználóban, hogy ő fizetett monitorának valamennyi pixeléért, de annak csak töredéke van kihasználva Az eltúlzott mértékű kiegészítő grafikai, díszítő és reklámanyagok zsúfoltabbá és nehezebben áttekinthetővé teszik a lapot, megnehezítik a lényegi tartalom megtalálását és feldolgozását

26 Laptervezés Különös problémát jelenthetnek a ritmikusan mozgó, forgó figyelemfelhívó elemek pinwheel DEMO

27 Laptervezés Laptervezési irányelvek: (1) Legalább a felhasznált terület (pixelszám) felét kell a tartalomra fordítani, de inkább ajánlott a 80% körüli érték. (2) Az elkészült design-t vizsgáljuk meg úgy, hogy egyenként eltávolítunk minden design elemet és megnézzük, hogy anélkül hogyan működik. Ha anélkül is elfogadható, távolítsuk el! (A működés alatt nemcsak a puszta információközlést értjük )

28 Laptervezés A nem használt terület (whitespace) hasznos elválasztó is lehet Példa: Pathfinder ( egyik verziója (2007 június) PATHFINDER Israeli, PLO Officials to Meet in Cairo Police Charge Two Suspects in Levin Murder The Doctor Is In TV s Winners And Losers Entertainment Jordan Strives for Five Eredeti változat Gifts of Wisdom Energize your healing system wuth the doc s expert advice Expedia SIonline The Connie Chang of the Web People

29 Laptervezés A nem használt terület (whitespace) hasznos elválasztó is lehet Példa: Pathfinder ( áttervezett verziója (kevésbé zsúfolt és gyorsabban is letölthető) PATHFINDER Israeli, PLO Officials to Meet in Cairo Police Charge Two Suspects in Levin Murder The Doctor Is In Gifts of Wisdom Energize your healing system wuth the doc s expert advice TV s Winners And Losers Entertainment Jordan Strives for Five Sionline The Connie Chang of the Web People Expedia Áttervezett változat Ezt a látogatók szignifikáns mértékben kellemesebbnek ítélték

30 Laptervezés Ellenpélda: ha a hasznos információk a túlságosan kis méret miatt rosszul olvashatók, akkor annak felnagyítása magasabb prioritás, mint a nem használt terület esztétikus arányának a megtartása. Pl. A Budapesti Értéktőzsde honlapján a BUX index diagramja olyan kis méretű, hogy a számszerű értékeknek még a közelítő leolvasása is igen nehéz (a diagram nem méretezhető át!).

31 Laptervezés

32 A fogadtatás vizsgálata

33 Innovatív megközelítések az internetfelhasználók igényeinek megismerésére A barátságtalan webhelyekkel folytatott harc többlet időt és energiát igényel!

34 A felhasználói fogadtatás vizsgálata A honlapok felhasználói fogadtatásának vizsgálatára mindazok a usability módszerek értelemszerűen alkalmazhatók, amelyeket a nem hálózatos szoftvertermékekre már megismertünk: Tervezési irányelveknek való megfelelés vizsgálata (Guideline Review, checklist) GOMS modellen alapuló módszerek Kognitív bejárási technikák (Cognitive Walkthrough) Heurisztikus eljárások Empirikus eljárások (pl. az INTERFACE, a szemmozgások regisztrálása, fókusz-csoport) stb.

35 A felhasználói fogadtatás vizsgálata Az empirikus módszerek széles spektruma: kis számú felhasználó interakciójának részletes, nagy mélységű vizsgálata (pl. általunk kifejlesztett INTERFACE módszertan), közbenső létszám, illetve mélységi skálájú módszerek (pl. fókusz-csoport elemzések, elektronikus kérdőívek, szuperponált eyetracking vizsgálatok, stb.), (igen) nagy számú felhasználó interakciójának viszonylag felszínes, kis mélységű vizsgálata (pl. logfile elemzés adatbányászati módszerekkel: webbányászat).

36 Az INTERFACE munkaállomás A BME Ergonómia és Pszichológia Tanszékén kifejlesztett INTERFACE szoftverergonómiai vizsgáló munkaállomás INTegrated Evaluation and Research Facilities for Assessing Computer-users' Efficiency Kis felhasználói létszám

37 Az INTERFACE munkaállomás

38 A felhasználó által látott monitor tartalma A kamera által rögzített kép A szívütések között eltelt idő Szívritmus-variabilitásból számított profilgörbe (alacsony értéke -> nagy mentális erőfeszítés) Billentyű és egér Kísérletvezetői megjegyzések

39 Szemmozgás-követés Közbenső felhasználói létszám Nielsen's F-Shaped Pattern Jakob Nielsen's Alertbox, April 17, 2006: F-Shaped Pattern For Reading Web Content Summary: Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. (F for fast!!). The F pattern's implications for Web design are clear: Users won't read your text thoroughly in a word-by-word manner. The first two paragraphs must state the most important information. Start subheads, paragraphs, and bullet points with information-carrying words that users will notice.

40 Szemmozgás-követés Közbenső felhasználói létszám Nielsen's F-Shaped Pattern

41 Szemmozgás-követés Közbenső felhasználói létszám Heatmaps from user eyetracking studies of three websites (232 users). The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.

42 Web-bányászat Web Mining Nagy felhasználói létszám Web Structure Mining Web Usage Mining Web Content Mining The taxonomy of web mining Az SPSS Inc. által forgalmazott Clementine (PASW) adatbányász csomag WebMining modulja pl. ilyen célokra előnyösen használható.

43 Web-bányászat Web-bányászat: az üzleti szféra Internet-alapú szegmensében kidolgozott igen erőteljes speciális adatbányászati megközelítés A web-bányászat tehát az adatbányászat alkalmazása a webhelyek speciális területén A módszer a webhelyek üzemeltetőjének a szerverén képződő, a forgalomra jellemző naplófájlok (az ún. logfájlok) kifinomult elemzésére épül és az adott webhelyek hatékonyságának a fokozását tűzi célul

44 Web-bányászat Clementine (PASW) web-bányász eszközeivel megoldható legfontosabb feladatok: - A látogatók és a látogatások szegmentációja: User and Visit Segmentation (E-ChannelUser RFM Classifications, User Mode Determination, Visit Branding). - A látogatók viselkedésének elemzése: Web Site Activity and User Behavior (Visit Activity Variances, Identifying Undesirable Behavior, Lifetime Conversion Tracking, Points of Abandonment, User Activity Focus, Visit Activity Funnels, Navigational Usage).

45 Web-bányászat Clementine (PASW) web-bányász eszközeivel megoldható legfontosabb feladatok (folytatás): - A látogatók leggyakoribb aktivitási sorozatainak azonosítása: Activity Sequence Analysis (Most Common Activity Sequences, Eventstream Visualisation). - A látogatók vásárlási, döntési hajlamának meghatározása tanuló algoritmusok segítségével: Propensity Analysis.

46 Web-bányászat Clementine (PASW) web-bányász eszközeivel megoldható legfontosabb feladatok (folytatás): - A látogatók magasabb szintű szegmentációja: Advanced User Segmentation. - Online hirdetési tevékenység hatásvizsgálata: Targeting Online Promotional Activity. - Online hirdetési kampányok hatásvizsgálata: Campaign Performance Measurement.

47

48 Az alkalmzott tanulóalgoritmusok: TwoStep (klaszterezés) és C5.0 (döntési fa) TwoStep C5.0

49 Eredmények

50 Eredmények