6. SUUNNITTELUN TEORIAA II

Suunnittelun teorian toisessa osassa keskitytään kirjasin tyyliä, grafiikkaa eli kuva-aineistoa ja www-sivujen äänen käyttöä liittyviin asioihin. Suunnittelun teorian toinen osa täydentää ensimmäisessä osassa esitettyjä asioita ja siksi on tärkeää, että opiskelija ymmärtää osien liittyvän kiinteästi toisiinsa.

6.1. Fontti - minkä kirjasintyylin valitset ja miksi?

Kun tietoa välitetään netissä on tärkeää muistaa, että tekstin on oltava kaikilta ominaisuuksiltaan luettavaa. Ensinnäkin tekstin on oltava tarpeeksi isoa, jotta se palvelisi myös heikompinäköisiä www-sivustoilla vierailijoita. Esimerkiksi tämä lukemasi teksti on kooltaan (vain) 9pt ja fontti on nimeltään Verdana. Otsikossa on käytetty fonttina Trebuchet MS, jonka koko on 12pt. Luettavuudeltaan tekstin koko on sopivinta ollessaan 12-16pt. Suunnitellessasi www-sivuja huomioi, etteivät kaikki sivustoilla vierailevat ihmiset omaa terävintä näkökykyä tai jaksa tarkentaa silmillään pientä tiheää tekstiä.

Luettavuutta helpottaa huomattavasti myös se, että tekstin jakaa sopiviin osiin, kappaleisiin. Liian pitkät ja tiheät tekstit aiheuttavat sen, että lukijan katse hyppää helposti rivien ylitse - tällöin lukijalle saattaa syntyä hyvinkin virheellisiä tai puutteellisia käsityksiä www-sivuilla esitetyistä asioista. Toisaalta tekstin poukkoilevuus ja hajanaisuus häiritsee lukijaa ihan yhtä paljon.

Tietysti monet erilaiset fonttityylit houkuttelevat kikkailemaan ja kokeilemaan, mutta muista, että yksinkertaiset päätteettömät fontit ovat luettavuudeltaan kaikkein parhaimpia. Päätteet tekevät tekstistä koukeroista ja jälleen se, rasittaa lukijan silmiä enemmän kuin yksinkertaisemmat fontit.

Luonnollisesti ns. päätteettömiä fontteja on useampiakin, mutta fonttien valinnassa on huomattava myös se, että fontit latautuvat lukijan näytölle hänen omalta tietokoneeltaan. Jos lukijalla ei ole koneeseen asennettuna juuri sinun määrittelemääsi fonttia voi sivuston ulkoasu - layout - näyttäytyä hänelle hyvinkin erilaisena, kuin mitä sinä sivustoa suunnitellessasi olet tarkoittanut. Siksi käytä tekstissäsi perinteisimpiä fontteja, jotka kuuluvat yleisemmin käytettyihin kirjasintyyleihin.

Esimerkkejä päätteettömistä ja päätteellisistä fonteista

Kuten varmasti edellä olevasta värejä käsittelevästä tekstistä huomasit, värillinen teksti heikentää yleensä luettavuutta. Huomio siis tekstin värin soveltuvuus taustaansa. Seuraavasta linkistä löydät sivulta kaksi (pdf-tiedosto) selkeän taulukon värillisen teksti ja värillisten taustojen erilaisista yhdistelmistä:

Värillinen teksti värillisellä taustalla

Käytä kirjasintyylissä vain kahta fonttikokoa ja -tyyliä. Voit tarvittaessa boldata eli vahventaa tai laittaa kursiivilla eli vinoon tai alleviivata tekstin kohtia joita haluat painottaa.  Huomioi kuitenkin, että näidenkin tyylien liiallinen käyttö luo sivustoille sekavan vaikutelman ja alleviivattua tekstiä luullaan helposti hyperlinkiksi vaikkei se sellainen olisikaan. Kun muistat nämä asiat  sivustot säilyvät käyttävyydeltään parempina. Jos joskus poikkeuksellisesti haluat kiinnittää erikoisella tekstillä johonkin huomiota, toteuta tekstisi kuvana (silloin se myös lautautuu käyttäjän koneelle varmemmin), mutta muista olla säästeliäs tässäkin.

