Käyttöliittymäsuunnittelu, eli UI-suunnittelu viittaa nimensä mukaisesti käyttöliittymään – siihen, miten käyttäjä on vuorovaikutuksessa käyttöliittymän kanssa. Käyttöliittymä (user interface, UI) on se ohjelmiston tai laitteen näkyvä osa, jota käyttäjä käyttää. UI-suunnittelun yhteydessä puhutaan usein myös UX-suunnittelusta. UX-suunnittelu tarkoittaa käyttökokemuksen suunnittelua.

Nämä kaksi eivät kuitenkaan ole toistensa synonyymejä, vaikka lomittuvatkin toisiinsa. Käyttöliittymäsuunnittelu (UI design) koskee ainoastaan digitaalisia tuotteita ja kokemuksia, kun taas käyttökokemuksen suunnittelua (UX design) voidaan toteuttaa myös fyysiselle tuotteelle tai palvelukokemukselle. Molemmat ovat kuitenkin minkä tahansa verkkosivuston, mobiilisovelluksen tai muun ohjelmiston onnistumisen näkökulmasta ratkaisevia, sillä näillä varmistetaan käyttöliittymän käytettävyys.

Lue myös: UX- ja UI-suunnittelu – mitä ne ovat ja mikä rooli niillä on verkkosivu- ja ohjelmistoprojektissa?

Käyttöliittymäsuunnittelun tavoitteena on helppokäyttöinen käyttöliittymä

Käyttöliittymäsuunnittelun tavoitteena on, että käyttöliittymää on mahdollisimman yksinkertaista käyttää ja se palvelee näin myös lopullisia liiketoiminnallisia tavoitteita. UX-suunnittelussa muotoillaan käyttäjän matka, joka viitoitetaan käyttöliittymäsuunnittelussa visuaalisilla ja vuorovaikutteisilla elementeillä. UI-suunnittelu on se verkkosivusto– tai ohjelmistokehitysprojektin vaihe, jossa puhalletaan brändi henkiin – yksinkertaiset rautalankamallit saavat brändisi mukaisen visuaalisen ilmeen ja heräävät eloon.

Verkkosivu- ja ohjelmistokehitysprojektissa UX- ja UI-suunnitteluprosessia voidaankin kuvata vähän kuin värityskirjana. UX-suunnittelussa luodaan tarkat suunnitelmat, jotka väritetään UI-suunnittelun aikana. UI-suunnittelun rooli ei kuitenkaan ole toimia vain värikynänä, vaan hyvä käyttöliittymäsuunnittelija huomioi sekä teknisen että visuaalisen toimivuuden. Toimivan käyttöliittymän suunnittelussa tarvitaan siis sekä visuaalista näkemystä että ymmärrystä web-kehityksestä.

Lue myös: Verkkosivu-uudistus ja tavoitelähtöinen verkkosivujen suunnittelu.

Mikä on käyttöliittymä?

Käyttöliittymä on se osa ohjelmistoa tai laitetta, jonka kautta käyttäjä on vuorovaikutuksessa järjestelmän kanssa. Se toimii rajapintana ihmisen ja koneen välillä mahdollistaen ohjelmiston tai laitteen käytön ja hallinnan. Käyttöliittymä voi olla graafinen (GUI), tekstipohjainen (CLI) tai fyysinen (HW).

Graafinen käyttöliittymä (GUI, Graphical User Interface):

• Visuaalinen ja interaktiivinen
• Sisältää ikkunoita, kuvakkeita, valikoita, painikkeita jne.
• Käyttäjä navigoi ja antaa komentoja hiirellä, kosketusnäytöllä tai näppäimistöllä
• Esimerkkejä: tietokoneen työpöytä, mobiilisovellukset, verkkosivut

Tekstipohjainen käyttöliittymä (CLI, Command Line Interface):

• Perustuu tekstipohjaisiin komentoihin
• Käyttäjä kirjoittaa komentoja näppäimistöllä ja järjestelmä vastaa tekstinä
• Yleinen kehittäjien, järjestelmänvalvojien ja tehokäyttäjien keskuudessa
• Esimerkkejä: Linux-terminaali, Windows Command Prompt

