GRAAFISET WWW-KÄYTTÖLIITTYMÄT

GRAAFISET WWW-KÄYTTÖLIITTYMÄT kun eksperimentalismi kohtaa konventiot Sami Niemelä Verkkomedian ko. Taiteen ja Viestinnän osasto sivu 1

SISÄLLYSLUETTELO 0. JOHDANTO I. TAUSTAA a) Graa sen käyttöliittymän lyhyt historia. b) Mitä ovat käyttöliittymä ja käytettävyys c) konventiot ja standardit vs kokeellinen design II. ESIMERKKICASET a) Iltalehti Online ; www.iltalehti. b) Helsingin Sanomat; www.helsinginsanomat. b) International Herald Tribune; www. iht.com d) Praystation.com e) Antarcti.ca / map.net III. TULEVAISUUS IV. YHTEENVETO V. Lähteet sivu 2

0 JOHDANTO Tarkoitukseni on tarkastella aktiivisesti päivittyvien verkkojulkaisujen käyttöliittymiä ja niiden konventioita; tästä pohtia onko konventioiden seuraaminen ehdotonta vai voidaanko kokeellisempi käyttöliittymä myydä käyttäjälle intuitiivisen käytön ja luonnollisen dialogin kautta. Aiheen rajauksen takia jätän tietoisesti ulkopuolelle ei-graa seen ilmaisuun painottuvat (esimerkiksi ääni-) käyttöliittymät. Vastakkainasettelu ns. perinteisen ja kokeellisen käyttöliittymän välillä on tietoisesti korostunut, koska koen että www-ympäristöön toteutettu graa nen käyttöliittymä ei ole lähelläkään optimia, päinvastoin. Yhteysnopeuksien kasvu mahdollistaa entistä interaktiivisempienkäyttöliittymien toteutuksen, miksi siis jäädä polkemaan paikoilleen alle 20-vuotisen historian omaavaan gra seen mac-käyttöliittymään. Ensimmäisenä käsittelen perusasiat ja termit, jotka usein sivuutetaan / unohdetaan liian itsestäänselvinä ja joiden läpikäymisestä uskon olevan hyötyä kaikille jotka suunnittelevat wwwpalveluita. Tarkastelun alla ovat myös ns. perinteiset näkökulmat, jotka erityisesti korostavat konventioiden käyttöä ja yhdenmukaisuutta jopa eri palveluiden välillä. Tässä käyn myös hieman läpi eri auktoriteettien, mm. Jakob Nielsenin väittämiä tästä hetkestä sekä tulevaisuudesta. Tämä siksi, että näen välttämättömäksi hieman pohjustaa pohdintani mahdollisuuksista ja uusien tekniikoiden käytöstä. Sillä nykypäivänä on suhteellisen mahdotonta keskustella ja pohtia aihetta ilman, että Jakob Nielsenin kirjoituksiin viitattaisiin.toiseksi pohdin hieman asioiden nykytilaa, ja sitä, miten tästä voisi edetä sekä miten alati laajeneva päätelaitteiden skaala vaikuttaa. Kolmannessa osiossa teen konkreetista tutkimusta siitä, missä tällä hetkellä, maaliskussa 2001 mennään. Mukana on 5 esimerkkicasea erityylisistä ratkaisuista, alkaen Iltalehti. :n tabloid-jäljittelystä, International Herald Tribunen dhtml-toteutuksen kautta Praystation.comin sekä Wireframen kaltaisiin kokeellisiin käyttöliittymiiin joissa on lähdetty toteuttamaan kokonaan omia polkuja. Näitä analysoimalla tarkastelen mitä hyviä ja huonoja puolia, ja erityisesti sitä, miten nämä kaksi näennäistä ääripäätä voisi hyötyä toisistaan, erityisesti miten uskaliaampaa interaktion ja intuitiivisuuden yhdistelmää voitaisiin hyödyntää ns. jokamiehen palveluiden suunnittelussa. Avainsanat; Käytettävyys, www, eksperimentalismi, käyttöliittymä, ash. sivu 3

