Suunnittelu pienelle näytölle

Käyttäjän tekemä tiedon syöttö pitäisi minimoida; kun mahdollista, tiedon syöttämistä kannattaa kokonaan välttää. Hyperlinkkejä kannattaa käyttää hyödyksi. Tärkein informaatio tulisi näyttää ensimmäisenä. Virheilmoitusten tulee olla hyödyllisiä. Suositeltavaa käyttää mieluummin pystysuoraa kuin vaakasuuntaista vieritystä.

Mauney ja Masterton (2008) antavat kirjassa HCI Beyond the GUI – Design for Haptic, Speech, Olfactory, and Other Nontraditional Interfaces suunnittelusääntöjä mobiililaitteille. Kirjoittajat jakavat suunnitteluohjeet viiteen eri osioon, joista seuraavaksi on esitetty tiivistetysti toinen osuus, eli suunnittelu pienille näytöille.

Käyttäjän tekemä tiedon syöttö pitäisi minimoida, siksi uusien tiedon syöttämistä tarvitsevien vimpaimien lisäämistä kannattaa aina harkita tarkkaan. Kun mahdollista, tiedon syöttämistä kannattaa kokonaan välttää, esimerkiksi jos laite antaa käyttäjälle ei-kriittistä palautetta, voi olla järkevää käyttää dialogi laatikkoa, joka häviää näytöltä automaattisesti tietyn ajan kuluttua. (Mauney, Masterton, 2008).

Silloin, kun tiedon syöttämistä on pakko käyttää, se kannattaa toteuttaa niin, että siitä on käyttäjälle mahdollisimman vähän vaivaa esimerkiksi, jos käyttäjän pitää syöttää kaupungin nimi, on parempi vaihtoehto käyttää jotain tunnistukseen perustuvaa menetelmää, kuten radiopainikkeita, alasvetovalikoita tai valintaruutuja. Esimerkissä kaupungin nimen syöttämiseen olisi tehokkaampaa käyttää joko valintaa, tai postinumeron syöttämistä. (Mauney, Masterton, 2008).

Hyperlinkkejä voidaan käyttää hyödyksi, kun yhdelle sivulle ei saada mahtumaan riittävästi tekstiä esimerkiksi, kun joku virheilmoitus vaatii yksityiskohtaista tekstimuotoista ohjetta. Hyperlinkkien hyvänä puolena onkin, että niiden avulla jokin tieto voidaan piilottaa, mutta pitää silti helposti saatavilla. Varsinkin tilanteissa, joissa sama tieto näkyy käyttäjälle usein, hyperlinkit ovat käteviä. (Mauney, Masterton, 2008)

Jos tietoa näytöllä ei ole esitetty tarkoituksenmukaisesti, voi jopa vähäinen sisältö näytöllä aiheuttaa sekaannusta. Tärkein informaatio tulisi näyttää sivulla ensimmäisenä ja suurimmalla koolla, riippuen käyttäjän kulloisestakin tehtävästä. Jos tietoa ei voi priorisoida, se kannattaa laittaa loogiseen järjestykseen, (joko aakkostaen tai aikajärjestyksessä), jotta käyttäjän muistikuormaa ei lisätä ja tehokkuus olisi parempi. Tiedon ryhmittely tekee lisäksi tiedon visuaalisesta skannaamisesta nopeampaa. (Mauney, Masterton, 2008).

Virheilmoitusten täytyy olla hyödyllisiä myös mobiiliohjelmistoissa. Virheilmoituksen tulisi koostua kolmesta eri osa-alueesta 1) virheen ainutkertaisesta tunnisteesta, jotta käyttäjä voi etsiä apua jostakin toisesta lähteestä, kuten asiakaspalvelusta. 2) Ongelman kuvauksesta ja 3) mahdollisesta ratkaisusta ongelmaan. Kohdat kaksi ja kolme pitää kirjoittaa käyttäjän ymmärtämällä kielellä. (Mauney, Masterton, 2008)

Ihannetapauksessa sivu mahtuu kokonaisuudessaan näytölle. Monesti tämä ei ole kuitenkaan mahdollista, esimerkiksi ohjetekstin tai muun informaation takia. Ohjetekstit pitäisi olla mobiilisovelluksissa lyhyitä sovellusten yksinkertaisuuden takia. Pitkät ohjeteksti voivat olla merkki siitä, että käyttöliittymä on liian monimutkainen. (Mauney, Masterton, 2008).