Fyysinen käyttöliittymä (HW, Hardware Interface):

• Laitteen fyysiset ohjaimet, painikkeet, vivut, valot jne.
• Mahdollistaa laitteen käytön ja antaa palautetta
• Esimerkkejä: auton ohjauspyörä ja mittaristo, mikroaaltouunin painikkeet

Miksi käyttöliittymäsuunnittelu on tärkeää?

Elämme jatkuvassa informaatiotulvassa, jossa asiakkaan huomiosta kilpailu on kovaa. Kun potentiaaliset asiakkaat ovat löytäneet palvelusi, tahdot varmasti myös vakuuttaa heidät ostamaan tai suorittamaan muun annetun tavoitteen. Käyttöliittymän toimivuus on niin tärkeää, että jopa CTA-painikkeen muoto ja väri voivat määrittää ymmärtävätkö käyttäjät, mitä heidän tulisi tehdä verkkosivustolla tai muussa sovelluksessa – puhumattakaan niiden sijoittelusta.

Esimerkiksi jos verkkosivuston tavoitteena on yhteydenotot, hyvä toimintatapa on pitää päänäkymä selkeänä ja siinä tulisi sijaita vain yksi toimintoon ohjaus (CTA) – “Ota yhteyttä”. Jos päänäkymässä on useita konversiopisteita (CTA-painikkeita) käyttäjä hämmentyy ja tämä voi vaikuttaa negatiivisesti konversioprosenttiin. Ihmiset ovat kärsimättömiä ja poistuvat sivustolta suorittamatta haluttua toimintaa, jos se on liian monimutkaista tai vaikeaa. Lisää käyttöliittymäsuunnittelusta löydät esimerkiksi Adoben sivuilta.

Lue myös: Miten UX-suunnittelu vaikuttaa verkkopalvelun tuottavuuteen?

Yksinkertaisesti sanottuna käyttöliittymä on se osa ohjelmistosta, joka muuttaa satunnaiskäyttäjät asiakkaiksi. Käyttöliittymä toimii ikään kuin asiakaspalvelijana, joten sen on pystyttävä palvelemaan niin hyvin, että tavoitteesi täyttyvät. Digitaalisen palvelun tavoitteella voidaan tarkoittaa esimerkiksi yhteydenottoja tai verkkokaupan tapauksessa myyntiä. Digimaailmassa näitä tavoitteita kutsutaan yleisesti konversioiksi ja esimerkiksi verkkosivuston konversioprosenttia voidaan pitää yhtenä palvelun suorituskykymittarina (KPI), jolla mitataan tavoitteiden täyttymistä kun suoraa myyntitavoitetta ei pystytä asettamaan.

Kun käyttöliittymäsuunnittelu on tehty käyttäjä keskiössä, yksinkertainen ja intuitiivisesti käytettävä käyttöliittymä palvelee lopullisia liiketoiminnallisia tavoitteita sitouttamalla käyttäjiä ja ohjaamalla heitä haluttuun tavoitteeseen. Mobiiliapplikaatio, verkkopohjainen sovellus, ohjelmisto tai verkkosivu – visuaalinen ilme on osa näiden kaikkien käyttökokemusta ja se vaikuttaa myös brändiin kohdistuvaan mielikuvaan.

Hurja fakta: Selkeyttämällä verkkosivuston CTA-painikkeiden sijoittelua saavutettiin 200 %:n kasvu sivuston konversioprosentissa.

Millainen on hyvä käyttöliittymä?

Hyvä käyttöliittymä mahdollistaa arvon tuottamisen, eli täyttää sille annetut tavoitteet. Käyttöliittymäsuunittelussa kaikki lähtee siitä, että verkkosivusto, mobiilisovellus tai muu ohjelmisto on suunniteltu käyttäjien tarpeisiin, eli se on tehty juuri haluttua kohderyhmää ajatellen. Kaikkein hienoimmallakaan käyttöliittymällä ei ole merkitystä jos palvelu ei ratkaise asiakkaasi ongelmaa. Alla listaamme hyvän käyttöliittymän elementtejä.

