SIVUSTON SUUNNITTELU. Informaatiorakenne ja navigointi

Transkriptio

1 SIVUSTON SUUNNITTELU Informaatiorakenne ja navigointi

2 SIVUSTON SUUNNITTELUN PÄÄTEHTÄVÄ saada aikaan mahdollisimman yksinkertaisia sivustoja mahdollisimman vähän häiriötekijöitä informaatioarkkitehtuuri on selkeä navigointityökalut vastaavat arkkitehtuuria

3 SIVUSTO- JA DOKUMENTTITYYPPEJÄ Staattiset ja dynaamiset Sisällönhallinta järjestelmällä Blogit Wikit RSS Kehittyneet Web-työkalut Google Docs MS Share Point Web-pohjainen palveluntarjonta (YouTube, FaceBook )

4 WEB-TUOTANNON PROSESSI Katso myös

5 YLEISOHJEET Ready, fire, aim Stay away from visual design until everything else is planned Small is good

6 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

7 HIERARKKINEN

8 LINEAARINEN (+ LOOGINEN JONO)

9 WEB-TYYLINEN

10 SIVUSTOKARTTOJA TYÖN ERI VAIHEISSA INFORMAATIOARKKITEHTUURI SEKÄ TIEDOSTO- JA KANSIORAKENNE presenting-information.html Työkaluja piirtämiseen: Illustrator, Visio

11 KÄYTTÄJÄN NÄKEMYS Mitä käyttäjä on tullut tekemään sivustolla? tuotetiedot työnhakijoille suunnattu informaatio sijoittajien tietopankki eri osastojen tiedot joudutaan sijoittamaan eri puolille sivustoa

12 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ä

13 NAVIGOINNISTA Jos navigoit oikeassa maailmassa, käytät hyväksesi Polkuja tuttuja katuja, jalkakäytäviä, bussilinjoja Rajoja fyysisiä esteitä esim. Seiniä,aitoja, jokia, rantaviivoja Alueita paikkoja, jotka on helppo tunnistaa, esim. Linnanmäki, Olympiastadion Solmukohtia rautatieasema Maamerkkejä - isoja näkyviä rakennuksia, joiden avulla voi suunnistaa kauempaakin, esim. Näsinneula Web-navigointi on samantapaista kuin oikeakin suunnistus, mutta erona siinä on Et tiedä, kuinka kauas olet liikkunut sivustolla (sivustolta), tavallisesti vain yhtäkkiä olemme jossakin Kompassi puuttuu Olet tässä vaditaan sivustolta: navigoinnin tulee näyttää liikkumisen vaihtoehdot ja myös näyttää se kohta, jossa lukija on sivustolla

14 NAVIGOINNISTA SIVUILLA Polkuja - Luo selkeät hyvin merkityt navigaatiopolut (esim. leivänmurupolut) Alueita - Luo erilaisia mutta tyyliltään ja navigointimalliltaan yhtenäisiä alasivustoja Solmukohdat Älä sekoita käyttäjää liian monilla valinnoilla koti- tai päänavigointisivuilla Maamerkit - Käytä pysyviä maamerkkejä sivuston navigoinnin apuna ja grafiikkaa tukemaan käyttäjän hahmottamista

15 LAAJA VAI YKSITYISKOHTAINEN NAVIGOINTI? 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

16 KÄYTTÖLIITTYMÄN OSAT Hakutoiminnot Logo Verkkolomakkeet Tekstit Ikkunat Erilaiset kuvakkeet Painikkeet Kuvat ja muut visuaaliset elementit Navigaatioelementit, kuten Valikot murupolut muut linkit

17 KÄYTTÖLIITTY- MÄN OSAT

18 KONVENTIO - SIVUN RAKENNE -PAGE-STRUCTURE/3-SITE-DESIGN.HTML

19 KÄYTTÖLIITTYMÄN OSAT EI VAKIINTUNEITA TERMEJÄ Kuvagalleria (kuvat näkyvät pienoiskuvina) Slider (kuva vaihtuu, joko automaattisesti tai klikattaessa) (diaesitys) Kuvakaruselli (ei saa päättyä) Bannerit ovat eri kokoisia, suorakaiteen muotoisia mainoksia.

20 KÄYTTÖLIITTYMÄN SUUNNITTELU PROJEKTIN ERI VAIHEISSA

21 SILMÄNSEURANTAA (NIELSEN) presenting-information.html

22 PROTOILU KÄYTTÖLIITTYMÄN SUUNNITTELUSSA Rautalankamalli Paperiprototyyppi kevyt ja erityisesti suunnittelun alkuvaiheessa tehokas menetelmä rautalangan testaamiseen ja iterointiin. Paperiprototyypissä käyttöliittymäsuunnitelma joko piirretään tai printataan paperille, ja käyttöliittymän toiminnallisuutta demonstroidaan vaihtamalla piirrosta tai sijoittamalla uusia paperinpaloja käyttöliittymään käyttäjän toiminnan mukaan. Paperiprototyypin hyviä puolia ovat sen edullisuus, nopeus sekä alhaiset tuotantokustannukset (kynä ja paperia). Huonona puolena paperi on aina paperia eikä välttämättä anna tarpeeksi realistista kuvaa käyttöliittymän todellisesta toimivuudesta. Lähde: Piirrosohjelmilla esim. Illustrator: Grid (Bootstrap), jonka päälle sijoitetaan suorakaiteet ( s.com/articles/abeginners-guide-towireframing-- webdesign-7399

23 KÄYTTÖLIITTYMÄN TARKENTUMINEN Sivukartta Informaatiorakenne, navigointi- tai valikkoratkaisu, typografia

24 KÄYTTÖLIITTYMÄN TARKENTUMINEN Elementtien visuaalinen korostaminen, harmaasävyillä

25 KÄYTTÖLIITTYMÄN TARKENTUMINEN Värit mukaan Ja vielä tarkemmin: uunnitelma.pdf Warriors/lu/dokumentit/testaus/ui.html

26 MUUTA PROTOILUUN Työkaluja: Pencil GUI tool Sketchflow in Expression Blend Balsamiq Gomockingbird Axure Ohjeita: Ulkoasun suunnitteluun apua: beginners-guide-to-wireframing--webdesign- 7399

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

28 NÄYTÄ SELKEILLÄ NAVIGOINTITOIMIN- NOILLA, MISSÄ KÄYTTÄJÄ ON JA ON OLLUT Koko www:n mittakaavassa Missä kohden sivustoa Selkeät ikonit, graafiset tunnusmerkit, sivujen titleelementit ja otsikot ja graafiset tai tekstipohjaiset yhteenvetosivut Kotisivulle tai päänavigointisivulle oltava helppo paluu Sivusto on pystyttävä tunnistamaan jokaiselta sen sivulta (voi olla logo, joka samalla linkki kotisivulle), samaten perusnavigointilinkit oltava jokaisella sivulla Varo umpikujasivuja

29 LINKIT APUNA Hypertekstilinkit - niiden värin muuttuminen käyttäjä ei käy useita kertoja samalla sivulla jos väri poikkeaa standardista, käyttäjä ei ymmärrä sen merkitystä Linkkejä Upotetut - lisätietoa Rakenteelliset - sivuston rakenne Mielleyhtymälinkit - katso myös Muuten kuin alleviivatulla tekstillä harkitusti

30 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 reagoi negatiivisesti asioihin, jotka eivät toimi totutulla tavalla selainohjelmat eivät pysty auttaman navigoinnissa sivustokartta klisee, jos siitä puuttuu Olet tässä