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

Esitys aiheesta: "Lähde Jacob Nielsen: WWW-käyttöliittymän suunnittelu"— Esityksen transkriptio:

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

2 Vaihtoehdot Informatiivisuus Houkuttelevuus
Houkuttelevuus ”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 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ävyys http://www. webstyleguide
79 % käyttäjistä silmäilee uuden sivun joka kerta, vain harva lukee sen sana sanalta testaus 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 ( 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-dokumentaatio Ihmiset 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 kuvat tuotteista pois kuvina esitetyt tekstit
pois perusteeton kuvitus kuvat tuotteista tuotesivulle pieni kuva erikseen kuvasivut esimerkki asunnon myyntisivusta

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 Näytön tehokas hyödyntäminen Graafisten esitysten tehostaminen Kolmiulotteisten rakenteiden havainnollistaminen 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