Käyttöliittymäsuunnittelu

Mikä on käyttöliittymä?

Käyttöliittymällä tarkoitetaan mitä tahansa rajapintaa, jonka avulla käyttäjä kommunikoi käyttämänsä laitteen tai ohjelmiston kanssa. Käyttöliittymiä löytyy siis esimerkiksi niin mobiilisovelluksista, verkkosivuilta kuin myös fyysisistä laitteista. Näin vaikkapa Googlen hakukoneen etusivun hakulaatikon, Instagramin mobiilisovelluksen ja jopa mikroaaltouunin näppäimien tapauksessa on kyse käyttöliittymistä.

Ohjelmistojen ja verkkosivujen kohdalla käyttöliittymällä on suuri merkitys sen suhteen, kuinka mukava palvelua on käyttää. Sen lisäksi, että hyvä käyttöliittymä on selkeä ja yksinkertainen, tulee sen myös näyttää hyvältä. Käyttöliittymän tyylikäs design tekee sovelluksen tai verkkosivun käyttämisestä miellyttävämpää ja on loistava tapa erottua kilpailijoista.

UI ja UX -suunnittelu tai design

Käyttöliittymä tunnetaan yleisesti myös sen englanninkielisellä nimellä user interface, josta tulee lyhenne UI. Siksi käyttöliittymäsuunnittelusta puhutaan usein myös nimellä UI-suunnittelu. Tärkeänä tekijänä käyttöliittymäsuunittelussa on ottaa myös huomioon käyttäjäkokemus, user experience, joka tunnetaan lyhenteellä UX. Kun puhutaan UX-suunnittelusta, tarkoitetaan siis käyttäjäkokemuksen suunnittelua. Suunnittelun tilalla saatetaan käyttään myös termiä design.

UI-suunnittelun alle kuuluvat pääosin käyttäliittymien graafiset elementit, kuten vaikkapa värit, asettelu ja käytetyt fontit. UX-suunnittelun alle kuuluvat puolestaan käyttöliittymien tekninen ja tutkimuksellinen puoli, kuten käyttöliittymien suunnitteluun käytetyt prototyypit, käyttäjätutkimus sekä esitetyn tiedon arkkitehtuuri.

Hyvän käyttöliittymän resepti

Hyvien käyttöliittymien ominaisuuksia on tutkittu laajasti. Tutkimuksen pohjalta on luotu paljon erilaisia kriteerejä, standardeja ja ohjeita koskien sitä, millainen on hyvä käyttöliittymä.

Ensinnäkin käyttöliittymän on oltava intuitiivinen ja helposti opittavissa. Näin laitetta, ohjelmistoa tai palvelua osaa käyttää myös ilman erillistä opetusta tai ohjekirjaa.

Tästä syystä monet verkkosivut ja mobiilisovellukset muistuttavat toisiaan. Kun rakenne eri palveluiden käyttöliittymien välillä muistuttaa toisiaan, on uuden palvelun ottaminen käyttöön huomattavasti helpompaa eikä oppimiseen kulu juurikaan aikaa. Tällöin puhutaan intuitiivisesta käyttöliittymästä. On esimerkiksi yleistä, että navigointiin liittyvät verkkosivujen painikkeet löytyvät yleensä ruudun yläreunasta.

Käyttäjäkokemus on hyvä silloin, kun käyttöliittymä on tehokas. Tehokkuutta voidaan parantaa esimerkiksi sillä, ettei mukana ole liikaa ylimääräisiä toimintoja tai turhia välivaiheita. Lisäksi käyttöliittymän tulee mukautua eri käyttäjien tarpeisiin ja olla samalla puoleensavetävän näköinen.

Käyttöliittymän suunnittelun periaatteet

Käyttöliittymäsuunnittelusta kiinnostuneiden kannattaa tutustua myös professori Donald Normanin kirjoittamaan teokseen “The Design of Everyday Things”. Kirjassa esitellään käyttöliittymäsuunnitteluun keskeisesti liittyvät Normanin periaatteet, jotka ovat:

1. Näkyvyys (visibility)
2. Kytkennät (mappings)
3. Mahdollisuudet (affordance)
4. Palaute (feedback)
5. Rajoitteet (constraints)
6. Johdonmukaisuus (consistency)

