GRAAFISET WWW-KÄYTTÖLIITTYMÄT



Samankaltaiset tiedostot
GRAAFISET WWW-KÄYTTÖLIITTYMÄT

GRAAFISET WWW-KÄYTTÖLIITTYMÄT

GRAAFISET WWW-KÄYTTÖLIITTYMÄT

Oulun seudun ammattikorkeakoulu Aineistojen polku kirjastoon > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Mitä käytettävyys on? Käytettävyys verkko-opetuksessa. Miksi käytettävyys on tärkeää? Mitä käytettävyys on? Nielsen: käytettävyysheuristiikat

Käytettävyys verkko-opetuksessa Jussi Mantere

KiMeWebin käyttöohjeet

NTG CMS. Julkaisujärjestelm. rjestelmä

Oulun ja Pohjois Karjalan ammattikorkeakoulu Virtuaalivasikan kasvatuspeli v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Ylläpitoalue - Etusivu

Joomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta.

VirtuaaliAMK Työasemakäyttöliittymien suunnittelu > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel

Good Minton Sulkapalloliiton Kilpailujärjestelmä SEPA: Heuristinen arviointi

Arcada yrkeshögskola Hållbar utveckling v 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Tapauskertomus tietojärjestelmähanke > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

ARVO - verkkomateriaalien arviointiin

Mainonnanhallinta Käyttöopastus. Aineiston lisäys. Olli Erjanti Mediareaktori

Hittitoimiston Forte-kotisivujen päivitysohje

Kiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen

CMS Made Simple Perusteet

Suomen virtuaaliammattikorkeakoulu Vetokoe v.0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

ejuttu ohjeet kuinka sitä käytetään.

WINDOWS 10 -kurssi.

Tampereen ammattikorkeakoulu Verkkokeskustelu > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka monivalinta aihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Rakennusautomaation käytettävyys. Rakennusautomaatioseminaari Sami Karjalainen, VTT

Miksi tarvitsemme verkkokirjoittamisen taitoa?

Suomen virtuaaliammattikorkeakoulu VPN peli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Pirkanmaan ammattikorkeakoulu Hotel Management Case Hotel v 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Diakonia ammattikorkeakoulu Päihdetyön historia > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Wordpress- ohje nettisivujen laadintaan

Suomen virtuaaliammattikorkeakoulu Boolen operaattorit v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Virtuaaliammattikorkeakoulu Seksuaaliterveyden edistäminen v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Kotisivu. Hakutoiminnon on oltava hyvin esillä lähes kaikilla kotisivuilla. Hakutoiminto on hyvä sijoittaa heti kotisivun yläosaan.

Suomen virtuaaliammattikorkeakoulu Kestävää kehitystä etsimässä v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Lahden, Pohjois Karjalan ja Kemi Tornion AMK Effective Reading > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Metso hyökkää Miksi? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Internetin hyödyt ja vaarat. Miten nettiä käytetään tehokkaasti hyväksi?

Suomen virtuaaliammattikorkeakoulu Teknillinen mekanikka fem tutorials > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

1 Yleistä Web-editorista Web-editori -dokumentin luominen Pikatoimintopainikkeet Tallenna... 3

Suomen virtuaaliammattikorkeakoulu XML_mark_up_language > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Sisältö. Päivitetty viimeksi Sivu 2 / 14

Vasteaika. Vasteaikaa koskeva ohje ei ole juuri muuttunut Robert B. Millerin vuonna 1968 pitämästä esityksestä:

Tietosuoja-portaali. päivittäjän ohje

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje

H5P-työkalut Moodlessa

ividays BLOG Design Elina / Tomi / Timo / Otso /

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka templateaihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

MOODLE-OHJE: Liitetiedoston lisääminen ja päivittäminen

Verkkosivut perinteisesti. Tanja Välisalo

Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Sikarodut > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen Virtuaaliammattikorkeakoulu Kasvinsuojelu ruiskutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Sami Hirvonen. Ulkoasut Media Works sivustolle

Sisällys Word Wep App... 3 Excel Web App... 7 Powerpoint Web App OneNote Web App Excel Kysely Valmiin tiedoston tuonti Skydrive Pro

Office ohjelmiston asennusohje

