WWW-käyttöliittymät ja käytettävyys WWW-käytettävyys Tyypillisiä ongelmia ja vähän lisää Selailu, interaktio Eri roolit palvelun suunnittelussa Suunnitteluprosessi WWW-sivuja on erilaisia Sivukokonaisuuksilla on eri tarkoituksia Informaation levittäminen Mainos Postimyynti (vanhat paradigmat) Tiedon myymimen (uudet paradigmat) WWW-sovellukset (Intranet - Extranet) Olenpa minä teknisesti taitava WWW-sovelluksessa voi olla kaikkia osuuksia Yhteystiedot tms: http://www.cs.hut.fi/~jparkkin/ Käytettävyyslaboratorio: http://www.usability.hut.fi/usability/ Jacob Nielsen: Multimedia and Hypertext, the Internet and Beyond Nuorten yleisin respiratorinen arytmia on inspiraation yhteydessä esiintyvä benigni paroksysmaalinen takykardia non-steroidaalisia antiinflammatorisia lääkkeitä Terminologiaa Käytettävyys osana WWWpalvelun laatua 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 Ohjeita dokumentointiin: http://www.gooddocuments.com/homepage/ Mitä käytettävyys olikaan? Käytettävyys & Tekniikka Nielsen (1993): Osa käyttökelpoisuutta opittavuus käytön tehokkuus muistettavuus virheettömyys miellyttävyys ISO 9241-11 (1998): Käyttötilanteen määrittelemä tehokkuus taloudellisuus miellyttävyys Tekniikka 10 5 0 0 5 10 Käytettävyys Palvelun hyvyyttä voidaan kuvata sekä teknisellä laadulla että käytettävyyden hyvyydellä Jacob Nielsen: Usability Engineering 1993
Tekniikka 10 5 0 Käyt... Lisää muuttujia 1 5 9 Sisältö 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 Tyypillisimmät WWWongelmat Termit. Internet, WWW, Java, HTML, URL, saitti, proxy, cache, browseri, selain, ohjelma Kontrollin ottaminen Uudet ikkunat, backpainikeeseen vaikuttaminen, bookmarkittomuus Tekniikkalähtöisyys sanahaku, jargon Nielseniltä samanlaisia havaintoja: http://www.useit.com/alertbox/990530.html 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... Käytettävyys Soveltuu tarkoitukseen Käytön helppous Opittavuus Tehokkuus Navigointi Palaute Tarjonta Esteettisyys / sisältö WWW- sovelluksen käytettävyys Tekniikka Soveltuu tarkoitukseen Standardien mukainen Tarvitsijoiden saavutettavissa Oikea tekniikka oikeaan paikkaan Teknisesti tarjolla hakukoneet Sisältö Käytön tarkoitus Käyttäjän kokema merkitys Etsiminen / oppiminen Käyttäjän kieltä, objektiivista, ytimekästä 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/ Tyypillisiä ongelmia Ihminen huomaa, kone muistaa Toimintojen tulisi näkyvissä ja huomattavissa Läpinäkyvyys hyvä Bottom-up Haun syntaksi tärkeä Esimerkit, standardinmukaisuus Tarkoituksellisuus Kuvat osa kommunikaatiota Kuva + otsikko Http://www.ytv.fi/aikataulut/ Http://www.amazon.com/ Http://www.nokia.com/ Spool, Jared et al. Web Site Usability: A designers Guide
Konventiot 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... 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 Joitain ohjeita uuden Median lukutottumuksia... Kokeneet WWW-käyttäjät eivät katso graafeja - vain tekstiä http://www.poynter.org/e yetrack2000/ Käyttäjät kehittävät bannerisokeuden http://www.sandia.gov/it g/newsletter/dec98/banne r_blindness.html Klikkaaminen ei kerro muistamista http://wsupsy.psy.twsu.e du/surl/usabilitynews/2s/ banners.htm http://www.poynter.org/eyetrack2000/ 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 Multimedia Erilaisten medioiden yhdistelmä Ota-ja-käytä - paradigma Aina tiettyyn tarkoitukseen suunniteltuja Tietty tehtävä Tietyt käyttäjät Multimediaohjeita: http://www.lboro.ac.uk/research/husat/eusc/r_usability_guides.html#multimedia Toimintojen samanlaisuutta Sama toiminto näyttää samalta ja toimii samalla tavalla Eri toiminto on erilainen Eri asia kuin monotonisuus Mutta konsistenssi minkä kanssa? Windows design guidelines: http://msdn.microsoft.com/ui/ Java design guidelines: http://java.sun.com/products/jlf/dg/ Konsistenssi Sama ikkuna Javalla ja Ntllä (Cordis: Protool) Kokeeko käyttäjä toimivansa WWW- vai desktopmaailmassa Kapeneva ero -- ja sitten Still image Vertaaminen, oppiminen Animointi Huomio, yleisnäkymä, todellisuus Teksti Selittäminen, oppiminen, abstraktiot, lyhentäminen Puhe Ohjaus, opastus Ääni Huomio, muutos ISO 14915-3 (draft) Selection of media and media combination Muuttuva (dynaminen&ajasta riippuva) Puhe, ääni, animaatio, video Ei-muuttuva (Valo)kuva, teksti Abstract Compassion, aesthetic experience Concrete
Vain tekstiä - suunniteltu media vielagutenberginaikaa nkaaneivalttamattakay tettyesimerkiksivalilyo nteja (1200) välilyöntejä alettiin käyttämään - joskin se soti puheen ja kirjoituksen suhdetta vastaan muita välimerkkejä ei juuri ollut (1400) Lupton E., Miller A. Design Writing Research : Writing on Graphic Design 1999 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-. Otsikon tulee vastata linkkiä Otsikon tulee vastata dokumentin tekstisisältöä Linkki vastaa tekstisisältöä! Otsikon vastuu! Keino lisätä linkkiin selitys: http://www.useit.com/alertbox/980111.html Ohjeita otsikoiden laatimiseen: http://www.useit.com/alertbox/980906.html Http://www.libhel.hel.fi/ Hypertekstiä, hypermediaa Tekstin voi linkittää muihin teksteihin viittauksella (ISO14915). Voimme myös tehdä konkreettisempia linkkejä ISOstandardeihin Tai muihin medioihin teksti, nyt? Kirjoitettu teksti on abstraktia Ihmiset havaitsevat tekstin eri tavalla riippuen Mitä he katsovat Mitä he etsivät Aiempi tietämys Odotukset Tekstin luettavuus; scanability Ruudulta lukeminen 10% - 30% paperia hitaampaa Dokumentin rakenne tavallista tärkeämpää Osuvat otsikot Lyhyet kappaleet Katseen ohjausta: Lihavointia varovaisesti Kursivoitu vaikea lukea Alleviivaus vain linkkeihin! Miten kirjoittaa webiin: http://www.useit.com/papers/webwriting/ Visuaalinen ryhmittyminen Ryhmittely tapahtuu automaattisesti Ryhmät voivat muodostua visuaalisten vihjeiden, sisällön tai metaforan kautta Selainten perusasetukset eivät tue ryhmittelyä Kehysten (frames) ongelmia Rikkovat hypertekstin rakenteen Tulostaminen hankalaa (mahdotonta) Tee ohjeet tulostusta varten Hakukoneet eivät ymmärrä Kirjanmerkkien tekeminen mahdotonta Kehyksillä toteutettu sivu on uusi käyttöliittymä Http://www.stat.fi/ Eräs kognitiivisen psykologian perusteos: Kellog Ronald T: Cognitive Psychology Frames? http://www.useit.com/alertbox/9705a.html
Tietomassan jakamisesta Erilaisia kuvia samasta asiasta - suunnittelija 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 Suunnittelija tietää: Millainen on palvelun rakenne Mikä sivu on pääsivu Mitkä asiat ovat samalla tasolla Mitä pitää tehdä missäkin Mikä on tärkeää tai pakollista Mikä on lisätietoa Miten asioiden tulee toimia Missä on vika, jos jokin ei toimi Rosenfield, R: Information Architecture for World Wide web Hierarkioiden koosta: http://www.research.microsoft.com/users/marycz/chi981.htm WWW-tuotekehitysprosessi työvaiheineen Erilaisia kuvia samasta asiasta - Asiakas Asiakas tietää Mitä sivuilla voi tehdä Mitä sivuilla ei voi tehdä Mitkä asiat liittyvät yhteen Mikä on asioiden tärkeysjärjestys Millaisia kävijöitä sivulle Haluttaisiin tulevan Tulee Asiakas aavistelee Keitä sivuilla oikeasti käy Mikä on sivun hyöty Rooleja Erilaisia kuvia samasta asiasta - käyttäjä Käyttäjä tietää: Miten muut sivut tai palvelut ovat toimineet Mihin sivun osia yleensä käytetään Mitä hän haluaa saavuttaa (ei sanallista tietoa) Käyttäjä ei tiedä Sivujen rakennetta Mikä sivuilla on tärkeää, mikä vähemmän tärkeää Mitä sivuilla voi tehdä, mitä ei voi tehdä Onko hän tarvettaan parhaiten vastaavalla polulla
Webin kruunu, saittien kuningas Valmis tuli! nyt siitä ei tarvitse enää huolehtia Erilaisia kuvia... Sivuston rakenne on ehkä liikaa piilossa Taas se hyppäsi tähän! Tätäkin opetetaan http://www.hut.fi/~ahmakela/tik-86.170/esite.html Iteratiivinen prosessi Suunnitteluvaiheessa Käyttäjien tunnistaminen Tehtäväanalyysi Tarvittavan käyttöliittymän toteutus Tekniikan toteutus Prototyypit / lay-out piirrokset / kevyet tekniikat Testaus Skenaariot suunnittelussa: Carroll, John M: Scenario Based Design Käyttöönottovaiheessa Kevyt perustekniikka Testaus Korjaukset Ylläpito Seuranta Iteratiivisesta prosessista: http://www.zdnet.com/devhead/stories/articles/0,4413,2190669,00.html <H1> Webi HTML 4.0 Java Applet Cookie Clickthrough 64 000 väriä c00l Pentium MSIE 4.01 Plug-in Hierarkinen Muoto T3-yhteys ja proxy WWW Mainos, markkina, palvelu, tuote Brandi Imago Tuloja Ylläpito Sisältö Kohderyhmä Asiakkaat ISDN kotoa Hakukone Internet Netscape / Inernet(explorer) Modeemi Tietokone Saada Parempi kuin Yyy Sinisistä alleviivatuista pääsee eteenpäin 1/2h kirjastossa Menetelmiä eri vaiheissa Ilman käyttäjiä Käyttäjien kanssa - Tehtäväanalyysit - Käyttäjäanalyysit - Skenaariot - Heuristiset menetelmät - Tehtäväanalyysit - Haastattelut - Tehtäväanalyysit - Ryhmäläpikäynti Korjausten hinta kasvaa Menetelmäkuvauksia: http://www.lboro.ac.uk/research/husat/eusc/index_g_methods.html Alkuvaiheessa Toteutusvaiheessa - Heuristiset menetelmät - Läpikäynnit - Testaus tehtävä- tai käyttäjäanalyysejä vastaan - Käytettävyystestit - Läpikäynnit Arvioinnin hinta kasvaa Tarvekartoitukset, Käyttäjähaastattelut WWW-tuotekehitysprosessi Kokemukset olemassaolevista tuotteista Tuotemäärittely Vaatimusmäärittely Skenaariot, Käyttäjä- ja tehtäväkuvaukset Toteutus Läpikäynnit, heuristiset menetelmät, pienet käytettävyystestit Tuotekehitysprojekti Pilotti Hyväksymistesti(t) Käyttöönotto Projektin lopetus Käyttäjien tunnistaminen Tärkeimmät käyttäjäryhmät Päivittäin käyttävät Tietoa syöttävät Satunnainen käyttö Tekninen tuntemus Tekniset Ei-tekniset Todellisia käyttäjiä! WWW-sovelluksilla käyttäjäryhmät työn ja tehtävien kautta WWW-palveluilla nykyisiä käyttäjiä ja potentiaalisia käyttäjiä Sisältö (koettu / toivottu) Miellyttävyys (kokeileeko) WWW-sovelluksen tuotantoprosessi ja käytettävyys: http://www.uiah.fi/mediastudio/survey4/ Käyttäjäryhmien tunnistaminen, havainnointi: Beyer, H & Holtzblatt K Contextual Design
Tehtävien tunnistaminen Tehtävät ovat käyttäjäryhmäkohtaisia Onko työ vai huvi? Säännöllinen / epäsäännöllinen? Tiedot, taidot, entiset kokemukset konventiot Halu oppia Mitä on jo oppinut? Toistuvat tehtävät Tiedon syöttäminen Tarkastaminen Tärkeimmät tehtävät Tiedon käsitteleminen Kriittiset tehtävät Maksusitoumuksen tekeminen Käyttäjistä ja tehtävistä: Hackos, J & Redish, J User and Task Analysis for Interface Design Browsing, interacting, using: http://www.user.com/chi98/web-and-desktop.htm Horisontaalinen Prototypisoidaan koko sovellukseen vaikuttavat asiat Lay-out, päivämäärän esitystapa, muodot Paperiprotot, eitoiminnalliset (Lo-Fi) Testataan Navigoitavuus konsistenssi Prototyyppi Prototyypit GUI-maailmassa: Isensee, S., Rudd J. The Art of Rapid Prototyping Vertikaalinen Prototypisoidaan tapahtumaketjuja, loogisia kokonaisuuksia Käytön aloitus, tuotetiedon haku, ostotapahtuma Näennäistä tai todellista toiminnallisuutta Dummy, (Hi-Fi) Testataan toimintojen loogisuutta Tärkeiden toimintojen opittavuutta Sovelluksen toteutus Metaforat / analogiat Vihjaa toiminnallisuudesta pinnan kautta WWW- sivulla on linkkejä joista saa uusia sivuja sekä painikkeita... On toimintojen samanlaisuutta Linkiksi havaitulla tekstillä ja kuvalla samanlainen toiminta Metaforista: http://www.user.com/chi98/workshop/parkkinen Konventio Totuttu tapa toimia (samassa kontekstissa) Ylälaidan animointi on mainos Konteksti Toiminnan merkitys ja mielekkyys Painike tallettaa tehdyt muutokset niin, että niihin päästään myöhemmin käsiksi tai hyväksyy laskun Heuristiset menetelmät Menetelmä Verrataan sovelluksen piirteitä nyrkkisääntöihin Listataan kohdat joissa sovellus eroaa säännöistä Esimerkiksi Nielsen - 93, Usability engineering... Heuristinen arviointi: http://www.useit.com/papers/heuristic/ Tulokset Kohtia, joissa sovellus eroaa suositellusta tavasta Keskittyy opittavuuteen, affordanceen, toimintojen samanlaisuuteen. Myös yksityiskohtia, pintavikoja sovelluksen toteutus Kokonaisuuden hahmotus Mihin osiin palvelu jakautuu Käyttäjäryhmien tarpeet Onko osissa samanlaista toiminnallisuutta Voidaanko protoilla / toteuttaa moduleina? Konsistenssi Samanlainen logiikka palvelun sisällä Sivujen suunnittelu Tehtävän kannalta järkevä tiedon esitys Vuorovaikutus Sivutasoinen navigointi Mitkä osuudet käyttäjä havaitsee Muodostuuko oletuspoluista järkeviä Proto testaukseen Käytettävyystesti Menetelmä Laaditaan tehtäviä, joita sovelluksella tehdään. Yksi tai kaksi käyttäjää kerrallaan tekee tehtävät, yleensä ääneen ajatellen Tuloksista analysoidaan virheet ja niiden syyt. Kallista? http://www.zdnet.com/devhead/stories/articles/0,4413,2224316,00.html Tulokset Tuloksena havaittuja ongelmia ja tietoa siitä mikä ongelmat aiheutti Osasovelluksen tulokset yleensä yleistettävissä. Uutta, objektiivista tietoa Eivät synny itsestään
Uutuudet Mynti Typ e title here T ype title h ere W ebi sa itti Pääsivu T ästä ä al etaan Huolto Type ti tle here Ka ikkea kivaa Huol to T ype title here Uutuudet Type title he re Webi saitti Pää si v u Tästää aletaan Kaikkea kivaa Mynti T ype title here Tarvittavat tekniset ratkaisut Käyttäjien käytössä oleva tekniikka Yhteydet käytetty laitteisto mielenkiinto Java... Serveripuolen tekniikka Oikealla tavalla tehokas Laajentuva Serverin ohjelmisto Avoin Ei itsevaltias Itse sovellus Tietokantojen rakenne Vuorovaikutus Tulevaisuus Avoimuus Skaalautuvuus Standardit Mihin standardit auttavat? Suunnittelutyössä paljon epävarmuuksia, uusia ratkaisuja Pyörä on jo keksitty Kun tietää miten pyörä toimii, sitä voi parantaa Käyttäjät viettävät eniten aikaa toisilla saiteilla Konsistenssi on tärkeä ei vain käyttäjälle... Standardien käytettävyys Etenkin ISO-standardit lähinnä viitteitä Kentän pakollisuus ilmaistava Prosessistandardit menettelytapatietoa Nielsen standardeista WWW-maailmassa: http://www.useit.com/alertbox/990822.html mihin standardit auttavat? Johan me tämän tiesimmekin Noudattaa standardeja mutta ei toimi... Nielsen standardeista: http://www.useit.com/alertbox/990822.html Yrityskohtaiset tyylioppaat ISOissa termejä koottuna, de-faktot kirjattuna OS-tyylioppaissa tarkastuslistoja, menettelytapoja ETSI-standardeissa tarkastuslistoja Tyyliopas tulee testata Voiko suunnittelija käyttää Tuottaako laadukkaita järjestelmiä Apua standardeista Näytetpääteyön käyttöliittymästandardi ISO 9241 Ergonomiset vaatimukset toimistotyölle ja näyttöpäätteille (Ergonomic requirements for office work with visual display terminals) Osat 1-9 näyttöpäätteen ergonomiasta 10 Dialogin periaatteet (Dialogue principles) 11 Käytettävyyttä koskevat ohjeet (Guidance on usability) 12 Tiedon esitys (Presentation of information) 13 Käyttäjäopastus (User guidance) 14 Menudialogit (Menu dialogues) 15 Komentodialogi (Command dialogues) 16 Direct manipulation dialogues 17 Lomakepohjainen dialogi (Form filling dialogues) Kyselyt, logit tukena ja apuna Uutuudet Type title here Huolto Type title here Webi saitti Pääsivu Tästää aletaan Mynti Kaikkea kivaa Type title here 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. Kattava lista standardeista ja ohjeista: http://stc.org/pics/usability/topics/uistandards.html Palautteen keräämisestä: http://www.useit.com/alertbox/990110.html
NYT Tietoa tiedosta Tärkein otsikkotaso Lihavoitu, keskitetty, suurennettu / basso +2, volume +1, pause Jotkut hakukoneet ymmärtävät <H1> HUOMENNA Agentit ymmärtävät Tässä käytetään stylesheetin h1; - määrittelyä Sisällön luokittelukone tarkastaa ja tekee yhteenvedon Digitaalinen sisältö, rakenne ja ulkoasu: http://www.hut.fi/u/jkorpela/styles/harmful.html