WEB-NAVIGAATIOIDEN KÄYTETTÄVYYS Harjoitustyöessee

Transkriptio

1 WEB-NAVIGAATIOIDEN KÄYTETTÄVYYS Harjoitustyöessee Vesa Tikkanen

2 Teknillinen korkeakoulu HARJOITUSTYÖESSEE 2 (7) 1.1 Johdanto World Wide Webissä eri hypertekstidokumenttien välillä liikkumiseen käytetään suorien URL osoitteiden lisäksi paljon sivuilla olevia linkkejä. Jotta navigointi sivustolla olisi mahdollisimman helppoa ja ihmiselle helposti ymmärrettävää, sisältävät sivustokokonaisuudet yleensä aina jonkinlaisen yhtenevän linkkirakenteen navigaation. Navigaation avulla sivustolla vieraileva käyttäjä pystyy jäsentämään laajankin sivuston loogisiin osioihin. Yleensä jokainen www-sivusto toteuttaa navigaation omalla uniikilla tavallaan ja tämä hankaloittaa sivustojen käyttöä ensimmäisellä kerralla. Uniikki navigaatio on osa sivuston persoonallisuutta ja näin ymmärrettävää. Olisi kuitenkin suotavaa että eri sivustojen navigaatiolla olisi jotain tunnistettavia elementtejä, jotta käyttäjä tietäisi heti miten sivustoa käytetään. Ideaalisen navigaatioratkaisun rakentaminen ei kuitenkaan ole yksiselitteistä. Navigaatio voi sijaita sivuston eri osissa, se voi olla vaakaan-, tai pystyyn rakennettu ja se voi sisältää sisäkkäistä rakennetta alivalikoiden ja alasvetovalikoiden muodossa. Navigaation teknisessä toteutuksessa voidaan myös valita kuvavalikoiden ja tekstinavigaation välillä. Kunnollisten navigaatioratkaisujen merkitys on aina ollut suuri, mutta nykyisin ollaan menossa kohti entistä suurempia sivustoja ja ihmisen rajallinen muistikuorma asettaa todellisia rajoituksia sivustojen navigaatioiden rakenteelle. Muistikuorman ohella navigaation tulisi palvella käyttäjää, ei ohjata häntä. Käyttäjän tulisi tuntea olevansa tilanteen herrana, eikä päinvastoin. Navigaatiorakenne, joka täyttää nämä kaikki ehdot ja soveltuu myös www:n erilaisten käyttäjäryhmien, kuten nuorten ja vanhojen, kokeneiden ja kokemattomien, länsimaalaisten ja aasialaisten käyttöön tuntuu suurelta haasteelta ja sitä se onkin. Jos täydellinen navigaatiorakenne olisi triviaalia toteuttaa, emme edes miettisi www-navigaation käytettävyyttä. 1.2 Erityyppiset navigaatiot Www-sivuilla käytetään useita erityyppisiä navigaatioelementtejä. Korkeinta sivustoa osioihin jakava elementti on globaali navigaatio, kuten Rosenfeld kirjassaan esittää. Globaali navigaatio on elementti, joka säilyy muuttumattomana kaikkialla sivustolla ja näin tarjoaa vain korkeamman tason jakoa sivuston rakenteessa. Korkeasta abstraktitasosta huolimatta globaalilla navigaatiolla on tärkeä merkitys, koska käyttäjän tehdessä virheen tällä tasolla, joutuu hän käytännössä aloittamaan navigoinnin alusta huomatessaan virheensä. Globaalin navigaation lisäksi sivustoilla on globaalin navigaation alla olevia sivustoja. Näiden jäsentämiseen käytetään lokaalia navigaatiota. Nämä kaksi tasoa eivät saa sekoittua toisiinsa ja onkin perusteltua sanoa että globaali ja lokaali navigaatio tulee eriyttää erillisiksi navigaatioiksi. Näin käyttäjä ei heti ensimmäiseksi joudu valitsemaan kaikkien palvelun sivujen seasta, vaan tekee ensimmäiseksi hyvin karkean jaon. Laajoissa sivustoissa on vielä mahdollisesti kolmaskin taso, asiayhteyksinen navigaatio (contextual navigation). Asiayhteyksinen navigaatio sisältää linkkejä saman aiheen eri kohtiin ja näin se voi olla hyvinkin tarkka, koska yksi asiayhteys ei enää ole laaja käsite. Koska käyttäjät eivät Rosenfeldin tutkimuksen mukaan jaksa lukea yli kahta näytöllistä dataa, on perusteltua rakentaa contextuaalisia navigaatioita asiayhteyksiin, jotka yhdellä sivulla muodostaisivat kohtuuttoman pitkän kokonaisuuden. Rosenfeldin esittämä kolmitasoinen jäsennys ei tietenkään tosi elämässä ole yksiselitteinen. Eri tasot menevät limittäin ja niitä on vaikea erottaa toisistaan. Lisäksi joillakin erittäin laajoilla sivustoilla voi olla tarve tehdä navigaatiosta tätä syvempi. Tällöin on kuitenkin muistettava ihmisen rajallinen muistiaskelten määrä ja kyky muodostaa pitkiä toimenpideketjuja. Lisäksi käytetään paljon erilaisia apunavigaatioita ja pikalinkkejä nopeuttamaan varsinaista käyttöä. Nämä elementit eivät kuulu varsinaiseen navigaatioon, mutta oikeisiin kohtiin sivulla ja asiayhteydessä sijoitettuna palvelevat surffaajaa staattista navigaatiota paremmin. 1.3 Navigaation sijainti Navigaation sijainnille on useita vaihtoehtoja. Navigaation tulisi kuitenkin olla yhteneväinen ja sijaita sivuston sisällä standardissa paikassa. Tähän yhtyvät niin Sinkkonen kirjassaan Käytettävyyden Psykologia, kuin Rosenfeld kirjassaan Information Architecture for the World Wide Web. Jos sisältö sijaitsee yhtenevästi sivuston keskellä, jää navigaatiolle neljä mahdollista sijaintia. Se voi sijaita sisältöosan vasemmalla, ylä-, ala-, tai oikealla puolella. Sisältöosan