Sivun alkuun >

6.2. Grafiikka - itsetarkoitus vai tarkoitusta etsien?

Jokainen muistaa, että yksi kuva kertoo enemmän kuin tuhat sanaa. Tämä pitää paikkaansa myös www-sivuilla sekä onnistuessaan että epäonnistuessaankin. Suhtaudu siksi kuva-aiheiden valintaan kriittisesti. Kuva-aineistoa sivustoille laittaessasi, mieti millaiset kuvat puhuttelevat kohderyhmääsi parhaiten. Tällöin sinun on pohdittava sekä kuvien määrää, sisältöä että sen kokoa ja tarkkuutta.

Sanallista esitystä tukevat tai selventävät kuvat havainnollistavat onnistuessaan sivujen tarkoitusta.  Toisaalta kovia asioita esille tuovaa tekstiä voi inhimillistää kuvavalinnoin. Inhimillistäviä asioita kovien arvojen maailmaan tuovat hyvin voivien ja tyytyväisten ihmisten kuvat, sekä karva- tai höyhenpeitteisten eläinten kuvat. Eläinten inhimillistäminen, eli sijoittaminen perinteisesti ihmisten tekemien asioiden äärelle, tuo pehmetyttä.

Metaforien eli vertauskuvien (kuvasymbolien) käytössä kannattaa olla varovainen, sillä ne eivät välttämättä käsitteinä avaudu kaikille www-sivulle tuleville vierailijoille samalla tavalla. Kuva ja sitä selittävä teksti täydentävät paremmin toisiaan, jos metaforia nimenomaisesti haluaa käyttää.

Esimerkki siitä, että emme ymmärrä symboleja samalla tavalla.

Animaatioiden (liikkuvien kuvien) käyttö houkuttelee usein aloittelevaa suunnittelijaa. On kuitenkin muistettava, että animaatiot varastavat yleensä sivustoilla kaiken huomion. Tällöin www-sivustoille tullut vierailija ei ehkä huomioikaan sivustojen sisällön keskeisimmiksi ja tärkeimmiksi asioiksi määrittelemiäsi asioita. Joten aloittelevan suunnittelijan kannatta jättää animaatiot kokonaan laittamatta suunnittelemilleen sivustoille ja kokeneemmankin suunnittelijan kannattaa huomioida tarkasti se, mitä hän animaatioiden avulla oikeastaan haluaakaan korostaa. Lisäksi animaatiot hidastavat sivustojen latautumista ja tämä puolestaan heikentää sivustojen käytettävyyttä.

• Muistathan, että tekijänoikeudet rajoittavat kuva-aineiston käyttöä.

6.3. Ääni - tulla kuulluksi tai sitten ei?

Äänen merkityksellisyys korostuu myös internetissä yhä enemmän. On kuitenkin tärkeää suorittaa omalla kohdallaan sivustoja suunniteltaessa pohdinta siitä, että mitä lisäarvoa ääni tuo sivustoillesi, jos kaikki eivät sitä pysty kuulemaan. Jos ääni tuo lisä arvoa www-sivuillesi, mieti mitä tuo lisäarvo on. Ääni voi olla musiikkia, puhetta tai muita tausta ääniä. Pohdi: "Pitääkö suunnittelemillesi www-sivuille tulleen ihmisen kuulla äänet, mitä www-sivuilla esitetään, jotta hän ymmärtää koko viestin sisällön?" Kuuletko sinä tämän? Äänitiedostojen käyttö on samalla tavalla rajoitettua kuin kaiken muunkin tekijänoikeuden suojalla varustetun aineiston.

Tämä linkki vie ilmaisia äänitiedostoja sisältävälle sivustolle.

Sivun alkuun >

Tehtävä Moodlessa