Monimutkaisemmissa sovelluksissa tai www-sivuilla vieritystä on mahdotonta välttää. Tuolloin on suositeltavaa käyttää mieluummin pystysuoraa vieritystä kuin vaakasuuntaista vieritystä, koska Internetin käyttö on tehnyt alaspäin vierityksestä tuttua suurimmalle osalle käyttäjistä. Vaakasuora vieritys taas on vaikeampi ymmärtää, koska lukijan on hankalampi hahmottaa se visuaalisesti. Kun vaakavieritystä kuitenkin tarvitaan, esimerkiksi suurten kuvien tai karttojen yhteydessä, ”vieritysrajojen” käyttö on kannattavaa. (Mauney, Masterton, 2008).

Lähteet: Mauney, D.W., Masterton, C., (2008). Small-Screen Interfaces in HCI Beyond the GUI. Design for Haptic, Speech, Olfactory and Other Nontraditional Interfaces. Ed. Kortum, P., Morgan Kaufman.

Suunnittele yksinkertaista

Useimmiten suoritettavat tehtävät pitäisi olla parhaiten näkyvillä. Poista toiminnallisuutta, jota käytetään vain satunnaisesti. Pidä käyttöliittymän tietohierarkia sekä kapeana että matalana.  On tehokkaampaa suunnitella syvempi rakenne kuin leveämpi. Osita monimutkaiset tehtävät erillisiin helpommin ymmärrettäviin osiin. Asteittainen paljastaminen parantaa käyttäjän tehtävien suoritusnopeutta. 

Mauney ja Masterton (2008) antavat kirjassa HCI Beyond the GUI – Design for Haptic, Speech, Olfactory, and Other Nontraditional Interfaces suunnittelusääntöjä mobiililaitteille. Kirjoittajat jakavat suunnitteluohjeet viiteen eri osioon, joissa Mauney ja Masterton esittelevät yhteensä 19 eri suunnittelusääntöä. Seuraavaksi on esitetty tiivistetysti ensimmäinen osuus, eli pyrkimys yksinkertaisuuteen.

Käyttöliittymän päätavoitteena on pyrkiä yksinkertaisuuteen. Ensimmäinen askel yksinkertaistamisprosessiin on ymmärtää, mitä käyttäjä haluaa laitteen tekevän, toisin sanoen erityisen tärkeää on ymmärtää käyttäjän tarpeet.

Useimmiten suoritettavat tehtävät ja ne tehtävät, joita suurin osa käyttäjistä käyttää, pitäisi olla parhaiten näkyvillä käyttöliittymässä. Toisaalta käyttöliittymää voidaan pyrkiä pelkistämään, eli poistetaan toiminnallisuutta, jota käyttävät vain muutamat käyttäjät satunnaisesti. Tämä vaatimus koskee myös yksittäisiä näyttöjä, jotka täytyy pitää yksinkertaisina. (Mauney, Masterton, 2008).

Yksinkertaisuuteen voidaan pyrkiä myös pitämällä käyttöliittymän tietohierarkia sekä kapeana (vähemmän valintoja per taso), että matalana (vähemmän tasoja valittavana hierarkian juureen). Jos valintojen määrä välttämättä ylittää kapean ja matalan hierarkian, mobiileissa sovelluksissa on tehokkaampaa suunnitella syvempi rakenne kuin leveämpi. Myöskään räätälöinti ei sovellu tai ole edes tarpeellista pienille näytöille, koska räätälöinti lisää monimutkaisuutta ja mobiilisovellukset ovat tyypillisesti perinteisiä sovelluksia yksinkertaisempia. (Mauney, Masterton, 2008).

Ehkä kuitenkin tehokkain keino yksinkertaistaa käyttöliittymää on osittaa monimutkaiset tehtävät erillisiin helpommin ymmärrettäviin osiin. Tässä ns. asteittaisessa paljastamisessa jokainen askel jaetaan yksittäiselle ruudulle, jotka johtavat yhdessä käyttäjän tavoitteeseensa. Esimerkkinä on hierarkkinen navigointi, jossa käyttäjälle annettavat valinnat on jaettu tarkoituksen mukaisiin ryhmiin ja aliryhmiin. Päällisin puolin asteittainen paljastaminen näyttää rikkovan tehokkuuden vaatimusta, mutta käytännössä se parantaa käyttäjän tehtävien suoritusnopeutta. (Mauney, Masterton, 2008).

