Olennainen UX-tarkistuslista: tarkastele verkkosivustoasi asiakkaidesi silmin

Verkkosivustosi on juuri uudistettu. Se näyttää hyvältä kokoushuoneen suurella näytöllä; kaikki tuntevat tarjonnan ja osaavat tehdä tilauksen vaikka silmät kiinni. Asiakas kuitenkin saapuu puhelimella, ei tiedä yrityksestä mitään ja poistuu ensimmäisen epäselvyyden kohdalla. Siksi ei riitä, että tarkistetaan verkkosivuston näyttävän hyvältä.

Käytimme tämän tarkistuslistan alkuperäistä versiota laajana listana verkkosivustoille ja verkkokaupoille. Ajan mittaan siihen kertyi työkaluja ja yksittäisiä sääntöjä, jotka eivät olleet yleispäteviä. Tämä versio palaa olennaiseen: mitä ihmisen pitäisi pystyä tekemään, mitä sinun on tarkistettava ja miten ongelma havaitaan ennen kuin liikenteeseen aletaan käyttää rahaa.

Tunnista ensin kolme tärkeintä käyttäjäpolkua

Koko verkkosivuston UX-auditointi voi helposti hajota sadaksi kommentiksi. Siksi valitsen ennen analytiikan avaamista kolme yritykselle tärkeintä käyttäjäpolkua. Tyypillisesti ne ovat:

• uusi kävijä ymmärtää tarjonnan ja lähettää yhteydenottopyynnön,
• asiakas löytää tuotteen, lisää sen ostoskoriin ja maksaa,
• nykyinen asiakas löytää tuen, asiakirjan tai yhteystiedot.

Kirjaa jokaisesta käyttäjäpolusta lähtökohta, odotettu lopputulos ja suurin este. Näin et suorita tarkistuslistaa mekaanisesti, vaan tarkistat, tukeeko verkkosivusto tiettyä päätöstä.

1. Tarjonnan on oltava selkeä myös henkilölle, joka ei ollut kokouksessa

• Onko ensimmäisestä näkymästä selvää, mitä tarjoat ja kenelle?
• Kuvaako pääotsikko lopputulosta tai ongelmaa yrityksen iskulauseen sijaan?
• Näkyykö seuraava vaihe ilman valikon penkomista?
• Pystyvätkö kävijät erottamaan yksittäiset palvelut tai vaihtoehdot toisistaan?
• Kerrotaanko ehdoista ja rajoituksista, jotka todella vaikuttavat päätökseen?

Testaa sivustoa henkilöllä, joka ei tunne yritystä. Anna hänelle muutama sekunti, sulje sivu ja kysy, mitä yritys tekee ja mitä hän tekisi seuraavaksi. Tämä ei ole tieteellinen tutkimus, mutta se paljastaa nopeasti kielen, jonka vain yrityksen sisällä työskentelevät ymmärtävät.

2. Navigoinnin on toimittava ilman ajattelua ja hiirtä

• Vastaavatko kohteiden nimet sitä, mitä kävijät etsivät?
• Toimivatko linkit, logo ja paluu edelliseen vaiheeseen?
• Onko mobiilivalikko luettava ja suljettavissa, peittämättä tärkeää sisältöä?
• Onko pidemmässä rakenteessa selvää, missä käyttäjä on?
• Tavoittaako jokaisen tärkeän ohjausobjektin Tab-näppäimellä?
• Onko kohdistus näppäimistöä käytettäessä näkyvissä, eikä käyttäjä jää jumiin?

Saavutettavuus ei ole erityistila muutamalle ihmiselle. Riittävä kontrasti auttaa myös auringonvalossa käytettävällä puhelimella, ja selkeä lomake auttaa kiireistä käyttäjää. Nopeaan tarkistukseen voit käyttää Easy Checks -tarkistusta osoitteesta W3C. Tämä on ensimmäinen tarkistus, ei vahvistus täydestä WCAG-vaatimustenmukaisuudesta.

