Ketterä käyttöliittymä on mukautuva

Ketterässä ohjelmistoprojektissa määrittelyt elävät ja kokonaisuus tarkentuu vähitellen. Lisäksi palveluille on yhä luonteenomaisenpaa jatkuva palvelukehitys, joka tuo toistuvia muutoksia palveluihin. Nämä ketteryyden tuomat haasteet voidaan huomioida tekemällä projektin alusta lähtien mukautuvia käyttöliittymäratkaisuja. Mukautuva käyttöliittymä pysyy yhtenäisenä ja johdonmukaisena sekä käytettävyydeltä hyvänä, kun palvelun toiminnot tai sisältö muuttuvat. Tämän kirjoituksen näkökulmasta mukautuvuus tarkoittaa käyttöliittymän sopeutumista ominaisuuksien ja sisältöjen muutoksiin. Näkökulma siis poikkeaa responsiivisuuden käsitteestä, jolla yleisesti tarkoitetaan käyttöliittymän sopeutumista eri päätelaitteisiin.

Hyödyistä huolimatta olen törmännyt lukemattomiin palveluihin ja hankkeisiin, joissa käyttöliittymän mukautuvuuden suunnittelu on jäänyt tekemättä. Yksi yhteinen tekijä on, että kyseisissä projekteissa ei ole ollut ammattitaitoista käyttöliittymäsuunnittelijaa mukana tai hänen työpanoksensa on rajautunut vain pieneen osaan palvelun kokonaisuutta ja elinkaarta.

Käyttöliittymäsuunnittelijan puuttuminen johtaa mm. seuraaviin ongelmiin:

  • Alussa keskitytään yksittäiseen tunnistettavaan toimintoon / sisältöön, joka voidaan toteuttaa helposti vain kyseiseen tarpeeseen sopivilla joustamattomilla käyttöliittymäratkaisuilla. Tällöin jää miettimättä käyttöliittymän mukautuvuus ja yhtenäisyys kokonaisuuden kannalta.
  • Suunnittelua tehdään vain teknisestä näkökulmasta, jolloin tekniset ratkaisut ja rajoitteet (esimerkiksi tietomallit ja rajapinnat) heijastuvat sellaisenaan käyttöliittymään aiheuttaen esteitä käyttöliittymän mukautuvuudelle.
  • Jatkuvan palvelukehityksen aikana palvelussa saattaa olla aikaisempi huonosti mukautuva käyttöliittymä, jonka muuttaminen joustavammaksi koetaan liian hankalaksi. Tällöin toteutusta tehdään entisten suunnitteluratkaisujen rajoitteissa, mikä yleensä johtaa entistä huonompaan käyttäjäkokemukseen.

Käyttöliittymän mukautuvuus voidaan suunnitella toistamalla seuraavia kolmea vaihetta koko projektin ajan:

  1. linjataan käyttöliittymän ominaisuuksia ja suunnitellaan käyttöliittymälle yleinen toimintojen sijoittelua kuvaava malli
  2. suunnitellaan käyttöliittymän osien rakenne joustavaksi
  3. valitaan muuttuvaan sisältöön mukautuvia käyttöliittymäelementtejä.

1. Käyttöliittymälinjaukset ja yleinen toimintojen sijoittelua kuvaava malli

Projektissa on kriittistä pystyä tekemään palvelun ominaisuuksiin liittyviä rajauksia ja linjauksia, koska kaikkea ei ole tarkoituksenmukaista suunnitella samalla kertaa. Linjauksilla rajataan ensimmäiseksi suunniteltavan ominaisuuden rajat ja tehtävät. Vaikka on tiedossa, että myöhemmin tulee toinen tähän ensimmäiseen ominaisuuteen liittyvä toinen ominaisuus, ei tarvitse vielä tietää, mitä se tekee ja miten, koska on selkeästi linjattu, mitkä asiat ovat olennaisimpia ensimmäisessä ominaisuudessa.

Linjauksien avulla voidaan kuvata käyttöliittymän osat alla olevan esimerkkikuvan tyyppisellä mallilla, jossa määritellään erilaisille toiminnoille omat yhdenmukaiset alueet menemättä yksityiskohtiin. Mallin avulla toimintoja ja käyttöliittymän osia voidaan jättää tarvittaessa pois ja löytää uusille toiminnoille oikea paikka sotkematta jo toteutettua käyttöliittymää. Myös käyttöliittymän osien uudelleenjärjestely on helpompaa kun toiminnot ja sisällöt on mietitty toisistaan erillisiksi kokonaisuuksiksi.

Visuaalisen mallin lisäksi voidaan dokumentoida palvelun käyttöliittymäkäytäntöjä, jotka helpottavat mallin käyttöä palvelukehityksen aikana esimerkiksi projektihenkilöstön vaihtuessa.

Esimerkkinä käyttöliittymään saatetaan toteuttaa projektin alkuvaiheessa hakutoiminto, mutta ei hakutulosten suodatustoimintoja, koska ei pystytä vielä määrittelemään suodatuskriteereitä. Tällöin käyttöliittymään tarvittavien muutosten ja toteutuksen työmäärän minimoimiseksi on tärkeää käyttöliittymän kokonaismallissa huomioida hakutoiminnon laajentaminen, jotta uusi suodatustoiminto on helposti lisättävissä käyttäjäkokemuksen kannalta parhaalla tavalla. Ilman mukautuvuuden huomiointia hakutoiminto saatettaisiin aluksi sijoittaa sivupalkin sijaan suoraviivaisesti vaikkapa hakutulosten yläpuolelle, mutta tällöin laajennettavissa olevan suodatustoiminnon lisääminen olisi ongelmallisempaa ja vaatisi käyttöliittymän uudelleensuunnittelua myöhemmässä vaiheessa.

