Verkkosivujen suunnittelu Tarja Chydenius

Käytettävyys • Kaikkea edellä se-on/ • Jacob Nielsen ( 1) Opittavuutta 2) Muistettavuutta 3) Tehokkuutta 4) Virheettömyyttä 5) Tyydyttävyyttä

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

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

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

Etusivu • Verkkokirjoittaminen ( • 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  

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?

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?

• 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

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

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

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

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

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

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

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

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

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

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