Verkkosivujen suunnittelu Tarja Chydenius 16.10.2007.

Esitys aiheesta: "Verkkosivujen suunnittelu Tarja Chydenius 16.10.2007."— Esityksen transkriptio:

1 Verkkosivujen suunnittelu Tarja Chydenius 16.10.2007

2

3 Käytettävyys • Kaikkea edellä http://www.adage.fi/blogi/2001/kaytettavyys-mita- se-on/ • Jacob Nielsen ( www.useit.com) www.useit.com 1) Opittavuutta 2) Muistettavuutta 3) Tehokkuutta 4) Virheettömyyttä 5) Tyydyttävyyttä

4

5 Yhteisöilme • Yhteisön visuaalisen ilmeen noudattaminen • Look & feel -värimaailma -kuva- ja muotokieli -visuaalinen brändäys

6 Visuaalinen käytettävyys • Ruudun jako kenttiin -toimiva rakenne: osioiden sijoittelu, priorisointi -navigaatiovalikoiden erottuvuus, loogisuus -käyttäjäkohtaiset näkymät • Oikein valitut värit -Kontrastit   • Taustat: värit ja kuviot -erottuvuus, luettavuus

7 Kuvien käyttö • Kuvien valinta tukemaan sisältöä -ei kuvia kuvien takia  > lisäarvoa sisältöön   -havainnollistaminen   • Sopiva kuvaresoluutio -20 kb -kuvien sijoittelu • Alt-tekstit   • Kuvat linkkinä?

8

9 Etusivu • Verkkokirjoittaminen (http://viestintapiste.laurea.fi/verkkokirjoitus.htm)http://viestintapiste.laurea.fi/verkkokirjoitus.htm • Etusivu tärkein! -Lyhyt kuvaus yhteisöstä ja sen toiminnasta   -Tiivistämisen ja kiteyttämisen taito -Mene suoraan asiaan   -Uusin asia etusijalle -Unohda latteudet  ja tervetulotoivotukset  

10 Käyttäjälähtöisyys • Kävijän motivaatio -Tiedonhaku • Tiedon tarjonta ja organisointi: kävijän logiikka -Asiointi, palvelun saanti -Vuorovaikutus, ”hengailu” -Fiilistely (brändit!)   • Osiointi -Yleisteksti kaikille -Yksityiskohtaisemmat linkin taakse • Tekstin kiinnostavuus • Sisällön käytettävyys -Kävijän tarpeet ja käyttötilanteet!   -Abstraktista konkreettiseen? -Isosta pieneen?

11 Silmäiltävyys • Verkkotekstiä silmäillään   -Nopeus on valttia   -Verkkotekstin rakenteellisuus -Hypertekstin hyödyntäminen • Vältä pitkiä tekstimassoja   • Pilko kokonaisuuksiin • Kolmen klikkauksen myytti • Hyödynnä sivun sisäisiä ankkurilinkkejä   • Ketä pdf palvelee?

12 • Tehokas otsikointi   -Konkreettiset sanat, suoraviivaisuus > hakukoneen osumaoptimointi -Aktiiviset ilmaisut, lukijan näkökulma • Lyhyet kappaleet -Yksi asia per kappale -Linkitys laajempiin kokonaisuuksiin -Faktalaatikkokentät • Pääkohtien nosto esille -Tärkein alkuun -”alleviivaukset” lukijaa varten -lihavointi, luettelointi, numerointi

13 Luettavuus • Muista ruudulta lukemisen hankaluus -Lyhyys ja tiivistyksen taito • Kiinnostavuus ja kiteytys • Osuvat otsikot ja väliotsikot • Tutut sanat, lyhyet virkkeet • Fonttivalinta -Koko -Pienaakkoset -Unohda kursiivi, alleviivaukset, versaalikirjaimet • Virheettömyys

14 Tiedon tuoreus • Julkaisu- ja päivitystiedot näkyviin • Tuorein tieto ensimmäiseksi -etusivulle -tekstin kärkeen -listojen alkuun

15 Linkit • Oikea nimeäminen Ei: Lue lisää… Klikkaa tästä… Vaan: Ruokalistavaihtot -Kokonaisia asioita -Nopeasti silmäiltäviä -Käyttäjän kielellä -> selvitä, kysy • Sisäisen ja ulkoisen linkin erottaminen -Tiedostomuodon ilmaisu -Avausikkunan ilmoittaminen

16

17 Kokonaisuuden loogisuus • Osioiden hierarkiat -pääasialliset tietokentät -menut / navigaatio -mainokset • Standardien huomioiminen -navigaatiokäytänteet (esim. logo kotisivulle) -kenttien funktionaalinen sijoittelu   -lukijan silmäilykäytänteet   -sisällön rakenteisuus

18 Navigaatio • Navigaatiokokonaisuudet -3-7 asiaa kerralla -Välilehdet / menut? -Kuvien käyttö linkkeinä?   • Paikallistaminen   -missä kokonaisuudessa tai millä sivulla kävijä on -ns. murupolut -sivukartat

19 Linkit • Linkkien erottuminen -värit / fontit / alleviivaukset? -avatun linkin erottuminen avaamattomasta • Sopiva määrä -Sivulaatikot • Kokonaisuuden hallinta -Rakenteellisuus -Avausikkunat

20

21 Toimivuus • Näytön resoluutioiden huomioiminen • Kuvia harkiten -Resoluutiot -> latausajat -Sijoittelu -> latauksen odottelut • Laitteistovaatimukset -Selainoptimointi -Uudet päätelaitteet -Fonttivalinta • Sisältö ennen teknisiä kikkailuja!  

22 Toteutustekniikka • Kuka tekee? -tilaaja / tekninen toimittaja • Tekninen toteutus -koodaus -www-editorit -sisällönhallintajärjestelmät • Miten hakukone löytää sivut?   -hakukoneoptimointi -maksullinen näkyvyys

23 Muuta tärkeää • Lähtökohta -Miten sivusto tukee viestinnällisesti yhteisön strategisia tavoitteita? • Projekti -Aika -Resurssit -Suunnittelu -Tavoitteet

24 Projekti • Analyysit 10-15% -Käyttäjälähtöiset määrittelyt -Strategiset tavoitteet • Suunnittelu 30-40% -Miellekartat suunnittelun avuksi • Toteutus 20-30% -Sisällön luonti on prosessi -Iteroiva testaus • Käyttöönotto 15-40% -Jatkuva päivitys ja kehitys -Käytettävyyden arviointi