Lähteet: Mauney, D.W., Masterton, C., (2008). Small-Screen Interfaces in HCI Beyond the GUI. Design for Haptic, Speech, Olfactory and Other Nontraditional Interfaces. Ed. Kortum, P., Morgan Kaufman.

Suunnittelusääntöjen tunteminen on käyttöliittymäsuunnittelijan perusosaamista

Suunnitteluohjeistot antavat yleisiä, sovelluksesta riippumattomia ohjeita vuorovaikutusratkaisujen (käyttöliittymän) suunnitteluun. 

Blogin aluksi keskitytään mobiilien laitteiden käyttöliittymien suunnittelusääntöihin (-ohjeistoihin).

Suunnittelusäännöt tukevat erityisesti vuorovaikutuselementtitason suunnittelua, käyttöliittymän "pintatasoa". Ohjeistot antavat peruslaadun käyttöliittymiin, mutta eivätkä korvaa tehtävätasoa ja käytettävyysaktiviteetteja. (näistä tasoista enemmän kirjassa "Navigoi oikein käytettävyden vesillä"; ks. linkki alla)

Suunnitteluohjeistolla on kaksi käyttötapaa. Tärkein on (1) ohjata suunnittelijaa suunnitteluratkaisujen tuottamisessa.  Toinen on (2) toimia tarkistuslistoina ulkopuolisen tekemissä  tarkistuspohjaisissa käytettävyysarvioinneissa. 

Yleisiä käyttöliittymien suunnittelusääntöjä on esimerkiksi standardisarjassa ISO 9241.
Mobiililaitteille suunnittelusääntöjä ja heuristiikkoja on kehitetty erityisesti 2000 -luvun alkupuolella. 

Suunnittelusääntöjen kehityksen taustalla on ollut joko tunnettujen asiantuntijoiden perinteisille tietokoneille tehdyt säännöt, kuten esimerkiksi Nielsenin heuristiikat tai Schneidermanin kahdeksan kultaista sääntöä, mutta niitä on kehitetty myös perustuen eri asiantuntijoiden kokemukseen tai käyttäjätutkimuksiin.

Osa vakiintuneista suunnittelusäännöistä ja heuristiikoista soveltuu sellaisenaan myös mobiililaitteille, osaa säännöistä joudutaan muokkaamaan sopiviksi ja osa mobiililaitteiden/sovellusten ohjeista on täysin uniikkeja.

Tyypillistä suunnittelusäännöissä on se, että ne ovat usein vain osittaisia tai niitä ei esitetä kovin tarkalla ja konkreettisella tasolla. Ne voivat olla myös niin spesifisiä, keskittyen vain tietylle osa-alueelle (kuten esimerkiksi mobiileja opetusportaaleja, tai mediagallerioita varten), jolloin niitä ei suoraan soveltaa muihin tapauksiin.


- Seuraavissa kirjoituksissa siis esitetään eri lähteistä löytyviä suunnittelusäätöjä. 


Lähteet:


Bertini, E. Catarci, T. Kimani, S., Dix, A., (2005). A review of standard usability principles in the context of mobile computing. Studies in Communication Sciences, 5(1):111–126, 2005.


Jokela, T. (2010). Navigoi oikein käytettävyyden vesillä. www.kaytettävyyskirja.net

Blogin idea

Tarkoitus olisi, että blogissa käsitellään erityisesti CreaBase-projektissa mukana olevien yritysten näkökulmasta mielenkiintoisia ja ajankohtaisia asioita.

Tässä blogissa käsitellään mobiileihin laitteisiin ja sovelluksiin liittyviä aiheita, erityisesti mobiilien laitteiden erot verrattuna pöytäkoneisiin, suunnittelu pienille näytöille ja mobiililaitteiden/sovellusten suunnitteluohjeistukset sekä heuristiikat. Oikealla olevista linkeistä pääsee katsomaan muita käytettävyyteen liittyviä blogeja


Toivomus on, että yritysten käyttöliittymäsuunnittelijat ja muut käyttöliittymien kanssa tekemisissä tuovat esiin kiinnostavia kysymyksiä. Niitä voi laittaa joko blogikommenteiksi tai lähettää suoraan sähköpostitse blogin kirjoittajille, jolloin otetaan blogiaiheiksi. Kysymykset käsitellään niin, että kysyjä pidetään joko anonyyminä tai nimi julkaistaan, ihan miten kysyjä haluaa.

Lähettäkää kysymykset osoitteisiin timo.jokela@joticon.fi (taina.lehtonen@oulu.fi on äitiyslomalla)