SIVUSTON SUUNNITTELU Informaatiorakenne ja navigointi
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
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 )
WEB-TUOTANNON PROSESSI Katso myös http://webstyleguide.com/wsg3/2-universal-usability/6-development-cycle.html
YLEISOHJEET Ready, fire, aim Stay away from visual design until everything else is planned Small is good
SIVUSTON RAKENNE Tarkoitus osoittaa käyttäjän kulloinenkin sijainti ja tarjolla olevat liikkumisvaihtoehdot suhteessa informaatioavaruuteen missä liikkuminen tapahtuu Rakenteita http://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
HIERARKKINEN
LINEAARINEN (+ LOOGINEN JONO)
WEB-TYYLINEN
SIVUSTOKARTTOJA TYÖN ERI VAIHEISSA INFORMAATIOARKKITEHTUURI SEKÄ TIEDOSTO- JA KANSIORAKENNE http://webstyleguide.com/wsg3/3-information-architecture/4- presenting-information.html Työkaluja piirtämiseen: Illustrator, Visio
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
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
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
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
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 10 000 eriaiheista sivua) www.sun.com Pyri yksinkertaiseen navigointiin
KÄYTTÖLIITTYMÄN OSAT Hakutoiminnot Logo Verkkolomakkeet Tekstit Ikkunat Erilaiset kuvakkeet Painikkeet Kuvat ja muut visuaaliset elementit Navigaatioelementit, kuten Valikot murupolut muut linkit
KÄYTTÖLIITTY- MÄN OSAT http://logicpool.com/archives/235
KONVENTIO - SIVUN RAKENNE HTTP://WEBSTYLEGUIDE.COM/WSG3/6 -PAGE-STRUCTURE/3-SITE-DESIGN.HTML
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.
KÄYTTÖLIITTYMÄN SUUNNITTELU PROJEKTIN ERI VAIHEISSA
SILMÄNSEURANTAA (NIELSEN) http://webstyleguide.com/wsg3/3-information-architecture/4- presenting-information.html
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: https://gofore.com/protoile-se-parempaakayttoliittymasuunnittelua-prototyyppien-avulla/ Piirrosohjelmilla esim. Illustrator: Grid (Bootstrap), jonka päälle sijoitetaan suorakaiteet (http://webdesign.tutsplu s.com/articles/abeginners-guide-towireframing-- webdesign-7399
KÄYTTÖLIITTYMÄN TARKENTUMINEN Sivukartta Informaatiorakenne, navigointi- tai valikkoratkaisu, typografia
KÄYTTÖLIITTYMÄN TARKENTUMINEN Elementtien visuaalinen korostaminen, harmaasävyillä
KÄYTTÖLIITTYMÄN TARKENTUMINEN Värit mukaan Ja vielä tarkemmin: http://sovellusprojektit.it.jyu.fi/kaki/pdf/kayttols uunnitelma.pdf http://www.soberit.hut.fi/tik-76.115/99-00/palautukset/groups/e- Warriors/lu/dokumentit/testaus/ui.html
MUUTA PROTOILUUN Työkaluja: Pencil GUI tool Sketchflow in Expression Blend Balsamiq Gomockingbird Axure Ohjeita: https://design.google.com/ Ulkoasun suunnitteluun apua: http://webdesign.tutsplus.com/articles/a- beginners-guide-to-wireframing--webdesign- 7399
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)
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
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
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ä