GRAAFISET WWW-KÄYTTÖLIITTYMÄT

Transkriptio

1 GRAAFISET WWW-KÄYTTÖLIITTYMÄT kun kokeellisuus kohtaa konventiot Proseminaaritutkielma Sami Niemelä Verkkomedian koulutusohjelma Taiteen ja Viestinnän osasto Tampereen Ammattikorkeakoulu Copyright 2001 Sami Niemelä. Kaikki oikeudet pidätetään.

2 SISÄLLYSLUETTELO 0. JOHDANTO I. TAUSTAA 1.1. Graa sen käyttöliittymän lyhyt historia Mitä ovat käyttöliittymä ja käytettävyys Käytettävyys ja käyttöliittymät www-ympäristössä Konventiot ja standardit vs kokeellinen design 8 II. ESIMERKKICASET 2.0. Alustus Iltalehti Online ; Helsingin Sanomat; International Herald Tribune; Praystation.com Wireframe.co.za 17 III. SUMMA SUMMARUM 3.0. Yhteenveto 18 IV. LÄHTEET Lähdeluettelo 19 V. LIITTEET Liite 1; selainstatistiikkaa 20 sivu 2

3 0 JOHDANTO Tarkoitukseni on tarkastella aktiivisesti päivittyvien verkkojulkaisujen käyttöliittymiä ja niiden konventioita; tästä edelleen 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, sekä mobiililaitteet. Tulevaisuuudesta voisi myös kirjoittaa kokonaan toisen seminaarityön, joten senkin käsittely on tietoisesti rajattu kahteen kokeellisempaan esimerkkiin. 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ä interaktiivisempien ja bittikooltaan painavempien kä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 suoritan hieman konkreetista tutkimusta siitä, missä tällä hetkellä, maaliskussa 2001 mennään. Mukana on 5 esimerkkicasea erityylisistä ratkaisuista, alkaen Iltalehti Onlinen 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. Tampereella Sami Niemelä Avainsanat; Käytettävyys, www, eksperimentalismi, kokeellisuus, käyttöliittymä, ash. sivu 3

4 I TAUSTAA 1.1. Graa sen käyttöliittymän lyhyt historia Graa nen käyttöliittymä eli GUI 1 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 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 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. Juuri tästä syystä olisikin ehkä aika hyvätä vanhat konventiot sivuun ja lähteä tutkimaan uusia ja erilaisia tapoja esittää sisältöä, normaalikäyttäjällekin ) GUI = Graphical User Interface, Graa nen käyttöliittymä sivu 4

5 1.2. 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. sivu 5

6 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 Käyttöliittymä ja käytettävyys www-ympäristössä Www-ympäristössä käyttöliittymä on pieni, mutta tärkeä osa suurempaa kokonaisuutta. Gra nen käyttöliittymä on konkretisoituna 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. Ennen graa sta käyttöliittymää käyttäjä joutui navigoimaan luolametaforan avulla, muodostaen mielessään kuvan siitä missä on, ja minne pitää mennä. Tänä päiväv Internetin käyttäjäjoukko on kasvanut niin laajaksi että tämä ei enää onnistuisi. 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 2 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 ) Korkeakoulujen tietotekniikka ja oppiminen 1999, luento www-käytettävyys: /atkk/arkisto/kto99/samu.htm sivu 6

7 Interaktiot: dialogi käyttäjän kanssa, palautteet käyttäjän tekoihin, onko vasteaika tarpeeksi/ striimi, erikoistunut/pakattu, koodattu/selitetty 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 ) Vakaus: palvelin, yhteys, laajennus ja taustakoneisto Muunneltavuus: web <> WYSIWYG 3, 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 4 tätä artikkelissaan huonojen suunnitteluelementtien asettumisesta standardin asemaan; hän toi esiin esimerkiksi faktan, että käytettävyysnäkökulmasta katsottuna navigointipalkki olisi parempi oikeasssa eikä vasemmassa laidassa; koska myös vierityspalkki sijaitsee siellä. Tällöin käyttäjän hiiren liikkeet olisivat lyhyemmät, ja täten myös käytettävyys parempi ) WYSIWYG = What You See Is What You Get, visualisista www-sivueditoreista käytetty nimitys, myös yleistermi 4) When Bad Design Elements Become the Standard, Jakob Nielsen s Alertbox, November 14, 1999: sivu 7