I TAUSTAA a) Graa sen käyttöliittymän lyhyt historia Graa nen käyttöliittymä eli GUI itsessään on suhteellisen nuori keksintö; sen juuret toki ulottuvat 1950-luvulle. Tällöin muodostettiin idea graa sesta käyttöliittymästä, joka kuitenkan ei konkretisoitunut ennen kuin 1973, kun Xerox julkaisisi Alton, ensimmäisen tietokoneen jossa oli graa nen käyttöliittymä. Kaupallinen hyödyntäminen alkoi 1980-luvun taitteessa, kun Three Rivers Corporation esitteli Perq-työaseman 1980, ja Xerox Alton kaupallisen seuraajan Starin 1981. Lopullinen lähtölaukaus annettiin 1983, kun Apple esitteli Lisan, jossa oli ensimmäistä kertaa käytössä mm. alasvetovalikot sekä menupalkit. saman vuonna Microsoft esitteli Windowsin ensimmäisen version, jota ei kuitenkaan julkaistu kuin vasta vuonna 1985. 1984 Apple julkaisi ensimmäisen Macintoshin, graa sen käyttöliittymän suunnilleen sellaisena kuin sen tänään tunnemme ja 1987 Apple II:n, esimmäisen värillisen käyttöliittymänsä. Samana vuonna julkaistiin Window 2.03, jossa oli ominaisuuksina mm. päällekkäinen ikkunointi sekä ikkunoiden koon muutettavuus. Tällöin GUI:n voidaan sanoa saaneen perusmuotonsa, ja nämä perusasiat ovat pysyneet suht samana tähän päivään asti. Yllättävää kyllä, jopa Jakob Nielsen toteaa kirjassaan ---------------------------------------- GUI = Graphical User Interface, Graa nen käyttöliittymä sivu 4

b Mitä ovat käyttöliitymä ja käytettävyys? kuva 1; Käytettävyys Jakob Nielsenin mukaan, suom. Samu Mielonen Yleisellä tasolla käyttöliittymä on fyysinen osa jotain järjestelmää. Käyttöliittymä on se miltä WWW-sivu näyttää, miten linkki erottuu leipätekstistä, mitä painikkeita on esimerkiksi videon paneelissa ja millainen kahva on IC-junan vessan ovessa. Käytettävyys taasen on käyttäjän ja järjestelmän suhteessa. Se on mm. sitä miten käyttäjä löytää haluamansa asian WWW-sivulta, ajastettua videon tai osaako hän käyttää junan vessaa, lukita sen oven jne. Mitä moninaisemmat laitteet ja järjestelmät kuuluvat erottamattomana osana nyky-yhteiskuntaan, ja niinpä voidankin sanoa että (yleisellä tasolla) käytettävyys on tärkeä osa yhteiskuntaa. Käytettävyys ei mittaa ainoastaan hyötysovelluksia vaan mitä tahansa vuorovaikutteista järjestemää, kuvaten koko käytössä olevan systeemin potentiaalista hyötyä ja kattaen käytön eri aspektit asennuksesta lähtien. Käytettävyys ei siis ole laisinkaan pienessä asemassa vaan voisi sanoa että se on ihmisten käyttämien systeemien olennaisin tekijä. Terminologiaa ei kuitenkaan pidä sotkea funktionaaliseen soveltuvuuteen, joka mittaa voiko systeemi teoriassa edes vastata tietyn tehtävän haasteisiin käytettävyyden ottaessa kantaa siihen kuinka näitä toiminnallisuuksia voidaan oikeasti hyödyntää käyttäjän kannalta. Yleisen käytettävyystukimuksen peruspilarina onkin olettamus Hyödyllisyys = käytettävyys + funktionaalinen soveltuvuus. Muita käytetävyystutkimuksessa kättettäviä mittausperusteita ovat esimerkiksi Opittavuus; kuinka nopeasti uusi systeemi on omaksuttavissa ja kuinka nopeasti käyttäjä voi saavuttaa konkreetista hyötyä ja tuloksia sen avulla. KO. tuloksia voivat olla esimerkiksi työ, oppiminen sekä nautinto. Tehokkuus; kuinka pienellä työmäärällä käyttäjä saa aikaan madollisimman paljon tavoiteltua tulosta. Muistettavuus; kuinka helposti systeemi on muistettavissa virheittä ilman jatkuvaa käyttöä. Intuitiivisuus; kuinka luonnollisesti systeemi on käytettävissä. Sidoksissa vanhavsti konventioihin sekä kulttuurisidonnaisiin konteksteihin. Virheiden määrä; osittain kahden edellisen summa. Mittaa määrän lisäksi myös niiden kriittisyyttä. Tyytyväisyys eli subjektiivinen miellyttävyys; käyttäjän omakohtaista tyytyväisyyttä ja mielihyvää systeemin käytöstä. Voi olla useampien eri osatekijöiden summa. Näihin kuuluvat esimerkiksi elämyksellisyys, estettisyys, toimintamalli, sekä haasteellisuus. Myös vahvasti sidoksissa intuitiivisuuteen. sivu 5

