Használhatósági problémák Neptun.NET (oktatói interfészek) Web-alkalmazások használhatósági sajátosságai Klasszikus tartalom orientált website vs. funkcionalitás orientált web-alkalmazás Tranzakció orientált alkalmazások adat objektumok manipulálása Interfész technológia Op. rendszer natív GUI HTML vagy web prezentációs megoldás 2
Web alkalmazások tervezése Felhasználói élményt meghatározó tervezési döntési szintek Stratégia szint M"ködési kör szint Struktúra szint Váz szint Felszín szint Jesse James Garrett: Elements 3 Webes interfészek Hagyományos HTML megoldás!rlapok kitöltése, elküldése feldolgozásra Oldal, "rlap szekvenciák navigációs igény HTML linkek, vezérl# elemek böngész# vezérl# elemek Fejlett prezentációs technika Javascript (DOM manipulálás), Flash 4
Webes interfészek (folyt.) HTML "rlap Flash interfész 5 Web alkalmazások használhatósága Keményebb használhatósági követelmények azonnali érthet#ség, közvetlen használat igénye rövid idej", tranziens használat széles felhasználói kör nincs oktatás, kézikönyvek, help funkcionalitás önnálló felfedezése funkc. átl. 60%-a van használatban alkalmazások gyors evolúciója feladatok (taszkok) végrehajtása átl. 45%-os siker 6
Információ- fogyasztási modell Információ elérés (ökológiai) költség-modellje információtér költségszerkezete információban gazdag területek böngészés információban szegény területek keresés infonyom 7 Esettanulmány A tengerek istene egyre barátságosabb arcát mutatja Imáink (el#adásaink) meghallgatásra találtak vagy információ építész lépett a fedélzetre. Sajnos azért még nem okafogyott ez az el#adás 8
Neptun.NET Tanulmányi adminisztrációs tranzakciós rendszer Alapvet# követelmény az elosztott konkurrens m"ködés =>webes interfész Használhatósági problémák több tervezési szinten Oktatói felh. kézikönyv 35 oldalas lényegében csak funkcionális leírás szöveg 9 pontos bet"kkel 11x szerepel a FIGYELEM! bekezdés 9 M"ködési kör és struktúra problémák (pl.) Vizsgakiírás (szorg. id#szak végén, nagyüzemileg ) általában tantárgyaktól kiindulva összes kurzusra esetleg vizsga alkalmakból kiindulva (összevont vizsgák) természetes kívánalmak: azonos napokon, azonos id#pontban azonos helyen 10
IIỊlyen volt, ilyen lett Szoftver-technológia Váz és felszín problémák egy része megoldva. 11 Sz"r#k hatóköre Ez itt van, de nem m"ködik. És mi is lenne az értelme? Ez hat. 12
M"ködési kör probléma (pl.) Vizsgára nem jelentkezett, de megjelent hallgató jegybeírása rendhagyó, de kis számban el#forduló eset vizsgája együtt kezeltetne a többi hallgatóéval Adminisztratív megoldás: ilyen eset pedig nem lehet kerül# megoldások 13 És amit megoldottak Vizsga másolása vs. mentés másként... 14
Infonyom javítás 15 Általános vázprobléma (bevezetés) Elvárások a navigációs megoldással szemben Alap kérdések Mit lehet itt csinálni? Hol találom ezt és ezt? Hol vagyok most? Min#ségi jellemz#k egyensúly, tanulási nehézség,hatékonyság, konzisztencia, orientálás 16
Általános vázprobléma (bevezetés folyt.) Web navigációs szintek Struktúrális (globális, lokális) Asszociatív (kontextusfügg#, adaptív) Segéd (toolbox, oldalon belüli) Mechanizmusok vízszintes menü, függ#leges menü, lapozás, kenyérmorzsa, fülek, fák, oldaltérkép 17 Általános vázprobléma (bevezetés folyt.) A navigáció támogatása Világos vizuális hierarchia elrendezés, stílusok (tipográfia, színsémák) Megszokott konvenciók alkalmazása 18
Általános vázprobléma A Neptun majdnem az összes létez# mechanizmust alkalmazza A konvenciókat már nem következetesen elrendezés, infonyom (vizuális megoldások), visszacsatolás problémák 19 Általános vázprobléma Néhány kérdés (Oktatói nyitó oldal) Ezek utility-k, miért vannak kitüntetett helyen? (Valamit éreztek, összecsukható) A Vizsgák miért nem az Oktatáshoz tartoznak? Ez meg mi? Ezeknek van közük egymáshoz? Milyen üzenetek? És ez mire jó? 20
Váz problémák (pl.) Információ tördelése képerny# oldalak vs. hosszú listák Ügyviteli rendszer GUI-k: hagyományos görgethet# 21 Váz és felszín problémák (pl. folyt.) Neptun lapozás Scrollozni továbbra is kell M"velet elvégzése laponként Nyomtatásban lehet(ne) értelme 22
Felszín-probléma javítva A morzsát felszedték a madarak Elt"nt, rosszul m"ködött, nem kár érte 23 Felszín-problémák Vizuális prezentáció Mi link ezen az oldalon, és mi nem? 24
Felszín-problémák Vizuális hierarchia Egész jó. Lehetne itt a kurzus neve. Hova t"nt? Utólagos hacknek látszik. Lehetne több ilyen ablakom is? 25 Felszín problémák (pl.) Technológia nem megfelel# használata nyomtatás Nyomtatási kép HTML dokumentum browser default nyomtatási megjelenés nem WSIWYG megoldás lehetne média függ# alternatív intelligensen generált stylesheet 26
Felszín problémák (pl.) Nyomtatás (WYSINWYG) 27 Átható problémák (pl.) Web sajátosságok állapot mentes protokoll => alkalmazás szint" session menedzsment kell Neptun - elemszint" és elvesz# beállítások pl. Oldalméret pedig a felhasználó azonosított pedig van session kezelés kényelmetlen default beállítás 28
Átható problémák (pl.) Pár perc alatt elévül# sessionök AJAX XHttpRequest nélkül járó tevékenységek m"ködése elfedi új bejelentkezéssel teljesen új session komoly munkavesztéssel járhat 29 Er#ssen ajánlott irodalom Steve Krug: Don t make me think, New Riders Publishing, 2006 magyarul: Steve Krug: Ne törd a fejem!, HVG Könyvek, 2008 30