Sisällön suunnittelu

1. Sisällön suunnittelu Lähde Jacob Nielsen: WWW-käyttöliittymän suunnittelu

2. Vaihtoehdot • Informatiivisuus • www.vr.fi • Houkuttelevuus • www.olvi.fi • ”hyvä kohde” • Tiedon keruu mahdollisista asiakkaista ”markkinointitutkimus” • ilmaiset sähköpostit

3. Mitä käyttäjä tekee, kun hän tulee sivulle • 1. Katsoo sivun suurinta sisältöaluetta • otsikot ja muut viitteet • 2. Päättää, jääkö sivulle • Tehtävä: Intranet-sivusto • 10 000 työntekijää, tuntikustannus 45 €/hlö • etusivulla otsikko väärin - laske kustannukset • kaikki pohtivat 5 sekuntia otsikon merkitystä • 10 % lukee uutisen, vaikkei siitä ole heille hyötyä • työntekijä lukee 30 sekuntia kun huomaa hyödyttömyyden

4. 3 perussääntöä • Kirjoita ytimekkäästi (vain puolet sanamäärästä, jota paperilla) • Kirjoita teksti silmäiltäväksi • lyhyitä kappaleita • alaotsikoita • luetteloita • Jaa pitkä sivu hypertekstin keinojen avulla useammille sivuille

5. Kirjoita ytimekkäästi • lukunopeus näytöltä 25% hitaampi kuin paperilta • helpottuu tulevaisuudessa • 300 dpi:n näyttö • kielenhuolto • vähintään ohjelmallinen kieliasun tarkistus • oikoluku • huippuluokan organisaatiot - kielikonsultti

6. Sisällön asenne • Persoonallisuus • käyttäjät suosivat sivuja, joilla on jonkin verran huumoria ja asennetta • käyttäjät vastustavat kaikkea, mikä tuntuu yritykseltä vaikuttaa heihin markkinointimielessä

7. Silmäiltävyyshttp://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlSilmäiltävyyshttp://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html • 79 % käyttäjistä silmäilee uuden sivun joka kerta, vain harva lukee sen sana sanalta • testaus http://www.useit.com/papers/webwriting/writing.html • vertailukohde 0% (control) • Tiivistetty 58% (concise) • Silmäiltävä 47% (scannable) • Objektiivinen 27% (objective) • Yhdistelmä 124% (combined)

8. Johtopäätöksiä • Artikkelissa pitää olla kaksi tai jopa kolme otsikoinnin tasoa • Otsikon tärkeämpää olla merkitsevä kuin näppärä • Usa Today - Twosome??? • Yhtenäisinä toistuvat tekstikokonaisuudet pilkotaan luetteloiden ja muiden vastaavien ulkoasukeinojen avulla pienempiin osiin • Käyttäjän huomio kiinnitetään tärkeisiin sanoihin korostamalla. Sanojen on syytä olla eri värisiä kuin linkit

9. Selkeä kieli • Päälleen käännetty pyramidi • Kappaleen aihe on hyvä esitellä heti ensimmäisessä lauseessa • Yhdessä kappaleessa vain yksi ajatus • Lauserakenteiden tulee olla yksinkertaisia • Varo kielikuvia • Varovaisesti huumoria - varo erityisesti sanaleikkejä - ulkomaiset käyttäjät eivät välttämättä osaa kieltä hyvin

10. Sivun paloittelu • Lyhentäminen puuttumatta sisältöön • jakamalla teksti hyperlinkeillä yhdistettyihin itsenäisiin osiin • Laaja ja yksityiskohtainen taustamateriaali • alasivuille • lukijoiden vähemmistöä kiinnostava informaatio linkin välityksellä • Pitkää lineaarista tekstiä ei saa jakaa • hidastaa lukemista • hankaloittaa tulostamista

11. Vieritys • Nykyään lukijat vierittävät (aikaisemmin 1994, 1995 vain 10 %) • Sivujen pitää olla suhteellisen lyhyitä • tärkeimpien linkkien pitää näkyä yleisimmillä monitoreilla ilman vierittämistä

12. Sivujen nimeäminen • Hakutoiminnon käyttäjälle sivusto näyttäytyy vain nimenä tulossivulla • Sivun nimi mikrosisältö, sen tulee olla osuva (40 - 60 merkkiä) • Eri sivuilla eri nimet • Nimen tulee helpottaa silmäilyä • Tervetuloa Yritys X:n kotisivulle vs Yritys X • englanninkielisissä sivuissa artikkelit pois • Samalle sivulle osoittava linkki hämää

13. Otsikointi • Verkossa otsikot usein yksin ilman asiayhteyttä • Otsikon tulkitseminen ympäröivän tiedon avulla vaikeaa • Otsikon pitää olla itsenäinen yksikkö (vrt sähköpostiviesti)

