Tämä pohdinta on kirjoitettu avuksi, neuvoksi ja keskustelua herättämään kaikille asiasta kiinnostuneille. Pääpaino on visuaalisessa suunnittelussa ja siinä, miten jokainen visuaalinen suunnittelija tai leiskapetteri voisi ottaa huomioon olennaisimmat käytettävyysseikat työssään. Homman nimi on siis typografian perusteet.

Seuraamillani keskustelupalstoilla, niin ulkolaisilla kuin kotimaisillakin, käydään toistuvasti keskustelua käytettävyydestä ja erityisesti käytettävyyden syy/seurassuhteesta suunnitteluun (kirjoitin ”suunnitteluun” koska ”design” kuulostaa brassailulta ja haiskahtaa muutenkin ylenkatseelta, vaikka yleensä tykkäänkin viljellä samaista termiä muissa yhteyksissä). Turhankin usein keskustelu menee juupas-eipäs –tasolle, jossa tavalliset (yleensä teknispainotteiset) netin käyttäjät syyttävät sormi ojossa ”nettisivun tekijöitä” käytettävyyden heikentämisestä. Tämä on täysin hyväksyttävää ja toivottavaa keskustelua, jota ei ole oikeastaan koskaan liikaa. Mutta mutta… sitten päästäänkin asian ytimeen.

Siirryttäessä tarkastelussa pintaa syvemmälle paljastuu mielenkiintoinen vastakkainasettelu, joka jakaa maailman ”tuottajiin” ja”käyttäjiin” (myöhemmin tekstissä en käytä enää lainausmerkkejä, mutta merkitys on edelleenkin viitteellinen ja hahmottava, ei sitova). Kuten käyttäjiä, myös tuottajia on moneen junaan ja menoon. Jossain määrin ryhmät tietenkin menevät päällekkäin, eli netin tuottaja on yleensä myös netin käyttäjä. Monikin netin käyttäjä kokee olevansa myös netin tuottaja, mikä on joko tietämättömyyttä, egoboostia tai silkkaa paskapuhetta. Ongelmia alkaakin muodostua, kun jokaisella netin käyttäjällä on Mielipide, jonka pohjana on silkkaa mutua. En ala nyt sen ihmeemmin perustelemaan, miksi ammattilaisen (tuottaja) mutu on arvokkaampi kuin amatöörin (käyttäjä), mutta niin se todellisuudessa kuitenkin on. Kannattaa myös muistaa, että kaikki mielipiteet –amatöörienkin- ovat arvokkaita, ja ne tulisi ottaa aina tosissaan.

Netin tuottajat ovat sekalainen seurakunta, joka kärjistetysti ja lokeroidusti muodostuu suunnittelijoista ja tekijöistä. Suunnittelijat suunnittelevat, tekijät tekevät. Kummallakin kuppikunnalla on oma tapansa tehdä asioita ja vastaavasti omat mielipiteet asioiden tärkeysjärjetyksestä. Se, mikä kumpaakin joukkiota yhdistää, on pyrkiminen samaan lopputuotteeseen, toimivaan nettisivustoon. Suunnittelijoiden (AD:t, käyttöliittymäsuunnittelijat, designerit, copyt jne) tehtävänä on suunnitella sivusto olemassaolevien rajoitteiden pohjalta mahdollisimman hyvin, ja vastaavasti tekijöiden vastuulla on suunnitelmien toteuttaminen.

Mitä tekemistä tällä on sitten käytettävyyden kanssa?

Paljonkin. Nimittäin tuo ihmisketju suunnittelijoista loppukäyttäjään (ilkeä, harhaanjohtava, mutta silti oivallisen toimiva termi) vastaa siitä, että sivusto on käytettävä. Jos joku menee suunnittelussa vituralleen, kuona kumuloituu moninkertaisena loppukäyttäjää kohden mentäessä. Monessa yrityksessä on myös erikseen käytettävyyssuunnittelijoita (titteli vaihtelee), joiden tehtävänä on tuoda prosessiin oma panoksensa, ettei muiden tarvitsisi moisella asialla rasittaa päätään. :)  Mutta ulkomaailma (ne netin ”käyttäjät”) on tästä autuaan tietämätön. Jos sivusto on ”huono,” se on huono ja sillä siisti. Aivan sama, vaikka visu olisi taivaallisen kaunis, koodi hyrräisi taustalla kuin Porchen moottori ja sisältö olisi kiinnostavaa ja viimeisen päälle hiottua. Yleensä palautelaatikkoon tupsahtanut siviilikommentti ”tää on huono” voi tarkoittaa vaikka sitä, että palautteen antajalla oli kirjoitushetkellä perse kipeänä liiasta istumisesta.