3 Teknillinen korkeakoulu HARJOITUSTYÖESSEE 3 (7) alapuolella olevaa globaalinavigaatiota ei juurikaan käytetä ja sen käytettävyys onkin huono. Jos sisältöä on paljon, ei käyttäjä voi navigoida seuraavalle sivulle kuin rullaamalla sivun alalaitaan ja painamalla linkkiä sieltä. Tietenkin sama ongelma on ylänavigaatiossa, kun sivu on luettu loppuun ja rullattu sivun alalaitaan. Tosin ylänavigaatio mahdollistaa sivujen nopean selailun, koska sivun auettua navigaatio on heti käytettävissä. Monet sivut käyttävät ylänavigaation ohella samaa valikkoa myös sivun alalaidassa. Tällöin kokeneiden käyttäjien navigointi nopeutuu, mutta kokemattomat käyttäjät saattavat pitää ala- ja ylänavigaatiota eri navigointi elementteinä ja tällöin käsittää sivuston rakenteen väärin. Navigaation sijoittamista sivuston oikeaan reunaan käytetään erittäin vähän. Syykin on selvä. Uuden sivun auetessa ihminen kohdistaa katseensa ensiksi sivuston keskelle. Tämän jälkeen käyttäjä kohdistaa katseensa vasempaan yläkulmaan ja sivun yläosaan, sekä vasempaan reunaan. Oikeaan reunaan katse ohjautuu vasta monen muun pisteen jälkeen, joten on luonnollista sijoittaa käyttäjän kipeästi tarvitseva navigaatio muualle. Nielsen yhtyy tähän ajatukseen kirjassaan Multimedia and Hypertext, The Internet and beyond. Pelkästään liikeratojen minimoimista hakevassa käyttöliittymässä käyttäjän useasti tarvitseva toiminto eli navigaatio sijoitettaisiin lähelle toista useasti tarvittavaa elementtiä, pystyrullausta. Ihminen ei kuitenkaan käyttäydy kuten kone ja ei näin osaa ilman harjaantumista hyödyntää tällaista läheisyyttä. Liikerataongelmaan on kuitenkin keksitty korvaava menetelmä. Nykyisin lähes kaikissa moderneissa tietokoneissa Macintosheja lukuun ottamatta on vakiona rullahiiri, jolla sivun liikutteleminen pystysuunnassa onnistuu ilman pystyrullauspainikkeiden käyttöä. Yleisimmät navigaatioratkaisut ovat vasen ja ylänavigaatio. Molemmissa ovat omat hyvät puolensa, ylänavigaatio on helposti omaksuttavissa, koska suurin osa käyttöjärjestelmistäkin käyttää vaakapainikkeita. Toisaalta vaakanavigaatiossa käytettävissä oleva tila on hyvin rajallinen. Jotta navigointi olisi yksiselitteinen, täytyy vaaka-navi saada mahtumaan yhteen riviin. Kahdessa rivissä voisi käyttäjälle assosioitua, että alimmainen rivi on jonkinlainen alinavigaatio, tai lokaali navigaatio. Pystynavigaatiossa tilaa on enemmän, tosin sisällön kustannuksella. Vaara pystynavigaation vääränlaisesta suunnittelusta on ilmeinen, sillä sisällölle varattava tila on nopeasti liian pieni.

