Käyttöliittymät Sivuston suunnittelu. Tehtävä Hae OPH:n sivuilta Tietojenkäsittelyn tutkintotoimikunnan puheenjohtajan nimi.

Esitys aiheesta: "Käyttöliittymät Sivuston suunnittelu. Tehtävä Hae OPH:n sivuilta Tietojenkäsittelyn tutkintotoimikunnan puheenjohtajan nimi."— Esityksen transkriptio:

1 Käyttöliittymät Sivuston suunnittelu

2 Tehtävä Hae OPH:n sivuilta Tietojenkäsittelyn tutkintotoimikunnan puheenjohtajan nimi

3 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

4 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

5 Taas toisaalta … http://www.webaward.org - parasta markkinointia http://www.biggs-gilmore.com/ - mainostoimisto (verkossa), vuoden 2008 voittaja http://www.bamstrategy.com/showcase/loveisint hehair/, hiusalan tuotteita

6 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

7 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 nimi Navigointialue - luettelo tärkeimmistä alueista Tärkeimmät uutiset - pieni alue Hakutoiminto - hyvin esiin (yläosaan)

8 Esimerkki http://www.hel.fi/wps/portal/Helsinki?WCM_GLOBAL_CONTEXT=/Helsinki/fi/Etusivu

9 Oikea leveys http://webstyleguide.com/wsg3/7-page-design/5-page-frameworks.html Ei minkään standardin mukaiseksi, sivun sovittava moniin erilaisiin ikkunoihin Kiinteä leveys vaikeuttaa eri medioilla lukemista ei vieritystä vaakasuunnassa - Jos laittaa leveyden tällä hetkellä Suomessa < 1024 - yli 90 % käyttäjistä näkee koko leveyden

10 Käynnistyskuvat Turhia …saadaan vain aikaiseksi kaksinkertainen kotisivu

11 Kotisivut ja sisäsivut Sivuston nimi pitää näkyä kaikilla sivuilla Kaikille sivuille linkki kotisivulle –linkin sijainti vasempaan yläkulmaan (länsimaisessa kulttuurissa) –logo (+ tekstilinkki) –Helsingin kaupunki

12 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

13 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

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

15 Missä minä olen? Koko www:n mittakaavassa Missä kohden sivustoa Sivusto 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

16 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

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

18 Rakenteita http://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

19 Hierarkkinen

20 Lineaarinen (+ looginen jono)

21 Web-tyylinen

22 Vertailua

23 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

24 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.fiwww.finnair.fiwww.pohjola.fiwww.tapiola.fi

25 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 navigointipalkki Yhdistelmä •vain suuret sivustot (yli 10 000 eriaiheista sivua) •www.sun.com Pyri yksinkertaiseen navigointiin

26 Sivun rakenne http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html

27 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=/hel sinki/fi/Etusivu »http://www.uta.fi/tyt/verkkotutor/sisalto.htm

28 Informaation karsiminen Kokonaisuuden muodostaminen (käsite sivusto) Tiivistäminen Suodattaminen Lyhentäminen Esimerkkeihin perustuva esitystapa

29 Alasivustot Käyttäjät tarvitsevat rakennetta, hierarkkinen järjestäminen Alasivusto 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

30 Haku Puolet käyttäjistä seuraa linkkejä, toinen puoli (tehtävähakuinen) hakutoimintoja Ei koko Webiin osoittavaa hakua Saavutettavissa jokaiselta sivuston sivulta Jos rajattu haku •käyttäjälle tehtävä selväksi mihin haku on rajattu •käyttäjälle tarjottava linkki koko sivuston hakutoimintoon

31 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 • Haun kohdesivulle jokin korostus kohtaan, jossa hakusana ilmenee sivulla

32 URL •www.yritys.com •www.yritys.fi •www.kesko.fi •www.vr.fi •www.finnair.fi Suositus: tunnistettavissa myös ilman www:ta Ymmärrettävät osoitteet –lyhyt –tavalliset sanat –vain pienet kirjaimet –ei erikoismerkkejä Pysyvät (linkitys)

33 Markkinointi URL mukaan mainosmateriaaliin ja tuotteisiin Vanhaan URLiin pyrkivä ohjataan palvelimen asetuksilla uuteen

34 Käyttäjäläheinen sisältö FAQ •http://forum.java.sun.com/?frontpage-jdc

35 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)