Rakenteen ja ilmeen määrittelystä konseptissa

Konseptisuunnittelu Konseptisuunnitelman 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

Konseptisuunnittelu Informaatioarkkitehtuuri Informaatioarkkitehtuuri = tietosisältöjen rakenteellinen kokonaisuus. Tarkoituksena on määritellä tietosisältö loogiseksi kokonaisuudeksi niin käyttäjän kuin 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

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

Konseptisuunnittelu Sisä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

Konseptisuunnittelu Sisällön suunnittelua Informaatioarkkitehtuuria työstetään nimenomaan konseptissa. Strategisten ja sisällöllisten tavoitteiden lisäksi konseptissa kuvataan itse palvelua. Suunnittelijoiden työkaluina ovat mm. Rautalankamallit Mielikuvakartat

Konseptisuunnittelu Wireframe eli rautalankamalli Kustannustehokas työtapa –kaikki muutokset vielä mahdollisia –paljastaa virheet –helpottaa eri käyttöliittymien vertailua Sketching: Visual Thinking Power Tool

Konseptisuunnittelu Wireframe eli rautalankamalli Havainnollistaa sivun ulkoasua symbolien avulla Näyttää –sisällön –toiminnalliset elementit –navigaation Kuvahaku wireframewireframe

Konseptisuunnittelu Wireframe 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 Luettavaksi Esimerkki 1 Nike Luettavaksi Esimerkki 1

Konseptisuunnittelu Wireframe eli rautalankamalli  käyttöliittymä Sivupohjaa suunniteltaessa, muista: Standardielementit Käytetäänkö metaforia Symbolit? Yhdenmukaisuus Muuttumattomuus Palaute

Konseptisuunnittelu Navigointi 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?

Konseptisuunnittelu Navigointi 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 kuva tekstikenttä väliotsikko haku 6 4. Administrative navigation (sis. Usein mm. sivukartta, yhteydenotto, info) 5. Title 6. Haku

Ilmeestä sananen…

Konseptisuunnittelu Visuaalisuudesta 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

Konseptisuunnittelu Visuaalinen ilme Mielikuvataulut voivat näyttää myös tältä:

Konseptisuunnittelu Visuaalisuudesta 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