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 % 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 … - parasta markkinointia - mainostoimisto (verkossa), vuoden 2008 voittaja hehair/, 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 • •

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)

Esimerkki

Oikea leveys 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 < 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 sivuilla Kaikille 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 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

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

Rakenteita 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ä •

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 eriaiheista sivua) • Pyri yksinkertaiseen navigointiin

Sivun rakenne

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ä” » sinki/fi/Etusivu »

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

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

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

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

URL • • • • • Suositus: tunnistettavissa myös ilman www:ta Ymmärrettävät osoitteet –lyhyt –tavalliset sanat –vain pienet kirjaimet –ei erikoismerkkejä Pysyvät (linkitys)

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

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

Navigointi sovelmissa (Applet) –Toiminnalliset omia minisovelluksia –omassa ikkunassaan, jossa ei ole selaimen nappeja – –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)