4 Teknillinen korkeakoulu HARJOITUSTYÖESSEE 4 (7) Kuva 1. Käyttöliittymäpsykologia-kurssin kotisivu. Kurssin kotisivuilla navigaatio-palkkiin on jätetty runsaasti marginaalia linkkien vasemmalle ja oikealle puolelle ja näin on viety varsinaiselta sisältöalueelta noin 40 prosenttia maksimaalisesta tilasta. 1.4 Navigaation ulkoasu ja rakenne Normannin seitsemän vaiheisen mallin mukaisesti käyttäjän pyrkiessä kohti tavoitetta hän muodostaa jatkotoimensa aikaisempien kokemusten ja kulloisenkin tilanteen ja palautteen perusteella. Navigaation tulee siis tukea tätä ja toimia aina samalla tavalla. Näennäisen satunnaisesti toimiva navigaatio murtaa tämän pohjan ja käyttäjälle ei pääse muodostumaan skeemaa navigaation rakenteesta. Neisserin mukaan ihmisen toimintaa voidaan mallintaa eräänlaisella havaintokehällä, joka kuvaa havaintoa ja sen liittymistä ihmisen omaan maailmankuvaan. Siinä aikaisempi ulkomaailmasta saatu tieto on perustana uudelle ja sitä muokkaamalla voidaan tehdä jatkotoimenpiteitä. Tämä asettaa navigaatioille tiettyjä edellytyksiä. Jotta ihminen voisi perustaa navigaatioiden käytön jollekin, tulisi niiden olla joiltain osin samankaltaisia. Täysin erilainen ja ennen kokematon navigaatioratkaisu voi olla hieno, mutta varmasti epäkäytettävä. Myös Faulkner yhtyy kirjassaan Usability Engineering tähän ajatukseen. Hyvä navigaatio globaali, tai lokaali on sellainen että käyttäjä pystyy yhdellä silmäyksellä assosioimaan sivuston rakenteen ja päättelemään minkä linkin takaa hän löytää haluamansa informaation. Hyvään navigaatioon kuuluvat myös navigaation tarjoama tieto siitä millä sivulla kulloinkin ollaan ja kuinka päästään sivuston hierarkiassa sekä alaspäin, että ylöspäin. Laajoissa sivustokokonaisuuksissa, joissa käyttäjä ei välttämättä muista mitä osioita hän on jo tutkinut, olisi hyvä, että navigaatiossa jo vieraillut sivut erottuisivat ja käyttäjä ei näin turhaan selailisi samoja sivuja uudestaan ja uudestaan.

