keskiviikko 1. kesäkuuta 2011

Suunnitteluohjeita mobiililaitteiden web-lomakkeille

Suunnittele erilaiset lomakkeet mobiilinäyttöön kuin isolle näytölle. Esimerkiksi otsikot kenttien yläpuolelle, erilaiset haut samaan kenttään, yleensä yksinkertaista lomakkeet. 


Mobiililaitteissa tarvitaan myös lomakkeita, niitä käytetään esimerkiksi erilaisten asiakasrekisteröintien ja varausten teon yhteydessä. Chui Chui Tan (2011) pureutuu aiheeseen artikkelissaan “Forms that work: Designing web forms for usability” (http://www.formsthatwork.com/Mobile-forms).

Tan mukaan web-lomakkeet, jotka toimivat hyvin tietokoneilla, eivät välttämättä sovi mobiililaitteille. Tan (2011) esittää strategioita, joiden avulla voi suunnitella tehokkaampia ja vähemmän virheille alttiita web-lomakkeita mobiililaitteille. Kirjoittajan mukaan tietokoneiden web-lomakkeita ei ole suunniteltu tehokkaiksi, mikä on tärkeää lomakkeissa mobiililaitteissa käytettäessä. Lisäksi mobiililaitteissa webyhteys on rajoitetumpi, johtuen 1. käyttäjän käyttöympäristöstä 2. hitaammasta/epäluotettavasta verkosta ja 3. itse laitteesta, jossa on pienempi näyttö.

Www-lomake mobiililaitteeseen voi olla: 1. yksinkertaistettu versio pöytätietokoneen weblomakkeesta (ei mainoksia, kuvia, tai muita häiritseviä tekijöitä) 2. Kokonaan eri versio, jossa on yksinkertaisempi ja selkeämpi käyttöliittymä, tai 3. samat lomakekentät kuin web versiossa, mutta pienillä muutoksilla layoutissa ja kenttien otsikoiden asettelussa.
Tan antaa yhteensä kahdeksan eri suunnitteluohjetta mobiililaitteiden web-lomakkeille.
  1. Sijoita kenttien otsikot kenttien yläpuolelle. Vältä asettamasta otsikoita kentän vasemmalle tai oikealle puolelle, koska horisontaalisten otsikoiden näyttäminen samalla ruudulla on monesti mahdotonta, varsinkin pidemmät otsikot voivat olla ongelma.
  2. Mobiililomakkeiden tulee olla niin yksinkertaisia ja suoraviivaisia kuin mahdollista. Tarpeettomien elementtien ja ominaisuuksien poisjättäminen helpottaa käyttäjää fokusoitumaan tehtävään ilman turhia häiriöitä tai ei-tarpeellisia kenttien täyttämistä. Yksi tekniikka on poistaa valinnaiset ja vähemmän tärkeät -kentät. Toinen tapa on poistaa elementit, joilla ei ole ensisijaista käyttöä, kuten vihjeet, kuvaukset ja linkit. Se vähentää visuaalista epäjärjestystä ja yksinkertaistaa käyttäjäkokemusta. Näytä ainoastaan sellaiset kentät, joiden ehdottomasti välttämättömiä prosessin ja tehtävän täyttämiseksi. Karkeana ohjeena voi pitää sitä, että jos kentän syötteellä ei ole merkitystä lopputulokseen, sen voi poistaa.
  3. Toinen tapa yksinkertaistaa mobiililomaketta on yhdistää useammat samantyyppiset syöttökentät yhteen kenttään. Esimerkiksi eri etsintäkentät voidaan yhdistää samaan kenttään. Esimerkkinä kirjoittaja antaa Mapquestin hakutoiminnon (http://classic.mapquest.com/), jossa käyttäjä on voinut hakea ajo-ohjeita kahden eri paikan välillä kolmella eri tavalla. 1. Yrityksen nimellä, 2. osoitteella, tai 3. tallennetuista, tai edellisistä sijainneista. Palvelu yhdistää eri haut yhteen kenttään. Käyttäjä voi kirjoittaa vapaasti joko tietyn osoitteen tai yrityksen nimen kenttään ja kun kenttä on valittuna, käyttäjän nykyinen sijainti on oletusarvona. Käyttäjälle jää näin samat valinnan mahdollisuudet kuin useammalla kentällä, mutta lomake on yksinkertaisempi, eikä käyttäjää kuormiteta eri vaihtoehtojen miettimisellä.
  4. Mobiililaitteissa on monia sisäänrakennettuja ominaisuuksia, joita kannattaa hyödyntää lomakkeiden yksinkertaistamiseksi. Tällaisia ominaisuuksia on muun muassa sijainnin tunnistin, GPS:n tai satelliittien välityksellä. Esimerkkinä Europcar, jonka mobiililomakkeessa ehdotetaan käyttäjälle, että laite etsii käyttäjän sijainnin perusteella lähimmän noutopaikan. Lisäksi mobiililomakkeen valikossa 139 eri maa vaihtoehtoa on rajattu 40 yleisimpään.
  5. Hitaiden internet yhteyksien takia mobiililaitteissa suositellaan käyttämään yleensä minimimäärää sivun latauksia. Tätä sääntöä voidaan rikkoa syöttämisvalintojen parantamiseksi. Esimerkkinä AirAsian lentojen varaus, jossa tietokoneella käytettävässä versiossa kaikki 80 kaupunkia 25:ssä eri maassa, on näkyvissä yhdellä valinnalla, mutta mobiililaitteen lomakkeella ne on jaettu useille eri sivuille (maan mukaan), koska noin pitkä alasvetovalikko ei toimi mobiililomakkeella. Pitkän lomakkeen jakamisessa useisiin osiin täytyy kuitenkin olla varovainen; tehtävän suoritus ei saisi venyä käyttäjälle loputtoman pitkäksi. Koska tapa vaatii useita sivunlatauksia, kaikkien turhien elementtien poistaminen sivuilta on erityisen tärkeää.
  6. Käytä sopivia syöttö elementtejä ja valikon kontrolleja. Mobiililomakkeiden suunnittelussa voi muuttaa kontrollien tyyppiä toiseksi, mikä saattaa yksinkertaistaa lomaketta ja sen vuorovaikutusta käyttäjän kanssa. Esimerkkinä tästä kirjoittaja käyttää Expedian hotellin varauslomaketta, jossa alasvetolistan kolme valintaa on korvattu erillisillä hyperlinkeillä. Suurta määrää linkkejä ei kuitenkaan kannata käyttää sivun alussa, koska vaarana on, että itse lomake jää pois näytöltä. Toisena esimerkkinä kontrollien vaihtamisesta Tan (2011) käyttää Shangri La hotellin varauslomaketta, jossa radiopainikkeiden luettelo on vaihdettu lyhyeen alasvetovalikkoon, jolloin lomaketta on saatu yksinkertaisemmaksi.
Mobiilikäyttäjien tarvitsee monesti täyttää vain osa lomakkeesta. Aseta etusijalle pakolliset kentät ja sisällöt ja vältä valinnaisten tai vain joidenkin käyttäjien tarvitsemien kenttien painottamista. KLM:n lentojen seuranta on toteutettu mobiililomakkeella siten, että 151 eri lentokenttää sisältävä alasvetolista on korvattu ennustavalla tekstinsyöttökentällä, johon käyttäjä voi syöttää joko lennon numeron tai lentokentän nimen. Tekstin syöttäminen toimii tässä tapauksessa hyvin, koska käyttäjä tietää aina, mitä lentokenttää etsii.

  1. Valitse soveltuva listatyyppi. Listan valinnat on mahdollista toteuttaa kahdella eri tavalla, joko lukitulla alasvetovalikolla (aakkosjärjestyksessä tai satunnaisessa järjestyksessä), tai avoimella ennustavalla tekstihaulla, joista molemmilla on omat hyvät ja huonot puolensa.
Lukittu alasvetovalikko soveltuu tapauksiin, joissa käyttäjä tietää tarkasti mitä etsii, tai sellaisiin tapauksiin, joissa aakkos- tai kronologinen järjestys on luonnollinen, kuten maiden, numeroiden, tai päivämäärien kanssa. Lukittu alasvetovalikko ei sovellu sellaisiin tilanteisiin, joissa valinnat ovat satunnaisessa järjestyksessä, tai käyttäjä ei tarkasti tiedä, mitä valinnat ovat. Näiden lisäksi lukittu alasvetovalikko ei sovellu tilanteisiin, joissa eri vaihtoehdoilla on pitkät kuvaukset, koska kuvaustekstit todennäköisesti katkaistaan automaattisesti.

Avoin ennustava tekstin haku soveltuu tapauksiin, joissa eri vaihtoehdoilla on pitkät kuvaukset, jotka voivat jatkua usealle riville. Jos lista on kovin pitkä, eikä alasvetovalikko sovellu, tai ole järkevästi ryhmiteltävissä tiettyyn järjestykseen, avoin ennustava haku voi olla parempi valinta. Avoin ennustavat haku soveltuu tapauksiin, joissa käyttäjä tietää mitä etsii, ainakin sen verran, että osaa näppäillä muutaman kirjaimen tekstikenttään.

Avointa tekstin hakua käytettäessä kannattaa muistaa, että ennustavan haun listan ei pitäisi olla liian pitkä. Käyttäjä vierittää listaa läpikäydessään alaspäin ja jos hän ei löydä etsimäänsä, hänen täytyy vierittää takaisin ylöspäin tekstikenttään syöttääkseen uudet hakusanat. Pitkän listan läpikäyminen on aikaa vievää ja suuritöistä.

  1. Aseta mielekkäät oletusarvot. Tarjoa käyttäjälle mahdollisuuksien mukaan joitakin oletusarvoja sopiviin kohtiin lomakkeilla. Kaikilla lomakkeilla on omat käyttötapauksensa, esimerkiksi junan aikataulujen etsintä lomakkeella käyttäjä todennäköisesti tahtoo etsiä aikatauluja junille, jotka lähtevät samana päivänä alkaen nykyisestä kellon ajasta. Siksi, on järkevää asettaa lähtöajaksi nykyinen päivä ja seuraava lähtevä juna oletusarvoiksi. Mielekkäät oletusarvot ovat minimalistisen suunnittelun perusta.

Yhteenvetona mobiililomakkeiden suunnittelusta Tan (2009) teroittaa: Ensinnäkin, suunnittelijan pitää ymmärtää milloin ja miksi käyttäjät käyttävät mobiililomaketta. Toiseksi pitää tunnistaa lomakkeen ensisijaisen tehtävän sisältö ja/tai kentät. Sen jälkeen on sovellettava edellä mainittuja strategioita parhaan vuorovaikutuksen saavuttamiseksi. Kannattaa muistaa, että ensisijaisena tavoitteena käyttäjällä on saada tehtävänsä suoritettua tehokkaasti ja vaivattomasti.

Lähteet: Tan, C., C., (2011). Forms that work: Designing web forms for usability. Saatavilla: http://www.formsthatwork.com/Mobile-forms