Käyttöliittymäsuunnittelu (tai UI-suunnittelu, eng. user interface design) keskittyy helppokäyttöisen ja intuitiivisen käyttöliittymän tuottamiseen sovellukselle tai verkkosivustolle.
Käyttöliittymäsuunnittelussa määritellään sovelluksen näkyviä osia, kuten sen rakennetta, sovelluksen eri elementtejä, käytettäviä värejä ja fontteja. Näiden lisäksi interaktiivisuuden suunnittelu on myös suuressa roolissa.
Kaikki nämä osa-alueet tulee suunnitella yhteenkuuluviksi ja intuitiivisiksi, jotta sovellus tarjoaisi mahdollisimman sujuvan ja miellyttävän käyttökokemuksen. Jos käyttökokemussuunnittelu on aiheena kiinnostava, niin olemme käsitelleet sitä artikkelissamme “Mitä on UX-suunnittelu?”. Käsittelemme myös yhteenvetona, että miten nämä kaksi termiä eroavat toisistaan.
Alla vielä nopeat pikalinkit artikkelin aiheen teemoihin:
Miten käyttöliittymäsuunnittelu ja käyttökokemussuunnittelu eroavat toisistaan?
Käyttöliittymäsuunnittelu (UI-suunnittelu) ja käyttökokemussuunnittelu (UX-suunnittelu) liittyvät läheisesti toisiinsa ja toimivat useimmiten yhdessä luodakseen yhtenäisen tuotteen. Vaikka näiden kahden välillä on joitakin selviä eroja, suunnittelijoiden on tärkeää tuntea molemmat, jotta he voivat luoda visuaalisesti houkuttelevia ja toiminnallisesti tehokkaita tuotteita.
Tässä taulukkolistauksena erittely näiden merkittävimmistä eroista:
| UI-suunnittelu | UX-suunnittelu |
|---|---|
| Keskittyy käyttöliittymän visuaaliseen puoleen, kuten ulkoasuun, typografiaan ja väreihin. | Tavoitteena on tehdä sovelluksista hyödyllisiä, käytettäviä ja viihdyttäviä. |
| Tavoitteena suunnitella käyttöliittymäelementtejä, kuten pudotusvalikkoja, navigaatioita, tekstikenttiä, painikkeita jne. | Tavoitteena suunnitella käyttäjäpersoonia ja heidän polkuja. |
| Koskee yksittäisten elementtien sijoittelua ja toimivuutta sivulla. | Huolehtii käyttäjän polusta ensimmäisistä käyttöhetkistä transaktion jälkeiseen kulkuun. |
| Tavoitteena on luoda houkutteleva ja intuitiivinen käyttöliittymä, jota on helppo käyttää. | Tavoitteena on luoda kokonaisvaltainen kokemus, joka vastaa käyttäjän tarpeita ja tavoitteita. |
| Keskitytään usein tuotteen ulkonäköön ja sen fiilikseen. | Keskittyy usein käyttäjän motiiveihin ja odotuksiin. |
| Voidaan ajatella tuotteen “kuorena”. | Voidaan ajatella tuotteen “sieluna” |
| Tärkeää myönteisen ensivaikutelman luomiseksi ja käyttäjien sitoutumisen edistämiseksi. | Tärkeä tekijä käyttäjäuskollisuuden luomisessa ja myönteisten suositusten synnyttämisessä. |
| Voidaan arvioida sen esteettisyyden ja helppokäyttöisyyden perusteella. | Voidaan arvioida sen perusteella, miten se pystyy vastaamaan käyttäjien tarpeisiin ja tarjoamaan saumattoman ja miellyttävän kokemuksen. |
| Käytettäviä työkaluja ovat Adobe Photoshop, Sketch ja Figma. | Käytettäviä työkaluja ovat käyttäjätutkimusmenetelmät, rautalankamallinnus- ja prototyyppityökalut. |
Mikä on käyttöliittymä?
Käyttöliittymä eli UI on se osa sovellusta, joka mahdollistaa vuorovaikutuksen käyttäjän ja sovelluksen välillä. Käyttöliittymä toimii ikään kuin tulkkina käyttäjän (eli ihmisen) ja sovelluksen koodin välillä. Tällöin käyttäjä voi sovelluksessa nähdä esimerkiksi useita painikkeita, joita painaessaan koodi osaa toteuttaa halutun toimenpiteen.
Helpoimmillaan käyttöliittymä voidaankin mieltää esimerkiksi sovelluksen valikoiksi, joiden avulla käyttäjä navigoi sovelluksen sisällä tai painikkeiksi, joista sovelluksen eri toimintoja aktivoidaan, kuten tietojen tallentamista tai niiden poistamista.
Mitkä ovat käyttöliittymäsuunnittelun osa-alueet?
Käyttöliittymäsuunnittelun vaiheet voivat vaihdella hieman eri suunnitteluprojektien välillä, mutta yleisesti ottaen suunnitteluprosessiin kuuluu seuraavia vaiheita:
Käyttäjätutkimus
Käyttöliittymäsuunnittelun ensimmäinen vaihe on ymmärtää käyttäjien tarpeita, käyttötapoja ja tavoitteita. Ymmärrystä voidaan lisätä haastattelemalla käyttäjiä, keräämällä tietoja käyttäjäkyselyillä tai tekemällä havaintoja käyttäjien toiminnasta esimerkiksi erilaisten analytiikkatyökalujen avulla.
Koska käyttöliittymäsuunnittelussa pyritään luomaan mahdollisimman intuitiivinen käyttökokemus, on tärkeää ymmärtää, mitä käyttäjät haluavat saavuttaa sovellusta käyttäessään. Tällöin suunnittelu saadaan aloitettua ns. oikeista lähtökohdista, jolloin todennäköisyydet hyvään käyttökokemukseen kasvavat.
Käyttäjätutkimus on selkeä osa UX-suunnittelua, joten käyttöliittymäsuunnittelijat ja UX-suunnittelijat saattavat tehdä tiivistä yhteistyötä tässä vaiheessa.
Konseptisuunnittelu
Konseptisuunnitteluvaiheessa suunnittelutiimi käyttää käyttäjätutkimuksesta kerättyjä tietoja luodakseen alustavan suunnitelman käyttöliittymän rakenteesta ja toiminnoista.
Tässä vaiheessa ei siis vielä siirrytä suunnittelemaan konkreettisesti sovelluksen ulkonäköä, vaan määritetään tuotteen yleistä rakennetta, käytettävyyttä ja logiikka, josta kokonaisuus muodostuu.
Konseptointivaiheen iso rooli on luoda oikea suunta sovelluksen kehitystä varten. Kun konseptoinnissa asiat tehdään kerralla oikein, vähentää se tarvetta tehdä jatkossa turhia korjaustöitä, joilta oltaisiin voitu heti alussa välttyä.
Vaikka ulkonäköä ei suunnitella konkreettisesti vielä tässä vaiheessa, voidaan konseptoinnissa määrittää moodboardin avulla ajatuksia ja fiiliksiä halutusta ulkonäöstä.
Prototyyppien suunnittelu
Kun konseptisuunnitelma on saatu valmiiksi, suunnittelutiimi luo prototyyppejä käyttöliittymästä, jotta käyttäjät voivat testata ja antaa palautetta käyttökokemuksesta.
Prototyyppi ei ole vielä täysin viimeistelty toteutus eikä se välttämättä sisällä vielä kaikkia sovelluksen toiminnallisuuksia, vaan sen myötä on tarkoitus saada yleiskäsitys sovelluksen käyttökokemuksesta.
Prototypoinnin yhteydessä käyttäjiltä pyritään saamaan mahdollisimman paljon ja laadullisesti hyvää palautetta, jonka pohjalta prototyyppiä voidaan jatkokehittää.
Viimeistely
Palautteen perusteella suunnittelutiimi kehittää käyttöliittymää edelleen ja viimeistelee sen. Tässä vaiheessa käyttöliittymän visuaalinen ilme, viimeiset toiminnallisuudet ja yksityiskohdat hienosäädetään ja valmistellaan käyttöönottoa varten.
Käyttöönotto ja jatkuva kehitys
Käyttöliittymän käyttöönoton jälkeen käyttäjien reaktioita ja käyttöä seurataan jatkuvasti, ja käyttöliittymää kehitetään edelleen vastaamaan käyttäjien tarpeita ja muuttuvia trendejä.
Käyttöliittymäsuunnitteluprosessi on jatkuvaa ja iteroivaa, ja sen tavoitteena on kehittää käyttäjäystävällinen ja toimiva käyttöliittymä, joka vastaa käyttäjien tarpeita ja tavoitteita. Käyttäjien tarpeet voivat myös kehittyvän ympäristön myötä myös kasvaa jatkossa, jolloin käyttöliittymän kehitys on usein tarpeellista.
Mitkä ovat käyttöliittymäsuunnittelun tavoitteet?
Käyttöliittymäsuunnittelussa hyödynnetään usein käyttöliittymäsuunnittelun pioneeri Jakob Nielsenin suunnitteluperiaatteita. Näitä kutsutaan myös nimellä Nielsenin heuristiikat. Näiden periaatteiden avulla suunnittelijat voivat arvioida käyttöliittymän käytettävyyttä ja nämä ovatkin alalla yleisesti hyväksyttyjä standardeja käyttöliittymäsuunnittelun osalta.
Alla listattuna nämä suunnitteluperiaatteet:
Järjestelmän tilan näkyvyys
Käyttöliittymän tulisi aina kertoa käyttäjälle, että mitä sovelluksessa tapahtuu antaen käyttäjälle palautetta tämän toiminnoistaan erilaisilla signaaleilla, kuten esimerkiksi virheilmoituksilla tai viesteillä onnistuneesta toiminnosta.
Järjestelmän ja todellisen maailman vastaavuus
Käyttöliittymän käytetyn kielen, ikonien ja konseptien tulisi olla sen käyttäjälle tuttuja, sen sijaan että käyttöliittymässä hyödynnettäisiin esimerkiksi kehittäjille tuttuja konsepteja.
Käyttäjän kontrolli ja vapaus
Käyttöliittymän tulisi tarjota sen käyttäjälle tapa palauttaa tehty toiminto ja näin antaa vapaus ja itseluottamus systeemin käyttöön. Hyvä käyttöliittymä tukee myös pikakomentoja toimintojen palauttamiselle ja uudelleensuorittamiselle.
Yhdenmukaisuus ja standardit
Käyttöliittymässä käytetyt otsikot, painikkeet ja toiminnot tulisi tuottaa yhdenmukaisia tuloksia, jos ne näin esitetään käyttäjälle. Käyttöliittymän kehityksessä tulisikin toteuttaa alan standardeja, jotka toistuvat useimmissa sovelluksissa.
Virheiden estäminen
Käyttöliittymän pitäisi estää virheiden tekeminen ja tarjota selkeät ohjeet, jos virhe sattuu. Parhaassa tapauksessa käyttöliittymä ei mahdollista edes kriittisten virheiden tapahtumista alkuunkaan.
Tunnistaminen muistamisen sijaan
Käyttöliittymän pitäisi vähentää käyttäjän tarvetta muistaa asioita tekemällä käyttöliittymän toiminnot, painikkeet ja asetukset tunnistettaviksi tai helposti saavutettaviksi sen sijaan, että käyttäjä kävisi esimerkiksi pitkän tutoriaalin.
Joustavuus ja käytön tehokkuus
Käyttöä nopeuttavat pikanäppäimet ja oikotiet ovat helpottamassa jo kokenutta käyttäjää. Joustavuutta käyttäjille voi tarjota mahdollistamalla erilaisia kustomointeja käyttöliittymän käyttöä varten.
Esteettinen ja minimalistinen suunnittelu
Käyttöliittymien ei tulisi pitää esillä sisältöä tai toimintoja usein, joita käyttäjä ei usein tarvitse. Kaikki ylimääräiset elementit vähentävät kaikkien muiden sisältöjen tai käyttöliittymän tarjoavan informaation sisäistämistä tai kykyä havainnoida sitä.
Auttaminen virhetilanteiden tunnistamisessa, vianmäärityksessä ja virheistä toipumisessa
Virheviestit tulisi tuoda käyttäjälle helposti ymmärrettävässä muodossa ja selkeästi kertoa ongelman syy. Virheviestin yhteydessä olisi myös hyvä tarjota ratkaisu käyttäjän tuottamaan ongelmaan.
Ohjeet ja dokumentit
Tarpeen vaatiessa on hyvä tarjota käyttäjälle dokumentaatiota käyttöliittymän käyttöä varten. Lähtökohtaisesti tätä ei tulisi tarvita, mutta tarpeen vaatiessa helposti saavutettava ja etsittävä dokumentaatio, jossa on myös yksiselitteisesti laaditut ohjeet erilaisiin käyttöliittymän käyttötarkoituksiin, voi olla käyttäjälle iso apu.
Mitä hyötyä käyttöliittymäsuunnittelusta on?
Käyttöliittymäsuunnittelu tarjoaa useita eri hyötyjä, jonka syystä siihen kannattaa panostaa ohjelmistokehityksen aikana. Alla listattuna hyötyjä, mitä käyttöliittymäsuunnittelu tuo:
Käyttöliittymäsuunnittelu parantaa käyttökokemusta
Käyttöliittymäsuunnittelun tarkoituksena on tehdä ohjelmiston tai verkkosivuston käyttämisestä helppoa, selkeää ja intuitiivista. Hyvin suunniteltu käyttöliittymä parantaa käyttökokemusta ja auttaa käyttäjää suorittamaan haluamansa tavoitteet nopeammin ja vaivattomammin. Hyvään käyttökokemukseen sisältyy myös käyttäjän tunne, että käyttöliittymän käyttö on omassa kontrollista ja se on turvallista, eikä hän tunne olevansa kuin miinakentällä käyttöliittymää käytettäessä.
Käyttöliittymäsuunnittelu vähentää käyttäjän virheitä
Käyttöliittymäsuunnittelun avulla voidaan vähentää käyttäjän tekemiä virheitä, kuten väärän toiminnon valitsemista tai tietojen poistamista vahingossa. Hyvin suunniteltu käyttöliittymä ohjaa käyttäjää tekemään oikeita valintoja ja antaa tarvittavan palautteen virheiden välttämiseksi. Käyttölittymän tarjoamat peruutustoiminnot ja toimintoja vahvistavat kysymykset vähentävät runsaasti virhetilanteita käyttäjän osalta.
Virheiden välttämiseksi käyttöliittymäsuunnittelussa on hyvä myös huomioida erilaisten painikkeiden tekstien tai otsikoiden muotoilu mahdollisimman selkeästi.
Käyttöliittymäsuunnittelu tekee sovelluksen käytöstä vaivattomampaa
Käyttöliittymäsuunnittelu mahdollistaa käyttöliittymän vaivattomuuden, esimerkiksi antamalla nopean pääsyn usein käytettyihin toimintoihin. Hyvin suunniteltu käyttöliittymä säästää käyttäjältä aikaa ja vaivaa. Vaivattomuuden tunne käyttöliittymän kanssa edistää taas suuresti sovelluksen käyttöastetta ja paluuta sen pariin.
Käyttöliittymäsuunnittelu parantaa brändi-imagoa
Hyvin suunniteltu käyttöliittymä voi myös parantaa yrityksen brändi-imagoa. Selkeä, esteettinen ja intuitiivinen käyttöliittymä voi antaa käyttäjälle positiivisen kuvan yrityksestä ja sen tarjoamista tuotteista tai palveluista.
Käyttöliittymäsuunnittelu vähentää potentiaalisia kustannuksia
Käyttöliittymäsuunnittelun avulla voidaan myös säästää kustannuksissa. Hyvin suunniteltu käyttöliittymä voi vähentää käyttökoulutuksen tarvetta ja käyttäjän tekemiä virheitä, mikä voi vähentää tuotantokustannuksia ja parantaa tuotteiden laatua. Käyttäjän virheiden minimointi voi säästää myös asiakaspalvelukustannuksissa, jos käyttäjät ovat virheiden osalta usein palvelun tuottajaan yhteydessä.
Kaiken kaikkiaan käyttöliittymäsuunnittelulla on monia hyötyjä, ja se on tärkeä osa ohjelmiston tai sovelluksen kehitysprosessia.
