Webikäyttöliittymät ja mediavalinnat

1. Webikäyttöliittymät ja mediavalinnat • Tyypillisiä ongelmia • Ohjeita • Mediavalinnat Yhteystiedot tms:http://www.cs.hut.fi/~jparkkin/ Käytettävyyslaboratorio: http://www.usability.hut.fi/usability/

2. Oletetaanpa että olet... • Ravintolassa. • Pöydällä on kaksi sirotinta • Kumpi on pippuri?

3. Sovellusten käyttö on valintoja • Valintoja ohjaa • Tiedot, taidot • Tehtävät • Kognitiiviset seikat • Mentaaliset mallit • Vain yksi valinta monesta oikea? • Tunnistetaanko? • Kriittiset tilanteet? Sovelluksella suoritettavattoimenpiteet ovat käyttäjälle valintoja

4. Käytettävyys…Tekniikka Käytettävyys ja tekniikka nähdään usein saman mittarin eri päinä: ”Tärkeempää on tää nopeus kuin helppous” Mitattavissa oleva laatu <> koettu laatu Käytettävyys osana WWW-palvelun laatua

5. Käytettävyys & Tekniikka • Palvelun hyvyyttä voidaan kuvata sekä • teknisellä laadulla että • käytettävyyden hyvyydellä

6. Lisää muuttujia • Palvelun hyvyys on multidimensionaalinen • Kaikki dimensiot eivät ole riippumattomia • Riippuvaisille ja riippumattomille dimensioille voi olla yhteisiä ja erillisiä rajoittavia tekijöitä • Eivät toisistaan riippumattomia

7. Käytettävyys Soveltuu tarkoitukseen Käytön helppous Opittavuus Tehokkuus Navigointi Palaute Tarjonta Esteettisyys / sisältö Tekniikka Soveltuu tarkoitukseen Standardien mukainen Tarvitsijoiden saavutettavissa Oikea tekniikka oikeaan paikkaan Teknisesti tarjolla hakukoneet WWW- sovelluksen käytettävyys Sisältö • Käytön tarkoitus • Käyttäjän kokema merkitys • Etsiminen / oppiminen • Käyttäjän kieltä, objektiivista, ytimekästä

8. Tyypillisiä ongelmia

9. Termit. Internet, WWW, Java, HTML, URL, saitti, proxy, cache, browseri, selain, ohjelma… Kontrollin ottaminen Uudet ikkunat, back-painikeeseen vaikuttaminen, bookmarkittomuus Tekniikkalähtöisyys sanahaku, jargon Hypertekstin puuttuminen Hyppiminen hierarkiassa, linkkien puute / liikaa linkkejä Väärät konventiot Mainoksen näköiset otsikot, linkin näköiset korostukset Konsistenssin puute Java-liittymä työasemasovelluksessa Mutta mikä on oikea... Tyypillisimmät WWW-ongelmat Nielseniltä samanlaisia havaintoja: http://www.useit.com/alertbox/990530.html

10. Käyttäjät eivät tiedä ATK-alan sanastoa eikä tarvitsekaan Merkitys eri suunnittelija, tilaaja,asiakas Internet = WWW… modeemi... Markkinointijargon Pitäisi olla Yleiskieltä Käyttäjien kieltä …termit Tutkimus: miten käyttäjät lukevat Netistä: http://www.useit.com/papers/webwriting/

11. Toimintojen tulisi näkyvissä ja huomattavissa Läpinäkyvyys hyvä Bottom-up Haun syntaksi tärkeä Esimerkit, standardinmukaisuus Tarkoituksellisuus Kuvat osa kommunikaatiota Kuva + otsikko Ihminen huomaa, kone muistaa Http://www.ytv.fi/aikataulut/ Http://www.amazon.com/ Http://www.nokia.com/ Spool, Jared et al. Web Site Usability: A designers Guide

12. Käyttäjille tulee tiettyjä tottumuksia Vaikea ilmaista Ohjaavat käyttöä Jos tottumus ja tarve törmäävät, tottumus usein voittaa Tottumuksen rikkominen koetaan epämiellyttävänä? Linkki, otsikko, mainos... Konventiot Lukutottumukset verkossa ja printissä eroavat: http://www.useit.com/alertbox/20000514.html Web ja desktop lähstyvät toisiaan: http://www.user.com/chi98/workshop/fellenz/applets.htm

13. Toimintojen samanlaisuutta Sama toiminto näyttää samalta ja toimii samalla tavalla Eri toiminto on erilainen Eri asia kuin monotonisuus Mutta konsistenssi minkä kanssa? Konsistenssi Sama ikkuna Javalla ja Ntllä (Cordis: Protool) • Kokeeko käyttäjä toimivansa WWW- vai desktop-maailmassa • Kapeneva ero -- ja sitten… Windows design guidelines: http://msdn.microsoft.com/UI/ Java design guidelines: http://java.sun.com/products/jlf/dg/

14. Kaksi vaihetta: fiksaatio sakkadi 2-5 fiksaatiota sekunnissa 0,25s tiedostamattomia Silmä kerää tietoa vain fiksaation aikana, terävän näon alueelta Terävä näkö n. 5astetta, tällä alueella tarkkaavaisuus Aivot prosessoivat havainnoksi Teoria Ilpo.Kojo@occuphealth.fi