1. Näkyvyys (visibility) – Priorisoi tärkeiden asioiden näyttämistä

Tärkeät asiat voivat tässä tapauksessa tarkoittaa käyttäjän näkökulmasta tärkeitä asioita, esimerkiksi blogeissa se voisi olla ”top 10 -blogikirjoitukset” -koonnin tai yleisimpien hakujen nostaminen etusivulle. Toisaalta verkkokaupassa kannattaa nostaa esille myyntiä parantavia asioita, kuten myydyimpiä tuotteita, ”lisää ostoskärryyn” nappi tai vaikkapa yhteystietojen keräys -lomake.

2. Kytkennät (mappings) – Tee toimintojen yhteyksistä selkeitä

Toimivilla verkkosivuilla ja sovelluksissa on lähtökohtaisesti aina selkeät ja loogiset rakenteet. Hyvänä sääntönä toimii, että etusivulta tai päänäkymästä pääsee jokaiselle sivulle alle kolmella klikkauksella. Simppeli on kaunista.

3. Mahdollisuudet (affordance) – Mitä käyttömahdollisuuksia käyttöliittymällä on

Mahdollisuudet ovat objektien ominaisuuksia, jotka näyttävät käyttäjälle miten hän voi toimia. Esimerkiksi sovelluksen eri elementit voidaan suunnitella näyttämään klikattavilta tai rullattavilta. Tai kuten ovenkahva viestittää, että sitä tulisi kääntää. Käyttäjien tulisi käsittää käyttömahdollisuudet ilman, että heidän tarvitsisi niitä suuremmin pohtia.

4. Palaute (feedback) – Käyttäjälle annetaan palautetta tapahtuneista asioista

Palaute voi olla niinkin pientä kuin nappi tai linkki, joka reagoi kevyellä varjostuksella tai vaihtamalla väriä, kun siitä painetaan. Palautetta käytetään sitouttamaan ja selittämään, ja se voi parantaa käyttökokemusta. Parhaimmillaan palautteen antamisella voi muuttaa hämmentävän kokemuksen miellyttäväksi.

5. Rajoitteet (constraints) – Käyttöliittymä rajoittaa mahdollisia virheitä

Rajoitteet ovat mahdollisuuksien kääntöpuoli. Ne rajoittavat objektien käyttömahdollisuuksia ja niitä voidaan käyttää minimoimaan käyttövirheitä tai vähentämään turhaa rasitusta. Esimerkiksi, kun nappula on harmaana, viestii se yleensä käyttäjälle, että napin painamisesta ei seuraa mitään ennen kuin jokin aiempi vaihe on suoritettu loppuun.

6. Johdonmukaisuus (consistency) – Käyttöliittymän toimintojen tulee olla johdonmukaisia

Toimintojen johdonmukaisuudella tarkoitetaan sitä, että käyttöliittymän elementit näyttävät yhtenäisiltä ja käyttäytyvät samalla tavalla. Johdonmukaisuus auttaa todistamaan käyttäjän oletukset jatkuvasti oikeiksi samalla luoden hallinnan ja tuttuuden tunteen sekä luotettavuutta käyttöliittymää kohtaan.

Ota yhteyttä niin voidaan aloittaa oman käyttöliittymäsi suunnittelu!

Verticsin ammattitaitoiset UI/UX-suunnittelijat auttavat mielellään esimerkiksi verkkosivustosi tai sovelluksesi käyttöliittymän ja käyttäjäkokemuksen suunnittelussa. Lisäksi käyttöliittymien suunnittelua voidaan tarjota osana kokonaisvaltaista verkkosivu- tai ohjelmistoprojektia.

Alla näet esimerkkejä muutamista jo aiemmin suunnittelemistamme käyttöliittymistä. Takaamme, että suunnittelemamme käyttöliittymät ovat sekä selkeitä käyttää että tyylikkään näköisiä. Meiltä saat apua myös graafisessa suunnittelussa.

Ota meihin yhteyttä joko puhelimitse, sivun alakulmassa näkyvän chatin kautta tai alla olevan yhteydenottolomakkeen kautta.