8 1.4. 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 Alertbox-kolumninsa artikkelissa Flash 99% Bad 5 että nämä mahdollistavat webin perusteiden rikkomisen, kohdistaen syytöksensä erityisesti ashiin. Edellämainitussa artikkelissaan Nielsen siis väittää Flash 7 -sivustojen 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 6 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 8 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 10 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ähiaikoina. Oma lukunsa on täysin useat käyttölittymäsuunnittelun ja käytettävyyden rajoja kokeilevat wwwsivustot. Osa näistä on tehty Flashilla, osa Dynaamisella HTML:llä 9. Muutamissa näistä on käytetty animaatioita suorastaan loistavasti interaktoiden havainnollistamiseen, ja näistä aion esitellä kaksi tapausta lyhyesti seuraavassa osiossa varsinaisten esimerkkien jälkeen ) Jakob Nielsen s Alerbox: Flash 99% Bad 6) Jakob Nielsen s Alerbox: Top Ten NEW Mistakes in Web Design 7) Macromedia Flash ( ash/); vektoripohjainen tekniikka, joka mahdollistaa animoidun ja interaktiivisen sisällön katselun www-selaimessa erillisen pluginin avulla. 8) Macromedia Generator ( palvelinsovellus, joka mahdollistaa päivittymän sisällön myös Flash-sovelluksissa erottaen sisällön ja esityksen toisistaan. 9) Dynaaminen HTML (DHTML) = sivunkuvauskiieli HTML yhditettynä DOM-objektimallin mukaisesti Javascriptiin tai muuhun vastavaan ohjelmointikieleen sekä CSS-tyylitiedostoihin (Cascading Style Sheets) 10) Xerox PARC, ensimmäinen graa sella käyttöliittymällä varustettu tietokone. sivu 8

9 II ESIMERKKICASET 2.0. Alustus Tarkoitus on tutkia usein päivittyvän sisällön julkaisua wepissä esimerkkien avulla. Nämä caset havainnollistetaan ruutukaappauksien ja yksinkertaisten vuokaavioiden avulla. Kaavioilla selvitän käyttöliittymän interaktioita sekä loogisuutta, ja sitä miten helposti asiat ovat löydettävissä. Esimerkkicasena meillä on tapaus, jossa käyttäjällä on mielessään tietty aihe, josta hän haluaa lisätietoja. Mukana on myös kaksi esimerkkiä kokeellisimmista käyttöliittymistä, joiden tavassa toteuttaa käyttöliittymä ruudulle näkisin olevan ehkä annettavaa myös tavalliselle kuluttajalle. Kaikki kolme esimerkkilehteä ovat peruskohderyhmältään samansuuntaisia; Iltalehti Online 11 ja Helsingin Sanomat 12 on tarkoitettu selkeästi kaikille päivittäisistä uutisista kiinnostuneille, kun taas International Herald Tribune 13 on suunnattu bisneskäyttäjälle. 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. 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 ja IHT kävivät molemmat läpi perusteellisen kasvojenkohotuksen muutama kuukausi sitten, IHT:n ollessa näistä kahdesta ensimmäinen. 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. Testin ulkopuolella käyn lyhyesti läpi kaksi casen käyttöliittymistä, joissa on perinteiset konventiot heitetty romukoppaan ja niiden tilalla käytetään muita ratkaisuja, kuten animaatiota, interaktion havainnollistamiseen ja palautteen antamiseen. Näitä ovat Praystation.com 14, lähinnä kokeelliseen Flashiin keskittynyt henkilökohtainen sivusto sekä Etelä-Afrikkalainen uusmediayritys Wireframe Studios ) Iltalehti Online 12) Helsingin Sanomat; 13) International Herald Tribune; 14) Praystation.com : 15) Wireframe Studios : sivu 9

