Esimerkkejä kuvakkeiden käyttöön
Tähän osioon on koottu ohjeita ja visuaalisia toteutusvinkkejä kuvakkeiden yhtenäiseen käyttöön verkkopalveluissa ja Kela Design Systemin komponenteissa.
Kuvakkeen valinta
- Valitse kuvake loogisesti. Tietyillä kuvakkeilla on käyttöliittymissä vakiintunut merkitys ja käyttötarkoitus. Käyttöliittymän perustoimintoja kannattaa yleensä kuvata mahdollisimman yleistajuisilla kuvakkeilla.
- Käytä kuvakkeita yhtenäisesti – tuttu kuvakieli tukee sisällön silmäilyä. Esimerkiksi verkkopalvelu tai puhelinasiointi kannattaa esittää samalla kuvakkeella käyttöliittymän ja asiakaspolun kaikissa osissa.
- Varmista, että valitsemasi kuvake muodostaa luontevan parin tekstin kanssa. Käytä kuvakkeen ohessa selitettä, joka kertoo selkeästi kuvakkeen esittämän toiminnon (esim. “Lähetä”).
- Käyttöliittymäkuvakkeita voi joissain tapauksissa soveltaa itsenäisinä linkkielementteinä esimerkiksi valikoissa tai tiiviisti esitetyissä taulukoissa. Kuvakkeiden tulee olla vakiintuneita ja yksiselitteisiä.
- Kuvitusikoneilla tulee aina olla selkeä yhteys tekstimuodossa esitettyyn sisältöön. Älä käytä kuvitusikoneja itsenäisinä elementteinä tai irrallaan kontekstista.
Suosi helppotajuista ja tuttua symboliikkaa. Älä käytä kuvaketta, jonka merkitys voi olla epäselvä tai hankalasti tulkittava.
Käytä Kela Design Systemin valmiita svg-kuvakekomponentteja. Älä käytä png-muotoon tallennettuja kuvakkeita käyttöliittymän toiminnallisissa elementeissä.
Käytä verkkopalveluissa Kela Design Systemin kuvakkeita. Älä poimi kuvakkeita ilmaisista kuvapankeista tai muista ulkopuolisista lähteistä.
Sommittelu ja visuaalinen tasapaino
- Käytä kuvakkeita maltillisesti ja yhdenmukaisesti. Pyri sovittamaan kuvakkeet luontevasti osaksi käyttöliittymän sisältöä ja visuaalisuutta.
- Vältä visuaalista hälyä ja ylimääräistä kuvahöystettä! Älä käytä kuvakkeita ainoastaan ulkoasun elävöittämisen tai koristelun takia.
- Suosi vakiintuneita esitystapoja. Huomioi myös yhtenäinen asettelu – yleensä kuvakkeen paikka on vasemmalla ennen tekstiä. Siirtymää ja selailua kuvaavissa linkeissä ja painikkeissa kuvakkeen paikka määräytyy siirtymäsuunnan mukaan.
Valitse elementtiryhmän kuvakkeet aina samasta kuvakekirjastosta.
Käytä kuvakkeita yhdenmukaisesti kaikissa samaan ryhmään kuuluvissa elementeissä.
Saavutettavuuden varmistaminen
- Varmista, että toimintoja esittävien kuvakkeiden ja taustan välinen kontrasti on saavutettava eli vähintään 3:1. Käyttöliittymäkuvakkeiden rooli on yleensä aina toiminnallinen.
- Saavutettavan kontrastin minimivaatimus ei koske dekoratiivisia kuvakkeita. Kuitenkin myös kuvittavien elementtien väri kannattaa usein valita siten, että elementit erottuvat riittävästi taustasta.
- Muista tekstivastine. Avaa olennaisin informaatio aina myös tekstimuodossa, jotta kuvakkeen esittämä tieto välittyy myös ruudunlukijan käyttäjille.
Varmista, että saavutettava kontrasti toteutuu toimintoja esittävissä kuvakkeissa. Kela Design Systemin väriyhdistelmät ovat saavutettavia, kun sävynumeroiden erotus on vähintään 50.
Väri ja tyyli
Verkkopalveluiden ja käyttöliittymien kuvakkeissa käytetään Kela Design Systemissä määriteltyjä verkkoilmeen värejä.
- Kela Design Systemin ohjeissa ja esimerkeissä esitettyjen kuvakkeiden värit perustuvat yleensä brändin päävärin eri sävyihin (esim. kela-blue-60).
- Käytä verkkoväripaletin tilavärejä tarkoituksenmukaisesti. Esimerkiksi varoittava punainen sopii kuvakkeen väriksi yleensä vain silloin, kun kuvake liittyy olennaisesti esimerkiksi virheestä viestimiseen tai varoittavaan toimintoon.
- Jos tausta on valkoinen, kuvakkeen väri tulee valita siten, että värin sävynumero on vähintään 50 (esim. kela-blue-50).
- Jos tausta on tumma, kuvakkeen värinä toimii usein joko puhdas valkoinen (kela-white) tai verkkovärien sävyasteikon vaalein sävy (esim. kela-blue-10).
Varmista, että samaan ryhmään kuuluvat kuvakkeet ovat väreiltään ja tyyliltään yhtenäisiä. Älä yhdistele eri värisiä kuvakkeita tai eri kuvakekokoja.
Linkit ja painikkeet
Kela Design Systemin linkkielementeissä käytetään sekä kuvitusikoneja että käyttöliittymäkuvakkeita. Suositeltu kuvaketyyppi käy yleensä ilmi komponenttikohtaisista ohjeista ja esimerkeistä.
Kuvakkeen käyttö linkkielementeissä ja painikkeissa on usein perusteltua, jos elementtiä halutaan korostaa muusta sisällöstä. Esimerkiksi linkkiryhmässä kuvakkeet voivat toimia visuaalisena oikopolkuna sisällön silmäilyyn ja ymmärtämiseen.
Kuvake kannattaa valita siten, että se kuvaa mahdollisimman osuvasti linkin sisältöä tai suoritettavan toiminnon tyyppiä. Kuvake vaatii parikseen aina tekstimuotoisen selitteen tai vastineen. Esimerkiksi korostetussa linkissä kuvitusikoni voi tukea toiminnallista elementtiä, mutta ikoni ei silti yksinään korvaa varsinaista toimintoa eli tekstimuodossa esitettyä linkkiä.
Käytä toiminnallisissa painikkeissa ja navigaatiovalikoissa ainoastaan käyttöliittymäkuvakkeita.
Kuvakkeen asettelu linkkielementeissä
Linkeissä ja painikkeissa kuvakkeen paikka on pääsääntöisesti vasemmalla ennen linkkitekstiä.
Kuvake voidaan sijoittaa myös linkkitekstin perään, jos kuvaketta käytetään linkin tai painikkeen siirtymätyypin kuvaamiseen (esim. “Aukeaa uuteen ikkunaan”).
Selailupainikkeissa kuvakkeen paikka määräytyy siirtymän suunnan mukaan.