16. Kokeneet WWW-käyttäjät eivät katso graafeja - vain tekstiä http://www.poynter.org/eyetrack2000/ Käyttäjät kehittävät “bannerisokeuden” http://www.sandia.gov/itg/newsletter/dec98/banner_blindness.html Klikkaaminen ei kerro muistamista http://wsupsy.psy.twsu.edu/surl/usabilitynews/2S/banners.htm “uuden “Median lukutottumuksia... http://www.poynter.org/eyetrack2000/

17. Joitain ohjeita tiedon esittämiseen ja mediavalintoihin

18. Yhdistelmä tekstiä, kuvia, graafeja ja grafiikoita, animaatiota, videokuvaa ääntä ja puhetta Käyttö hiirellä, kosketusnäytöllä, kynällä, näppäimistöllä tai puheella Erilaisten medioiden yhdistelmä Ota-ja-käytä -paradigma Aina tiettyyn tarkoitukseen suunniteltuja Tietty tehtävä Tietyt käyttäjät Multimedia Multimediaohjeita: http://www.lboro.ac.uk/research/husat/eusc/r_usability_guides.html#Multimedia

19. Still image Vertaaminen, oppiminen Animointi Huomio, yleisnäkymä, todellisuus Teksti Selittäminen, oppiminen, abstraktiot, lyhentäminen Puhe Ohjaus, opastus Ääni Huomio, muutos Muuttuva(dynaminen&ajasta riippuva) Puhe, ääni, animaatio, video Ei-muuttuva (Valo)kuva, teksti Abstract “Compassion”, aesthetic experience Concrete ISO 14915-3 (draft) Selection of media and media combination

20. vielagutenberginaikaankaaneivalttamattakaytettyesimerkiksivalilyontejavielagutenberginaikaankaaneivalttamattakaytettyesimerkiksivalilyonteja (1200) välilyöntejä alettiin käyttämään - joskin se “soti puheen ja kirjoituksen suhdetta vastaan” muita välimerkkejä ei juuri ollut (1400) Renessanssi toi mukaan pisteen - jopa kolmeen eri tasoon. Renesessansin jälkeen pistettä käytettiin kuten nykyisinkin (1700-1900) Otsikointi, sivunumerot ja nimetyt osuudet alkoivat ilmestyä 1800-. Vain tekstiä - suunniteltu media . . Lupton E., Miller A. “Design Writing Research : Writing on Graphic Design” 1999

21. Hypertekstiä, hypermediaa Tekstin voi linkittää muihin teksteihin viittauksella (ISO14915). Voimme myös tehdä konkreettisempia linkkejä ISO-standardeihin Tai muihin medioihin Kirjoitettu teksti on abstraktia Ihmiset havaitsevat tekstin eri tavalla riippuen Mitä he katsovat Mitä he etsivät Aiempi tietämys Odotukset …teksti, nyt?

22. Kuvan ja tekstin saaminen yhteen on melko helppoa -kunnes mennään printterille tai nettiin... Tekstistä kuvaan viittaaminen on helppoa(See pic 1) Toiseen kuvaan tai tekstiin viittaminen hankalampaa Kuvat Pic 1 Pic 2 ISO 14915-3 (draft) Selection of media and media combination

23. Vaikeaa: Abstraktiot, uuden tiedon kuvaileminen Helppoa: Auttaa löytämistä / muistamista, aiheuttaa mielikuvia, tunteita. Abstraktoinnin taso muuttaa vaikutusta. …kuvia Luonnollinen kuva viittaa olemassaolevaan asiaan (metonymia) Enemmän tai vähemmänmuokattu (designed) kuva korostaa jotainpiirrettä Abstraktimpi kuva johtaa yleisempään konseptiin - ja hitaampaan tunnistukseen

24. Katkeavat linkit vaikeita tulkita Tekstin sisällä olevat linkit hieman helpompia Erotetut linkit,joita seuraa selitys helpompia Linkeille toisistaan erottuvat nimet Tieto hierarkiassa ”ylös” Enemmin leveät kuin syvät rakenteet 16X16 voittaa hienoisesti 32X8 ja 8X32 helposti 8X8X4 Tietomassan jakamisesta Rosenfield, R: Information Architecture for World Wide web Hierarkioiden koosta: http://www.research.microsoft.com/users/marycz/chi981.htm

25. Lyhyesti saavutettavuudesta • Mediavalinnat vaikuttavat saavutettavuuteen • Tekstin saavutettavuus (WWW-ympäristössä) parasta • Muut mediatyypit tulisi varustaa tekstiselityksin • Lay-outin ja toimivudeen voi tarkastaa helposti… LYNXillä • Muita ohjelmistoja: • www.temple.edu/inst_disabilities/piat/wave/ • www.cast.org/bobby/ • http://www.usablenet.com/ • aprompt.snow.utoronto.ca/

26. Johan me tämän tiesimmekin

27. Käyttäjällä ei ole täydellistä mallia palvelun toiminnasta Ei voi tietää sitä mistä ei tiedä Kyselyihin vastataan huonosti, epäselvästi. Kyselyt ja laskurit apuna. Ei perusteena. Kyselyt, logit tukena ja apuna Palautteen keräämisestä: http://www.useit.com/alertbox/990110.html

28. NYT Tietoa tiedosta Tärkein otsikkotaso Lihavoitu, keskitetty, suurennettu / basso +2, volume +1, pause Jotkut hakukoneet ymmärtävät HUOMENNA Agentit ymmärtävät Tässä käytetään style-sheetin h1; -määrittelyä Sisällön luokittelukone tarkastaa ja tekee yhteenvedon ………… <H1> Digitaalinen sisältö, rakenne ja ulkoasu: http://www.hut.fi/u/jkorpela/styles/harmful.html