Käytettävyys siis muodostuu monen asian summasta. Valitettavasti käytettävyys ei ole sellaisenaan mielipideasia, vaan raakaa tiedettä (minähän en siitä paljoakaan tiedä, kannattaa kysellä asiasta vaikka joltain sen alan ammattilaiselta) ja siksi onkin hieman kyseenalaista alkaa röpöstelemään termeillä joille varmasti on olemassa vakiintunemmatkin merkityksensä. Silti, tavoilleni uskollisena hyppään tulta päin.

Millainen on käytettävyydeltään hyvä www-sivusto? Minun mielestäni käytettävyydeltään hyvän sivuston täytyisi olla helppokäyttöinen (tästä on tietysti omat poikkeuksensa, mutta yleissääntönä pätee), luettava ja sen täytyisi olla saavutettavissa helposti. Simppeliä, eikö? Helppokäyttöisen sivuston navigoinnin toimintaa ei tarvitse arvailla, käyttölogiikka säilyy sivulta sivulle, ja muutenkaan selailijaa ei kiduteta turhalla krääsällä (pop-upit, pakolliset introt, kryptiset käyttölogiikat jne). Luettavan sivuston viesti on selkeästi (yleensä tämä on tarkoituksena, poikkeuksiakin toki löytyy) esillä, helposti tulkittavissa ja hierarkisesti esiteltynä. Saavutettava sivusto löytyy hakukoneilla tai niistä yhteyksistä, joissa sivuston kohderyhmä majailee, sivusto latautuu nopeasti ja ei ole nurin randomilla aina kun Nyppiillä joku kompastuu johtoon.

Sivuston tärkein asia on kuitenkin sen SISÄLTÖ. Sisältö on kuningas, jolle rakennetaan oma palatsi tiedon valtakuntaan. Sisältö on se juttu, joka saa netin käyttäjät parveilemaan juuri kyseisellä sivustolla. Jos sivusto kuolee johonkin, syynä on sisällön puute, ei mikään muu. Sisältö, sisältö, sisältö, sitä ei voi mainita liian monta kertaa peräkkäin. Minne se on unohtunut, ihmiset?! Helvettiin standardit ja kaikki, jos sisältöä ei sivuilta löydy! Se on ihan sama mitä standardeja sivun HTML noudattaa tai on noudattamatta, jos sivustolla ei ole mitään miksi sinne kukaan haluaisi mennä. Keskityttäisiin mieluummin siihen laadukkaan sisällön tuottamiseen ja tuon sisällön kunnolliseen esittämiseen turhan standardinillityksen sijaan.

Sisältöön siis kannattaa keskittyä. Sisällöksi laskisin kaiken olennaisen sivustolta: tekstin, kuvat, diagrammit, virheilmoitukset, alt-tekstit (!), animaatiot, äänet. Olennaista on, että sisältö on jotain sellaista, jota sivulle tullut tai eksynyt surffailija on varta vasten tullut hakemaan (ei sentään niitä virhe-ilmoituksia!). Jos sisältöä ei löydy, netin käyttäjä turhaantuu (ehkä hieman voimakas ilmaisu) ja häipyy hakukoneen listauksessa seuraavalle sivustolle. Yksinkertaistetaan asioita hieman, ja todetaan, että sisältö on yleisimmiten kuvia ja tekstiä. Sisällön laadukas esillepano tarkoittaa siis tässä yhteydessä tekstin ja kuvien asettelua siten, että sivusto on mahdollisimman selkeä ja sisällön kannalta toimiva.

Tämä voi kuulostaa hassulta visuaalisen suunnittelijan suusta, mutta minusta teksti on kuvitusta tärkeämpi seikka. Teksti on yleensä se, mitä ihmiset netistä hakevat. Nykyään Googlella voi toki hakea kuviakin, mutta kyllä se on teksti joka muodostaa WWW:n selkärangan. Eli keskitytään hieman siihen, miten tekstistä saa kaiken tarpeellisen irti. Käytännössä tämä tarkoittaa sitä, että on aika kaivaa ne typografian pölyttyneet oppikirjat esiin ja kerrata hieman perusteita.