ALKUSANAT... 4 ALKUSANAT E-KIRJA VERSIOON... 5 SISÄLLYSLUETTELO... 6

Suomen virtuaaliammattikorkeakoulu Varför behöver man brandmurar? V. 1.0 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

Suomen virtuaaliammattikorkeakoulu Vedenpuhdistus > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Erilaisia käyttöliittymiä v.0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja.

VINKKEJÄ CV-NETIN KÄYTTÖÖN.

PAIKALLISJÄRJESTÖKOHTAISTEN NETTISIVUJEN

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

Visma Fivaldi. Ohjeet Java web startin ja HTML5-työkalun aktivointiin

VirtaaliAMK Virtuaalihotelli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

KYMENLAAKSON AMMATTIKORKEAKOULU Tietotekniikan koulutusohjelma / Tietoverkkotekniikka

Suomen virtuaaliammattikorkeakoulu Turvallisuus turpeen tuotannossa v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

KUHA-PROJEKTI. Petri Lamminaho Ville Muittari Kati Mäki-Kuutti Juho Tamminen. Käytettävyys raportti

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

ARVO - verkkomateriaalien arviointiin

Graafiset käyttöliittymät Sivunparantelu

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016

Luo mediaopas Tarinatallentimella

Suomen virtuaaliammattikorkeakoulu Villan keritseminen, karstaus ja kehrääminen v.0.5 > 80 % % % < 50 %

Kuukauden kuvat kerhon galleriaan lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen:

Google-dokumentit. Opetusteknologiakeskus Mediamylly

GALERIE EXHIBITIONS (13) 1 2 EXHIBITIONS 2

Suomen virtuaaliammattikorkeakoulu The XML Dokuments > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Navigointi Verkkomultimedia ICT1tn004

Muutos navigointivalikkoon Uusi työkalu: Arvosanat ja Arvosteluasteikko Uusi työkalu: Arviointitaulukko

ARVO - verkkomateriaalien arviointiin

Asiakas ja tavoite. Tekninen toteutus

- Flash on ennen muuta multimedian koosto-ohjelma, jossa muista ohjelmista tuodut mediaelementit voidaan yhdistää ja linkittää toisiinsa.

Maastotietokannan torrent-jakelun shapefile-tiedostojen purkaminen zip-arkistoista Windows-komentojonoilla

Pika-aloitusopas. Sisältö: Projektin luominen Projektin muokkaaminen ja hallinnointi Projektin/arvioinnin tulosten tarkastelu

KUVAN TUOMINEN, MUOKKAAMINEN, KOON MUUTTAMINEN JA TALLENTAMINEN PAINTISSA

Kopiodaksesi, leikataksesi ja liittääksesi helpointa on käyttää näppäimistön pikavalintoja:

Virtuaaliammattikorkeakoulu Taide kasvatus taidekasvatus > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Käytettävyys ja käyttäjätutkimus. Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi

Tietokannan luominen:

KÄYTTÖOHJE. Servia. S solutions

Katsaus verkkojulkaisuihin. Pasi Kivioja ProComin lehtikatsaus

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus

VirtuaaliAMK Tilastollinen päättely > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Transkriptio:

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

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. 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ä? sivu 6

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ä 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ähiaikoina. ------------------------------------------ Macromedia Flash (http://www.macromedia.com/software/ ash/); vektoripohjainen tekniikka, joka mahdollistaa animoidun ja interaktiivisen sisällön katselun www-selaimessa erillisen pluginin avulla. Macromedia Generator (http://www.macromedia.com/software/generator/); palvelinsovellus, joka mahdollistaa päivittymän sisällön myös Flash-sovelluksissa erottaen sisällön ja esityksen toisistaan. 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. kuva 2. Iltalehden käyttöliittymä 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? kuva 3. Iltalehden rakenne 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 ilman sivun uudelleenlatausta. Kuten tässä, niinkuin monissa muissakin pikanteissa yksityiskohdissa IHT hyödyntää vahvasti uutta tekniikkaa, pääosin dynaamista HTML:ää. 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 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) Bookmarks = selaimen muistiin talletettavat omat henkilökohtaiset suosikkisivut, kirjanmerkit sivu 11

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 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 n: Kolme mahdollisuutta lukea sama artikkeli sivu 12

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ä, 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 13

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

IV summa summarum sivu 15

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 16