10 2.1. Iltalehti Online ; 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. kuva 2. Iltalehden käyttöliittymä Tässä tapauksessa käyttäjää kiinnostava uutinen on artikkeli 17-vuotiaan tytön tapaturmasta, johon viitataan heti lööpissä. Monellako klikkauksella hän siis pääsee artikkeliin käsiksi? kuva 3. Iltalehden rakenne sivu 10

11 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 navigointipolku siihen, missä tällä hetkellä ollaan. Ainoa vihje, mistä käyttäjä näkee sijaintinsa on korostettu pääosion valinta navigointipalkissa. + 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( Tosin peruskäyttäjä ei välttämättä osaa ihmetellä tämän puutumista, vaan hahmottaa sivuston kokonaisuuden samalla sanomalehti-metaforalla kuin gra sen ulkoasunkin. Navigoinnissa ei juurikaan käytetä muuta metaforaa kuin yllämainittua, esimerkiksi painonappivertauksen käyttö läpi sivuston auttaisi hahmotamaan mikä oikeasti kuuluu navigaatioon ja mikä ei. Nyt varsikin alaosioita on siroteltu vähän miten sattuu. sivu 11

12 2.2. Helsingin Sanomat; Helsingin Sanomat on hieman teknisemmin 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ä 16 toteutettuja alasvetovalikoita, joista käyttäjä voi siirtyä suoraan haluamaansa osioon. kuva 4, Helsingin Sanomien käyttöliittymä 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 + kuva 5, Helsingin Sanomien käyttöliittymän hakemistopolku Selkeä ja intuitiivinen käyttöliittymä, varsinkin materiaalin laajuuteen nähden. Rakenne skaalattava, uusien osioiden lisäys ja poisto onnistuu helposti. - Tekniset ratkaisut, mukana seuraava navigointipalkki ehkä vaatii hieman opettelua alkuun ) Javascript = skriptaus- ja ohjelmointikieli. Käytetään mm. yhditettynä DOM-objektimallin mukaisesti sivunkuvauskieleen kuten esimerkiksi HTML sekä CSS-tyylitiedostoihin (Cascading Style Sheets) sivu 12

13 2.3. 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 ilman sivun uudelleenlatausta. kuva 6, International Herald Tribunen käyttöliittymän yksiyiskohta Kuten tässä, niinkuin monissa muissakin pikanteissa yksityiskohdissa IHT hyödyntää vahvasti uutta tekniikkaa, pääosin dynaamista HTML:ää 17. ToInen merkittävä esimerkki tekniikan luovasta käytöstä on ns. Clippingsit, eli käyttäjäkohtaiset suosikit sivuston menuun. Tämä on merkittävä käytännön helpotus sivuston tehokäyttäjälle; pro ilin huomioon ottaen keskimääräisellä käyttäjällä on jo valmiiksi selaimen bookmarkeissa 18 iso lista linkkejä, joten hän oletettavasti mielellään tallettaa tietyt jutut vain kyseisen sivuston osalta ) Dynaaminen HTML (DHTML) = sivunkuvauskiieli HTML yhditettynä DOM-objektimallin mukaisesti Javascriptiin tai muuhun vastavaan ohjelmointikieleen sekä CSS-tyylitiedostoihin (Cascading Style Sheets) 18) Bookmarks = selaimen muistiin talletettavat omat henkilökohtaiset suosikkisivut, kirjanmerkit sivu 13

