IHTE-1900 Seittiviestintä Seittisivujen käytettävyys 25.10. Päivän aiheet WWW:n erikoispiirteitä Seittisivujen käytettävyys - Hyvät ja huonot seittisivut (ryhmätyön tulokset) - Miten suunnitella hyvät sivut? - Yleisimmät virheet - Kohderyhmien huomioiminen WWW:n erikoispiirteitä: toteutus Julkinen ja avoin järjestelmä - Alunperin ei suunniteltu kaiken kansan käyttöön Standardit ja niiden puute Nopea kehitys ja kasvu Vasteajat vaihtelevat 1
WWW:n erikoispiirteitä: rakenne Käyttäjän sijainnilla ei ole merkitystä Toiminta voi olla pienimuotoista ja halpaa Fyysisen maailman rajoituksista vapaa Sisällön ei tarvitse olla lineaarista Palvelurajat hämäriä Linkkejä voi teoriassa olla ääretön määrä Sivustolla on helppo jakaa materiaalia WWW:n erikoispiirteitä: sisältö Tietoa valtavasti Palvelut voivat olla yksilöllisiä Tiedon etsiminen haastavaa Sisällön merkitys korostuu Kaikki tieto ei ole luotettavaa Palvelut voivat olla anonyymejä Palvelut toimivat asiakkaan ehdoilla WWW:n erikoispiirteitä: käyttäjät Kielierot Kulttuurierot Heterogeeninen käyttäjäryhmä Tavoitteet Tekninen osaamistaso WWW:n käyttökokemus 2
WWW:n erikoispiirteitä Koska ei tiedetä tarkkaa käyttöliittymää ja ulkoasua, on keskityttävä - sisältöön: mitä esitellään ja miten, kenelle - rakenteeseen: kuinka esitetään, missä esitetään - ylläpitoon: vanhentunut tieto pois sivuilta - virheettömyyteen: kirjoitusvirheet, asiavirheet - esteettömyyteen: tieto kaikkien saataville Käyttäminen vs. tyytyväisyys Sivuston kävijämäärät eivät välttämättä kerro mitään sivuston käytettävyydestä ja kävijöiden tyytyväisyydestä palveluun - verkkopankki - ilmoittautumislomakkeet - uutissivustot Verkkobrandien arvostus Suomessa 2002 - tutkimus Eniten käytettyihin WWW-palveluihin ei välttämättä olla tyytyväisiä www-palveluiden tärkeimmät ominaisuudet ovat - Sisältö - Ajantasaisuus - Tekninen toimivuus Toimihenkilöt ja johtotason henkilöt korostavat tietojen ajantasaisuutta Nuoret ja opiskelijat arvostavat muita vastaajia enemmän www-palvelun ulkonäköä. Lähde: Taloustutkimus 3
KOTIUTA käyttäjä sivuille Korkeatasoinen sisältö Oikea-aikaiset päivitykset Todella lyhyt latausaika Intuitiivinen käyttöliittymä Uniikisti verkkoa hyödyntävä Tarpeita vastaava sisältö Asenteet verkkomyönteisiksi Nielsenin suunnitteluohjeet käyttäjälle ei kannata kertoa sivuston puutteista julkaise sivut vasta kun ne ovat julkaisukelpoisia tulevaisuudensuunnitelmista voi kertoa, mutta tärkeintä käyttäjälle on mitä sivustolla voi tehdä tällä hetkellä - anna tulevaisuudesta lupauksia, jotka myös pidät Kaikki verkkosivut ovat aina keskeneräisiä! Nielsen: rakenna sivusto huolella Erota sisältö ja esitystapa - käytä semanttista koodausta - käytä tyylitiedostoja (CSS, Cascading Style Sheet) tarvittaessa Pääosassa sisältö eli se informaatio, joka oletettavasti sai käyttäjän sivustolla käymään Nyrkkisääntö: yksinkertainen on monimutkaista parempi vaihtoehto - poista jokainen elementti yksi kerrallaan - mikäli tuote toimii ilman elementtiä, se voidaan poistaa 4
Nielsen: rakenna sivusto huolella Uskottavuus - sivuston voi perustaa kuka tahansa - luotettavuutta parantaa sivun hyvä suunnittelu ja siisti ulkoasu Jokaisella sivulla oltava oma nimi - sivuhistorian käyttö - hakukoneet Nielsen: pääsivu on tärkeä Sivuston tärkein sivu Tehtävänä - kertoa käyttäjälle sivuston tarkoitus - tarjota reittejä muualle sivustoon linkit Hakutoiminnot Nielsen: pääsivu on tärkeä Paras sisältö riippuu aina sivuston tarkoituksesta ja kohderyhmästä Erilliset käynnistyskuvat ja tervetuloa -sivut animaatioineen useimmiten turhia - perusteltuja lähinnä jos kävijöitä tulee varoittaa jotenkin sivujen sisällöstä (esim. ei sovi lapsille tai herkille ihmisille) 5
Seittisivujen lukeminen Näytöltä lukeminen 25% hitaampaa kuin paperilta lukeminen Miten käyttäjät lukevat seittisivuja? Nielsen: eivät mitenkään. - käyttäjät selaavat ja silmäilevät sivuja - John Morkesin & Nielsenin tutkimus 1997 79% käyttäjistä vilkaisee sivuja (scan) vain 16% lukee sanasta sanaan Esimerkki: Näytöltä lukeminen Nielsenin & Morkenin tutkimus Viisi eri versiota seittisivuista - alkuperäinen teksti - lyhennetty teksti - silmäiltävä teksti - objektiivinen teksti - yhdistetty versio, jossa käytetty kaikkia kolmea muokattua versiota Mitattiin, kuinka paljon käytettävyys (luettavuus) prosentuaalisesti paranee Esimerkki: Alkuperäinen teksti Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 6
Esimerkki: Tiivistetty teksti (58%) In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. Esimerkki: Silmäiltävä teksti (47%) Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446) Esimerkki: Objektiivinen teksti (27%) Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 7
Esimerkki: Yhdistetty versio (124%) In 1996, six of the most-visited places in Nebraska were: - Fort Robinson State Park - Scotts Bluff National Monument - Arbor Lodge State Historical Park & Museum - Carhenge - Stuhr Museum of the Prairie Pioneer - Buffalo Bill Ranch State Historical Park Nielsen: verkkoon kirjoittaminen Kirjoita lyhyesti ja ytimekkäästi - tiivistä: verkkoon 50% vähemmän tekstiä - käytä käänteisen pyramidin ideaa - yksi ajatus tai idea per kappale - lauserakenteet yksinkertaisiksi - käytä huumoria ja sanaleikkejä varovaisesti Nielsen: verkkoon kirjoittaminen Muista kielenhuolto - Kirjoitusvirheet ovat kiusallisia ja vievät uskottavuutta - Virheet ja epäselvät lauseet myös hidastavat lukemista entisestään 8
Nielsen: tekstin ulkoasu Tekstin ja taustan värien välille mahdollisimman voimakas kontrasti - luettavuus paras jos teksti mustaa, tausta valkoinen Tekstin taustaksi yksi väri tai rauhallinen kuvio Tekstin pysyttävä paikallaan Nielsen: tekstin ulkoasu Tavalliset tekstit vasempaan reunaan tasattuna - keskitys ja tasaus vain tehokeinoina Näytöltä luettavaan tekstiin fontiksi pääteviivaton kirjasin - päätteetön (Arial) - päätteellinen (Times New Roman) Vältä HUUTAMISTA Nielsen: tekstin ulkoasu Käyttäjät suosivat erilaisia kirjasinkokoja, älä pakota esim. vanhuksia lukemaan pientä fonttia Kirjasinkoko määriteltävä suhteessa peruskirjasinkokoon eikä pisteinä Käytettävä vain peruskirjasimia tai annettava ainakin useita vaihtoehtoja Näytölle teksti vain yhteen palstaan 9
Nielsen: käytä kuvia harkiten Perusteeton kuvitus on karsittava - toisaalta käytä kuvia esim. verkkokaupassa Nopeuta latautumista - optimoimalla kuvien koko ja talletusmuoto - määrittelemällä kuvien leveys ja korkeus - käyttämällä pikkukuvia (thumbnails) joista linkki isompaan kuvaan Jos kuva sisältää tärkeää informaatiota, on tieto tarjottava myös muussa muodossa Kuvan merkityksellinen pienentäminen Nielsen: sallitut animaatiot Animaatioita kannattaa käyttää harkiten - Siirtymien välisen jatkuvuuden osoittaminen - Siirtymän suunnan osoittaminen - Ajan myötä tapahtuvat muutokset - Näytön hyödyntäminen - Graafisten esitysten tehostaminen - Kolmiuloitteisten rakenteiden havainnollistaminen - Huomion kiinnittäminen Animaatio ei saisi toimia koko ajan 10
Nielsen: ota linkeistä kaikki irti Linkit, 3 tyyppiä - rakenteellinen linkki hahmottaa esimerkiksi sivujen rakennetta - sisältölinkki siirtyy sivulle, jossa lisätietoa linkin sanasta tai kuvasta - aiheeseen liittyvä linkki auttaa käyttäjää löytämään muita samanaiheisia sivuja Linkeillä vain 2 standardiväriä - sininen = avaamaton linkki - sinipunainen/punainen = avattu linkki Nielsen: ota linkeistä kaikki irti Linkkitekstit informatiivisiksi - Kesän uutuuksista saat lisätietoja täältä vs. Tutustu kesän uutuuksiin - Jos linkkitekstinä henkilön nimi, linkin tulisi viedä sivustolle jossa lisätietoja henkilöstä. Sähköpostilinkit erikseen. Nielsen: ota linkeistä kaikki irti Linkkiotsikot hyvä keino välittää lisätietoa - tulevat näkyviin, kun kursori on ollut n. 1s linkin kohdalla - tarkoituksena auttaa käyttäjää arvioimaan, mitä tapahtuu tiettyä linkkiä seuratessa - Esimerkiksi <a href= http://www.cs.tut.fi/~sevi title= Seittiviestintä 2007 >Seittiviestintä</a> - eivät toimi kaikissa selaimissa - ei aina tarpeen jos linkkiteksti ajaa saman asian 11
Nielsen: ota linkeistä kaikki irti Linkit ulos sivustolta - Hyvät linkit saavat käyttäjät palaamaan sivulle - Avataanko linkit samaan vai uuteen ikkunaan? - Linkkeihin lyhyt kuvaus kohteen sisällöstä - Laatu korvaa määrän, muista ryhmittely - Käyttäjälle tulee kertoa, jos linkki vie ulos sivustolta Nielsen: vasteajat Vasteajat - Toiminnon tulee reagoida ajassa 0,1s - Sivulta toiselle siirtyminen tulisi olla < 1s - Hyvä tavoite on sivun latautuminen alle 10 s WWW-sivujen tärkein ominaisuus on nopea latautumisaika. - Jakob Nielsen Nielsen: sivut nopeasti latautuviksi Enemmän tekstiä ja vähemmän kuvia, optimoidut kuvat Sivun yläosan tulee olla hyödyllinen käyttäjälle ilman, että kuvat ovat latautuneet Kuviin ALT-tekstit, näkyvät useissa selaimissa ennen kuvanlatautumista Tekstisisältö latautuu nopeasti jos WIDTH- ja HEIGHTmäärittelyt kaikkiin kuviin ja taulukoihin ovat olemassa 12
Nielsen: sivut nopeasti latautuviksi Vaikeaselkoiset ja monimutkaiset taulukot jaetaan useaan pienempään taulukkoon Sivun pituus ja leveys Multimediaefektejä vain tarvittaessa Suuria tiedostoja sisältäviin linkkeihin tiedoston koko ja esimerkki latautumisajasta tietyllä nopeudella Linkkeihin täydellinen URL-osoite Nielsen: älä käytä kehyksiä Kehysten käyttö voi aiheuttaa ongelmia Käyttäjän näkymä usean selausaskeleen tulos URL:ista kopioitu linkki ei välttämättä johda halutulle sivulle Kirjanmerkkien teko ei välttämättä onnistu halutulle sivulle Pienissä näytöissä kehykset vievät suuren osan tilasta - puhelimissa ja PDA-laitteissa eivät välttämättä toimi ollenkaan Nielsen: älä käytä kehyksiä Kehykselliset sivut tulostuvat huonosti Jos kehyksiä on käytettävä lisätään kaikkiin hypertekstilinkkeihin TARGET= _top -attribuutti - poistaa kehykset ja lataa sivun uudelleen - joka sivulla uusi URL, jota voidaan käyttää linkittämiseen Hakukoneet eivät välttämättä käsittele sivua oikein 13
Nielsen: älä käytä kehyksiä Mikäli käytät kehyksiä, tarjoa sisältö myös kehyksettömänä versiona - poista reunat: käyttäjän tuskin niitä tarvitsee nähdä Kelluvat kehykset (floating frame, inline frame) käyttäjän näkökulmasta käyttökelpoisia Nielsen: taita sivu joustavaksi Sivua ei pidä suunnitella erityisesti millekään tietylle standardikoolle - Näyttöjen ja selainikkunoiden koot vaihtelevat - Käytetyt resoluutiot vaihtelevat - Jos kuitenkin halutaan tehdä määrätyn kokoinen sivu niin leveys tulisi olla alle 600 pikseliä. Liukuva asettelu käyttäjille parempi kuin kiinteä Pieniä näyttöjä ei pidä pakottaa vierittämään näyttöä vaakasuunnassa Nielsen: tarjoa tulostusmahdollisuus Sivun tulee mahtua sekä letter- että A4-arkille - Suositeltava marginaali 2,5 cm, jolloin tulostettava alue on n. 23x16cm Sivusta tehtävä tarvittaessa kaksi versiota; tulostettava ja näytöltä luettava - Näytöllä 1 palsta, tulosteessa 2 - Erilaiset kirjasinlajit - Näytöltä luettava muotoa HTML - Tulostettavat muotoa PS (PostScript) tai PDF Tulevaisuudessa ehkä standardi jonka avulla automaattisesti tarjotaan eri versio tulostukseen? 14
Nielsen: URL-osoitteet URL-osoitteiden piti alunperin olla vain tietokoneiden käyttämä koodi, joka ei näy käyttäjälle - Virallinen syntaksi alkaa http:// - Useimmat selaimet osaavat täydentää osoitteen, jonka alusta puuttuu protokollamäärite ja lopusta hakemiston merkkiviiva, esim. www.tut.fi Koodiin täydellinen syntaksi http://www.tut.fi/ - Lyhentää vasteaikaa verrattuna selaimen täydennettävään muotoon Nielsen: URL-osoitteet Käyttäjät yrittävät ymmärtää URL-osoitteen - Mahdollisimman selkeä nimeäminen - Lyhyet nimet tai yhdyssanat - Vain pieniä kirjaimia - Ei erikoismerkkejä, jos kuitenkin käytettävä esim. tavuviivaa niin se on tehtävä yhdenmukaisesti kaikilla sivuilla Sivuhierarkiassa tulisi päästä ylemmäs poistamalla URLosoitteen oikeanpuoleisia osia Nielsenin käytettävyyssloganit Your Best Guess Is Not Good Enough The User Is Always Right The User Is Not Always Right User Are Not Designers Designers Are Not Users Vice Presidents Are Not Users Less Is More Details Matter Help Doesn't 15
Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > 100 3. Kirjoita selkeät otsikot sivuille ja teksteille 4. Tue silmäilevää lukutapaa 5. Käytä hypertekstiä sisällön jäsentämisessä 6. Käytä tuotekuvia mutta älä liikaa 7. Pienennä kuvat oleellisen sisällön mukaan 8. Käytä linkkiotsikoita 9. Varmista että tärkeät sivut ovat myös erikoisryhmien saatavilla 10. Tee kuten muutkin Nielsen, http://www.useit.com/alertbox/991003.html Esteettömät verkkopalvelut Verkkopalvelut kaikkien saataville Hyöty erityisryhmille ja erikoisten päätelaitteiden käyttäjille Esteettömyyden huomiointi edistää samalla myös käytettävyyttä erilaisissa käyttötilanteissa ja ympäristöissä Huomioi verkkopalvelussa erityisesti - Rakenne - Kieli - Tekniikat - Linkit Esimerkki: Flash-toteutus 16
Lisää huomioitavia asioita Palautemahdollisuus Rakenna sivustosta hakukoneille helppo käsiteltävä (search engine design) Visuaaliset suunnitteluperiaatteet, asettelu Värien valinta Normanin suunnitteluperiaatteet Nielsenin heuristisen arvioinnin lista Normanin suunnitteluperiaatteet Näkyvyys Kytkennät Käsitemalli Palaute Virheiden käsittely Nielsenin heuristisen arvioinnin lista 1. Palvelun tilan näkyvyys 2. Palvelun ja tosielämän vastaavuus 3. Käyttäjän kontrolli ja vapaus 4. Yhteneväisyys ja standardit 5. Virheiden estäminen 6. Tunnistaminen mieluummin kuin muistaminen 7. Käytön joustavuus ja tehokkuus 8. Esteettinen ja minimalistinen design 9. Virhetilanteiden tunnistaminen, ilmoittaminen ja korjaaminen 10.Opastus ja ohjeistus 17
18
Tyypillisiä virheitä verkkopalvelujen suunnittelussa Yrityksen vanhaa toimintamallia ei muuteta - verkon tuomia mahdollisuuksia ei hyödynnetä Projektinhallinta - projektia johdetaan kuten muita yrityksen projekteja Informaatioarkkitehtuuri - sivu muistuttaa yrityksen rakennetta eikä palvele käyttäjän tarpeita Tyypillisiä virheitä: informaatioarkkitehtuuri 19
Tyypillisiä virheitä verkkopalvelujen suunnittelussa Sivujen suunnittelu - Sivut suunnitellaan demomielessä näyttäviksi, mutta esim. tiedonsiirtoviiveitä ei oteta huomioon Sisällöntuotanto - Kirjoitetaan materiaali samalla tavoin kuin painettavat mainokset ja tiedotteet Linkkien rakentaminen - Tehdään sivuista oma saareke, jolla ei ole selkeää alkua eikä poispääsyä 20
Nielsen: virheet suunnittelussa Jakob Nielsen on kerännyt pahimpia seittisuunnittelun virheitä, jotka kannattaa lukaista selityksineen kaikki läpi Kaikki virheet eivät enää ole ajankohtaisia, esim. käyttäjät ovat tottuneet ruudun vierittämiseen. - Top Ten Mistakes Revisited Three Years Later http://www.useit.com/alertbox/990502.html Nielsen: virheet suunnittelussa Top Ten Mistakes in Web Design (1996) - http://www.useit.com/alertbox/9605.html Top Ten New Mistakes in Web Design (1999) - http://www.useit.com/alertbox/990530.html Top Ten Web-Design Mistakes of 2002 - http://www.useit.com/alertbox/20021223.html Top Ten Web-Desing Mistakes of 2005 - http://www.useit.com/alertbox/designmistakes.html ei yksin Nielsenin tekemä vaan myös Alertboxien lukijat saivat antaa ehdotuksia listalle 21
Nielsen: virheet suunnittelussa 1996 1. Kehysten käyttö (frames) 2. Uusimman tekniikan perusteeton käyttö 3. Vierivä teksti, animaatiot 4. Monimutkaiset URL-osoitteet 5. Irralliset sivut 6. Pitkät, vieritettävät sivut 7. Navigointituen puute 8. Epästandardit linkkivärit 9. Päivittämätön, vanhentunut sisältö 10.Pitkät latautumisajat Nielsen: virheet suunnittelussa 1999 1. Back-painikkeen toiminnallisuuden rikkominen 2. Uusien selainikkunoiden avaus 3. Epästandardien käyttöliittymäkomponenttien käyttö 4. Tekijätietojen puuttuminen 5. Arkistojen puuttuminen 6. Sivujen siirtäminen uuteen osoitteeseen 7. Otsikot jotka eivät kuvaa oleellista sisältöä 8. Uusimpien muotivillitysten seuraaminen 9. Hitaat palvelimen vasteajat 10.Kaikki mikä näyttää mainonnalta Nielsen: virheet suunnittelussa 2002 1. Hintatietojen puuttuminen 2. Joustamattomat hakukoneet 3. Sivujen vierittäminen vaakasuunnassa 4. Kirjaisinkokojen määrääminen 5. Tekstin kirjoittaminen suuriin lohkoihin 6. JavaScriptin käyttö linkeissä 7. Harvoin kysytyt kysymykset UKK:ssa 8. Sähköpostiosoitteiden kerääminen ilman tietosuojapolitiikkaa 9. Pitkät URL-osoitteet 10.Sähköpostilinkit odottamattomissa paikoissa 22
Nielsen: virheet suunnittelussa 2005 1. Luettavuusongelmat 2. Epästandardit linkit 3. Flash:n käyttö 4. Sisältö, jota ei ole kirjoitettu www:tä varten 5. Hankalat haut 6. Selainten yhteensopimattomuus 7. Hankalat / monimutkaiset lomakkeet 8. Yhteystietojen puuttuminen 9. Jäädytetyt sivuleveydet ( sommittelu ) 10. Puutteelliset mahdollisuudet nähdä kuva suurempana Tehtävä 5 viikko 42 Suunnittele sivusi ulkoasu ja rakenne (navigointi) - Piirrä paperille, käytä värejä ja laatikoita osoittamaan elementtien paikkoja - Muista luennolla annetut vinkit - Skannaa tai digikuvaa suunnitelmasi ja lisää se sivulle Muotoile www-sivut - Suoraan HTML:ään tai - CSS:n avulla (BONUS) Oppimispäiväkirja, n. 1500 merkkiä Lähteitä Jakob Nielsen, WWW suunnittelu, 2002, IT Press www.taloustutkimus.fi/ http://www.useit.com/alertbox/990530.html 23