Käyttöliittymän johdonmukaisuuden hallinta: näin luot saumattoman käyttökokemuksen

Oletko koskaan turhautunut navigoidessasi verkkosivustolla tai sovelluksessa etkä ole ymmärtänyt, miten se toimii? Tietenkin olet.

Turhautumisesi syynä on todennäköisesti huonosti suunniteltu käyttöliittymä, joka ei mahdollista intuitiivista navigointia. Sen sijaan sinun on pysähdyttävä ja analysoitava jokainen elementti ymmärtääksesi, miten se toimii ja mihin sitä käytetään.

Yksi yleisimmistä huonoon tuotesuunnitteluun johtavista virheistä on käyttöliittymän epäjohdonmukaisuus.

Sen lisäksi, että kyseessä on yksi yleisimmistä virheistä, se on myös todella helppo korjata tai välttää kokonaan. Ymmärretään siis, mistä käyttöliittymän epäjohdonmukaisuudessa on kyse ja miten voit varmistaa, että käyttäjäsi välttyvät siltä.

Käyttöliittymän johdonmukaisuuden ymmärtäminen

Kuten nimi kertoo, käyttöliittymän johdonmukaisuudella tarkoitetaan samanlaisten käyttöliittymäelementtien, atomaarisen suunnittelun ja yleisen käyttökokemuksen käyttöä samanlaiseen toimintaan tai kokonaisuuteen tuotteessasi.

Jos käyttöliittymässäsi on ensisijaisia painikkeita useissa paikoissa, niiden kaikkien tulisi näyttää samalta (UI) ja toimia samalla tavalla (UX). Kun esimerkiksi kirjaudut Dropbox-tilillesi ja selaat sen eri osioita, huomaat, että kaikki ensisijaisen toiminnon painikkeet ovat samanlaisia.

Kun tarkastelet asiaa lähemmin, huomaat, että Dropboxissa johdonmukaisia eivät ole ainoastaan ensisijaisen toiminnon painikkeet, vaan käytännössä kaikki elementit.

On useita tärkeitä syitä siihen, miksi suunnittelutiimit kiinnittävät erityistä huomiota johdonmukaiseen käyttöliittymäsuunnitteluun. Näitä ovat esimerkiksi:

• Se näyttää selkeältä ja miellyttää silmää. Monimuotoisuus ei ole käyttöliittymissä aina hyvä asia. Liian monet erilaiset visuaaliset elementit tekevät käyttöliittymästä raskaan ja vaikeuttavat luettavuutta.
• Se näyttää ammattimaiselta. Selkeä käyttöliittymä antaa vaikutelman ammattimaisuudesta ja osaamisesta. Käyttäjät luottavat brändeihin yleensä enemmän, jos niiden verkkosivustot tai tuotteet on suunniteltu hyvin.
• Se parantaa käyttökokemusta. Jos näet jossain Dropboxissa mustan painikkeen ja tunnistat sen ensisijaiseksi toiminnoksi, tiedät joka kerta samanlaiselta näyttävän painikkeen nähdessäsi, että sekin on ensisijainen toiminto. Sinun ei siis tarvitse joka kerta painiketta kohdatessasi miettiä, mitä sen pitäisi tehdä.

Lopuksi on huomioitava myös käyttöliittymän kehittäminen. Jos tuotteessasi on kaikkialla johdonmukaiset käyttöliittymäelementit, käyttöliittymän kehitystiimin ei tarvitse kehittää jokaista uutta elementtiä alusta alkaen. Sen sijaan he luovat yhden elementin ja käyttävät sitä uudelleen uusissa kehitettävissä näkymissä. Näin vähennät huomattavasti uusien käyttöliittymien ja toimintojen luomiseen kuluvaa aikaa.

Sen tärkeydestä ja vaikutuksesta käyttökokemukseen huolimatta johdonmukainen suunnittelu ei ole kaikkialla läsnä. Jopa suuret teknologiatuotteet syyllistyvät tähän ongelmaan. Androidin asetusvalikko on suosikkiesimerkkini.