14 Lisäksi Clippingsien, eli leikkeiden muokkaus on tehty helpoksi. Käyttäjä voi avata listan koska tahansa joko poistaakseen kaikki, tai pelkästään vain lukemansa leikkeet. Lisäksi leikkeen lisääminen listaan on havainnollistettu erinomaisesti animaatiolla; käyttäjä klikkaa vain +-merkkiä ja merkki lentää menupalkkiin leikemenun kohdalle. kuva 7. IHT:n Clippings-menu ja vaihtoehdot Mikäli käyttäjä tuntee olevansa hukassa sivustolla, on tarjolla myös erinomainen ohjesivu, jossa käydään lyhyesti ja ytimekkäästi läpi sivuston eri ominaisuudet kuvien kanssa. Täällä selitetään myös seuraavat erinomaiset ominaisuudet: Fontin koon valinta: siirryttäessä syvemmälle sivutoon käyttäjälle tarjotaan useita mahdollisuuksia vaikuttaa siihen, miten hän haluaa juttunsa lukea. Ensinmmäinen näistä on mahdollisuus joko pienentää ja kasvattaa luettavan tekstin kokoa. Toinen tulee tarpeelliseksi osittain tämän muutoksen myötä; nimittäin mahdollisuus valita miten juttu palstoitetaan. Kuva 8: IHT:n kolme mahdollisuutta lukea sama artikkeli sivu 14

15 Artikkelien löytäminen IHT:ssa on helppoa. Lähes kaikki on etusivulta käsin saavutettavissa maksimissaan kahdella askeleella. Eri vaihtoehtoja pästä tietoon käsiksi tarjotaan monia, esimerkiksi lista koko lehden artikkeleista. Toinen vaihtoehto on etusivulla avautuva valikko eri osa-alueen artikkeleista. Muihin optioihin kuuluvat mm. alasvetovalikot. Käytettävyyden kannalta lisähuomion arvoinen yksityiskohta on mukana seuraava navigointipalkki, johon nerokkaasti syttyy päälle IHT-logo kun sivua scrollataan alaspäin niin että palkki irtoaa luonnollisesta kiinnityskohdastaan. Ainoa ykstyiskohta mikä sivustolta ehkä puuttuu on pysyvä personointi. Nyt käyuttäjän omat asetukset on toteutettu evästeillä 19, joten selimen sulkemisen tai koneen vaihdon yhteydessä nämä häviävät. + Loppuun asti mietitty kohderyhmä ja sen mukaiset palvelut Uskalias teknologian hyväksikäyttö - Käyttöliittymä täytyy todellakin opetella. (Tosin selkeä intuitiivisuus ja interaktoiden huomioiminen korvaa tätä puutetta). Kaikki ekstrat jäävät pois kun käytetään vanhempaa selainta Eväste l. Cookie = käyttäjän selaimen muistiin talletettava tiedosto, joka säilöö esimerkiksi halutut asetukset sivu 15

16 2.4. PRAYSTATION Kuva 9: Praystation.comin käyttöliittymä Palkintoja voittanut ja mainetta niittänyt henkilökohtainen sivusto, joka esittelee lähinnä kokellista Flashia. Käyttöliittymä perustuu kalenteriin sivun alalaidassa.tämä kalenteri näyttää puoli vuotta kerrallaan, ja vasemmasta alalaidasta liikutaan puolivuosittain eteen- ja taaksepäin. kalenterin liike on animoitu pehmeäksi, eli käyttäjä ei hätäänny ja luule että jotain meni rikki kuten nopeaa liiketä kätettäesä joskus tapahtuu. Kuva 10: Praystationin menu lähemmäsä tarkastelussa Kronologisen sisällön esittämiseen tällainen metafora on hyvin toimiva, tästä Praystation on oiva esimerkki. sivu 16

17 2.5. Wireframe Studios, Kuva 11; Wireframe koko minimalistisuudessaan Mielenkiintoinen yhdistelmä kokeilevaa ja leikkimielistä tutkimista vatiivaa ja samanaikaan todella intuitiivista käyttöliittymää. Graa nen ilmaisu on suhteellisen minimalistista, joten katse ja hiiri hakeutuvat juuri sinne minne pitääkin. Oikeaan kohtan klikkaus ja hiiren viesti palkitaan pehmeillä animaatioilla, jotka selventävät viestiä Tästä saa klikata. Ehkä tärkein on näiden palautteiden välitön vastineaika, käyttäjä ei joudu odottelemaan turhia. Tämäntyylisille sovelluksille löytyisi varmasti käyttöä enemmänkin, esimerkiksi multimediakonsoleissa ja kosketusnäytöllä varustetuissa päätelaitteissa. Kuva 11; Wireframe ja yksittäiskuvia animaatioista sivu 17