Toisena esimerkkinä virheviesteille ja muille ilmoituksille voidaan varata tietty paikka käyttöliittymän kokonaisrakenteessa, vaikka ei olisi vielä tiedossa minkä tyyppisiä palautteita käyttäjälle on tarpeen antaa palvelun eri osissa. Mukautuvuuden huomioiva suunnitelma mahdollistaa erilaisten viestityyppien lisäämisen siten, ettei jouduta muuttamaan käyttäjäkokemusta, koska viestit voidaan esittää johdonmukaisesti palvelun kaikissa osissa.

blogi-ui-kehysmalli

2. Käyttöliittymän osien rakenne

Käyttöliittymän osien rakenteen suunnittelu on kriittisen tärkeää, kun varaudutaan kunkin osan mukautumiseen tunnistetuista tarpeista poikkeavaksi.

Alla oleva esimerkkikuva havainnollistaa usein palveluissa esiintyvää ongelmaa, jossa sisältö on jaettu tiettyyn määrään navigoitavia kategorioita. Nämä kategoriat voisi olla aluksi luontevaa esittää käyttöliittymässä vaakasuuntaisena rakenteena, joka on usein myös visuaalisesti miellyttävä tapa. Tällöin kuitenkin uusien sisältökategorioiden lisääminen johtaa nopeasti tälle toiminnolle varatun tilan loppumiseen. Uuden kategorian lisääminen johtaa pahimmillaan koko palvelun käyttöliittymärakenteen ja käyttäjäkokemuksen muuttamiseen – mahdollisesti tilanteessa jossa palvelu on tuotannossa ja käyttäjät ovat jo tottuneet palvelun tietynlaiseen toimintaan. Alla olevassa esimerkissä tämän tyyppisen tiedon esittämiseen on valittu paremmin muutoksiin mukautuva pystysuuntainen listarakenne. Parhaat mukautuvat ratkaisut ovat usein yksinkertaisia!

blogi-ui-rakenne

3. Muuttuvaan sisältöön mukautuvat käyttöliittymäelementit

Käyttöliittymän mukautuvan rakenteen suunnittelun lisäksi rakenteen sisältämien käyttöliittymäelementtien oikea valinta on oleellista, jotta voidaan varmistaa käyttöliittymän mukautuminen myös muihin kuin määrällisiin sisällön muutoksiin.

Esimerkiksi ongelmia aiheutuu, jos suunnitellaan ja toteutetaan vain tietyille käyttöliittymäteksteille tai tietyn kokoisille kuvakkeille sopivia käyttöliittymäelementtejä, jotka eivät mukaudu kun tekstien pituus tai muoto muuttuu. Niinkin yleiset asiat kuin osoitteet ja tekstien erimittaiset kielikäännökset tuottavat hämmästyttävän usein yllätyksiä käyttöliittymissä, joita ei ole suunniteltu mukautuviksi. Käyttöliittymäelementtien mukautuvuus on erityisen tärkeää suunnitella huolellisesti palvelussa, jossa käyttäjä lisää jonkin hallintakäyttöliittymän avulla määrittelemätöntä sisältöä palvelussa näytettäväksi – esimerkiksi erikokoisia kuvia ja erilaisia tekstejä. Tämä saattaa aiheuttaa paitsi käyttöliittymäelementtien visuaalisen “rikkoutumisen” myös toiminnallisia ongelmia, jolloin kriittisessä tilanteessa palvelun käyttö voi jopa estyä.

Alla olevassa esimerkkikuvassa listan elementeissä on huomioitu sisältömuutokset, kuten tekstikäännösten pituuden muutokset, jolloin listan yksittäisen elementin korkeus laajenee sisällön mukaan. Tämän käyttöliittymäteknisen ratkaisun lisäksi ammattitaitoinen suunnittelija kykenee arvioimaan, millä sisällöllä elementit ovat vielä käytettäviä. Esimerkiksi arvioitua rajaa pidemmät tekstit on syytä katkaista ja tarvittaessa tarjota erillinen toiminto koko tekstin näkemiseksi. Oikeanlaista mukautumista ei ole tekstin katkaisu sattumanvaraisesti kiinteän kokoisen käyttöliittymäelementin mukaan, vaikka sillä vältetäänkin elementin visuaalinen rikkoutuminen. Tällöin kuitenkin tärkeää informaatiota saattaa jäädä näkymättä jos esim. uutisotsikosta jää näkyviin vain ensimmäinen sana.

blogi-ui-elementti

Mukautuvan käyttöliittymän suunnittelu ja toteutus on siis elintärkeää palvelun toimivuuden ja käyttäjäkokemuksen säilymisen kannalta. Mukautuvuuden suunnittelu ei ole triviaalia tai itsestään selvää, vaan kriittisenä vaatimuksena ovat ammattitaitoiset suunnittelijat ja kehittäjät, jotka osaavat huomioida toimintojen ja sisältöjen muokkaamisen, lisäämisen ja poistamisen. Ketterissä projekteissa käyttöliittymien mukautuvuus on suunniteltava huolellisesti alusta alkaen, jotta käyttöliittymää voidaan joustavasti muuttaa ja tarkentaa projektin kuluessa sekä myöhemmin jatkuvana palvelukehityksenä. Mukautuva käyttöliittymä helpottaa palvelun kehittämistä vähentämällä tarvetta muuttaa jo toteutettuja asioita toistuvasti. Täten mukautuvaksi suunniteltu käyttöliittymä auttaa osaltaan pitämään palvelun käyttäjäkokemuksen hyvänä muutoksista huolimatta sekä vähentää muutosten suunnittelun ja toteutuksen kustannuksia.