Käyttöliittymän kehitys

Käyttöliittymä on se osa verkkosivustoa, sovellusta tai laitetta, jonka kautta ihminen käyttää sen toimintoja. Siihen kuuluvat esimerkiksi valikot, painikkeet, lomakkeet, hakukentät ja erilaiset ilmoitukset. Käyttöliittymän avulla käyttäjä löytää tietoa, tekee valintoja ja saa palautetta toimintansa tuloksista.

Käyttöliittymän kehitys yhdistää suunnittelun, teknisen toteutuksen ja testaamisen. Tavoitteena on rakentaa kokonaisuus, joka auttaa käyttäjää saavuttamaan päämääränsä mahdollisimman ymmärrettävästi.

Hyvä käyttöliittymä ei synny pelkästään näyttävistä väreistä tai uusista tekniikoista. Se perustuu siihen, että palvelun tarkoitus, käyttäjän tarpeet ja toimintojen järjestys on mietitty huolellisesti. Pienikin muutos voi parantaa kokemusta, jos se poistaa todellisen ongelman.

Mitä käyttöliittymän kehittäminen tarkoittaa?

Käyttöliittymän kehittäminen tarkoittaa käyttäjälle näkyvien ja hänen ohjattavissaan olevien toimintojen suunnittelua ja toteuttamista. Työhön kuuluu sekä ulkoasu että se, miten käyttöliittymä käyttäytyy eri tilanteissa.

Esimerkiksi kirjautumislomakkeessa tarvitaan muutakin kuin kaksi kenttää ja painike. Käyttäjän pitää ymmärtää, mitä tietoja kenttiin kirjoitetaan, miten unohtunut salasana palautetaan ja mitä tapahtuu, jos kirjautuminen epäonnistuu.

Kehityksessä ratkaistaan muun muassa seuraavia kysymyksiä:

• Mistä käyttäjä aloittaa?
• Mitkä asiat näytetään ensimmäisenä?
• Miten toiminnot nimetään?
• Millaista palautetta käyttäjä saa?
• Miten virheestä pääsee eteenpäin?
• Kuinka käyttö onnistuu erilaisilla laitteilla?

Näitä kysymyksiä kannattaa käsitellä jo ennen yksityiskohtaisen ulkoasun suunnittelua. Muuten kaunis näkymä voi peittää alleen epäselvän toimintalogiikan.

Käyttöliittymä ja käyttökokemus liittyvät toisiinsa

Käyttöliittymästä käytetään usein lyhennettä UI, joka tulee englannin sanoista user interface. Käyttökokemuksesta puolestaan käytetään lyhennettä UX eli user experience.

Käyttöliittymä tarkoittaa esimerkiksi sivun rakennetta, painikkeita ja vuorovaikutustapoja. Käyttökokemus on laajempi kokonaisuus: siihen vaikuttavat myös palvelun hyödyllisyys, sisältö, nopeus ja toimintavarmuus.

Verkkokaupan ostospainike voi olla selkeästi näkyvissä, mutta ostaminen tuntuu silti hankalalta, jos toimituskulut paljastuvat vasta viimeisessä vaiheessa. Ongelma ei tällöin ratkea pelkästään painikkeen väriä vaihtamalla.

Käyttöliittymän kehittäjän kannattaa siksi tarkastella yksittäisten näkymien lisäksi koko asiointia. Käyttäjälle palvelu on yksi kokonaisuus, vaikka sen toteutuksesta vastaisi monta eri tiimiä.

Kehitys alkaa käyttäjän tehtävän ymmärtämisestä

Ensimmäinen vaihe on selvittää, ketkä palvelua käyttävät ja mitä he yrittävät saada aikaan. Pelkkä kohderyhmän ikä tai ammatti ei vielä kerro riittävästi käyttötilanteesta.

Esimerkiksi tapahtumasivuston käyttäjä voi haluta tarkistaa alkamisajan juuri ennen lähtöä. Hän tarvitsee tiedon nopeasti puhelimellaan. Tapahtuman järjestäjä taas saattaa käyttää samaa palvelua tietokoneella osallistujatietojen hallintaan.

Tarpeita voi selvittää haastatteluilla, palautteella ja nykyisen palvelun käytön havainnoinnilla. Hyödyllisiä kysymyksiä ovat:

• Mikä tehtävä tuo käyttäjän palveluun?
• Missä kohdassa hän joutuu pysähtymään?
• Mitä tietoa hän etsii?
• Millaisia virheitä hän tekee?
• Mitä hän käyttää palvelun rinnalla?

Kirjaa havainnot konkreettisina ongelmina. ”Käyttäjät eivät löydä laskujaan” ohjaa kehitystä paremmin kuin ”sivuston pitäisi olla modernimpi”.

