Käyttöliittymät

Sivuston suunnittelu

Tehtävä

Hae OPH:n sivuilta Tietojenkäsittelyn tutkintotoimikunnan puheenjohtajan nimi

Sivuille löytäminen voi tuottaa vaikeuksia

koetilanteissa 26 - 42 % saa suoritettua annetun tehtävän (isojen ja tunnettujen yritysten sivuja, tehtävässä piti edetä vaiheittain)Web suunniteltiin alun perin ympäristöksi, jossa voi lukea papereita

Sivuston suunnittelun päätehtävä on

saada aikaan – mahdollisimman yksinkertaisia sivustoja– mahdollisimman vähän häiriötekijöitä– informaatioarkkitehtuuri on selkeä– navigointityökalut vastaavat arkkitehtuuria

Taas toisaalta …

http://www.webaward.org - parasta markkinointia http://www.biggs-gilmore.com/ - mainostoimisto (verkossa), vuoden 2008 voittaja http://www.bamstrategy.com/showcase/loveisinthehair/, hiusalan tuotteita

Keskeneräisyydestä ei kerrota

Sivustot ovat joka tapauksessa kesken Älä kerro käyttäjälle sivun puutteistaÄlä julkista sivustoa puolivalmiina– voidaan kertoa suunnitelmista ja kehitysvaiheesta

• http://www.cs.utah.edu/~gk/atwork/• http://www.hut.fi/~jjknuutt/kesken.html

Kotisivu

Tärkein, erilainen kuin muut• tyyli yhteneväinen• ei moninkertaisia kotisivuja• sivuston käyttötarkoitus selvittävä etusivulla• tarjoaa käyttäjälle reittejä, joita pitkin liikkua

Yrityksen tai sivuston nimiNavigointialue - luettelo tärkeimmistä alueistaTärkeimmät uutiset - pieni alueHakutoiminto - hyvin esiin (yläosaan)

Esimerkkihttp://www.hel.fi/wps/portal/Helsinki?WCM_GLOBAL_CONTEXT=/Helsinki/fi/Etusivu

Oikea leveys http://webstyleguide.com/wsg3/7-page-design/5-page-frameworks.html

Ei minkään standardin mukaiseksi, sivun sovittava moniin erilaisiin ikkunoihinKiinteä leveys vaikeuttaa eri medioilla lukemistaei vieritystä vaakasuunnassa - Jos laittaa leveyden tällä hetkellä Suomessa < 1024 - yli 90 % käyttäjistä näkee koko leveyden

Käynnistyskuvat

Turhia …saadaan vain aikaiseksi kaksinkertainen kotisivu

Kotisivut ja sisäsivut

Sivuston nimi pitää näkyä kaikilla sivuillaKaikille sivuille linkki kotisivulle– linkin sijainti vasempaan yläkulmaan (länsimaisessa

kulttuurissa)– logo (+ tekstilinkki)– Helsingin kaupunki

Linkit sisäsivuille– Käyttäjää ei pidä pakottaa

aloittamaan kotisivulta– deep link– sisäsivuille vievien linkkien

avulla muut sivustot voivat ohjata käyttäjää

– jos vain yksi ovi, käyttäjä joutuu opettelemaan sivuston

Metaforat

Kahdella tapaa hyödyllisiä– yhtenäistävä tekijä– voi helpottaa sivuston käytön oppimista

• ostoskori verkkokaupassa– muuttumassa käyttöliittymän standardiksi – käyttäjä ei miellä muita symboleita samaan tarkoitukseen oikeiksi

Joskus liikaa

Liikkuminen

Missä minä olen?Mistä minä tulin?Minne täältä voi mennä?

Missä minä olen?Koko www:n mittakaavassaMissä kohden sivustoaSivusto on pystyttävä tunnistamaan jokaiselta sen sivulta (voi olla logo, joka samalla linkki kotisivulle)Sijainti sivustolla osoitetaan yleensä näyttämällä osia sivun rakenteesta ja merkitsemällä alue, jolle näytössä oleva sivu rajoittuu

Missä olen ollut?

– Ilman evästeitä (cookie) ei voi tietää vain Back– Hypertekstilinkit - niiden värin muuttuminen

• käyttäjä oppii sivuston rakenteen• käyttäjä ei käy useita kertoja samalla sivulla• jos väri poikkeaa standardista, käyttäjä ei ymmärrä sen merkitystä• Upotetut - lisätietoa

– Rakenteelliset - sivuston rakenne– Mielleyhtymälinkit - katso myös– Muuten kuin alleviivatulla tekstillä harkitusti

Sivuston rakenne

Tarkoitus osoittaa käyttäjän kulloinenkin sijainti ja tarjolla olevat liikkumisvaihtoehdot suhteessa informaatioavaruuteen missä liikkuminen tapahtuu

Rakenteitahttp://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html

Sivustolla on oltava rakenne, jonka tulee heijastaa käyttäjän näkemystä sivustosta– Hierarkkinen

• informaatio muuttuu asteittain yhä yksityiskohtaisemmaksi– Lineaarinen (jonomainen)