Katso tämän luettelon eri elementtejä ja kerro, mitkä niistä ovat napsautettavia (painikkeita) ja mitkä ovat vain informatiivista tekstiä. Todennäköisesti et pysty sanomaan sitä, ellet avaa samaa valikkoa puhelimellasi ja ala napauttaa kaikkea.

Vaikka olisitkin arvannut oikein (kyseessä ovat "Google-tilin tiedot" ja "Kuvat ja videot"), jouduit käyttämään hieman kognitiivista prosessointia päätyäksesi siihen.

Näin UX:n ei kuulu toimia. UX-guru Steve Krugin kuuluisa sitaatti kuuluu:

Älä pakota minua ajattelemaan.

Suosittelen muuten lämpimästi lukemaan hänen kirjansa sekä Don Normanin UX:n ”raamatun” – Design of Everyday Things -kirjan.

Yleinen ajatus tässä on, että käyttäjäsi pystyvät tunnistamaan käyttöliittymäsi elementit automaattisesti ilman, että heidän tarvitsee miettiä, mikä kyseinen elementti on, ja navigoimaan sovelluksessasi ”lihasmuistin” tasolla.

Käyttöliittymäsuunnittelun perusteet

Ennen kuin jatkamme johdonmukaisen suunnittelun ylläpitämisen tarkastelua, palautetaan mieleen suunnittelun perusperiaatteet, jotka tekevät käyttäjäystävällisestä käyttöliittymästä ja johdonmukaisuudesta ylipäätään mahdollisia.

Selkeys ja yksinkertaisuus

Vilkkuvien gif-kuvien ja kaikkien sateenkaaren värien esittämisen aika käyttöliittymässä on ohi (milleniaalit, muistatteko nuo ajat?).

Mitä useammat ihmiset alkoivat käyttää internetiä, sitä enemmän käyttöliittymä- ja käyttäjäkokemussuunnittelijat kiinnittivät huomiota siihen, miten he havaitsevat käyttöliittymät ja ovat vuorovaikutuksessa niiden kanssa.

He huomasivat pian, että liian monet värit ja visuaaliset elementit estävät käyttäjiä suorittamasta haluamiaan tehtäviä. Sen sijaan ainoa asia, jonka he saavat tällaisten käyttöliittymien selaamisesta, on  silmien väsyminen.

Niinpä siirryimme luonnollisesti kohti minimalismia ja yksinkertaisuutta. Käyttöliittymän johdonmukaisuus on itse asiassa toinen tapa tehdä käyttöliittymästä yksinkertaisempi.

Visuaalinen hierarkia

Kun näytölläsi on paljon elementtejä, niiden välistä suhdetta on vaikea ymmärtää. Mistä esimerkiksi tiedät, onko jokin tekstinpätkä artikkelin otsikko vai vain osa tekstiä?

Autat käyttäjiäsi ymmärtämään nämä suhteet visuaalisen hierarkian avulla. Sijoittamalla kohteita ylemmäs, tekemällä niistä suurempia, värikkäitä ja lihavoituja sekä käyttämällä muita keinoja voit auttaa käyttäjiä huomaamaan helposti, että ne ovat tärkeämpiä kuin muut näytön kohteet. Näin käyttäjät katsovat intuitiivisesti ensin tätä elementtiä ja siirtyvät vasta sen jälkeen seuraavaan.

On olemassa kuuluisa meemi, joka havainnollistaa visuaalisen hierarkian taikaa.

Hymyilit lukiessasi tämän tekstin, vai mitä? Aivan oikein: kuten kaikilla muillakin ihmisillä, myös sinun näkösi on ohjelmoitu seuraamaan visuaalista hierarkiaa.

Palaute

Aina kun käyttäjäsi suorittaa tuotteessasi jonkin toiminnon, hän odottaa saavansa selville, tapahtuiko toiminto vai ei.