Www-ympäristössä käyttöliittymä on pieni, mutta tärkeä osa suurempaa kokonaisuutta. Käyttöliittymä on konkretisoituna graa nen esitys, jonka tarkoitus on mm. auttaa käyttäjää navigoimaan sivustolla, ja tarjota eräänlainen tarttumapinta sivuston sisältöön. Muita tarkoituksia voi olla elämyksien herättäminen sekä käyttäjän johdattelu, varsinkin kokeellisimmissa tapauksissa. Käyttöliittymän kaksi oleellisinta ulottuvuutta ovat ulkonäkö ja käyttötuntuma, look and feel. Käytettävyys www-ympäristössä Yleisten käytettävyystekijöiden lisäksi verkkopalveluissa on erityistekijöitä, jotka vaihtelevat suuresti käyttösovelluksen, tavan ja käyttäjän mukaan. Samu Mielonen on eritellyt nämä seuraavasti; Luettavuus: tekstityyppi, taitto(sis. rivit, palstat, värit), henkilökohtaiset asetukset selaimessa Navigoitavuus: Käyttäjälle tehdään selväksi missä hän on, minne menossa, mihin voi mennä ja tämän myötä annetaan vastaukset kysymyksiin kuten Missä olen, mihin voin mennä, onko oikea suunta, olenko perillä. Haettavuus l. löydettävyys: selaus, hakusanat, tulosten esitys, tarkennus = oma käytettävyysongelmansa Skaalautuvuus: palvelin, eri selain-, käyttöjärjestelmä-, näyttölaite-, virtuaalikone- ja laajennussopivuus Nopeus: palvelin, ensiorientointi, teksti/kuvat, sivu, kokonaisuus ja subj. aikakäsitys (onko vaivan arvoista, Mitä tämä antaa minulle ) Interaktiot: dialogi käyttäjän kanssa, palautteet käyttäjän tekoihin, onko vasteaika tarpeeksi/ striimi, erikoistunut/pakattu, koodattu/selitetty Vakaus: palvelin, yhteys, laajennus ja taustakoneisto Muunneltavuus: web <> WYSIWYG, yleiskäyttöisyys ja omat asetukset Sisältösoveltuvuus: onko sisältö erotettu käyttöliittymästä vai ovatko nämä kaksi suunnitteltu yhdessä? Näistä painotetaan yhä enenevämmissä määrin erityisesti interaktioiden osuutta. Enää pelkkä sisältö ei riitä, vaan intuitio näyttelee yhä tärkeämää osaa käyttökokemuksessa. Osa nykyisistä käyttöliittymän peruskonventioista on seurausta huonosta suunnittelusta. Tästä esimerkkinä ruudun vasemmassa laidassa oleva navigointipalkki; Jakob Nielsen kommentoi tätä sivu 6