5 Teknillinen korkeakoulu HARJOITUSTYÖESSEE 5 (7) 1.5 Apuvälineitä navigoinnin helpottamiseksi Hyvän navigoinnin rakenteeseen kuuluu myös sen täydellisyys. Missään ei saa olla sivua, joka loogisesti kuuluu johonkin valikkoon, mutta johon pääsee vain joltain hämärältä linkiltä keskeltä sivua. Käyttäjä ei tule huomaamaan tämänkaltaisia linkkejä sivuja selaillessaan ja näin tärkeä informaatio voi jäädä löytymättä.. Navigaatio ei kuitenkaan ole pelkästään rivi, tai sarake linkkejä. Se on osa selailukokemusta ja näin myös toisinpäin. Eli sivuston antamat vinkit käyttäjälle ovat myös osa navigaatiota. Greenbergin tutkimuksen mukaan navigoinnissa 58 % sivunlatauksista tulee perusnavigaation ulkopuolelta. Käyttäjän painaessa selaimen navigointinäppäimiä, kuten back-, forward- ja historia -painikkeita, sekä suosikit -painikkeita. On siis tärkeää että sivusto suunnitellaan tukemaan myös selaintason navigaatiota. Nielsenin ja Sinkkosen mukaan suurimmat virheet ulkopuolisen navigaation unohtamisessa tehdään, kun estetään käyttäjää poistumasta sivulta selaimen takaisin painikkeella, tehdään sivuston rakenteesta sen kaltainen että käyttäjä ei juuri mitenkään voi selaimesta päätellä missä päin sivustoa hän on, tai estetään käyttäjää tekemästä haluamiaan suosikkilisäyksiä. Kurssin kotisivuilla käyttäjä ei voi luoda haluamistaan sivuista listaa suosikkeihin, vaan luodessaan suosikkimerkinnän hän tulee luoneeksi merkinnän kurssin etusivulle. Näin esimerkiksi kotitehtävät sivulle pitää aina navigoida. Käyttäjä ei myöskään voi päätellä millä sivulla hän on muualta, kuin sivun alussa olevasta otsikosta. Selaimen osoiterivillä näkyy aina kurssin etusivun osoite. Koko sivuston käytettävyyden kannalta on hyvä, että globaali (site-wide) navigaatio erottuu selkeästi lokaaleista (osio-kohtaisista) navigaatioista. Osiokohtaisten navigaatioiden alla olevien contextuaalien navigaatioelementtien tulisi myös erottua lokaalista navigaatiosta. Sinkkonen et al. sanoo kirjassaan että: valikko ei saisi olla sellainen, että se toimii sekä ylhäällä otsikon alla vaakavalikkona että vasemmalla pystyvalikkona ja tarkoittaa tällä nimenomaan sitä, että globaali ja lokaali navigaatio eivät saa sekoittua käyttäjän päässä toisiinsa. Hän myös mainitsee että ylänavigaatio on luonnollinen paikka globaalille navigaatioelementille ja lokaali elementti tulee vasempaan reunaan. Myös Rosenfeld on tätä mieltä. Navigaatioelementin ulkoasua suunniteltaessa pitäisi muistaa, että elementin tulisi kertoa että se on navigaatioelementti ja sitä pitäisi pystyä käyttämään hyvin laajalla selainvalikoimalla. Kuvia käytettäessä tulisi esimerkiksi muistaa kirjoittaa niille tekstivastineet, jotta tekstipohjaisilla selaimilla, sekä sokeiden selaimilla niitä pystyttäisiin myös tulkitsemaan. Tekstipohjaiset navigaatiot ovat myös yksiselitteisempiä, kuin kuvalliset. Kuvissa on usein vaara että käyttäjä oman kontekstinsa perusteella muodostaa kuville merkityksen joka voi poiketa voimakkaasti suunnittelijan ajattelumallista ja näin navigaatiota ei pystytä käyttämään. Toisaalta kuvien hahmottaminen on huomattavasti nopeampaa, kuin tekstin ja jos mahdollista niin olisi hyvä käyttää sekä tekstiä, että kuvaa. Tällöin käyttäjien käyttäessä palvelua hieman pidempään, he oppivat navigaation kuvakkeiden selitykset ja pystyvät navigoimaan nopeammin. Tekstiä käytettäessä tulisi tietenkin muistaa erilaiset säännöt värien käytöstä, kuten riittävä kontrasti taustan ja tekstin välillä, sekä tiedetyt sairauksien aiheuttamat ongelmat, kuten punavihersokeus. Tärkeää on myös, että sivusto suunnitellaan myös heikkonäköisiä varten. Vaikka siis navigaatioelementtien ulkoasun kannalta usein halutaan sitoa ne suhteettomiksi, on se mielestäni väärä tapa, koska tällöin huononäköiset eivät pysty tekstikokoa suurentamalla suurentamaan valikkoelementtejä. Sinkkonen et al. painottaa kirjassaan että navigaatioelementtien tulisi olla yhteneväiset, kuten esimerkiksi linkkien aina siniset. En yhdy Sinkkosen näkemykseen navigaation osalta, koska se suunnitellaan aina kuitenkin erilaiseksi, kuin muu sisältö ja näin se erottuu jo sellaisenaan. Jos kaikkien maailman sivujen navigaatiot olisivat sinisiä, ei niillä olisi niille tyypillistä identiteettiä, joka omalta osaltaan parantaa käytettävyyttä käyttäjän tunnistaessa navigaation avulla palvelun, jota hän käyttää Sivukartta Sivustoilla käytetään monenlaisia apuvälineitä sivuston navigointielementtien tukena. Usein sivustolla on sivukartta. Sivukartta on jonkin tasoinen kuvaus järjestelmän sivuista. Se listaa kaikki navigaatiopolut tälle valitulle tasolle saakka. Näin käyttäjä voi nopeasti hahmottaa hyvinkin laajoja sivustokokonaisuuksia kerralla ja näin löytää haluamansa sivun nopeasti. Sivukartan tulee olla rakenteeltaan samanlainen kuin varsinainen sivustokin on, sillä