14. Ohjeita otsikointiin • Artikkelin sisältö selitettävä käyttäjän kokemuspiiriin kuuluvilla sanoilla • Selkeä ja yksinkertainen kieli (pois sanaleikit ja nokkeluus) • On virhe otsikoida siten, että käyttäjä valitsee tekstin vain saadakseen selville mistä on kysymys • Artikkelit pois englanninkielisistä otsikoista • Ensimmäisen sanan pitää olla tärkeä ja sisältää käyttäjän kannalta hyödyllistä informaatiota • Kaikkien sivujen nimeä ei kannata aloittaa samalla sanalla

15. Luettavuus • tekstin ja taustan värien välillä mahdollisimman suuri kontrasti • paras: musta teksti valkoisella taustalla • huonoin: vaaleanpunainen teksti vihreällä taustalla • tekstin taustaksi yksi ainoa väri tai hyvin rauhallinen taustakuvio • Käytettävän kirjasinkoon pitää olla riittävän suuri • Tekstin on pysyttävä paikallaan • Tekstit on parasta tasata vasempaan reunaan • muutaman rivin tasaus antaa ilmettä, mutta toimii tehokeinona vain, jos sitä ei ole käytetty paljoa • Nykyisillä monitoreilla pääteviivaton kirjasin • muutoin luettavampi pääteviivallinen • jos pistekoko 9 tai pienempi, pääteviivaton • SUURAAKKOSET HIDASTAVAT LUKUNOPEUTTA 10 %

16. Online-dokumentaatioIhmiset eivät lue ohjeita vapaaehtoisesti • Käyttöliittymän tulisi olla niin helppo, että dokumentaatiolle ei ole tarvetta • Intranet- ja Ekstranet-ratkaisuissa käyttäjille tarjotaan monimutkaisempia ratkaisuja • painettuja ohjeita, oltava myös sähköisessä muodossa • Vaativa tehtävä

17. Online-dokumentaation perussäännöt • Tietoa voitava etsiä • Paljon esimerkkejä • Tehtävään keskittyminen - kuinka toimitaan vaihe vaiheelta • Tarjoa käyttäjälle lyhyt kuvaus järjestelmän rakenteesta - usein kaavio mukana • Kaikki vaikeaselkoiset käsitteet ja termit liitetään hypertekstilinkeillä sanastoon • Lyhyesti...

18. Multimedia • Muista käyttää ainakin vuoden vanhaa versiota • Vasteaika • tiedoston koko ja muoto sulkeissa linkin perään, jos lataaminen kestää yli 10 sekuntia useimmilla käyttäjillä (huomautus siis yli 50 kt:n kokoisiin tiedostoihin) • videon pituus ja tiedostomuoto, muutama kuva videosta • käyttäjälle kannattaa kirjoittaa lyhyt luonnehdinta tarjolla olevasta materiaalista

19. Kuvat • Yksi kuva vastaa tuhatta sanaa • Latausajassa yksi kuva vastaa kahta tuhatta sanaa

20. Kuvat • minimoi • pois kuvina esitetyt tekstit • pois perusteeton kuvitus • kuvat tuotteista • tuotesivulle pieni kuva • erikseen kuvasivut • esimerkki asunnon myyntisivusta • http://www.etusivu.com

21. Pienennys • Rajaa tarpeeton • Skaalaa (resoluutio,kuvan koko)

22. Animaatio • Ihmisen huomio liikkuvaan kuvaan - saaliseläimen vaistotoiminto • Yleisesti ottaen mahdollisimman vähän • Esimerkkinä liikkuva logo ja keskittyminen asiaan • Animaatio saa liikkua vain muutaman kerran ja sitten pysähtyä

23. Animaation käyttöalueet • Siirtymien välisen jatkuvuuden osoittaminen • Siirtymän suunnan osoittaminen • Ajan myötä tapahtuvan muutoksen esittäminen • http://geochange.er.usgs.gov/sw/impacts/hydrology/water_use/wuir.htm • Näytön tehokas hyödyntäminen • Graafisten esitysten tehostaminen • Kolmiulotteisten rakenteiden havainnollistaminen • http://www.virtualhelsinki.net/helsinkipanoraama/kansallismuseo.html • Huomion kiinnittäminen

24. Videot • Pyri välttämään (hidasta) • Käyttöalueet • tv-ohjelmien, elokuvien tms medioiden mainostamiseen • puhujan persoonallisuuden esittely (jos puhuja ON persoonallinen) • liikkeen esittäminen (ei ohjelmia) • Huono äänenlaatu usein heikentää videota • Virtausvideo huono, hyödyllistä käyttäjä odottaa kauemmin

25. Ääni • Äänitteiden esittäminen • Sanojen ääntämisen opettaminen • Hiljaisten taustaäänien käyttö • Käyttäjällä oltava mahdollisuus ottaa äänet pois päältä • Laadukkaasti toteutettu äänimaailma muodostaa merkittävän osan kokemuksesta • napsaus painiketta napsautettaessa • lähestyvien ja loitontuvien äänien käyttö navigaatioavaruudessa liikuttaessa • www.katumuisti.net