c) konventiot ja standardit vs kokeellinen design Viimeisen parin vuoden aikana tekniikat kuten Flash ja Dynaaminen html ovat mahdollistaneet kokeellisempien käyttöliittymien toteutuksen www-ympäristössä. Käytettävyyden kiistelty guru Jakob Nielsen on todennut asiaan liittyen kolumnissaan Flash 99% Bad että nämä, mahdollistavat webin perusteiden rikkomisen, kohdistaen syytöksensä erityisesti ashiin. Artikkelissaan(x) Flash 99% Bad Nielsen siis väittää Flash-sivutojen olevan 99-prosenttisesti käyttökelvottomia ja huonoja. Tätä väitettään hän perustelee tuoden esiin useita epäkohtia jotka sotivat hänen periaatteitaan(x) vastaan. Hänen esilletuomiaan epäkohtia ovat mm. Flash-introt, epästandardit käyttöliittymäelementit, sivun käyttäjällä olevan kontrollin vähentäminen. Osa Nielsenin väittämistä, kuten etsintä-toiminnon puuttuminen, johtuu suoranaisesti Flashin teknisistä heikkouksista, mutta osa on selkeästi räikeitä yleistyksiä vailla pohjaa, kuten esimerkiksi väite usein päivittyvän sisällön puuttumisesta. Tämä ongelmahan ei johdu välineestä vaan sen käyttäjästä eli sivun ylläpitäjästä. Nielsen jättää myös täysin huomioimatta faktat, että a) Flash-sovelluksiin on saatavilla palvelinpään ratkaisuja, kuten esimerkiksi Macromedian oma Generator jonka avulla voidaan sisältö ja esitys erottaa toisistaan sekä b) Flash-ohjelmiston versio 5 mahdollistaa jo sisnäällään ulkopuolisten tiedostojen ja sovellusten kuten esimerkiksi tekstitiedostot ja tietokannat, linkityksen ash-sivustoon.lienee siis sanomattakin selvää, että aihepiiriä tutkiessa kannattaa herra Nielsenin kirjoituksiin ja mielipiteisiin suhteutua vähintäänkin varauksella. Perinteinen käytöliittymäsuunnittelu hojaa hyvin vahvasti tieteelliseen tutkimukseen, joka taasen pohjautuu hyvinkin pitkälti perinteisen graa sen mac-käyttöliittymän käytön myötä muodostuneiden konventioiden tutkimiseen ja analysointiin. Perustat tälle on toki luotu jo aikaisemmin Xeroxin PARCia suunitellessa, ja testatessa, mutta suurempi ei-ammattilaisiin pohjaava tutkimus tuli mahdolliseksi vasta Macintosheiden myötä, graa sen käyttöliittymän ulottuessa tavallisen kuluttajan saataville. Tästä nostaisinkin esii ajatuksen, että graa nen käyttöliittymä ei varmastikaan ole optimoitu huippuunsa, esimerkiksi animaatioita on käytetty varsin vähäisesti käytön ja palautteisen havainnollistamiseen ennenkuin vasta lähiaikina. ------------------------------------------ Macromedia Flash (http://www.macromedia.com/software/ ash/); vektoripohjainen tekniikka, joka mahdollistaa animoidun ja interaktiivisen sisällön katselun www-selaimessa erillisen pluginin avulla. sivu 7

II ESIMERKKICASET Tarkoitus on tutkia usein päivittyvän sisällön julkaisua wepissä esimerkkien avulla. Nämä caset havainnollistetaan ruutukaappauksien ja vuokavioiden avulla. Kaavioilla havainnollistan käyttöliittymän interaktioita sekä loogisuutta, ja sitä miten helposti asiat ovat löydettävissä. Esimerkkicasena meillä on yhden päivän pääartikkelin löytäminen.mukana on myös kaksi esimerkkiä kokeellisimmista käyttöliittymistä, joiden tavassa toteuttaa käyttöliittymä näkisin olevan ehkä annettavaa myös tavalliselle kuluttajalle. Kaikki kolme esimerkkilehteä ovat peruskohderyhmältään samansuuntaisia; tarkoitettu päivittäisistä uutisista kiinnostuneille. Kaikilla on myös paperiversio rinnallaan. Tarkempi kohderyhmä on hyvinkin erilainen, IHT:n pro loituessa omien sanojensa mukaan kansainväliselle bisneskäyttäjille sekä mielipidejohtajille kun taas Iltalehti on selkeästi jokamiehen iltapäivälehti, missä Helsingin Sanomat yrittää seurata paperisen isoveljensä mainetta valtakunnan ykköslehtenä. Näistä kolmesta Iltalehti on säilynyt perusilmeeltään samantyylisenä melkein koko olemassaolonsa ajan, ja viimeinen ulkoasupäiitys on julkistettu yli vuosi sitten. Helsingin Sanomat kävi perusteellisen kasvojenkohotuksen läpi muutam kuukaui sitten ja IHT muutama kuukausi sitten. Tämä lisää vertailuun oman mausteensa, miten lehtien käyttämät metaforat eroavat toisistaan ja miten ne voisi ehkä sovittaa yhteen? Testin tarkoitus on yksinkertainen; ideana on valita yksi päivän pääuutisista ja ottaa selvää monellako askeleella tämä saavutetaan. Tämä kertoo onko rakenne looginen ja riittävän matala ja siten helppokäyttöinen. Samalla otetaan huomioon onko sivustolla tarjota lisätoimintoja käyttäjälle, joka mahdollisesti myös palaa sivustolle. Iltalehti Online ; www.iltalehti. Iltalehti Online luottaa ulkoasussaan hyvin pitkälle perinteiseen sanomalehti-metaforaan, jopa verkkolehti on pelkistetyssä ulkoasussaan rakennettu seitsemän lööpin varaan, eli sivut ovat siis lööpinomaisia sivuja joissa ylhäällä on navigointipalkki sekä mainoksia. Kaikki osastot ovat samanarvoisia navigoinnissa, ja etusivulle tullaan kirjautumisen kautta. sivu 8

Oletetaan siis, että käyttäjä on kiinnostunut jostain pääuutisesta ja haluaa löytää sen mahdollisimman nopeasti. Tässä tapauksessa ko. uutinen on lööpissä ollut 17-vuotiaan tytön tapaturma. Monellako klikkauksella hän sinne pääsee? Iltalehdessä tähän on kaksi eri reittiä: joko suoraan lööpistä tai ylävalikon kautta siirtyen ensiksi Uutiset -menun kautta ko. alaosion lööppiin, josta klikkaamalla pääsee itse juttuun. Rakenne on siis suhteellisen looginen, vaikkakin sivulta puuttuu navigointi polku siihen, missä tällä hetkellä ollaan. Ainoa asia mitä käyttäjä näkee on korostettu pääosion valinta, missä ollaan. + Helppo ja matala rakenne Tuttu metafora, tavallisen käyttäjän helposti omaksuttavissa - Ei tarjoa juurikaan mahdollisuutta syvempään rakenteeseen. Rakennetta muutettaessa joudutaan turvautumaan muihin ratkaisuihin hakemistopuuta laajennettaessa. Rakenteellinen hakemistopolku puuttuu; käyttäjällä ei tarkkaa varmuutta sijainnistaan. sivu 9

Helsingin Sanomat; www.helsinginsanomat. Helsingin Sanomat on hieman teksnisemmin toteutettu kuin Iltalehti, ehkä yllättävänkin tekninen ollakseen ison mediatalon laajalle yleisölle suunnattu julkaisu. Käyttöliittymässä käytetään hyväksi javascriptillä toteutettuja alasvetovalikoita, joista käyttäjä voi siirtyä suoraan haluamaansa osioon. Käytännössä matka juttuun on sama kuin Iltalehdessäkin, mutta käyttäjälle tarjotaan enemmän informaatiota rakenteesta ja sijainnista. Tässä auttavat sekä alasvetovalikot että mukana seuraava navigointipalkki. Tämä on tärkeä osa lehteä, sillä se tekee käyttäjän olon kotoisaksi missä kohtaa lehteä tahansa ja samalla kertoo käyttäjälle hänen sijaintinsa. Hakemistopolun mukanaolo auttaatässä erityisesti. Hakemistopolku + Selkeä ja intuitiivinen käyttöliittymä. Rakenne skaalattava, uusien osioiden lisäys ja poisto onnistuu helposti. - Tekniset ratkaisut, mukana seuraava navigointipalkki ehkä vaatii hieman opettelua alkuun. sivu 10

International Herald Tribune; www. iht.com Kolmas esimerkkicase on International Herald Tribune, The World s Daily News, mielipidejohtajille ja kansainvälisille bisnesihmisille pro loitunut lehti, joka omien sanojensa mukaan toimii sudattimena valtavssta informaatiotulvasta kohderyhmälleen. Koslehti on tarkkan pro loitu, ei ole yllättävää että lehti on ottanut tietoisesti askeleen eteenpäin myös www-sivustollaan. Netscape 4.x-versioisen selaimen käyttäjälle tarjotaan vajavaista versiota ja tämä myös kerrotaan samalla kun suositellan selaimen pävittämistä asiaankuuluvaan versioon. Heti etusivulla käy ilmi että kyseessä on hieman tavallisuudesta poikkeavasti toteutettu sivusto; vasemmassa sivupalkissa on optio josta voit valita itsellesi joko pörssikurssit, tuoreimmat uutiset tai sään sivu 11

III tulevaisuus; mitä vaatimuksia sisällölle ja tekniikalle? Tulevaisuudessa päätelaitteiden skaala tulee eittämättä kasvamaan entisestään. sivu 12

IV summa summarum sivu 13

V lähteet Kirjalliset: Nielsen, Jakob: Designing Web Usability New Riders Julkaistu 10/1999 Sähköiset: Flazoom.com/ Chris MacGregor: Flash 99% Proof. Julk. 11.1.2001 http://www. azoom.com/news/99proof_01112001.shtml Merges.net/ Alan Barker: Pliant response for websites julk 26.01.2001 http://www.merges.net/theory/20010226.html Useit.com Alertbox/Jakob Nielsen: Flash 99% bad Julk.29.10.2000 http://www.useit.com/alertbox/20001029.html Multimedia Guidelines of the Web Julk. Joulukuussa 1995 http://www.useit.com/alertbox/9512.html Top ten web design mistakes Julk. toukokuussa 1996 http://www.useit.com/alertbox/9605.html Top ten new mistakes of web design julk 30.5.1999 http://www.useit.com/alertbox/990530.html When Bad Design becomes a Standard, julk. 14.11.1999 http://www.useit.com/alertbox/991114.html Graphical User Interface Timeline http://www.pla-netx.com/linebackn/guis/guitimeline.html sivu 14