Verkkopalvelun käyttöliittymä (UI)

Design Osaamisemme Käyttöliittymä
Käyttöliittymäsuunnittelua verkkopalvelun käyttöliittymäsuunnittelu

Kun verkkopalvelu miellyttää silmää, syntyy positiivinen tunne sen käyttämisestä. Ensivaikutelman merkitys on tässäkin asiassa suuri ja käyttäjä muodostaa ensivaikutelmansa verkkopalvelusta usein juuri visuaalisuuden perusteella.

Sivun sisältö

  1. Rautalangasta
  2. Verkkopalvelun ulkoasu ja visuaalinen identiteetti
  3. Responsiivisuus ja saavutettavuus
  4. Suunnittelupöydältä tuotantoon

Käyttöliittymäksi (user interface, UI) kutsutaan mitä tahansa rajapintaa, jonka avulla käyttäjä vuorovaikuttaa käyttämänsä verkkopalvelun kanssa. Verkkopalvelun huonosti toimiva käyttöliittymä aiheuttaa turhautumista ja pahimmillaan jopa vihaa. Silloin tuloksena on takuulla huono käyttökokemus.

Toisinaan käyttöliittymää erehdytään pitämään synonyymina käyttökokemukselle. Se on kuitenkin vain yksi osa käyttökokemusta, vaikkakin erityisen oleellinen.

Työvaiheen lopputuotos on konkreettinen, klikkailtava prototyyppi siitä, miltä tuleva verkkopalvelu tulee näyttämään ja tuntumaan.

Käyttöliittymävaihe on tyypillisesti verkkopalveluprojektin jännittävin työvaihe – etenkin asiakkaamme näkökulmasta. Työvaiheen lopputuotos on konkreettinen, klikkailtava prototyyppi siitä, miltä tuleva verkkopalvelu tulee näyttämään ja tuntumaan.

Rautalangasta

Käyttöliittymäsuunnittelun ensimmäinen työvaihe on rautalanka (wireframe). Se on visuaalisesti mahdollisimman yksinkertainen esitys tulevasta verkkopalvelusta, sen toiminnallisuuksista ja käyttöliittymäelementtien keskinäisestä suhteesta. Palvelumuotoilu- ja määrittelyvaiheen hedelmät eli sisältörakenne, elementit ja sivupohjat, toiminnallisuudet sekä käyttöliittymän runko, kuten navigaatio ja valikot, kuvataan yksinkertaistettuna rautalangassa. Meidän suunnittelufilosofiaamme kuuluu, että tästä kaikesta rakennetaan klikkailtava prototyyppi. Sen avulla on helppo hahmottaa ja testata tulevaa verkkopalvelua.

Käyttöliittymäsuunnittelu (UI)

Verkkopalvelun ulkoasu ja visuaalinen identiteetti

Verkkopalvelu on yrityksen tärkein yksittäinen markkinointiviestinnän väline. Sen visuaalisen ilmeen tulee noudattaa asiakkaan olemassa olevaa brändi-ilmettä. Selkeimmin brändi-ilme jalkautuu verkkopalveluun käytettyjen fonttien, värien ja logon muodossa. Näiden perus brändielementtien lisäksi visuaalinen identiteetti viedään astetta pidemmälle: mikä tunnelma palvelusta välittyy?

Palvelun tunnelmaa voidaan lähestyä helposti moodboardien, benchmarkien tai yksinkertaisesti adjektiivien pallottelun avulla. Pyritäänkö lopputuloksessa moderniin vai ajattomaan ilmeeseen? Pyöreään vai kulmikkaaseen? Kylmään vai lämpimään? Sanallisen ilmeen määrittelyllä ja jo olemassa olevilla esimerkeillä saadaan asetettua palvelun ulkoasun suunnittelulle selkeät raamit.

Nämä visuaaliset määritelmät sekä graafisen brändiohjeiston ilme ja säännöt seuraavaksi jalkautetaan suunniteltavaan verkkopalveluun. Meidän suunnitteluprosessin keskiössä on se, että ensin piirretään esimerkiksi etusivun layout, johon keskitytään niin pitkään, että konsensus verkkopalvelun yleisestä ilmeestä syntyy asiakkaan ja meidän välillemme. Vasta sitten siirrytään piirtämään kaikki verkkopalvelun näkymät ja toiminnallisuudet. Myös käyttöliittymäsuunnitelmista (lay out) luodaan klikattava prototyyppi.

On tärkeää kuitenkin muistaa, ettei verkkopalvelua luoda meidän tai asiakkaan henkilöstön tarpeisiin. Se luodaan asiakkaan asiakkaiden ja potentiaalisten sellaisten tarpeisiin.

Responsiivisuus ja saavutettavuus

Verkkopalveluita suunnitellessa täytyy aina huomioida liuta visuaalisia ja teknisiä rajoitteita. Hyvän käyttökokemuksen nimissä palvelun toiminnallisuudet tulee viestiä myös visuaalisesti. Tekstin kontrastin tulee tukea hyvää luettavuutta, elementtien keskinäisen hierarkian tulee aueta käyttäjälle pelkällä vilkaisulla ja kokonaisuuden tulee noudattaa helposti ymmärrettävää visuaalista rakennetta. Sisällön tulee siis olla selkeästi hahmotettavaa ja täyttää yleiset saavutettavuuden vaatimukset, jotka tulevat uuden saavutettavuusdirektiivin myötä koskemaan julkisten toimijoiden lisäksi myös yksityisiä toimijoita.

Saavutettavuus on loistavan digitaalisen palvelun kulmakivi ja se kertoo paljon organisaation arvoista.

Me kaikki käytämme digitaalisia palveluita mitä erilaisimmilla päätelaitteilla, mikä tulee huomioida verkkopalvelun käyttöliittymää suunniteltaessa. Miten suunnitelmamme käyttäytyvät eri näyttölaitteiden eri näyttöleveyksillä, kasvavatko valitut fonttikoot käsistä pienemmillä näyttöleveyksillä ja miten dynaaminen sisällön määrä vaikuttaa suunnittelemiemme elementtien ulkoasuun?

Digipalvelun saavutettavuus tarkoittaa palvelun käytettävyyttä kaikkien ihmisten toimesta. Riippumatta henkilön toimintarajoitteista, tai ominaisuuksista, kuten esimerkiksi iästä, näkö- tai kuulokyvystä ja vammoista. Saavutettavuus onkin loistavan digitaalisen palvelun kulmakivi ja se kertoo paljon organisaation arvoista.

Suunnittelupöydältä tuotantoon

Kun käyttöliittymä on suunniteltu, testattu ja hyväksytty, alkaa ohjelmistokehitys. UX/UI-suunnittelijoidemme käsistä seuraavaksi koodareiden työpöydälle siirtyy:

  • Layout-prototyyppi (desktop)
  • Layout-prototyyppi (mobiili)
  • Tarvittavat aineistot, kuten fontit ja kuvat
  • Zeplin-tuotantovalmisteltu layout-aineisto

Lisää designista

Käyttökokemus (UX)

Käyttökokemus on tunne, joka syntyy palvelua käyttäessä. Se on havaintoja, tunteita, ajatuksia, reaktioita, jotka heräävät palvelun käytöstä.

Lue lisää

Design-prosessi

Missä järjestyksessä mikäkin asia tapahtuu design-vaiheessa ja mitä materiaalia syntyy milloinkin?

Lue lisää

Ryhdytäänkö töihin?

"*" näyttää pakolliset kentät

Nimetön

Kaikkia tietoja käsitellään tietosuojaselosteen mukaisesti.