Datatekniikka ja viestintä - Web:

Kuvien käytöstä viestinnässä yleensä ja Webissä erityisesti

There's an English version of this document: How to use images in communication in general and on the Web in particular.

Johdanto

Tämä kirjoitus käsittelee kuvien käyttöä osittain yleisesti, mutta lähinnä Webin (World Wide Web, WWW) kautta harjoitettavaa julkaisemista ajatellen. Kuvalla tarkoitan yleisesti ns. graafista esitystä, joka voi olla esimerkiksi valokuva, muokattu valokuva, piirros, maalaus, kaavio, matemaattisen funktion kuvaaja tai tilastotietoa esittävä pylväsdiagrammi.

Arkisen asiakirjoittamisen oppaassani Kirjoita asiaa olen, kohdassa Käytä kuvioita harkiten, esittänyt ja perustellut eräitä yleisperiaatteita kuvien käytöstä:

Jos julkaisemisen päätavoite on jokin muu kuin tiedon välittäminen, esimerkiksi tavaroiden myyminen tai asenteisiin vaikuttaminen, saattaa olla syytä noudattaa muita periaatteita. Seuraavassa pyrin kuitenkin tarkastelemaan kuvien käyttöä yleisellä tasolla, ottaen huomioon myös sen, että kuvan tarkoitus ei ehkä lainkaan ole informaation välittäminen.

"Kuvia ei koskaan ole liikaa"

Maailmassa julkaistaan paljon tekstejä, joissa ei ole lainkaan kuvia, ja ne saattavat olla paitsi tylsän näköisiä myös niin epähavainnollisia, etteivät useimmat saa niistä selvää. Sellaista tyyliä saatetaan jopa pitää ihanteena esimerkiksi hallinnossa ja tieteellisessä julkaisemisessa. Ajatellaan ehkä, että kuvat eivät kuulu asiatekstiin lainkaan, vaan ne vain häiritsevät ja antavat mainosmaisen tai kosiskelevan vaikutelman. Luultavasti esimerkiksi useimmat lakimiehet järkyttyisivät sellaisesta ajatuksesta, että laki olisi kuvitettu.

Toinen äärimmäisyys, joka on varsin tavallinen Web-julkaisemisessa, on sellainen ajatus, että kuvia ei koskaan ole liikaa. Jos ei ole asiaan liittyvää kuvaa, pannaan mukaan asiaton, koska ajatellaan, että kuvaton dokumentti on tavattoman tylsä.

Väitetään, että yksi kuva sanoo enemmän kuin tuhat sanaa. Usein se pitääkin paikkansa. Vielä useammin yksi kuva johtaa harhaan enemmän kuin tuhat sanaa. Usein jutusta jää mieleen ennen kaikkea juuri sen kuvitus, ja jos kuvitus ei liitykään asiaan, viesti ei mene perille.

Seuraavassa etsin järkevää keskitietä äärimmäisyyksien väliltä. Tällöin on kysyttävä kuvien tarkoitusta.

Kuvien erilaisia tarkoituksia

Johdantona esitän seuraavan havainnollistavan esimerkin: Olettakaamme, että olen kiinnostunut nimen Vanamo alkuperästä. Tällöin olennaisin tieto on, että tämä erisnimi (jota käytetään sekä etu- että sukunimenä) perustuu yleisnimeen vanamo, joka tarkoittaa erästä kasvia. Jos tämmöinen tieto riittää, en tarvitse mitään kuvia. Mutta jos minua kiinnostaa vielä tietää, millainen kasvi on kyseessä, niin kuva on hyvin olennainen. Hyvästä kuvastahan voisin esimerkiksi heti tunnistaa, onko kasvi itse asiassa minulle tuttu eli olenko joskus nähnyt sellaisen vaikka en ehkä tiedä sen nimeä. Webissä olevassa dokumenttikokoelmassa Bilder ur Nordens Flora oleva vanamon esittely on tästä mainio esimerkki. (Siinä oleva kuva on pienehkö, mutta se toimii linkkinä isompaan kuvaan.) Pelkkien sanallisten selitysten avulla tätä on käytännössä mahdoton saavuttaa. Sanat voivat kyllä tukea tavoitetta esimerkiksi selostamalla, millaisissa kasvupaikoissa kasvia esiintyy tai missä osissa Suomea sitä on - joskin jälkimmäiseen tarkoitukseen kuva, tarkemmin sanoen levinneisyyskartta, olisi parempi.

