Sisällön suunnittelu

Lähde Jacob Nielsen: WWW-käyttöliittymän suunnittelu

Vaihtoehdot

Informatiivisuus– www.vr.fi

Houkuttelevuus– www.olvi.fi– ”hyvä kohde”

Tiedon keruu mahdollisista asiakkaista ”markkinointitutkimus”– ilmaiset sähköpostit

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ö sivulleTehtä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

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

Kirjoita ytimekkäästi

lukunopeus näytöltä 25% hitaampi kuin paperiltahelpottuu tulevaisuudessa– 300 dpi:n näyttö

kielenhuolto– vähintään ohjelmallinen kieliasun tarkistus– oikoluku– huippuluokan organisaatiot - kielikonsultti

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ä

Silmä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 sanaltatestaus 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)

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

Selkeä kieli

Päälleen käännetty pyramidiKappaleen aihe on hyvä esitellä heti ensimmäisessä lauseessaYhdessä kappaleessa vain yksi ajatusLauserakenteiden tulee olla yksinkertaisiaVaro kielikuviaVarovaisesti huumoria - varo erityisesti sanaleikkejä - ulkomaiset käyttäjät eivät välttämättä osaa kieltä hyvin

Sivun paloitteluLyhentä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

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ä

Sivujen nimeäminenHakutoiminnon käyttäjälle sivusto näyttäytyy vain nimenä tulossivullaSivun nimi mikrosisältö, sen tulee olla osuva (40 - 60 merkkiä)Eri sivuilla eri nimetNimen tulee helpottaa silmäilyä– Tervetuloa Yritys X:n kotisivulle vs Yritys X– englanninkielisissä sivuissa artikkelit pois

Samalle sivulle osoittava linkki hämää

Otsikointi

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

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

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 %

Online-dokumentaatioIhmiset eivät lue ohjeita vapaaehtoisesti

Käyttöliittymän tulisi olla niin helppo, että dokumentaatiolle ei ole tarvettaIntranet- ja Ekstranet-ratkaisuissa käyttäjille tarjotaan monimutkaisempia ratkaisuja– painettuja ohjeita, oltava myös sähköisessä

muodossa

Vaativa tehtävä

Online-dokumentaation perussäännöt

Tietoa voitava etsiäPaljon esimerkkejä

Tehtävään keskittyminen - kuinka toimitaan vaihe vaiheeltaTarjoa käyttäjälle lyhyt kuvaus järjestelmän rakenteesta - usein kaavio mukanaKaikki vaikeaselkoiset käsitteet ja termit liitetään hypertekstilinkeillä sanastoonLyhyesti...

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

Kuvat

Yksi kuva vastaa tuhatta sanaaLatausajassa yksi kuva vastaa kahta tuhatta sanaa

Kuvatminimoi– pois kuvina esitetyt tekstit– pois perusteeton kuvitus

kuvat tuotteista– tuotesivulle pieni kuva– erikseen kuvasivut– esimerkki asunnon myyntisivusta

• http://www.etusivu.com

Pienennys

Rajaa tarpeetonSkaalaa (resoluutio,kuvan koko)

Animaatio

Ihmisen huomio liikkuvaan kuvaan - saaliseläimen vaistotoimintoYleisesti ottaen mahdollisimman vähän

• Esimerkkinä liikkuva logo ja keskittyminen asiaan

Animaatio saa liikkua vain muutaman kerran ja sitten pysähtyä

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

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ää videotaVirtausvideo huono, hyödyllistä käyttäjä odottaa kauemmin

Ääni

Äänitteiden esittäminenSanojen ääntämisen opettaminenHiljaisten 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