3. Sisällön on ohjattava sekä katsetta että päätöstä

• Onko sivulla yksi pääotsikko ja looginen rakenne muille otsikoille?
• Ovatko kappaleet helposti luettavia ja tärkeät tiedot nopeasti löydettävissä silmäilemällä?
• Kuvaavatko linkit ja painikkeet klikkauksen seurauksena syntyvää lopputulosta?
• Riippuuko merkitys vain väristä, kuvasta tai hover-tehosteesta?
• Onko informatiivisilla kuvilla merkityksellinen vaihtoehtoinen teksti?
• Häiritsevätkö animaatiot tarjonnan ymmärtämistä, ja voidaanko käyttäjien liikkeen vähentämistä koskevia asetuksia kunnioittaa?

Pelkkä voimakas väri ei tee painikkeesta konversiopainiketta. Ensin on oltava selvää, mitä klikkauksen jälkeen tapahtuu. ”Lähetä” on tekninen kuvaus. ”Varaa tutustumispuhelu” vähentää epävarmuutta.

4. Lomakkeessa pitäisi kysyä vain tietoja, joita yritys todella käyttää

• Onko jokaisella kentällä näkyvä, ohjelmallisesti yhdistetty nimiö?
• Onko selvää, mitkä tiedot ovat pakollisia ja miksi niitä tarvitaan?
• Voiko käyttäjä täyttää lomakkeen puhelimella ja näppäimistöllä?
• Selittääkö virheilmoitus sekä ongelman että sen korjaamisen?
• Säilyvätkö oikein syötetyt tiedot virheen jälkeen?
• Saako käyttäjä lähettämisen jälkeen selkeän vahvistuksen ja tiedon siitä, mitä tapahtuu seuraavaksi?

Saavutettavien lomakkeiden oppaassaan W3C suosittelee kysymään vain prosessin suorittamiseen tarvittavia tietoja. Jokainen ylimääräinen kenttä vie huomiota ja lisää tietojen käsittelyyn liittyvää työtä. Jos yritys ei käytä tietoa, poista kenttä.

5. Verkkokaupan on hallittava koko osto, ei vain kaunista tuotesivua

Kategoriat ja haku

• Vastaavatko suodattimet ihmisten valintatapoja, ja voiko ne tyhjentää helposti?
• Onko tyhjän hakutuloksen näkymä hyödyllinen ja tarjoaako se toisen etenemistavan?
• Sisältääkö tuotekortti nimen, hinnan, saatavuuden ja selkeän kuvan?
• Ovatko lajittelu ja suodatus edelleen käyttökelpoisia puhelimella?

Tuotetiedot

• Selitetäänkö vaihtoehdot, hinta, ALV, saatavuus ja toimitus ennen ostoskoriin lisäämistä?
• Näyttävätkö valokuvat sen, mitä asiakas tarvitsee arvioidakseen tuotetta?
• Näkyykö ostoskoriin lisäämisen painike peittämättä sisältöä?
• Tarjoaako loppuunmyyty tai poistunut tuote vaihtoehdon ja järkevän tavan palata takaisin?

Ostoskori ja tilaus

• Voiko tuotetta, vaihtoehtoa ja määrää muuttaa menettämättä muita tietoja?
• Tiedetäänkö lopullinen hinta, toimitus ja kulut mukaan lukien, ajoissa?
• Vältätkö rekisteröitymisen vaatimista ilman liiketoiminnallista syytä?
• Palauttaako epäonnistunut maksu käyttäjän ymmärrettävään tilaan?
• Onko tilausvahvistus yksiselitteinen ja estääkö se tahattoman uudelleenoston?