Kuvien käytön tarkoitukset voidaan karkeimmalla tasolla jakaa kahtia: olennaisen asiasisällön esille tuomiseen ja kaikkeen muuhun. Seuraavassa on tarkempi jaottelu, jossa asiasisällön esille tuomiseen liittyvät kaksi ensimmäistä:

Korvaamaton kuva.
Tämä tarkoittaa kuvaa, joka esittää tietoa, jota on mahdotonta tai erittäin hankalaa esittää sanallisesti. Kuvaa siis ei voi korvata sanoilla, vaikka sanoilla voidaankin täydentää kuvan antamaa informaatiota ja vaikka kuvan ymmärtäminen voi vaatia paljonkin sanallisia selityksiä, esim. merkintöjen kuvauksia. Esimerkkejä ovat passivalokuva, karttapiirros jonkin paikan sijainnista, asunnon pohjapiirros ja kuva jonkin laitteen ohjauspanelista.
Sanallista esitystä tukeva kuva.
Sanallinen esitys on tällöin ehkä itsessäänkin periaatteessa ymmärrettävä ilman kuvan tukea, mutta kuva korostaa sen olennaisia osia, havainnollistaa sitä esimerkillä tms. Aivan mainio esimerkki tästä painetussa sanassa on TKK:n opintotoimiston julkaisema Tutkimusraportin kirjoittamisen opas, jossa keskeisiä periaatteita nasevasti havainnollistetaan humoristisilla ja lukijoiden (teekkarien ja diplomi-insinöörien) kulttuuritaustaan sopivilla, heitä puhuttelevilla piirroksilla. Ottaakseni esimerkin Webistä: Suomen Pétanque-Liiton sivuilla olevassa sääntölyhennelmässä on sanallisesti selitetty pistelaskun perusteet, ja tätä sitten olennaisesti tukee ja havainnollistaa selkeä kuva aiheesta.
Kuva katseenvangitsijana, mielenkiinnon herättäjänä.
Tällainen kuvien käyttö on erityisen tyypillistä mainonnalle; kuvalla ei tällöin välttämättä ole mitään tekemistä tekstin sisällön kanssa. Tuttu esimerkki on vähäpukeisten naisten käyttö milloin mitäkin tuotetta myytäessä.
Kuva tekstin tylsyyden katkaisijana, lukijan piristäjänä.
Monista ihmisistä on ikävystyttävää lukea pelkkää tekstiä, ja mikä tahansa kuva saattaa auttaa asiaa. Esimerkiksi sanomalehden sivu, jolla ei ole yhtään kuvaa, on varsin raskaan näköinen.
Kuva koristeena.
Tällainen käyttö on tietysti varsin lähellä edellä mainittua. Tyypillistä koristekuvan käyttöä Webissä on dokumentin taustan määrittely.
Tunnuskuva, symboli.
Tyypillinen tunnuskuva on firman logo. Tarkoituksena voi olla saada lukijan (katselijan) mieleen syntymään assosiaatio eli mielleyhtymä logon ja firman (ja sen tuotteiden) välille. Toinen tarkoitus voi olla esimerkiksi Web-sivujen "leimaaminen" tunnuskuvalla niin, että lukija heti näkee, minkä organisaation sivuista tai mihin aihepiiriin kuuluvista sivuista on kyse.
Kuva kiinnekohtana.
Tällä on käyttöä lähinnä laajoissa jutuissa, joihin lukija palaa useasti. Etsiessään tietoa kirjasta, jonka jo on lukenut, lukija saattaa helpommin löytää etsimänsä kohdan, jos hän muistaa, millainen kuva oli kyseisellä sivulla.
Kuva vireen ja tunnelman luojana.
Tyypillistä tällaista käyttöä on aiheeseen liittyvien kuvien käyttö esimerkiksi maantiedettä, elinympäristöjä ja historiaa koskevissa dokumenteissa. Tällöin kuva ei välttämättä suoraan liity tekstiin vaan se vain auttaa lukijaa eläytymään siihen maailmaan, josta teksti kertoo.
Nämä kuvien käyttötarkoitukset eivät suinkaan ole toisensa poissulkevia. Päinvastoin on eduksi, jos esim. tekstiä piristävät kuvat samalla antavat olennaista tietoa tai havainnollistavat tekstissä esitettyjä asioita.

Kuvien oikeasta ja väärästä käytöstä

Seuraavassa esitän kuvien käytöstä eräitä näkemyksiäni, pyrkien ottamaan huomioon edellä mainitut kuvien erilaiset käyttötarkoitukset.

