Kirjoittaja Pekka Nikrus on AD Satama Interactivessa.
Art Director, AD, on vastuussa siitä, että projektin lopputulos näyttää hyvältä ja tukee brändiä. Hänen vastuualueitaan ovat värit, kuvitus, merkit ja muodot, asettelu ja typografia. Hän on taiteilija, joka suunnittelee linjat ja visioi ”visut” eli kaiken sen, joka tekee lopputuloksesta ulkonäöllisesti uskottavan ja haluttavan.
Samalla tavalla kuin hyvällä printtimedian AD:lla on ymmärrys, miten eri paperit toimivat, miten värit reagoivat, mitä hauskaa rasterilla voi tehdä ja miten painokone toimii, olisi nettikollegan ymmärrettävä vähintään yhtä hyvin oman mediansa erityisominaisuudet.
Muste kuivuu ja paperin koko pysyy, joten printti-AD:n työ saavuttaa joskus lopullisen muotonsa. Netti-AD:n riesana taas on useita muuttujia, joita on mahdotonta kontrolloida. Näytön ja selainikkunan koko sekä käytetty tekniikka vaihtelevat ja värejä on paljon, mutta ne eivät ehkä ole sitä, mitä niiden on tarkoitettu olevan. Viestin vastaanottajalla, käyttäjällä, ei ehkä ole jotain tiettyä fonttia tai selainlaajennusta. Lista eroista on pitkä.
Yhdestä on moneksi
Ehkä tärkein ero kollegoiden välillä on kohderyhmä – he, jotka vastaanottavat viestin. Kaikella viestinnällä on vastaanottaja, mutta verkkopalveluiden vastaanottajat ovat monimuotoisempia. Siinä missä printtipuolella erityisryhmiä, esimerkiksi näkörajoitteisia, yleensä lähestytään omilla versioilla ja jopa eri medioilla (esim. äänikirjat), rakennetaan nettipalveluita sopiviksi mahdollisimman monelle käyttäjälle.
Tämä on järkevää, koska se on mahdollista. Järkevää myös siksi, että se on ylläpidon kannalta helpompaa, ja siksi, että sitä on helpompi markkinoida.
Kohderyhmä ei muutu, vaikka vastaanottaja käyttäisi palvelua läppärillä, kännykällä tai puhesyntetisaattorin avulla. Miksi siis samalle kohderyhmälle pitäisi tehdä useampi eri palvelu? Siihen ei ole syytä. Tätä on saavutettavuus. Tämä on nykyaikaa.
Look & feel: miltä se tuntuu
Tuntuman säilyttäminen mediasta toiseen on osa netti-AD:n työtä. Siinä missä palvelun pitää tukea brändiä kannettavalla tietokoneella, pitää sen tehdä sitä myös hyvin pienellä näytöllä. Tuntuman pitää olla sama myös silloin, jos viestin vastaanottaja ei näe kuvia tai käyttää omaa tyylitiedostoaan. Jos palveluiden tuntuma ja yleisilme on sama, on työ tehty oikein. Tuntuma ja brändin tukeminen ei riipu kuitenkaan pelkästään ulkonäöstä. Käytettävyys on tärkeää. Toimiiko palvelu niin kuin käyttäjä haluaa?
Vaikka netti-AD:t ovat suuria taiteilijoita ja visionäärejä, jotka luovat ”kuuleja visuja ja fänsiä grafiikkaa”, olisi kuitenkin hyvä, että hekin, hyvien printtikollegoidensa tapaan, olisivat kavereita painokonehoitajan kanssa. Ei niinkään siksi, että AD:n tarvitsisi oppia käyttämään painokonetta, vaan siksi, että painokoneen hallitseva henkilö osaa paljon mediaan olennaisena osana kuuluvia asioita, jotka AD:nkin on hyvä tietää. Painokoneenhoitajia tässä mediassa ovat tietenkin koodarit. He toteuttavat käyttöliittymän, jonka ulkonäön AD on suunnitellut. Koodari on AD:n kaveri.
Näyttää hyvältä
Vaikka saavutettava sivusto ei tarkoita vuoden 1997 insinöörisivustoa, jättää moni AD asian toisten huoleksi. Eihän printti-AD:n tarvitse miettiä asiaa. Miksi siis meidän nettipuolella toimivien pitäisi? No siksi, että se on olennainen osa sitä mediaa, joka meidän on osattava. Meidän ei tarvitse miettiä kohdelakkaa, nuuttauksia ja preeglauksiakaan. Sen sijaan on hyvä miettiä sisältöä ja sisällön tärkeyttä. Sitä että tärkeät asiat erottuvat.
Ulkonäön tarkoitus ei ole voittaa palkintoja, vaan sen tarkoitus on tuoda sisältö selkeästi esiin. Hyvässä palvelussa ulkonäkö tukee sisältöä. Hyvin rakennetussa palvelussa ulkonäkö on eriytetty sisällöstä kokonaan. Tämä vaatii osaamista. Se on sitä median hallitsemista ja sen ymmärtämistä.
Suunnittele palvelun perusteet kaverisi, koodarin, kanssa. Näin pääsette molemmat yhteisymmärrykseen siitä, mikä on tavoitteesi. Jos lähdet liikkeelle puhtaasti visuaalisesta ideasta ilman, että ajattelet palvelun rakennetta, kannattaa vilauttaa tuotoksia kaverillesi heti, kun olet saanut valmiiksi jotain näytettävää.
Desiderata: kuinka se tehdään?
Jokainen sivusto on yksilö ja siksi mitään vedenpitäviä ohjeita siihen, miten AD:n pitäisi suunnitella saavutettava ulkoasu, ei ole. Olen kuitenkin tähän kerännyt joitain hyviä neuvoja ja oppeja vuosien varrelta.
Ymmärrä mitä olet tekemässä niin sivuston, asiakkaan kuin loppukäyttäjänkin kannalta. Ymmärrä myös mediasi. Mitä tyylitiedostot ja semanttinen koodaus voivat tarjota sinulle? Opi erottamaan sisältö ulkonäöstä.
”Kuuli” ulkonäkö ei ole väärin, se vain ei ole tärkein asia. Sinun tehtäväsi on tehdä käytettävä ja saavutettava palvelu, ei voittaa kilpailuja. Kilpailuiden voittaminen on toki hyväksi sinulle ja yrityksellesi, mutta tyytyväisten käyttäjien merkitystä asiakkaillesi ja heidän asiakkailleen ei kannata unohtaa.
Lyö mahdollisimman ajoissa lukkoon käytettävä perusfonttikoko ja tee siitä tarpeeksi iso ja luettava. Muista myös, että käyttäjät voivat muuttaa fonttikokoa kuten haluavat. Kestääkö sinun leiskasi sen?
Värejä valitessa pyri vähintään 70 % valöörieroon tekstin ja taustan välillä, etenkin jos teksti tai tausta ei kumpikaan ole valkoinen tai musta. Muista myös, että värillä on väliä. Ei niinkään brändiväreillä, mutta niillä väreillä, joilla sisältö esitetään. Pidä mielessä värisokeat ja ne, joiden monitorit eivät ole yhtä hyviä kuin sinun.
Mitä skaalautuvammaksi palvelu suunnitellaan, sitä aikaisemmassa vaiheessa on pääasiallinen visusuunnittelu tehtävä koodarin kanssa yhteistyönä. Näin varmistetaan myös se, että tarpeen vaatiessa taitto myös hajoaa tyylikkäästi.
Pyri siihen, että mahdollisimman paljon käyttöliittymän grafiikasta on tyylitiedostossa, ja että mahdollisuuksien mukaan tyylitiedosto luo näkyvät elementit. Ymmärrä, mitä se tarkoittaa, ja käytä sitä hyväksesi.
Tarkista palvelun ulkonäkö ilman tyylitiedostoa. Näin varmistut, että sisältö on selkeästi jäsennelty ja olennainen välittyy.
Älä suunnittele itsellesi. Testauta leiskasi henkilöillä, jotka eivät tiedä, mitä olet tekemässä. Sinä olet vain tekijä, et käyttäjä.
Kova maailma
Aina se ei ole niin helppoa. Vaikka haluaisikin toteuttaa palveluita, jotka ovat saavutettavia ja käytettäviä ja joissa pääasiana on sisältö, on todellisuus karu. Suurten ohjelmistotalojen valmiit pakettiratkaisut tekevät sotkuisella koodillaan saavutettavien palveluiden rakentamisen usein mahdottomaksi.
Tällöin ei voi muuta kuin langeta polvilleen suuren teknologian eteen ja antaa periksi. Näkökulmaa työhön se ei muuta, mutta lähestymistapaa kyllä. Lopputuloksen on kuitenkin oltava mahdollisimman selkeä. Parhaansa pitää tehdä haasteista riippumatta.
Elämyksiä – mutta millä hinnalla?
Onnistuneessa verkkopalvelussa pitää markkinoinnin halujen ja käyttäjien tarpeiden lyödä kättä. Valitettavan usein asiakkaan markkinointiosasto on se, joka loppupeleissä vaikuttaa siihen millaisia verkkopalvelun käyttöliittymä ja rakenne ovat. Vaikka kuinka halutaan olla käyttäjälähtöisiä, rakenne määräytyy firman organisaatiohierarkian mukaan (joka ei aina ole ihan väärin).
Halutaan ”elämyksellisyyttä”, jotain mikä nähdään äänenä, animaationa – järisyttävän upeana kokemuksena, joka saa ihmiset heti rakastumaan sivustoon ja palaamaan aina vain uudestaan ja uudestaan.
AD:n kannattaakin kysyä itseltään onko asia todella näin. Haluaako palvelun kohderyhmä sirkushuveja vai riittääkö hyvä ja tuore leipä. Haluavatko käyttäjät saada elämyksiä esimerkiksi pankkipalveluista? Flashia, vilinää ja vilskettä! Olisiko sirkuspelle pankissa elämyksellisyyttä? Jonglöörit ja tulennielijät oven eteen! Meidän pankki on elämyspankki! Tuo meidän pelleille rahasi!
Vai onko käyttäjälle paras elämys yksinkertaisesti helppokäyttöinen ja ongelmaton palvelu. Hyvä palvelu muistetaan. Se on parasta mainosta. Onnistuneena esimerkkinä voisi pitää Amazon.com-verkkokauppaa. Sen karu, mutta nimenomaan sisältöä tukeva ulkonäkö toimii hienosti niin käyttäjille kuin kaupan markkinoinnillekin.
Minä, joka tietenkin edustan käyttäjäkunnasta vain yhtä henkilöä, en tarvitse haku-, pankki- tai apteekkipalveluihin muuta kuin että pystyn tekemään siellä sen, mitä sinne tulen tekemään. En katso olevani uniikki tämän suhteen. Mitä enemmän sivulla on elämyksellisyyttä, sen heikommin se tukee saavutettavuuden periaatetta. Sisältö on tärkein ja siihen on keskityttävä. Sen kertovat käytettävyystestitkin.
AD:n työssä tämä tarkoittaa sitä, että suunnitellaan ulkonäkö sisällön ehdoin. Tehdään kokonaisuudesta puhutteleva ja selkeä, mutta erotetaan mainossisältö siitä, mitä käyttäjät tulevat etsimään. Selitetään asia maksavalle osapuolelle järkevästi ja rauhallisesti. Jotta viesti voisi saavuttaa vastaanottajan, on ymmärrettävä, mitä kieltä pitää puhua. Markkinoinnille saavutettavuus myydään esimerkiksi mahdollisuutena tavoittaa suurempi ryhmä kuluttajia, säästönä tiedonsiirtokustannuksissa tai parempana hakukonenäkyvyytenä.
End of slideshow, click to exit
Pyyhkiessäni kuolat suupielistä ja rinnuksilta kaiken tämän saarnaamisen jälkeen huomaan, etten ole keskittynyt vain saavutettavuuteen, vaan olen ottanut mukaan muutakin. Näin tässä aina käy, mutta asiat eivät mielestäni ole niin helposti erotettavissa toisistaan.
Tuli tarvitsee palaakseen kolme elementtiä: palamiskelpoista ainetta, happea ja lämpöä. Verkkopalvelu ei loista, jos jokin elementti puuttuu. Saavutettavuudesta ei ole hyötyä, jos sivusto ei ole käytettävä. Hyvästä sisällöstä ei ole iloa, jos käytettävyys on heikolla tasolla, ja niin edelleen. Ymmärrätte varmaan.
Entä miksi sekoittaa AD tähän soppaan? AD:llä on usein hyvä kokonaiskuva palvelun ulkonäöstä – tai ainakin pitäisi olla. Koska ulkonäkö tukee sisältöä, pitää AD:lla olla myös ymmärrys sisällöstä – mistäs sitä muuten tietää mitä pitää tehdä? Koska ulkonäön on myös tuettava käytettävyyttä ja saavutettavuutta, on hyvä, että netti-AD:lla on myös taju siitä, mitä on ulkonäön takana.
Kaiken muun ohella, tietenkin.
Pieni AD-suomi -sanakirja
- Kohdelakka = kiiltävä lakkapinta, joka painetaan tiettyyn osaan painopintaa.
- Nuuttaus (taiveura) = paperiin painettu ura, joka helpottaa taittamista.
- Preeglaus = korkopainanta, jossa lopputulos on joko kohokuvio tai syvennys.
- Rasteri = tapa simuloida sävyjä erikokoisin tai eri tiheyksisin pistein.
- Typografia = pinnan suunnittelu: fontit, värit, tasapaino, kokonaisuus, yksityiskohdat.
- Valööri = värin vaaleus-/tummuusaste.
mites kun pitää ottaa myös huomioon käytettävyydessä, saavutettavuudessa, luettavuudessa sekä muissa sydeemeissä ns. rajoitteisetkäyttäjät?
itse olin aikoinaan määrittelemässä projektia jossa haettiin heikkonäköisille tai muille rajaryhmille reunaehtoja fonteissa, väreissä ja yms, ainakin omasta mielestä näitä ryhmiä ei oteta missää huomioon… mistä moinen johtuu?
toki itsekkin graafikkona näen että 10-11px fontit istuu kivasti leiskaan…
Syitä on tietysti monia. Saavutettavuudesta riippuvaiset kohderyhmät jätetään tarkoituksella marginaalisina huomiotta, aika ei riitä tarpeeksi laadukkaaseen jälkeen, asiakas ei halua maksaa saavutettavuudesta tai osaa vaatia sitä, tekijät eivät tunne saavutettavuuden vaatimuksia, ei istu ulkoasuun jne.
Useimmiten kyseessä lienee se aika / rahakysymys. Tehdään sitä mitä asiakas tilaa ja mistä asiakas on halukas maksamaan annetun aikataulun puitteissa.