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.

xandy
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öä • -eikuvia 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! • -Lyhytkuvaus yhteisöstä ja sen toiminnasta  • -Tiivistämisenja kiteyttämisen taito • -Menesuoraan asiaan  • -Uusinasia etusijalle • -Unohdalatteudet  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 • -Yleistekstikaikille • -Yksityiskohtaisemmatlinkin taakse • Tekstin kiinnostavuus • Sisällön käytettävyys • -Kävijäntarpeet ja käyttötilanteet!  • -Abstraktistakonkreettiseen? • -Isostapieneen?

  8. Silmäiltävyys • Verkkotekstiä silmäillään  • -Nopeuson valttia  • -Verkkotekstinrakenteellisuus • -Hypertekstinhyödyntäminen • Vältä pitkiä tekstimassoja  • Pilko kokonaisuuksiin • Kolmen klikkauksen myytti • Hyödynnä sivun sisäisiä ankkurilinkkejä  • Ketä pdf palvelee?

  9. Tehokas otsikointi  • -Konkreettisetsanat, suoraviivaisuus • > hakukoneen osumaoptimointi • -Aktiivisetilmaisut, lukijan näkökulma • Lyhyet kappaleet • -Yksiasia per kappale • -Linkityslaajempiin kokonaisuuksiin • -Faktalaatikkokentät • Pääkohtien nosto esille • -Tärkeinalkuun • -”alleviivaukset” lukijaa varten • -lihavointi, luettelointi, numerointi

  10. Luettavuus • Muista ruudulta lukemisen hankaluus • -Lyhyysja tiivistyksen taito • Kiinnostavuus ja kiteytys • Osuvat otsikot ja väliotsikot • Tutut sanat, lyhyet virkkeet • Fonttivalinta • -Koko • -Pienaakkoset • -Unohdakursiivi, 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 • -Kokonaisiaasioita • -Nopeastisilmäiltäviä • -Käyttäjänkielellä -> selvitä, kysy • Sisäisen ja ulkoisen linkin erottaminen • -Tiedostomuodonilmaisu • -Avausikkunanilmoittaminen

  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? • -Kuvienkä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 • -Uudetpää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 • -Mitensivusto tukee viestinnällisesti yhteisön strategisia tavoitteita? • Projekti • -Aika • -Resurssit • -Suunnittelu • -Tavoitteet

  19. Projekti • Analyysit 10-15% • -Käyttäjälähtöisetmäärittelyt • -Strategiset tavoitteet • Suunnittelu 30-40% • -Miellekartatsuunnittelun avuksi • Toteutus 20-30% • -Sisällönluonti on prosessi • -Iteroiva testaus • Käyttöönotto 15-40% • -Jatkuvapäivitys ja kehitys • -Käytettävyydenarviointi

More Related