• eteneminen vaihe vaiheelta– Looginen jono– Web-tyylinen

Hierarkkinen

Lineaarinen (+ looginen jono)

Web-tyylinen

Vertailua

Käyttäjän näkemys

Organisaatiossa• helppo rakennusvastuu osastoittain, valtasuhteittain,

budjettilohkoittain

Mitä käyttäjä on tullut tekemään sivustolla?• tuotetiedot• työnhakijoille suunnattu informaatio• sijoittajien tietopankki

– eri osastojen tiedot joudutaan sijoittamaan eri puolille sivustoa

Esimerkki hierarkkinen rakenne

I Yrityksen sivusto– II tuotetiedot

• III tuoteperheet– IV yksittäiset tuotteen kuvaukset

» V ominaisuudet, hintatiedot, kokoonpanovaihtoehdot, käyttäjien kokemukset, huoltotiedot

– II työnhakijoille suunnattu informaatio– II sijoittajien tietopankki

Esimerkkejä• www.finnair.fi, www.pohjola.fi , www.tapiola.fi

Laaja vai yksityiskohtainen?

Yleisin: sivuston pääkäsitteet luetellaan (usein alekkain) vasemmassa reunassa

• korostaa sivuston laajuutta• + käyttäjä tietoinen kaikista palveluista, - vie paljon tilaa

ruudulta kun sivua tosiasiallisesti käytetään

Leivänmurupolku: syvyyssuuntainen navigointipalkkiYhdistelmä

• vain suuret sivustot (yli 10 000 eriaiheista sivua)• www.sun.com

Pyri yksinkertaiseen navigointiin

Sivun rakennehttp://webstyleguide.com/wsg3/6-page-structure/3-site-design.html

Käyttäjä liikkuu omatoimisesti

• kirjanmerkki• www on erilainen kuin perinteinen sovellus, jossa

käyttäjää ohjataan tietylle polulle– käyttäjä käyttää webiä, ei yhtä sivustoa ja reagoivat

negatiivisesti asioihin, jotka eivät toimi totutulla tavalla– selainohjelmat eivät pysty auttaman navigoinnissa– sivustokartta klisee, jos siitä puuttuu ”Olet tässä”

» http://www.hel.fi/wps/portal/Helsinki/Sivukartta?WCM_GLOBAL_CONTEXT=/helsinki/fi/Etusivu

» http://www.uta.fi/tyt/verkkotutor/sisalto.htm

Informaation karsiminen

Kokonaisuuden muodostaminen (käsite sivusto)TiivistäminenSuodattaminenLyhentäminenEsimerkkeihin perustuva esitystapa

Alasivustot

Käyttäjät tarvitsevat rakennetta, hierarkkinen järjestäminenAlasivusto tarkoittaa suuremmalle sivustolle sijoitettu www-sivujen kokoelma, joka on tyyliltään ja navigointimalliltaan yhtenäinen

• linkit alasivuston ja koko sivuston kotisivuille• alasivuston navigaatiomallin pitäisi sisältää alasivuston

omien liikkumistoimintojen lisäksi koko sivustoa koskevia toimintoja

HakuPuolet käyttäjistä seuraa linkkejä, toinen puoli (tehtävähakuinen) hakutoimintojaEi koko Webiin osoittavaa hakuaSaavutettavissa jokaiselta sivuston sivultaJos rajattu haku

• käyttäjälle tehtävä selväksi mihin haku on rajattu• käyttäjälle tarjottava linkki koko sivuston hakutoimintoon

Hakutoiminnon kehittyneemmät muodot

Varo boolen hakua• JA tai AND - molempien ehtojen toteuduttava

Hakutulosten esittäminen• luettelo parhailla osumilla• sama sivu vain kerran tuloksessa

Sivujen kuvaukset ja hakusanat• <meta name=”description” CONTENT=”This is a summary of….>

Haun kohdesivulle jokin korostus kohtaan, jossa hakusana ilmenee sivulla

URL

• www.yritys.com• www.yritys.fi• www.kesko.fi• www.vr.fi• www.finnair.fi

Suositus: tunnistettavissa myös ilman www:taYmmärrettävät osoitteet– lyhyt– tavalliset sanat– vain pienet kirjaimet– ei erikoismerkkejä

Pysyvät (linkitys)

Markkinointi

URL mukaan mainosmateriaaliin ja tuotteisiinVanhaan URLiin pyrkivä ohjataan palvelimen asetuksilla uuteen

Käyttäjäläheinen sisältö

FAQ• http://forum.java.sun.com/?frontpage-jdc

Navigointi sovelmissa (Applet)

– Toiminnalliset omia minisovelluksia– omassa ikkunassaan, jossa ei ole selaimen nappeja– http://java.sun.com/applets/jdk/1.4/index.html

– Sisältösovelmat kiinteästi kytköksissä verkkosivun sisältöön

– osana verkkosivua, johon kuuluvat

– Hitaista varoitus– Versiosidonnaisia (Appletia ei näy, jos ei oikealla

Javan versiolla tehty tai selaimen asetukset estävät toiminnan)