Useimmiten on parasta jäsentää ja kirjoittaa teksti ensin ja sitten lisätä siihen kuvitus. Tällöin jutusta tulee luonnostaan sellainen, että sen olennaisin sisältö on esitettävissä pelkkänä tekstinä eli - käyttääkseni Web-yhteyksissä tavallista sanontaa - se on luettavissa myös tekstipohjaisilla katseluohjelmilla kuten Lynxillä.

Kuitenkin korvaamattomat tai lähes korvaamattomat kuvat ovat eri asemassa. Koska ne ovat erittäin olennainen osa esitystä, ne on otettava huomioon dokumentin perusrakenteessa. Juttujen hyvän suunnittelun keskeisiä seikkoja onkin se, että tekijä osaa tunnistaa, milloin kuva on välttämätön. Epäolennaisten kuvien kytkeminen dokumentin rakenteeseen on paha virhe, mutta ehkä vielä pahempi on se, että ei esitetä kuvaa asiasta, joka kerta kaikkiaan vaatii kuvitusta. Mitenkään harvinaista ei ole, että samassa työssä tehdään molemmat virheet. Jälkimmäinen virhe on helppo havaita lukijana.

Käytettäessä kuvaa koristeena on tärkeää, että kuva ei häiritse asiasisällön välittymistä. Puhdas koristekuvio, ornamentti, joka ei varsinaisesti esitä mitään, saattaa tällöin olla paljon parempi kuin esimerkiksi valokuva, joka saa lukijan kiinnittämään huomionsa kuvan eikä dokumentin aihepiiriin. Tämä koskee aivan erityisesti Web-dokumenttien taustakuvia.

Kuvia käytetään usein sillä perusteella, että kuva on konkreettinen. Mutta kaikessa konkretisoinnissa pitää muistaa, että konkreettisuus ei ole mitenkään yksiselitteisesti ja väistämättä hyvä asia. Se voi myös johtaa pahasti harhaan luodessaan liian konkreettisia ja yksipuolisia mielikuvia. Jos esimerkiksi dokumentti kertoo linnuista yleensä ja kuvituksena on vain valokuva varpusesta, niin se, mitä kuva varsinaisesti esittää, on erään lintulajin eräs yksilö eräässä tilanteessa ja eräässä valaistuksessa. Lukija ehkä ennestään tietää, että kaikki linnut eivät suinkaan ole varpusmaisia. Mutta silloin varpusen kuvalla on hänelle varsin vähän informaatiosisältöä. Parempi kuvitus voisi olla huolella valittu kokoelma piirroskuvia muutamista aivan erityyppisistä linnuista (esim. varpunen, varis, kotka, kuikka, kolibri ja strutsi). Tämäntapaisen monipuolisuuden huomioon ottaminen on sitä tärkeämpää, mitä oudompi aihepiiri on lukijalle ennestään, koska silloin kuvat olennaisimmin luovat mielikuvia aiheesta. Jos esimerkiksi haluamme kuvata jotakin lukijalle uutta teknistä laitetta, ei pidä kritiikittömästi kuvittaa juttua yhtä tuotemerkkiä esittävällä kuvalla.

Kuvateksteillä voi usein vähentää kuvien liiallisen konkreettisuuden aiheuttamia ongelmia. Kuvatekstiksi voi sopia esimerkiksi Eräs videonauhuri, XYZ-42, vuoden 1990 malli paremmin kuin pelkkä Videonauhuri.

Kuva on muutoinkin voimakas mielikuviin vaikuttamisen väline. Kuvaan suhtaudutaan yleensä kuvana todellisuudesta. Puhumme valokuvamaisuudesta tarkoittaessamme todellisuuden tarkkaa jäljennöstä. Mutta valokuvilla on helppo vääristää todellisuutta, jopa valehdella, vaikka kuvaa ei retusoitaisikaan. Ajatellaanpa aitoa valokuvaa, joka esittää työmiestä nojailemassa lapioonsa. Se epäilemättä antaa mielikuvan laiskuudesta. Mutta entäpä jos kyseessä on erityisen ahkeran miehen ainoa hengähdystauko pitkän, raskaan työrupeaman aikana?

Käytettäessä kuvia Webissä on otettava huomioon kuvien koko. Jos esimerkiksi Web-kotisivulla on suuri kokoelma isoja kuvia, niin sivu tuskin palvelee kovin hyvin. Tämä pätee erityisesti silloin, kun käyttäjällä on hidas yhteys ja hidas kone, mutta massiiviset kuvat voivat tuskallisen hitaita siirtymään verkon yli ja piirtymään ruudulle, vaikka yhteys olisi nopeakin. Kuvan koko vaikuttaa tietysti myös paperitulostuksessa. Tässä yhteydessä kuvan koko viittaa lähinnä kuvatiedoston kokoon tavuina. Kuvan fyysinen koko käyttäjän ruudulla on tietysti myös tärkeä toiselta kannalta: tarkoituksettoman suuri kuva ärsyttää. Kannattaa vakavasti harkita seuraavia vaihtoehtoja:

Mitä enemmän kuva kiinteästi liittyy tekstiin, sitä tärkeämpää on huolehtia siitä, että kuva ja teksti ovat yhteydessä toisiinsa. Jos niiden välillä on sisällöllinen yhteys, niiden välillä tulisi olla myös fyysinen yhteys. On varsin turhauttavaa lukea tekstiä, jossa käsitellään samaa asiaa kuin kuvassa 3.2 (johon tekstissä viitataan) mutta jonka kappaleiden välissä onkin kuva 3.1. Olosuhteista kuten kuvan koosta riippuu, kannattaako yhteys toteuttaa rinnakkaisuutena (esim. yhdellä palstalla teksti ja toisella kuva) vai päällekkäin. Jälkimmäisessä tapauksessa on pyrittävä johdonmukaisuuteen: voidaan menetellä joko niin, että teksti on dokumentissa aina ennen siihen liittyvää kuvaa, tai toisinpäin, mutta molempien tapojen käyttäminen sekaisin voi pahasti hämätä lukijaa. Myös sellainen tyyli, jossa on kiinteästi toisiinsa liittyvien tekstikappaleiden välissä kuva, on huono, dokumentin loogista rakennetta rikkova ja lukijaa hämäävä. On väärin vaatia lukijalta sellaista dokumentin jäsentämistä, joka on sen tuottajan asia.

Yleissääntönä sanoisin, että jos kuva vain havainnollistaa tekstiä yhdeltä kannalta ja yhdellä esimerkillä, on järkevää sijoittaa kuva tekstin jälkeen. Jos taas kuva esittää yleiskuvan aiheesta, esimerkiksi jonkin laitteen tai järjestelmän olennaiset osat kaaviona, sen sijoittaminen ennen tekstiä voi olla hyvin perusteltua; silloinhan kuva toimii orientaatioperustana tekstin ymmärtämiselle. Kummassakin tapauksessa kuvan sijoittaminen tekstin rinnalle voi olla perusteltua, jos se siihen hyvin mahtuu.

Edellä mainittu kuvan ja tekstin liittäminen toisiinsa on kieltämättä usein vaikeaa. Se saattaa vaikeuttaa tekstinkäsittelyä ja taittoa ja vaatia erikoisia temppuja ja "ylimääräistä" työtä. Kyseessä on kuitenkin työ, jolla on yleensä paljon suurempi merkitys dokumentin viestintäarvolle kuin esim. tekstin yksityiskohtien hiomisella, johon ihmiset usein tuhraavat paljon vaivaa.

Kun Web-dokumenteissa käytetään kuvia, kannattaa tarkoin harkita, miltä ne näyttävät sellaisella katseluohjelmalla, joka ei tue kuvia. Yleensä pitäisi Web-dokumentissa aina määritellä vaihtoehtoinen, tekstimuotoinen esitys kuvan tilalle. (Tämähän tehdään IMG-rakenteen ALT-määritteellä.) Ja tämä tulisi tehdä niin, että tekstimuotoisenakin dokumentti on mielekäs kokonaisuus, vaikkakin vähemmän vaikuttava ja ehkä vähemmän informatiivinenkin kuin kuvallinen. Jos tämä ei ole mahdollista eli jos kuvilla on itse sisällön kannalta olennainen merkitys, jota ei voida edes karkeasti esittää lyhyehköllä tekstillä, niin asiasta on syytä varoittaa (tekstillä!) näkyvästi heti dokumentin alussa, mieluiten myös kyseiseen dokumenttiin viittavien, muissa dokumenteissa olevien linkkien yhteydessä. Eräs mahdollisuus on liittää kuvan yhteyteen linkki dokumenttiin, joka sanallisesti selostaa kuvan sisällön. Sellainen sanallinen selostus saattaa olla hyödyllinen niillekin, joilla on mahdollisuus katsella kuvia. (Jos samasta asiasta on kaksi erityyppistä kuvausta, esimerkiksi kuvallinen ja sanallinen, niin se, joka ei ymmärrä jotakin kohtaa toisessa kuvauksessa saattaa paremmin ymmärtää vastaavan kohdan toisessa.)

