Ensimmäinen näkymä kertoo sivun tehtävän
Puhelimessa ensimmäiseen näkymään mahtuu rajallisesti tietoa. Otsikon pitäisi kertoa palvelu tai käsiteltävä kysymys ymmärrettävästi. Jos alun täyttää koristeellinen animaatio, suuri valikko ja pitkä iskulause, asiakas joutuu vierittämään ennen kuin tietää olevansa oikeassa paikassa. Näyttävyyden tehtävä on tukea viestiä, ei piilottaa sitä.
Katso myös, mistä kävijä saapuu. Mainoksesta tuleva asiakas odottaa mainoksen lupaamaa palvelua. Hakutuloksesta tuleva lukija voi tarvita ensin vastauksen rajattuun kysymykseen. Molemmille pitää näkyä selkeä jatko. Yhteydenottopainiketta ei tarvitse toistaa jokaisessa kappaleessa, mutta sen sijainnin tulee olla ennakoitava ja tarkoituksen ymmärrettävä.
Valikko ja kosketuskohteet tarvitsevat tilaa
Hiirellä helppo pieni linkki voi olla puhelimella vaikea osua. Lähekkäiset toiminnot aiheuttavat virheitä erityisesti silloin, kun niiden nimet ovat pitkiä. Varaa painikkeille riittävä tila ja väli. Koko klikattavan alueen pitää vastata sitä, minkä käyttäjä tulkitsee painikkeeksi, eikä vain tekstin yhden sanan.
Mobiilivalikossa on erotettava alavalikon avaaminen ja varsinaiselle sivulle siirtyminen. Jos sama kosketus yrittää tehdä molemmat, käyttäjä ei tiedä, mitä tapahtuu. Valikon sulkemisen pitää onnistua selvästi, ja taustasivun vierityksen tulee palautua normaaliksi. Testaa myös, ettei kiinteä yläpalkki peitä ankkurilinkin kohteena olevaa otsikkoa.
Pitkä teksti voi toimia hyvin pienellä näytöllä
Sisällön laajuus ei ole mobiilissa itsessään ongelma. Ongelma syntyy, jos kappaleet, otsikot ja esimerkit eivät jäsennä lukemista. Pitkä opas tarvitsee sisällysluettelon ja kuvaavat väliotsikot. Lukijan pitää voida siirtyä suoraan tarvitsemaansa kohtaan ja ymmärtää, mihin kokonaisuuteen se kuuluu.
Pitkät suomalaiset yhdyssanat paljastavat liian suuren otsikkokoon tai liian kapean palstan. Sanaa ei kannata katkaista sattumanvaraisesti vain laatikon säilyttämiseksi. Sovita otsikon koko ja palstan leveys sisältöön. Myös tekstin suurentaminen pitää huomioida: kiinteä korkeus ei saa leikata kappaletta tai painikkeen nimeä pois.
Lomake testataan näppäimistön kanssa
Puhelimen näppäimistö muuttaa käytettävissä olevaa tilaa. Alareunaan kiinnitetty painike voi peittää kentän, ja avautuva virheilmoitus voi jäädä näkymän ulkopuolelle. Käy lomake läpi oikeasti kirjoittamalla. Tarkista, näkeekö käyttäjä aktiivisen kentän, ohjeen ja seuraavan toiminnon.
Kentän tyyppi vaikuttaa siihen, millainen näppäimistö avautuu. Sähköpostin ja puhelinnumeron syöttämisen pitäisi olla vaivatonta, mutta asiakkaan tietoja ei tarvitse rajoittaa tarpeettoman tiukasti. Esimerkiksi puhelinnumeron välilyönnit eivät saa aiheuttaa epäselvää virhettä. Lähetyksen aikana tilan pitää näkyä ja toistuva vahinkopainallus estää tarkoituksenmukaisesti.
Kiinteät elementit voivat auttaa tai peittää sisällön
Soittopainike tai tärkeä yhteydenotto voi olla hyödyllinen näkymän alareunassa. Sen vaatima tila pitää kuitenkin varata sivun loppuun ja huomioida laitteen käyttöliittymässä. Muuten viimeinen linkki tai lomakkeen vahvistus jää peittoon. Samaan aikaan näkyvä evästebanneri voi pienentää tilaa vielä lisää.
Arvioi kiinteiden elementtien yhteisvaikutus. Yläpalkki, alareunan toimintopalkki, chat ja evästevalinta voivat yhdessä peittää suuren osan ruudusta. Jokaiselle ei tarvitse varata pysyvää paikkaa. Sisällön lukemisen tulee onnistua rauhassa, ja ylimääräisen käyttöliittymän avaamisen sekä sulkemisen pitää olla käyttäjän hallittavissa.
Selaintesti ja oikea puhelin täydentävät toisiaan
Selaimen puhelinnäkymällä voi nopeasti löytää vaakasuuntaisen ylityksen, liian suuren otsikon ja huonon korttiasettelun. Oikea laite paljastaa lisäksi kosketuskäytön, näppäimistön, selaimen palkkien ja suorituskyvyn vaikutuksia. Siksi simulaatiota ei pidä ilmoittaa fyysisen puhelimen testiksi.
Käyttötestissä pyydetään suorittamaan tehtävä, ei vain arvioimaan ulkoasua. Etsi sopiva palvelu ja valmistele yhteydenotto kertoo enemmän kuin näyttääkö tämä hyvältä. Mittauksessa voidaan seurata etenemistä, mutta vähäinen tapahtumamäärä ei yksin selitä ongelman syytä. Käyttöhavainto auttaa ymmärtämään, miksi asiakas ei ehkä jatkanut.
Esimerkki: palvelun valinta 390 pikselin näkymässä
Havainnollistavassa testissä asiakas avaa palvelusivun, siirtyy hinnan perusteisiin ja löytää yhteyshenkilön. Kapeassa näkymässä otsikko saa jakautua usealle riville sanojen välistä. Vertailu esitetään niin, että vaihtoehtojen nimet pysyvät ymmärrettävinä. Yhteystiedot ovat tavallisia toimivia linkkejä.
Tämän jälkeen asiakas avaa lomakkeen ja kirjoittaa viestin. Näppäimistö ei peitä lähetystä, eikä alareunan toimintopalkki estä vahvistuksen lukemista. Esimerkki kuvaa testin kulkua, eikä ole raportti tietyn puhelinmallin tuloksesta. Toteutuksen hyväksynnässä kirjataan erikseen todellinen laite, selain ja havaitut puutteet.
Vertailut ja pitkät sisällöt puhelimen leveydellä
Työpöydän rinnakkaiset palvelupaketit eivät aina toimi puhelimessa sellaisenaan. Jos kortit pinotaan allekkain, hinnan ja ominaisuuksien vertailu voi vaatia pitkää edestakaista selaamista. Pidä vertailtavat tiedot samassa järjestyksessä jokaisessa vaihtoehdossa ja nimeä erot suoraan. Asiakkaan ei pitäisi joutua muistamaan ensimmäisen kortin sisältöä viimeistä lukiessaan.
Taulukon muuttaminen korteiksi ei sekään ole automaattisesti parannus. Jos tarkoitus on vertailla samoja ominaisuuksia useasta tuotteesta, vaakasuunnassa selattava taulukko voi säilyttää yhteydet paremmin. Silloin vierityksen mahdollisuus pitää tunnistaa, otsikoiden pysyä ymmärrettävinä ja muun sivun leveyden normaalina. Ratkaisu testataan oikealla sisällöllä, ei lyhyillä paikkamerkeillä.
Pitkässä oppaassa väliotsikot ja sisältöön johtavat ankkurilinkit auttavat lukijaa palaamaan kiinnostavaan kohtaan. Kohdan otsikko ei saa jäädä kiinteän navigaation alle. Tätä ei huomaa pelkästä sivun yläosan kuvakaappauksesta, vaan linkkiä pitää käyttää käytännössä.
Monivaiheinen asiointi tarvitsee selkeän paluun
Hintalaskuri tai tarjouspyyntö voi sisältää useita vaiheita. Asiakkaan pitää nähdä, missä vaiheessa hän on, ja pystyä korjaamaan aiempi vastaus menettämättä kaikkea jo tehtyä. Vaiheen vaihtuessa seuraavan kysymyksen tulee avautua ymmärrettävään kohtaan, ei jäädä vieritysalueen ulkopuolelle.
Erityinen ongelma syntyy, jos pieni sisäinen vieritysalue on sijoitettu muutenkin vierivän sivun sisälle. Asiakas voi yrittää edetä kysymysvaihtoehdoissa mutta vierittääkin koko sivua, tai päinvastoin. Vaihtoehtojen esittäminen tavallisessa sivuvirtauksessa on usein selkeämpi lähtökohta. Jos rajattu alue on välttämätön, sen toiminta ja näkyvä korkeus tarkistetaan näppäimistön ollessa auki.
Keskeytynyt asiointi on myös tavallinen käyttötilanne. Puhelu, sovelluksen vaihto tai selaimen takaisin-painike ei saisi johtaa yllättävään tietojen katoamiseen. Kaikkea tallentamista ei tarvitse toteuttaa, mutta käyttäytymisen pitää olla johdonmukaista ja henkilötietojen käsittelyn perusteltua. Testaa etenemisen lisäksi aina palaaminen ja virheestä toipuminen.