Käyttöliittymät

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/loveisinthehair/, 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. Esimerkkihttp://www.hel.fi/wps/portal/Helsinki?WCM_GLOBAL_CONTEXT=/Helsinki/fi/EtusivuEsimerkkihttp://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. Rakenteitahttp://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.htmlRakenteitahttp://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.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 rakennehttp://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=/helsinki/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 • <meta name=”description” CONTENT=”This is a summary of….> • Haun kohdesivulle jokin korostus kohtaan, jossa hakusana ilmenee sivulla

32. 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) URL

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)