Suunnittele sisältöjen ja toimintojen rakenne

Kun tärkeimmät tehtävät tunnetaan, päätetään, miten tiedot ja toiminnot järjestetään. Tätä vaihetta kutsutaan usein informaatioarkkitehtuurin suunnitteluksi.

Käyttäjän pitäisi pystyä ennakoimaan, mistä etsimänsä asian löytää. Valikkojen nimissä kannattaa käyttää kohderyhmälle tuttuja sanoja organisaation sisäisten termien sijaan.

Esimerkiksi asiakas saattaa etsiä laskuja kohdasta ”Laskut”, vaikka yrityksen oma järjestelmä kutsuisi kokonaisuutta taloushallinnon dokumentaatioksi.

Hahmottele tärkeimmät etenemisreitit:

1. Käyttäjä saapuu palveluun.
2. Hän löytää tarvitsemansa toiminnon.
3. Hän tekee valinnan tai syöttää tiedot.
4. Hän tarkistaa tarvittaessa tiedot.
5. Palvelu vahvistaa onnistumisen.

Jos reitillä on vaiheita, joilla ei ole selvää tarkoitusta, arvioi niiden tarpeellisuus. Lyhyempi polku auttaa kuitenkin vain silloin, kun tarvittavat tiedot ja päätökset säilyvät ymmärrettävinä.

Rautalanka tekee suunnitelmasta näkyvän

Rautalankamalli on yksinkertainen hahmotelma käyttöliittymän rakenteesta. Siinä voidaan esittää otsikoiden, sisältöalueiden, kenttien ja painikkeiden paikat ilman viimeisteltyjä värejä tai kuvia.

Rautalangan voi piirtää paperille tai tehdä suunnittelutyökalulla. Sen tarkoituksena on mahdollistaa muutokset nopeasti.

Esimerkiksi ajanvarauksen luonnoksesta voidaan arvioida, näkyykö valittu päivä riittävän selvästi ja ymmärtääkö käyttäjä, milloin varaus vahvistetaan.

Klikattava prototyyppi vie suunnitelmaa pidemmälle. Siinä käyttäjä voi siirtyä näkymästä toiseen, vaikka taustalla ei vielä olisi toimivaa tietokantaa.

Prototyyppiä kannattaa testata realistisella tehtävällä. Pyydä esimerkiksi varaamaan vapaa aika tietylle päivälle. Älä neuvo heti oikeaa reittiä, sillä epäröinti paljastaa usein suunnitelman epäselvät kohdat.

Visuaalinen suunnittelu ohjaa huomiota

Ulkoasu auttaa käyttäjää ymmärtämään, mikä näkymässä on tärkeää. Otsikot, tyhjä tila, tekstin koko ja elementtien ryhmittely muodostavat visuaalisen hierarkian.

Jos jokainen painike on yhtä voimakas, tärkein toiminto ei erotu. Jos kaikki teksti on tiiviisti samassa ryhmässä, kokonaisuutta on vaikea silmäillä.

Valitse näkymälle selkeä päätoiminto. Lomakkeessa se voi olla ”Lähetä hakemus”, kun taas verkkokaupassa se voi olla ”Lisää ostoskoriin”.

Yhtenäisyys helpottaa oppimista. Samantyyppisten painikkeiden, lomakekenttien ja ilmoitusten kannattaa käyttäytyä samalla tavalla eri sivuilla.

Värien lisäksi käytä tekstiä ja tarvittaessa symboleja. Virhettä ei pidä ilmaista pelkällä punaisella reunuksella, vaan käyttäjän tulee saada myös ymmärrettävä selitys ongelmasta.

Tekninen toteutus muuttaa suunnitelman toimivaksi

Verkkokäyttöliittymän perustekniikoita ovat HTML, CSS ja JavaScript. HTML kuvaa sisältöjen rakennetta, CSS niiden esitystapaa ja JavaScript mahdollistaa monia vuorovaikutteisia toimintoja.

Toteutuksessa suunnitelma jaetaan usein uudelleenkäytettäviin osiin eli komponentteihin. Näitä voivat olla painike, hakukenttä, tuotekortti tai ilmoituslaatikko.

Komponenttien avulla sama ratkaisu voidaan toteuttaa johdonmukaisesti useaan paikkaan. Jos painikkeen toimintaa korjataan keskitetysti, korjaus voi hyödyttää kaikkia sitä käyttäviä näkymiä.

Tekniikan valinta kannattaa suhteuttaa tarpeeseen. Yksinkertainen tietosivu tarvitsee erilaisen toteutuksen kuin reaaliaikainen yhteistyösovellus.