6 Teknillinen korkeakoulu HARJOITUSTYÖESSEE 6 (7) sivustokartan perusteella käyttäjä rakentaa itselleen mallin, skeeman sivustosta ja perustaa tämän jälkeen toimintamallinsa siihen. Sivukarttaa suunniteltaessa tulee pitää mielessä mitä varten sitä tehdään. Se on käyttäjälle normaalin navigaation apuna varsinaiselle sivulle pääsemisessä. Sivukarttaan ei siis tule sisällyttää koko sivuston kaikkea dataa, vaan vain lyhyesti kuvata eri sivut ja pitää varsinainen data itse sivulla. Sivukartan detaljitaso on myös tärkeä. Käyttäjä voi hahmottaa vain muutamia, kuitenkin alle kymmenen eri saman tason navigaatioelementtiä nopeasti. Jos sivukartassa listataan esimerkiksi palvelut otsikon alla 50 eri palvelua, ei sivustokarttaa varmastikaan käytetä, koska tiedon etsiminen sieltä on äärimmäisen hidasta. Tällöin sivustokartan tulisi olla tasoltaan sen kaltainen että alin taso on nimenomaan palvelut ja tältä kyseiseltä sivulta pääsisi sitten varsinaiseen yksilöityyn palveluun Hakemistoluettelot Ohjeet Hakukone Aivan kuin kirjoissakin, on www-sivuilla joskus perusteltua ylläpitää varsinaista indeksiä, hakemistoluetteloa, jossa sivut on yksinkertaisesti listattu aakkosjärjestyksessä. Tämän kaltainen listaus voisi olla kätevää esimerkiksi tuotekatalogeissa, joissa käyttäjä tietää tarkasti mitä on hakemassa. Jotta hakemistoluettelo olisi mielekäs, tulee siihen sisällyttää kaikki palvelun sivut ja niiden nimet ja aakkostus pitää ajan tasalla. Jos käytettävä palvelu on sen kaltainen, että käyttäjä voi perustaa omaa toimintamalliansa jo olemassa olevaan skeemaan kirjasta ja kirjan lopun hakemistosta, on tällainen ratkaisu perusteltua. Vaikeasti hahmotettavan sivuston käyttöön voidaan luoda aloitussivulle ohje, joka näytetään vain ensimmäisellä kerralla, tai aina kun käyttäjä on ollut kauemmin käyttämättä palvelua. Ohje madaltaa kynnystä alkaa käyttämään palvelua ja nopeuttaa oikein tehtynä oppimista. Ohjeita luotaessa pitää muistaa että internetissä ihminen ei jaksa lukea kuin murtoosan siitä informaatiomäärästä, jonka hän jaksaisi lukea kirjasta. Kuvien ja käyttömallien (usecase) käyttö on myös perusteltua koska tällöin käyttäjä voi nopeasti samaistua toimintaan joutumatta lukemaan paljon tekstiä. Laajoilla sivustoilla sivukohtainen hakukone voi helpottaa käyttäjien selailukokemusta. Hakukonetta luotaessa tulee muistaa, että käyttäjä on jo tottunut jonkinlaisiin hakukoneisiin, kuten Googleen. Hänellä on siis ennakkomalli siitä kuinka hakukone toimii. Jos sivuston hakukone toimii erilailla, tulee sen olla perusteltua ja silloin käyttäjälle tulee antaa seikkaperäiset ohjeet ja käyttöesimerkit hakukoneen yhteydessä. Myös tilanteessa, että hakukone toimii aivan kuten yleiset internetin hakukoneet, on hyvä että koneen oheen liitetään esimerkkejä hakuavaimista ja hakutuloksista. 1.6 Eri navigaatiotasojen toteutus Kuvassa kaksi olevan Tikka Communications Oy:n kotisivun navigaatio ei ole täydellinen, siinä on kuitenkin otettu hyvin huomioon eri navigaatiotasojen erottaminen ja selkeys. Globaali navigaatio on vaakanavigaationa ja jakaa sivuston eri kohderyhmiin. Käyttäjän valittua kohderyhmänsä, aukeaa lokaali navigaatio vasempaan reunaan. Käyttäjä tietää oman sijaintinsa sivustolla globaalin navigaation ja lokaalin navigaation osalta siitä, että kyseinen navigaatiokohta on korostettuna. Näin käyttäjä tietää kokoajan missä päin sivustoa hän kulloinkin on. Lokaalia navigaatiota on myös hieman ryhmitelty contextuaaleihin navigaatioihin. Nämä contextuaaliset navigaatiot ovat samassa yhteydessä kuin lokaalikin, mutta niiden erilaisesta ulkonäöstä johtuen sekaantumisen vaara on pieni. Samaisesta rakenteesta kertoo myös sivun helppo osoite, joka mieltyy käyttäjälle myös palvelun eri navigaatiotasojen hierarkiana. Vaikka navigaatioelementit ovatkin tekstiä, eivätkä ole perinteisen sinisiä, niin niiden ollessa reippaasti erilaisia, kuin leipäteksti, on ne helppo mieltää valikoiksi. Uskon Sinkkosen tarkoittaneen juuri tämänkaltaista rakennetta puhuessaan vaaka- ja pystynavigaation yhteensovittamisesta verkkopalveluissa.