18 III SUMMA SUMMARUM 3.0 Yhteenveto Mahdollisuuksia siis on. Lähinnä tällä hetkellä on kyse siitä, kuka niitä haluaa hyödyntää. Turvalline tie on tottakai tehdä sivustoja ja palveluita jokamiehelle, turvallisesti vanhojen konventioiden mukaan. Joissain tapauksissa tämä on jopa ainoa harkittavissa oleva vaihtoehto, ottaen huomioon että verkkopalvelun täytyy sekä pitää vanhat käyttäjät palvelussa sekä mahdollisesti houkuttaa uusia ja vieläpä jopa tuottaa voittoa tämän päälle. Hankala tehtävä, mutta näkisin kuitenkin mahdollisuuksia lähteä toteuttamaan teknisempiä ja erilaisia palveluita, onhan kolmas esimerkkini, International Herald Tribune tästä oiva esimerkki. Kun kohderyhmä on selvillä, mielikuvitus ja tekniikka hallussa niin mikä estää tekemästä asioita eri tavalla. Teknisesti esimerkiksi Flashin hyödyntäminen on mahdollista laajemmissakin palveluissa; Tällä plugin eli vaadittava selaimen lisäosa on saatavilla kaikkiin laajemmalle levinneisiin käyttöjärjestelmiin. Kyseisen selaimen lisäosion olemassaolo voidaan myös tarkistaa erillisellä skriptillä. Näin saadaan suurin osa käyttäjistä asetettua kategoriaan sen mukaan, onko heillä lisäosaa vaiko ei. Tekijöille tämä tarkoittaa käytännössä joko erillisten versioiden tekemistä tietyistä sivuista sekä vaatii normaalia syvempää tietämystä sivunkuvaus- ja skriptauskielistä. Mikäli taas halutaan käyttää dynaamista HTML:ää, niin tämä vaatii hieman tarkempaa kohderyhmän rajausta. Yleisimmät selaimet 20, eli käytännössä Internet Explorer 5+(PC/Mac) toteuttavat standardeja jo kohtuuhyvin, ainoana poikkeuksena Netscapen selaimen versio 4, jota varten joudutaan tekemään omia virityksiä. Nouseva trendi 21 tämän suhteen onkin nykyään tarjota kyseisen selaimen käyttäjille karsittua versiota palvelusta ja samalla kehoittaa ja rohkaista selaimen päivitykseen ) Selainstatistiikkaa liitteessä 1 21) Webstandards.org Upgrade Campaign sivu 18

19 IV LÄHTEET Lähdeluettelo Kirjalliset: Nielsen, Jakob: Designing Web Usability New Riders Julkaistu 10/1999 Sähköiset: Flazoom.com/ Chris MacGregor: Flash 99% Proof. Julk azoom.com/news/99proof_ shtml Merges.net/ Alan Barker: Pliant response for websites julk Useit.com Alertbox/Jakob Nielsen: Flash 99% bad Julk Multimedia Guidelines of the Web Julk. Joulukuussa Top ten web design mistakes Julk. toukokuussa Top ten new mistakes of web design julk When Bad Design becomes a Standard, julk Graphical User Interface Timeline Fitt s Law / Bruce Tognazzini julk 2/ Iltalehti Online Helsingin Sanomat; International Herald Tribune; Praystation.com : Wireframe Studios : sivu 19

20 V LIITTEET Liite 1 Selaintilastoja maaliskuulta Lähde Upsdell.com / Browser news: sivu 20