Kehittäjän on huomioitava myös tilanteet, joita ulkoasuluonnoksessa ei aina näy: pitkä otsikko, puuttuva kuva, hidas verkkoyhteys ja epäonnistunut tiedonhaku.

Responsiivisuus ja saavutettavuus kuuluvat perustaan

Responsiivinen käyttöliittymä mukautuu käytettävissä olevaan näyttötilaan. Käytännössä esimerkiksi palstat voivat siirtyä allekkain ja navigointi muuttua pienelle näytölle sopivaksi.

Pelkkä sisällön pienentäminen ei riitä. Painikkeiden pitää olla käytettäviä, tekstin luettavaa ja tärkeimpien toimintojen löydettävissä myös puhelimella.

Saavutettavuus puolestaan huomioi erilaiset tavat käyttää palvelua. Käyttäjä voi liikkua näppäimistöllä, suurentaa sisältöä tai käyttää ruudunlukijaa.

Toteutuksessa kannattaa varmistaa ainakin seuraavat asiat:

• Kentillä on ymmärrettävät nimilaput.
• Otsikot muodostavat johdonmukaisen rakenteen.
• Näppäimistökohdistus erottuu.
• Painikkeet ja linkit toimivat niiden tarkoituksen mukaisesti.
• Tärkeää tietoa ei välitetä vain värillä.
• Sisältö säilyy käytettävänä suurennettaessa.

Näitä ominaisuuksia on helpompi rakentaa alusta lähtien kuin lisätä valmiiseen kokonaisuuteen jälkikäteen.

Suunnittele palaute ja virhetilanteet

Käyttöliittymän pitäisi kertoa, mitä käyttäjän toiminnasta seurasi. Tallennuksen jälkeen tarvitaan vahvistus, ja pitkän toiminnon aikana tieto käsittelyn etenemisestä.

Ilman palautetta käyttäjä saattaa painaa samaa painiketta uudelleen tai poistua sivulta kesken toiminnon.

Virheilmoituksen tulee auttaa korjaamaan tilanne. ”Virheellinen syöte” on epämääräinen, mutta ”Kirjoita sähköpostiosoite muodossa nimi@esimerkki.fi” kertoo, mitä odotetaan.

Säilytä käyttäjän jo antamat tiedot mahdollisuuksien mukaan. Yhden puuttuvan kentän ei pitäisi tyhjentää koko lomaketta.

Suunnittele myös tyhjät näkymät. Jos käyttäjällä ei vielä ole tallennuksia, kerro, miten ensimmäinen tallennus tehdään. Tyhjä sivu ilman selitystä näyttää helposti rikkoutuneelta.

Testaa tehtävien onnistumista

Testauksessa tarkastellaan sekä teknistä toimivuutta että käytettävyyttä. Painikkeen toimiminen ei vielä osoita, että käyttäjä löytää sen tai ymmärtää sen tarkoituksen.

Anna testaajalle todellinen tehtävä ja seuraa etenemistä. Kiinnitä huomiota harhapolkuihin, toistuviin virheisiin ja tilanteisiin, joissa käyttäjä tarvitsee apua.

Testaa myös poikkeavia olosuhteita: pieni näyttö, suurennettu teksti, pitkä sisältö ja katkeava verkkoyhteys voivat paljastaa ongelmia, joita tavallisessa kehitysnäkymässä ei huomaa.

Kirjaa löydökset vaikutuksen mukaan. Asioinnin estävä virhe kannattaa korjata ennen pientä visuaalista epätasaisuutta.

Jatka kehittämistä julkaisun jälkeen

Julkaisu tuo käyttöliittymän todellisiin käyttötilanteisiin. Palautteesta ja käytön seurannasta voi selvitä tarpeita, joita suunnittelussa ei tunnistettu.

Määrittele muutoksille tavoite. Esimerkiksi ”käyttäjä löytää tilauksensa ilman asiakaspalvelun apua” on arvioitava tavoite. Pelkkä ulkoasun uudistaminen ei vielä kerro onnistumisesta.

Tee muutoksia hallitusti ja seuraa niiden vaikutusta. Jos tuttu toiminto siirtyy, auta käyttäjää löytämään sen uusi paikka.

Käyttöliittymän kehitys on jatkuvaa ongelmien ratkaisemista. Parhaat parannukset näkyvät usein siinä, että käyttäjä onnistuu tehtävässään sujuvasti eikä joudu miettimään itse käyttöliittymää.

🗂️ Liittyvät kategoriat

Artikkeleita 2 021 artikkelia Selaa kategoriaa → IT 1 947 artikkelia Selaa kategoriaa → Verkkokehitys 1 262 artikkelia Selaa kategoriaa → Verkkotyökalu 1 175 artikkelia Selaa kategoriaa →