Käytännön vinkkejä www-sivujen typografiaa suunniteltaessa Typografiassa pelataan yleensä todella paljon yksittäisten fonttien tai fonttiperheiden kanssa, mutta www-ympäristössä ei ole paljoakaan mahdollisuuksia valita käyttäjän leipäfontteja, erikoisemmista korostefonteista nyt puhumattakaan (se kuvaksi tallentaminenkaan ei ole välttämättä aina se paras keino). Käytettävissä on perussetti, joista itse suosin Verdanaa ja Arialia niiden laajan levinneisyyden ja yleisen käyttökelpoisuuden vuoksi. Verdanaa tulee käytettyä leipäfonttina enemmän, se kun on omaan makuuni kauniimpi kuin Arial.

Ohessa muutamia lyhyitä sääntöjä, jotka kannattaa pitää mielessä:

Leipätekstin koko: minimi on 9 px, järkevä maksimi 12 px. Tätä suuremmat alkavat olla jo otsikkokokoa. Kannatta myös muistaa, että esimerkiksi Arial on helkkarin paljon pienempi 9:n pikselin kokoisena kuin Verdana, eli harkintaa!

Rivin pituus: Ehdoton minimi rivin pituudelle on 35 merkkiä, maksimi 90 merkkiä. Optimi on jossain 50-60:n merkin tienoilla. Tässä on taas yksi syy, miksi sivun on parempi olla vakioleveyksinen ja -kokoinen täysin skaalautuvan sijaan. Mitä pidempi rivi, sitä vaikeammaksi ja raskaammaksi lukeminen käy, kun silmä väsähtää ja keskittyminen alkaa herpaantumaan. Lisäksi pidemmissä riveissä rivit alkavat mennä sekaisin todella pahasti, ja seuraavaksi saa alkaa kaivamaan lukutikkua esiin!

Riviväli: Riviväli vaikuttaa kappaleen tiiviyden tunteeseen. Liian pieni riviväli aiheuttaa ahtaan ja liian tiiviin vaikutelman, liian suuri riviväli (erityisesti liian pienien kappalevälien kanssa yhdessä) antaa taas tasapaksun ja venytetyn vaikutelman. Yleensä kannattaa antaa rivivälille 1-3 pikseliä suurempi arvo kuin leipätekstin fonttikoolle. Mitä pidempi rivi, sitä enemmän riviväliä.

Kappale: Kappaleiden tasaus kannattaa yleensä jättää vasemmalle (align left), jolloin lukeminen on luonnollista ja nopeaa. Oikealle tasattu (align right) palsta on perusteltu todella harvoin, sillä katseen siirtyessä riviltä toiselle silmä joutuu hakemaan jokaisen rivin alun aina uudestaan. Keskitettäessä (align center) sama homma. Molempiin laitoihin keskitetty teksti (justify) taas on tylsää ja tasapaksua luettavaa, ja jos rivin pituus on vielä liian lyhyt, tekstiin tulee ammottavia rakoja. Tällöin luettavuus kärsii todella paljon.

Tehokeinot - lihavointi, alleviivaus, kursiivi, versaalit: Jos tehokeinoja on pakko käyttää, käytä lihavointia ja kursiivia. Alleviivaus on tökerö tapa korostaa, ja kaiken lisäksi alleviivatun tekstin sotkee helposti linkkeihin (aivan sama vaikkei sivustolla olisi yhtään alleviivattua linkkiä, mutta muualla netissä niitä on… paljon). SUURAAKKOSIA eli VERSAALEJA kannattaa käyttää säästeliäästi, mielellään niitä ei kannata käyttää ollenkaan.

Väliotsikot: Edellisen kappaleen ja väliotsikon rajan tulisi erota selkeästi tavallisesta kappaleiden välisestä rajasta. Väliotsikon (yleensä H2) tulisi loogisesti olla lähempänä seuraavaa kuin edellistä kappaletta. Väliksi sopii vaikka kaksinkertainen riviväli.

No, tuossa oli nyt muutama muistettava asia. Fonttien vähyyden lisäksi www-typografiassa on toki muitakin ongelmia. Siinä missä printtimaailmassa kokoyksiköillä on lähinnä työkaluarvoa matkalla dokumentistä printtiin, www:ssä tilanne on jo täysin toinen. CSS:ssä käytetyt yksiköt vaikuttavat lopputulokseen hävyttömän paljon, ja mikään ei takaa että erikoisemmat CSS-yksiköt (point, pica, ems, exs) toimivat kunnolla vanhemmilla selaimilla. Eivätkä nämä uudemmatkaan selaimet bugittomia ole.