7 Teknillinen korkeakoulu HARJOITUSTYÖESSEE 7 (7) Kuva 2. Tikka Communications Oy:n verkkopalvelu ja sen monitasoinen navigaatio. 1.7 Lähteet FAULKNER, X., Usability Engineering. 1. edn. New York: Palgrave. NIELSEN J., Multimedia and Hypertext - The internet and beyond. 1. edn. London: Academic Press Inc. NIELSEN, J., Hypertext & Hypermedia. 1. edn. London: Academic Press Inc. RESENFELD L. and MORVILLE P., Information Architecture for the World Wide Web. 2. edn. Sebastopol: O'Reilly Media Inc. SINKKONEN, I. ET AL., Käytettävyyden psykologia. 2. painos edn. Helsinki: Edita Prima Oy. Ayers, E. and Stasko, J. (1995) Using graphic history in browsing the World Wide Web. Proceedings of the 4 th International World Wide Web Conference. saatavilla verkosta osoitteesta: December 11-14, Boston. Cockburn, A. and Jones, S. (1996) Which way now? Analysing and easing inadequacies in WWW navigation. International Journal of Human-Computer Studies 45.(1), pp Tauscher, L. and Greenberg, S. (1997) How people revisit Web pages: Empirical findings and implications for the design of history systems. International Journal of Human Computer Studies, Special issue on World Wide Web Usability 47(1), pp