Jos napsautat poistopainiketta eikä sen jälkeen tapahdu mitään, saatat hämmentyä. Tapahtuiko poistaminen vai ilmenikö virhe? Auttaaksesi käyttäjiä tässä sinun on annettava heille visuaalista (tai äänellistä tai jopa haptista) palautetta, joka kertoo heille toiminnon tuloksesta.

Jos järjestelmäsi käsitteli poistopyynnön onnistuneesti, ilmoita käyttäjille, että kohde poistettiin. Jos sen sijaan ilmenee virhe, kerro siitä heille. Näin he tietävät, ettei kohdetta poistettu, ja että heidän on yritettävä uudelleen tai otettava yhteyttä tukeen.

Parhaat käytännöt käyttöliittymän johdonmukaisuuden saavuttamiseksi

Ensi silmäyksellä käyttöliittymän johdonmukaisuus vaikuttaa hyvin suoraviivaiselta, ja minkä tahansa suunnittelijan pitäisi pystyä saavuttamaan se. Se pitää paikkansa, jos olet ainoa tuotteen parissa työskentelevä henkilö ja tuote itsessään on pieni ja yksinkertainen.

Kun alat työskennellä osana suurempaa tiimiä (jossa jokaisella suunnittelijalla on oma yksilöllinen tyylinsä) ja tuotteen parissa, joka koostuu kymmenistä sivuista ja ominaisuuksista, elementtien johdonmukaisena pitäminen muuttuu todelliseksi haasteeksi.

Et yksinkertaisesti pysty muistamaan fyysisesti, miltä jokainen yksittäinen elementti koko tuotteessa näyttää, ja toistamaan sitä työstämässäsi uudessa ominaisuudessa.

Onneksi on olemassa paljon prosesseja ja viitekehyksiä, joiden avulla voit pienentää epäjohdonmukaisuuksien lisäämisen riskiä suunnitteluusi. Tässä ovat kolme, joita pidetään alan standardeina.

Tyyliohjeet: Tämä on asiakirja, jossa määritellään tuotteesi suunnittelustandardit ja joka edustaa brändi-identiteettiäsi. Se sisältää eri tekstityyppien (esimerkiksi otsikoiden, leipätekstin, kommenttien ja muiden) typografian (eli fontit, niiden koon, sijoittelun ja niin edelleen), kuvakkeet, väripalettisi sekä muut keskeiset suunnitteluelementit.

Tyyliohjeen avulla varmistat, että koko suunnittelutiimi työskentelee samojen yleisten standardien mukaisesti ja että sisältösi, värisi ja kuvakkeesi pysyvät johdonmukaisina koko tuotteessa.

Apple on luultavasti paras esimerkki tyyliohjeensa noudattamisesta kaikkialla, myös niiden yritysten kohdalla, jotka kehittävät sovelluksia sen tuotteille.

Tässä esimerkkinä on sen painikkeen tyyliohje, jonka voit sijoittaa verkkosivustollesi, jotta käyttäjät voivat ladata sovelluksesi App Storesta. Kuten näet, Apple määrittelee hyvin tarkasti, miten tätä painiketta voi käyttää.

Suunnittelumallikirjastot: Tämä on toinen ohjaava asiakirja, joka keskittyy kuvaamaan suunnittelustandardisi matalan tason yksityiskohtia, toisin kuin edellinen, joka esittelee suunnittelun korkean tason perusasiat. Suunnittelumallikirjastot ovat yleinen tuotoksena syntyvä kokonaisuus, kun tiimisi käyttää atomisuunnittelua.

Atomisuunnittelun ideana on käyttää selkeästi määriteltyjä pieniä käyttöliittymäelementtejä, jotka yhdistettyinä muodostavat monimutkaisempia elementtejä. Tämän viitekehyksen yleisiin elementtiluokkiin ja niiden yhdistelmiin kuuluvat:

• Atomit (tästä nimi): Peruselementtejä, kuten lomakkeita, painikkeita, kuvakkeita ja muita vastaavia. Näitä elementtejä ei voi jakaa enää pienempiin osiin.
• Molekyylit: Atomien yhdistelmiä, joilla on tietty tarkoitus. Esimerkkejä ovat luetteloiden sivutus ja navigoinnin murupolut.
• Organismit: Monimutkaisempia käyttöliittymäelementtejä, jotka koostuvat useista atomeista ja molekyyleistä ja edustavat kokonaisuuksia. Näitä ovat kortit, hakupalkit ja muut vastaavat elementit.
• Mallit: Uudelleenkäytettävien organismien yhdistelmiä, joita voit lisätä sivuillesi. Ne voivat olla hakutulosluetteloita, tuotekuvausosioita ja niin edelleen.
• Sivu: Suunnittelusi lopputulos ja paikka, jossa käyttäjä on vuorovaikutuksessa sen kanssa. Kuten nimi antaa ymmärtää, näitä ovat tuotteesi eri sivut, kuten etusivu.

Kuviokirjasto on kokoelma standardoituja molekyylejä ja organismeja, joita voit käyttää suunnittelussasi. Saavutat yhdenmukaisuuden käyttämällä aina samoja elementtejä tuotteesi eri osissa, sillä käyttäjät tunnistavat elementin heti avatessaan tietyn sivun.

Suunnittelujärjestelmä: Tämä on korkean tason tyylioppaiden, kirjasintyyppien, värimaailmojen ja pienten käyttöliittymäelementtien kuvausten muodostama kokonaisuus sekä kokoelma valmiita käyttöliittymäkomponentteja, joita voit käyttää sekä suunnittelussasi että tuotetta kehittäessäsi.

Lähes kaikki suuret teknologiayritykset kehittävät oman suunnittelujärjestelmänsä varmistaakseen visuaalisen yhdenmukaisuuden. Googlella on Material, Shopifylla Polaris ja Applella Human Interface. Saatavilla on myös erillisiä avoimen lähdekoodin järjestelmiä, jotka voit helposti integroida tuotteeseesi ja joita voit käyttää ilmaiseksi. Oma suosikkini näistä on ant.design.

Muiden suunnittelujärjestelmien tavoin se sisältää sekä suunnittelukirjaston, jota voit käyttää Figmassa tai muissa suosituissa työkaluissa, että suosituilla viitekehyksillä valmiiksi koodatun komponenttikirjaston (esim. react), jota kehittäjäsi voivat käyttää koodissaan.

Käyttöliittymän yhdenmukaisuuden ylläpitämiseen tarkoitetut työkalut

Jotta suunnittelusi pysyy yhdenmukaisena kaikissa tiimeissäsi ja tuotteesi osissa, sinun on dokumentoitava ohjeistuksesi ja varmistettava, että koko tiimisi osallistuu sen ylläpitämiseen.

Suunnittelustandardien dokumentointiin ja soveltamiseen päivittäisessä ominaisuuksien ja näkymien suunnittelussa voit hyödyntää monien nykyaikaisten suunnittelutyökalujen erikoisominaisuuksia.

Esimerkiksi Figmassa voit luoda skaalautuvia komponentteja, jotka voit tallentaa suunnittelujärjestelmätiedostoosi ja antaa kaikkien yrityksesi työntekijöiden käyttöön.

Se tukee myös käyttöliittymäpaketteja, jotka ovat valmiita suunnitteluohjeiden ja sääntöjen kirjastoja, joita voit ladata Figman kirjastosta ja käyttää tuotteissasi. Tässä on Googlen Material Design -paketti.

Tämä paketti tarjoaa laajan valikoiman elementtejä Android-sovelluksen suunnitteluun Googlen suunnittelustandardien mukaisesti.

Entä yhteistyö? Ilman asianmukaista yhteistyötä suunnittelutiimissäsi joudut tilanteeseen, jossa elementit eivät noudata ohjeistustasi ja rikkovat visuaalisen yhdenmukaisuutesi. Onneksi myös yhteistyön edistämiseen on olemassa UX/UI-suunnittelutyökaluja .