Kuvia sanan laajassa merkityksessä ovat myös taulukot. Taulukoiden käytön ongelmia Webissä käsittelee laajahkosti Alan J. Flavellin dokumentti Tables on non-table browsers. Selkein ratkaisu siinä kuvattuihin ongelmiin on (ainakin toistaiseksi, kunnes Web-katseluohjelmat yleisesti tukevat taulukoita kohtuullisen hyvin) seuraava: Jos Web-dokumentissa käytetään taulukkoa, niin sen sisältämä tieto esitetään myös vaihtoehtoisella, tekstimuotoisella tavalla, käytännössä tavallisesti käyttäen "käsin muotoiltua" tekstiä PRE-rakenteen avulla. Jos taulukoita on dokumentissa vain yksi tai muutama, voidaan kunkin taulukon kohdalle kirjoittaa linkki toisaalta dokumenttiin, jossa asia on TABLE-rakenteella toteutettuna taulukkona, toisaalta dokumenttiin, jossa sama asia on PRE-rakenteella toteutetussa muodossa. Toinen vaihtoehto, joka on usein parempi varsinkin jos taulukoita on paljon, on tehdä koko dokumentista kaksi eri versiota.

Web-dokumenteissa on varsin tavallinen sellainen tyyli, jossa esitetään kuvilla erilaisia valintoja tekstikuvakkeilla (kuvamuodossa esitetyillä teksteillä) siis valikkojen eli menujen kohtia seuraavaan tapaan:


---TKK:n kotisivu---- ---Tiedon etsintä---- ----Yhteystietoja----
----Ajankohtaista---- --------WWW---------- ------Palaute--------
Tämä kieltämättä voi näyttää vaikuttavammalta kuin perinteisempi valikon toteutus: Mutta käyttäjä, jota valikko kiinnostanee ensi sijassa välineenä päästä käsiksi tietoihin, saattaa turhautua odotellessaan - tietoliikenteen taas kerran takellellessa - että kuvakevalikon kuvat latautuisivat.

Usein kai "kuvallisia painikkeita" käytetään sitä varten, että saataisiin useita valikon kohtia samalle riville. Usein, kuten edellä olevassa esimerkissä, tilansäästö on lähinnä kuvitteellinen. Lisäksi mahdollisuus sijoittaa useita kohtia samalle riville suorastaan houkuttelee ahtamaan yhteen Web-dokumenttiin aivan liian paljon asiaa.

Ja jos valikon useita kohtia halutaan samalle riville, se kyllä onnistuu tekstipohjaisillakin keinoilla:

TKK:n kotisivu   Tiedon etsintä   Yhteystietoja
Ajankohtaista    WWW              Palaute
Yleensä siis valikon kohdat kannattaa toteuttaa sanallisina, ei kuvilla. Poikkeuksena on sellainen tilanne, jossa kuvalla voidaan selkeästi ja yksiselitteisesti esittää, millaiseen tietoon valinta johtaa. Sellainen voi olla esimerkiksi valikon kohta, joka viittaa ensiapuaseman tietoihin (symbolina Punaisen ristin tunnus). Mutta on syytä tarkistaa tätä koskevat säännöt, ks. SPR:n sivustoa. Käyttäjän voi olla nopeampi hahmottaa kuvallisesti kuin sanallisesti esitetyt vaihtoehdot. Lisäksi kuvan voi ymmärtää, vaikka kielitaidon puutteen takia ei ymmärtäisi vastaavaa tekstiä. Mutta tilanteita, joissa tämä menetelmä toimii hyvin, on varsin vähän. Kuvat ovat usein monitulkintaisia, ja mm. kulttuuritaustojen erot voivat vaikuttaa tilanteeseen paljonkin. (Punainen ristikään ei ole universaali: sitä vastaava organisaatio islamilaisessa maailmassa on Punainen puolikuu, jonka tunnus on punainen kuunsirppi.)

Hyvin yleisesti organisaatiot tekevät Web-pääsivunsa näyttävyystarkoituksissa sellaisiksi, että niillä on paljon isoja kuvia, jotka tekevät sivujen latautumisen hitaaksi nopeillakin yhteyksillä. Esimerkkinä massiivisesti kuvitetuista sivuista voi mainita tasavallan presidentin sivut. Vaikka semmoisia paraatijulkisivuja tehtäisiinkin, kannattaa harkita, miltä ne tuntuvat sellaisesta käyttäjästä, joka on kiinnostunut nimenomaan tiedon etsinnästä ja siksi vierailee sivuilla useasti. Käytännöllisen pääsivun tarjoaminen vaihtoehtona paraatijulkisivulle - tietenkin nämä sivut toisiinsa linkittäen - voi olla erittäin hyvä ajatus.