Muodolla on väliä

Vietämme erityisesti kesäisin paljon aikaa appivanhempieni kesämökillä. Jos siellä arkipäivänä ajoittaa kaupassa käymisen oikein, voi ostaa paikallisen leipomon ruisleipää. Meistä tuo leipä on poikkeuksellisen hyvää ruisleipää, joten silloin tällöin tulee ääneen harmiteltua, että vietämme mökillä lähinnä viikonloppuja, jolloin tuota leipää ei voi ostaa.

Tänä kesänä ensimmäistä kertaa kävi niin, että kaikki lapsemme viettivät kokonaisen lomaviikon isovanhempiensa kanssa mökillä minun ja mieheni ollessa töissä. Kun sitten viikonloppuna saavuimme mökille, appivanhemmat kertoivat ostaneensa juuri tuota ruisleipää, mutta lapset eivät kuulemma olleet syöneet sitä ollenkaan.

Aluksi ajattelin kysymyksen olevan siitä, että pöydässä kenties on vain ollut muutakin tarjolla. Meillä ei ole tapana syödä leipää lämpimän ruuan kanssa, ja muilla aterioilla jos on mahdollisuus ottaa muroja tai pullaa tms. niin yllättäen lapset eivät juuri leipää syö. Tuntui silti oudolta, ettei leipää ollut kulunut ollenkaan.

Myöhemmin kuitenkin sain oivalluksen, miksi leipä ei ollut heille maistunut.

Anoppi oli leikannut sitä sektoreittain ja halkaissut nämä palat keskeltä. Tämä ruisleipä on ohutta, joten näin leikaten palat ovat melkein pelkkää kuorta. Kuori on todella kovaa (tai hieman kostuneena sitkeää), joten tällaisia paloja on todella vaikea syödä.

Siksi meillä onkin tapana leikata leivästä ohuita siivuja tai pikemminkin suikaleita. Silloin hampaiden tarvitsee yhdellä haukkauksella selvitä vain pienestä määrästä kuorta. Näin leikatut leivät eivät oikein toimi perinteisinä voileipinä koska niiden päälle ei juuri mahdu täytteitä, mutta syömme näitä siivuja vähän niin kuin sipsejä. Menekkikin on sen mukainen.

Anoppi ei siis osannut kyseenalaistaa konventionaalista tapaa leikata leipää. Lapset taas eivät tunnistaneet leipäkorissa tarjolla ollutta ruisleipää. Kummallekaan osapuolelle ei tullut mieleen, että keskustelemalla leivän leikkaamisen tavoista olisi ollut löydettävissä ratkaisu, joka olisi tehnyt molemmat osapuolet tyytyväisemmiksi.

Tapa, jolla tarjoilemme asiat, vaikuttaa dramaattisesti siihen, löydetäänkö niitä, halutaanko niitä käyttää, miltä ne tuntuvat ja miten niiden oletetaan toimivan. Tämä on hyvä muistaa muuallakin kuin ruokapöydässä.

Töissä sama asia voi tulla vastaan esimerkiksi tilanteessa jossa olemassaolevan toiminnallisuuden käyttöliittymää muutetaan. Lopputulos voi nostaa ihan uudella tavalla esiin vanhan toiminnallisuuden puutteita, ja saada aikaisemmin hyvältäkin vaikuttaneet asiat tuntumaan epäloogisilta.

Layoutin testaus

Nettisivuston ulkoasu on osa brändin rakentamista. Siksi myös ulkoasun virheettömyys on tärkeää. Oman haasteensa testaukseen tuo se, mobiililaitteiden merkitys netinkäytössä kasvaa koko ajan, ja mobiililaitteiden kirjo on valtava. Ulkoasu ei myöskään aina tarkoita vain sitä, näyttääkö jokin näkymä kivalta, vaan joskus ulkoasuvirheet voivat myös piilottaa informaatiota tai toiminnallisuuksia.

Ulkoasun oikeellisuus on helpointa verifioida luomalla testisivuja täsmälleen visuaalisen suunnitelman mukaisilla sisällöillä. Tällöin virheet väreissä, fonteissa, kuvapaikkojen ja ikonien koossa, elementtien keskinäisessä sijoittelussa, marginaaleissa jne. on suhteellisen helppo huomata yksinkertaisesti vertaamalla visuaaliseen suunnitelmaan. Kuvasta kannattaa etsiä linjoja, joiden avulla voit tarkistaa eri elementtien keskinäisen asemoinnin, esim. vierekkäisten palstojen otsikkopalkkien ylä- ja alareunat, tai näyttääkö teksti tai kuva keskitetyltä pysty- tai vaakasuunnassa. Tarkista myös, onko käyttöliittymän eri osien välillä esim. vaaka- tai pystyviivoja erottamassa elementtejä toisistaan, ja jos näillä elementeillä on esimerkiksi keskenään erilaiset taustavärit, vaihtuuko taustaväri täsmälleen tuon erottavan viivan kohdalla vai ei. Jos tekstien eteen tulee jossain checkboxeja tms. listamerkkejä, tarkista niiden asemoituminen suhteessa ko. rivin tekstiin. Muista myös hover-efektit, aktiiviset linkit ja käydyt linkit, sekä milloin hiiren kursori indikoi alla olevan linkin.

Lisäksi on tärkeää luoda testisivuja, joiden sisällöt eivät ole ihan niin nättejä.

Tyypillisiä esimerkkejä tilanteista, jotka luovat ulkoasuongelmia, ovat

• tavanomaista pidemmät sanat
• rivittyvät kuvatekstit
• rivittyvät linkin nimet
• bannerien määrän muuttuminen
• eri määrä sisältöä vierekkäisissä listaelementeissä
• kuvattoman uutisen julkaisu listalla, joka näyttää uutisista ingressikuvia
• kuvagallerian kuvien rivittyminen niin että viimeinen rivi ei ole täynnä kuvia
• bulletpoint-listat rivittyvillä tekstinpätkillä

Lisäksi huomio kannattaa kiinnittää myös seuraaviin

• Onko käytössä eri tyyppisiä mutta keskenään saman näköisiä listaelementtejä (esim. blogilista, uutislista, tapahtumalista)? Jos niitä näytetään samalla sivulla, ovatko marginaalit yms. oikeasti samanlaiset?
• Kieliversiot ja niihin liittyvien merkistöjen näkyminen. Nappien tekstien mahtuminen nappeihinsa.
• Sivujen leveydet. Onko esim. jollain sivulla "turha" vierityspalkki kertomassa, että sivu onkin leveämpi kuin sen pitäisi
• Sivukarttasivu, hakutulossivu, palautelomakesivu yms. Näistä ei aina ole visuaalista suunnitelmaa olemassa, mutta yhtä kaikki niidenkin tulisi näyttää hyvältä.
• Elementtien kulmien pyöristykset, liukuvärit
• Murupolku

Responsiivista sivustoa testattaessa tarkista myös mm.

• Pysyykö kuvien kuvasuhde vakiona eri selaimen leveyksillä? Venyvät kuvat eivät ole hyvää brändin rakentamista
• Navigaation saavutettavuus

Mitä muuta testaisit?