• Selkeä ja looginen
  • Hyvä käyttöliittymä on mahdollisimman selkeä ja looginen. Käyttäjän täytyy ymmärtää miten verkkosivustolla, mobiilisovelluksessa tai muussa ohjelmistossa navigoidaan, jotta palvelulle asetettu tavoite voidaan saavuttaa. Yksinkertainen käyttöliittymä on myös intuitiivinen käyttää.

• Vuorovaikutuksellinen
  • Käyttöliittymän tulee selkeästi ohjata haluttuun toimintoon. Esimerkiksi voidaan nostaa käyttäjää ohjaavat animaatiot: vuorovaikutussuunnittelu on osa käyttökokemuksen suunnittelua, mutta animaatio on yhtälailla visuaalinen keino, jolla tuotteen tai palvelun käyttämisestä pyritään tekemään mahdollisimman helppoa käyttäjille käyttöliittymäsuunnittelun puolella.

• Responsiivinen
  • Erilaisiin tilanteisiin sekä päätelaitteisiin mukautuva responsiivinen käyttöliittymä (UI) on nykypäivänä itseisarvo, kun erilaisia päätelaitteita ja käyttäjiä on paljon. Käyttöliittymäsuunnittelussa onkin ensiarvoisen tärkeää huomioida, että visuaaliset suunnitelmat toimivat responsiivisesti, mikä voi unohtua jos web-kehittäjää ei pidetä mukana käyttöliittymän visuaalisen ilmeen suunnittelussa.

• Saavutettava
  • Käyttöliittymän tulee olla kaikkien käyttäjien saavutettavissa. Käyttöliittymäsuunnittelussa saavutettavuutta lähestytään arvioimalla digitaalista palvelua asiakkaiden näkökulmasta. Suunnitteluvaiheessa mietitään esimerkiksi kenelle sivustoa ollaan tekemässä, onko vierailijoilla erityistarpeita, millaisilla laitteilla sisältöä tarkastellaan tai mitä käyttäjä tekee sivustolla.

• Visuaalinen ilme vastaa toivottua käyttäjäkokemusta
  • Visuaalinen ilme antaa ensivaikutelman yrityksen tai palvelun brändistä. Se vaikuttaa omalta osaltaan myös sivuston tai ohjelmiston käyttäjäkokemukseen ja määritettyjen tavoitteiden saavuttamiseen. UI-suunnittelussa verkkosivuston tai ohjelmiston käyttöliittymä suunnitellaan vastaamaan toivottua käyttäjäkokemusta. Visuaalisen ilmeen muotoilussa tärkeitä osa-alueita ovat värien ja graafisien elementtien lisäksi myös typografia.
  • Suunnittelussa tuleekin huomioida visuaalisesta näkökulmasta yrityksen brändi, hyvät UI-suunnittelun käytännöt sekä aktiivinen ja miellyttävä vuorovaikutus loppukäyttäjän kanssa. On myös tärkeää, että visuaalinen ilme lisää luottamusta ja viestii oikeanlaista viestiä. Esimerkiksi pankkipalveluiden visuaalinen ilme on hyvä pitää asiallisena kun taas vaikkapa lapsille tarkoitetulla sivustolla voidaan olla huomattavasti leikillisempiä.

Kokeile maksutonta verkkosivujen kuntotestiä!

Tekninen ja visuaalinen toimivuus mahdollistavat tavoitteiden täyttymisen

Hurjalla käyttöliittymäsuunnittelijalta löytyy aina sekä graafinen tietotaito että web-kehityksen osaaminen. Tällä tavalla varmistetaan se, että käyttöliittymän graafinen ilme on sekä visuaalisesti että teknisesti toimiva ja ohjelmisto täyttää sille asetetut tavoitteet.

Kun tarvitset verkkosivuston tai muun ohjelmiston, joka on suunniteltu vastaamaan tavoitteisiisi niin toiminnallisuuksien kuin visuaalisen ilmeen osalta, ota yhteyttä!

Lataa ostajan opas