1 / 24

Verkkosivujen suunnittelu

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

donnel
Download Presentation

Verkkosivujen suunnittelu

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Verkkosivujen suunnittelu Tarja Chydenius 16.10.2007

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

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

  4. 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

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

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

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

  8. 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?

  9. 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

  10. 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

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

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

  13. 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

  14. 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

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

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

  17. 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

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

  19. 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

More Related