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?