Esimerkiksi Zeplin auttaa suunnittelijoitasi ja kehittäjiäsi tekemään tehokkaampaa yhteistyötä luomalla kehittäjäystävällisiä versioita suunnittelusta. Niissä koodaustiimi löytää elementtien tarkat CSS-määritykset ja voi helposti ladata suunnittelusta kuvat, kuvakkeet ja muut aineistot. Se integroituu myös muihin käyttöliittymäkehityksen työkaluihin, mikä auttaa siirtämään suunnittelusi helposti siitä työkalusta, jossa loit sen, Zepliniin.

Käyttöliittymän yhdenmukaisuuden testaaminen ja iterointi

Tuotevaatimustesi tai strategiasi tavoin suunnitteluohjeetkaan eivät ole staattisia asiakirjoja. Tulet aina tekemään niihin muutoksia ja pitämään ne ajan tasalla.

Yleisiä syitä ohjeistuksesi muuttamiseen ovat:

• Kirjastosta puuttuneiden uusien elementtien lisääminen.
• Uusien suunnittelutrendien ja parhaiden käytäntöjen omaksuminen.
• Korjaamista vaativien ongelmien ja ”suunnitteluvirheiden” löytäminen.

Lopuksi on hyvä käytäntö antaa suunnittelutiimisi tarkistaa se aika ajoin ja tehdä siihen pieniä parannuksia.

Sen lisäksi, että jälkimmäinen parantaa suunnittelusi yleisilmettä ja laatua, sen avulla voit myös suorittaa niin kutsutun ”käyttöliittymän johdonmukaisuustestin”, jossa suunnittelutiimisi etsii aktiivisesti epäjohdonmukaisuuksia suunnittelujärjestelmästäsi ja korjaa ne.

Voit suorittaa vastaavan testin myös valmiille suunnitelmillesi. On aina mahdollista, että useat ominaisuudet sisältävät elementtejä, joita ei ole käyttöliittymäkirjastossa, tai että ne eivät näytä siltä miltä niiden pitäisi.

Sisäisten testien suorittamisen lisäksi suosittelen ottamaan käyttäjät aktiivisesti mukaan testausprosessiin. Sen voi tehdä kahdella tavalla.

• Pyydä palautetta suunnittelusta, ymmärrä käyttäjiesi tarpeita ja kehitä suunnittelua aktiivisesti heidän kommenttiensa perusteella.
• Suorita käytettävyystestejä ymmärtääksesi käyttöliittymäsi johdonmukaisuuden tason.

Jälkimmäisen osalta kuvitellaan, että olet käyttänyt ensisijaisen toiminnon painiketta kymmenessä eri paikassa ympäri tuotettasi. Oletko varma, että käyttäjäsi tunnistavat sen ensisijaiseksi toiminnoksi kaikissa näissä kymmenessä tapauksessa?

Et voi olla varma, ellet suorita ohjattuja tai ohjaamattomia käytettävyystestejä UX-työkalullasi rakennetuilla prototyypeillä ja näe, miten käyttäjät ovat vuorovaikutuksessa niiden kanssa.

Näiden testien ja käyttäjäpalautteen perusteella voit sitten tehdä dataan perustuvia suunnittelupäätöksiä.

Älä pakota minua ajattelemaan

Johdonmukaisuus on yksi erinomaisen käyttöliittymäsuunnittelun keskeisistä elementeistä. Pitämällä kaiken yksinkertaisena ja visuaalisesti yhdenmukaisena varmistat, etteivät käyttäjäsi eksy käyttöliittymääsi. Sen sijaan he ymmärtävät intuitiivisesti näytöllään olevien elementtien tarkoituksen ja suorittavat tehtävänsä helposti.

Älä unohda tilata uutiskirjettämme saadaksesi lisää tuotteenhallinnan resursseja ja oppaita sekä uusimmat podcastit, haastattelut ja muut alan johtajien ja asiantuntijoiden näkemykset.