Infor­ma­tii­vinen UI-grafiikka

joulu 5, 2018 | Graafinen suunnittelu, Käytettävyys

Miksi palkata graafikko piirtämään käyttö­liit­ty­määnne? Visuaa­li­sella suunnit­te­lulla on perin­tei­sesti tärkeä tehtävä tehdä tuote houkut­te­le­vaksi juuri omalle kohde­ryh­mälleen ja sillä viestitään brändiä. Mutta käyttö­liit­tymän visuaa­li­sella suunnit­te­lulla on toinenkin rooli; sillä tuetaan helppo­käyt­töi­syyttä, saavu­tet­ta­vuutta ja annetaan tietoa. Visuaa­linen suunnittelu on siis myös infor­ma­tii­vista.

Maail­mamme on muuttunut yhä nopeam­maksi ja tiedon määrä on nykyaikana valtava. Ihminen käsit­telee visuaa­lisen infor­maation nopeammin, sekä ymmärtää ja muistaa sen paremmin. Siksipä sisällön ja tiedon visua­li­sointi, kuten infograafit, ikonit ja kuvitukset, ovat nousseet yhä tärkeämpään rooliin.

Käyttö­liit­ty­mä­gra­fiik­kojen suunnit­te­lussa myös kohde­ryhmä sekä palvelun käytön luonne ja olosuhteet otetaan tarkasti huomioon. Esimer­kiksi työkalun, jota Pertti 58v. käyttää työssään tieto­ko­neella 8h päivässä, on täytettävä eri vaati­mukset, kuin satun­nai­sesti mobii­li­lait­teella nuorten käytet­tämän viihdeappli­kaation.

Infor­ma­tii­viset UI grafiikat

Miten käyttö­liit­ty­mä­gra­fii­koilla sitten tuetaan palvelun helppo­käyt­töi­syyttä ja hyvän käyttä­jä­ko­ke­muksen muodos­tu­mista?

Tiedon visua­li­sointi

Tietoa voi visua­li­soida esimer­kiksi infograafein, kuvituksin, animaa­tioilla tai ikoneilla. Monimut­kai­nenkin asia voi olla helposti selitet­tä­vissä yhdellä kuvalla.

Informatiivinen UI-grafiikka

Kuvan lähde: Truth facts www.ncreations.com

Infor­maation hierarkia

Grafii­koilla tuetaan UI suunnit­te­lu­vai­heessa suunni­teltua infor­maation hierarkiaa ja tiedon jäsen­ty­mistä, esim. miten tärkeät asiat saadaan nousemaan esiin ja vähemmän tärkeät pienempään rooliin. Tai miten suunni­teltu rakenne ja navigaatio saadaan näyttämään selkeältä; miten menussa alasivut näyttävät kuuluvan yläot­sik­konsa alle jne.

 

Ryhmittely

Grafii­koita piirret­täessä varmis­tetaan myös, että katsoja tietää mitkä asiat kuuluvat keskenään samaan ryhmään ja mitkä eivät. Mitkä ovat yrityksen palveluja ja mitkä uutisia? Mikä otsikko kuuluu mihinkin teksti­kenttään? Minkä näköiset ja missä sijait­sevat napit hallit­sevat ikkunan käytöstä ja mitkä sisältöä?

Visuaa­lisen ryhmit­telyn perustana toimivat hahmolait, jotka ohjaavat havain­noin­tiamme. Hahmo­lakeja ovat mm. lähei­syyden-, saman­kal­tai­suuden, hyvän jatku­vuuden- ja yhteisen liikkeen lait.

 elementtien ryhmittely

Kuvassa ryhmi­teltynä erilaisia käyttö­liit­tymän toimintoja. Käytössä hahmolait läheisyys ja saman­kal­taisuus.

 

Värien käyttö ja niiden merkitys

Värien käytöllä on monta tasoa:

    • Väreillä on infoarvoa, yleensä vihreä on OK ja punainen varoi­tusväri. Sininen on digituot­teissa totuttu linkin väri.

    • Käyttö­liit­ty­mässä yleensä määri­tellään ensisi­jai­selle tärkeim­mälle toimin­nolle tietty väri, joka pysyy aina samana
      ja erottuu. Ja toissi­jai­selle toimin­nolle annetaan omansa, hilli­tympi väri.

    • Väreillä on psyko­lo­gisia ja mieli­kuvia herät­täviä vaiku­tuksia; esim. keltainen on luova ja pirteä tai sininen mielletään luotet­ta­vaksi ja rauhal­li­seksi

    • Kulttuu­riset erot: Suomessa värien käyttö hillittyä ja usein minima­lis­tista, Bangla­des­hissa tykätään värik­käästä. Rakkauden tai surun väri voi olla eri maasta riippuen.

    • Värien ”tekniset ominai­suudet”: Kirkkaat ja lämpimät tulee eteen, viileät/himmeät/tummat painuu taustalle