Sääntö ”ostoskorissa ei saa olla navigointia” ei ole aina pätevä. Yksinkertaisessa ostossa häiriötekijöiden vähentäminen voi auttaa. Monimutkaisessa tarjonnassa asiakas tarvitsee kuitenkin pääsyn ehtoihin tai tuotetietoihin. Testaa käyttäytymistä, älä nyrkkisääntöä.

6. Verkkosivuston on kestettävä mobiilikäyttö, hidas verkko ja virhe

• Latautuuko pääsisältö nopeasti ilman suuria asettelun siirtymiä?
• Reagoiko sivu klikkauksiin ja kirjoittamiseen ilman havaittavaa viivettä?
• Onko kuvilla oikeat mitat ja latautuvatko ne vain tarvittavalla laadulla?
• Voiko viallinen ulkoinen komentosarja estää tilauksen tai lomakkeen käytön?
• Toimivatko tärkeät käyttäjäpolut nykyisillä yleisimmillä selaimilla ja oikeilla puhelimilla?
• Seurataanko saatavuutta ja virheitä tärkeissä vaiheissa?

Laboratoriotulos on ohje, ei liiketoiminnan lopputulos. Seuraa myös oikeita käyttäjiä ja tärkeintä käyttäjäpolkua. Mainospikseli ei saa olla ostospainiketta tärkeämpi.

7. Varmista mittaaminen testillä, älä tarkistamalla koodin olemassaoloa

Tee jokaisesta tärkeästä käyttäjäpolusta testiyhteydenotto tai -tilaus. Tarkista, että tapahtuma lähetetään kerran oikealla nimellä, arvolla, valuutalla ja tapahtumatunnisteella. Varmista sitten, että kohdejärjestelmä näkee sen ja että se vastaa todellista tilausta.

• Lähetetäänkö ostotapahtuma vain avaamalla kiitossivuosoite?
• Monistetaanko tapahtuma, kun sivu päivitetään?
• Noudattavatko tagit suostumuksen tilaa?
• Sisältääkö datakerros henkilötietoja, jotka eivät kuulu sinne?
• Sisältääkö kontti vain yrityksen käyttämiä palveluita?
• Onko mittaamiselle nimetty vastuuhenkilö ja tieto viimeisimmästä tarkistuksesta?

Katso toteutusta varten ohje Google Tag Managerin oikeaoppiseen määrittämiseen; tapahtumien merkityksen osalta katso Google Analytics 4 -opas. Istuntojen tallenteet tai lämpökartat voivat paljastaa katvealueita, mutta käytä niitä tarkoituksellisesti, arkaluonteiset kentät peitettyinä ja suostumussääntöjen mukaisesti. Kaiken tallentaminen ”varmuuden vuoksi” ei ole tutkimussuunnitelma.

Näin käytät tarkistuslistaa ilman kuukausittaista työpajaa

1. Valitse yksi tärkein käyttäjäpolku ja käy se läpi puhelimella.
2. Tee sama käyttäen vain näppäimistöä.
3. Anna yrityksen ulkopuolisen henkilön suorittaa tehtävä äläkä ohjaa häntä.
4. Kirjaa, missä hän epäröi, älä ehdottamaasi ratkaisua.
5. Vahvista ongelma analytiikassa, tuessa tai lisätesteillä.
6. Korjaa yksi este ja käy koko käyttäjäpolku uudelleen läpi, mittaaminen mukaan lukien.

Älä yritä julistaa verkkosivustoa ”UX-valmiiksi” yhden kierroksen jälkeen. Tarjonta, laitteet ja ihmisten odotukset muuttuvat. Tarkistuslistan tarkoitus on löytää säännöllisesti kallein kitka ja päättää, mitä korjataan ensin.

Jos haluat tarkastella verkkosivustoa laajemmassa liiketoimintakontekstissa, käytä myös verkkomarkkinoinnin tarkistuslistaa. Jos tarvitset UX:n, mittaamisen ja hankinnan priorisointia, kuvaa tärkein käyttäjäpolkusi yhteydenottosivun kautta.