Rakenteen ja ilmeen määrittelystä konseptissa

KonseptisuunnitteluKonseptisuunnitelman sisällöstä

Konseptisuunnitelmassa kuvaillaan• Projektin tausta• Käyttäjäryhmät tarpeet ja odotukset• Palvelun visuaalinen ilme ja rakenne• Perustellaan mediaelementtien valinta ja vuorovaikutuskeinojen käyttö

Lisäksi konseptissa voidaan kuvailla:• Palvelun missio• Brändiä• Kilpailijoita

! Konseptissa tulee huomioida asiakkaan liiketoiminnan strategiset tavoitteet

KonseptisuunnitteluInformaatioarkkitehtuuri

Informaatioarkkitehtuuri = tietosisältöjen rakenteellinen kokonaisuus.Tarkoituksena on määritellä tietosisältö loogiseksi kokonaisuudeksi niin käyttäjänkuin ylläpitäjänkin kannalta.

• Miten sisältö jäsennellään? • Millainen rakenne? • Selkeä kokonaisuus? • Kokeile eri näkökulmia ja eri vaihtoehtoja • Testaa ulkopuolisella ennen lopullisen päätöksen tekoa

KonseptisuunnitteluInformaatioarkkitehtuuri

Informaatioarkkitehtuurin peruskomponentit voidaan määritellä mm. seuraavalla tavalla• Informaation järjestäminen• Nimeämiskäytännöt• Navigointijärjestelmä• Hakujärjestelmä

KonseptisuunnitteluSisällön jaottelua

Mitä sisältöä sivuille tulee ja kuinka se jaotellaan? Vanhojen sivujen analysointia Keskustelut asiakkaan kanssa

mahdollisista muutoksista

Jaottelun jälkeen Nimeäminen Raudat Visu

KonseptisuunnitteluSisällön suunnittelua

Informaatioarkkitehtuuriatyöstetään nimenomaankonseptissa. Strategisten jasisällöllisten tavoitteiden lisäksikonseptissa kuvataan itsepalvelua. Suunnittelijoidentyökaluina ovat mm.

• Rautalankamallit• Mielikuvakartat

KonseptisuunnitteluWireframe eli rautalankamalli

Kustannustehokas työtapa– kaikki muutokset vielä mahdollisia– paljastaa virheet– helpottaa eri käyttöliittymien vertailua

Sketching: Visual Thinking Power Tool

KonseptisuunnitteluWireframe eli rautalankamalli

Havainnollistaa sivun ulkoasua symbolien avulla

Näyttää– sisällön

– toiminnalliset elementit

– navigaation

Kuvahaku wireframe

KonseptisuunnitteluWireframe eli rautalankamalli

Rautalankamalli helpottaa asiakasta (myös tiimiä) hahmottamaan sivujen sisällön

- mitä tulee millekin sivulle

- mihin tavara sivulla asettuu ja miksi

- mikä on suhde muuhun materiaaliin sivulla

visuaalisuus tuodaan mukaan seuraavaksi

LuettavaksiEsimerkki 1 Nike

KonseptisuunnitteluWireframe eli rautalankamalli käyttöliittymä

Sivupohjaa suunniteltaessa, muista:• Standardielementit • Käytetäänkö metaforia • Symbolit?• Yhdenmukaisuus • Muuttumattomuus • Palaute

KonseptisuunnitteluNavigointi sivuilla

Sivupohjaa suunniteltaessa, muista:

• Kuinka sivuilla liikutaan?

Esimerkkejä erilaisista navigointitavoista

• Kuinka käyttäjä liikkuu kokonaisuudessa?

• Entä yhden sivun sisällä?

– ”Missä käyttäjä on nyt? Entä mistä hän tuli ja minne hän on menossa?“

Kuinka varmistetaan ettei käyttäjä eksy?

KonseptisuunnitteluNavigointi sivuilla - testaus

Rakenteen ja navigoinnin toimivuus todetaan testaustilanteessa:

– Onko virheitä paljon?

– Ovatko ne toistuvia vai satunnaisia?

– Vaatiiko koko navigointijärjestelmän muutosta?

Mitä lähes jokaisessa rautalankamallissa tulee olla?

1. Global navigation

2. Local navigation

3. Sivukohtainen sisältö

1

2

video

otsikko

kuvatekstikenttä

tekstikenttä

väliotsikko

3

45

haku

6

4. Administrative navigation (sis. Usein mm. sivukartta, yhteydenotto, info)

5. Title

6. Haku

Ilmeestä sananen…

KonseptisuunnitteluVisuaalisuudesta

• Miltä sivusto näyttää? • Kuinka ilme viestii asiakkaan brändiä?• Kuinka ilme palvelee käytettävyyttä?• Mitä valittu ilme viestii?

voit käyttää apuna ”mielikuvatauluja” joista asiakas valitsee parhaiten heille sopivan ilmeen esim. K-Instituutti

KonseptisuunnitteluVisuaalinen ilme

Mielikuvataulut voivat näyttää myös tältä:

KonseptisuunnitteluVisuaalisuudesta

• Miltä sivusto näyttää? • Kuinka ilme viestii asiakkaan brändiä?• Kuinka ilme palvelee käytettävyyttä?• Mitä valittu ilme viestii? • Mielikuvataulujen lisäksi mm. Värikartta ja kuvamaailma auttavat hahmottamaan oman palvelun

suhdetta kilpailijoihin:

20

Visuaalisen ilmeen luomisesta (asiakkaan kanssa)

Kuvamaailman ymmärtämisessä pätee usein sama problematiikka. benchmarkkauksen avulla autat asiakasta kiinnittämään huomiota kuvamaailmaan ja sen luomiin mielikuviin