värien käyttö

Psyko­lo­gista risti­riitaa värien käytössä kannattaa välttää. Käyttäjä saattaa esim. klikata väärää nappia, jos ”poista”-nappi onkin vihreä ja ”tallenna” punainen.

Fontti­va­linnat

Fontti luo tyyliä ja mieli­kuvaa ja fontti­va­lin­nalla on iso merkitys näissä rooleissa palvelun käyttä­jä­ko­ke­muksen muodos­tu­miseen. Käytet­tä­vyyden kannalta fontin valin­nassa ja käytössä paino­tetaan lisäksi fontin luetta­vuutta, capsien käyttöä, infor­maation hierarkiaa, tekniikkaa fontin takana (esim. lataus­nopeus, fonttien ja selaimien yhteen­so­pivuus) ja varsinkin fontti­kokoja.

 

luettava fontti

 

Kontrastit

Riittävä kontrasti taustan ja tekstin välillä on oleel­lista luetta­vuu­delle ja erottu­vuu­delle. Hyvät kontrastit ovat tärkeitä varsinkin saavu­tet­ta­vuuden, erikoi­so­lo­suh­teissa tehtävän työn ja mobii­li­käytön kannalta. Haluathan, että mobii­liappli­kaa­tiotasi nähdään käyttää myös kesäisin kirkkaassa auringon paisteessa?

 

Kontrasti

Designin kontrastit voi tarkistaa mm. tällä työka­lulla: https://webaim.org/resources/contrastchecker/


Visuaa­liset nostot

Jos huomiota tahdotaan kiinnittää johonkin tiettyyn paikkaan, käyttäjän tarkkaa­vaisuus kohdistuu kiinnos­ta­vuuden, tärkeyden, tuttuuden, ennak­ko­vih­jeiden tai ärsykeo­mi­nai­suuksien perus­teella. Viimei­sim­mästä esimerkkinä kirkas­vä­rinen mainos, joka pistää silmään.


Info monella vihjeellä

Parhaiten grafii­koilla tuetaan tiedon välit­ty­mistä ja asioiden ymmär­ret­tä­vyyttä käyttö­liit­ty­mässä esittä­mällä asiat monella eri tavalla: Sanal­li­sesti, kuval­li­sesti ja värein.

Näin asiat ymmär­retään parhaiten ja nopeiten yleisesti ottaen. Mutta myös käyttäjä, jolla on huono kieli­taito, tai joka on värisokea, lapsi tai ruudun lukijan käyttäjä, saa tiedon jotain reittiä.

Esteet­tö­myy­destä lyhyesti

Visuaa­linen suunnittelu vaikuttaa huomat­ta­vasti siihen, tuleeko palve­lusta esteetön. Miksi suunni­tella palvelua, jota 15%-20% ihmisistä on vaikea käyttää, kun voisi design-valin­noilla samalla vaivalla suunni­tella palvelun, jota pystyy käyttämään mahdol­li­simman laaja yleisö? Palve­lujen siirtyessä verkkoon kiihty­vällä tahdilla, on niiden esteet­tö­myy­destä tulossa yhä tärkeämpää; kansa­lai­soikeus.

Designin saavu­tet­tavuus olisikin hyvä oman postauk­sensa aihe!

FixUi Oy on oululainen suunnittelu- ja digipal­ve­luita tarjoava yritys.

Tarjoamme monipuo­lisia suunnit­te­lu­pal­veluja brändin raken­nuk­sesta käyttö­liit­ty­mä­suun­nit­teluun. Monipuo­liset tekijämme luovat sinulle toimivat ratkaisut käytet­tä­vyyden sydämellä!

Kirjoittaja

Elina Koski

Elina Koski

Käyttä­jä­ko­kemus- ja visuaa­linen suunnittelija

Elina muotoilee kaiken, mitä käsiinsä saa: palvelut, tuotteet, grafiikat ja käyttä­jä­ko­ke­mukset.