Button
Komponentti toimintojen ja siirtymien käynnistämiseen. Käytä erityyppisiä painikkeita luomaan hierarkiaa toiminnoille.
Julkaistu versiossa 0.15.3
Esikatselu
Käyttötarkoitus
Käytä painiketta käynnistämään toimintoja, kuten tallennus, peruutus tai muokkaus. Voit käyttää painiketta harkiten myös siirtymiin järjestelmän sisällä (esim. hakemuksen tai käsittelyn seuraavaan vaiheeseen siirtyminen).
Järjestelmän ulkopuolelle vieviin siirtymiin (esim. ohjaus OmaKelasta Kela.fi-sivustolle) kannattaa käyttää oletuksena tavallista linkkiä.
Tee näin
- Nimeä painikkeet selkeästi ja lyhyesti.
- Varmista että asiakas ymmärtää etukäteen, mitä painikkeen painalluksesta tapahtuu.
- Korosta asiakkaan kannalta tärkeimmät painikkeet käyttämällä ensisijaisen painikkeen tyyliä.
- Käytä eri painiketyyppejä johdonmukaisesti.
- Sijoita painikkeet johdonmukaisesti ja asiakkaalle tuttuihin paikkoihin.
- Käytä tarvittaessa käyttöliittymäkuvakkeita.
Älä tee näin
- Älä käytä painikkeita kaikkiin mahdollisiin siirtymiin, vaan käytä tarvittaessa linkkiä (kts. Linkit).
- Älä käytä painikkeissa epämääräisiä termejä, kuten "OK".
- Älä tuo näkymään liian montaa ensisisijaista painiketta.
Saavutettavuus
Painikkeiden tyyppi ja käyttötarkoitus tulee viestiä selkeästi ruudunlukijoiden käyttäjille.
- Ruudunlukijaa varten voi antaa lisätekstin, joka tarkentaa painikkeen toimintoa.
- Painikkeen toiminon tulee olla ymmärrettävä, vaikka ei näe sen ympärillä olevia sisältöjä.
- Jos painikkeessa on pelkkä kuvake, ruudunlukijaa varten tulee aina antaa toiminnon kuvaus tekstinä.
- Vältä useita samannimisiä painikkeita yhdellä sivulla tai käytä tarkentavaa tekstiä erottelemaan toimintoja ruudunlukijoille.
Käytettävä HTML-elementti määräytyy painikkeen käyttötarkoituksen mukaan.
- Linkki
<a>avaa uuden URL:n tai siirtää kohdistuksen sivun sisällä (ankkurilinkki). - Painike
<button>suorittaa muun toiminnon. Esim. lähettää lomakkeen tai ohjaa dynaamista sisältöä.
Nimeäminen
Painikkeen nimen tulee olla lyhyt ja kuvaava, jotta asiakas ymmärtää painikkeen tarkoituksen ilman painiketta ympäröivän sisällön lukemista.
- Käytä verbejä.
- Suosi lyhyitä nimiä. Varmista, että painikkeen nimi kuvaa toimintoa ymmärrettävästi.
- Huomioi, että käyttäjät eivät aina lue painikkeen ympärillä olevaa sisältöä.
- Kirjoita painikkeen nimi isolla alkukirjaimella. Nimen perään ei tule pistettä.
Painiketyypit
Käytä eri painiketyyppejä niin, että päätoiminnot korostuvat ja erottuvat muista vähemmän tärkeistä toiminnoista. Selkeä visuaalinen hierarkia auttaa käyttäjää tunnistamaan tärkeimmät toiminnot silmäilemällä.
Ensisijainen painike
Ensisijainen painike korostaa palvelun ja näkymän tärkeimmät toiminnot (esim. Jatka, Tallenna, Lähetä) ja ohjaa käyttäjää haluttuun suuntaan.
- Käytä ensisijaista painiketta säästeliäästi.
- Korosta vain tärkeimmät toiminnot
- Älä käytä useita ensisijaisia painikkeita viereikkäin
Toisen tason painike
Toisen tason painikkeella voi esittää toimintoja, jotka ovat merkitykseltään toissijaisia tai vähemmän tärkeitä suhteessa ensisijaiseen painikkeeseen.
- Vaihtoehto ensisijaiselle toiminnolle
- Muut vähemmän tärkeät toiminnot
Kolmannen tason painike
Kolmannen tason painike esittää vaihtoehtoisia toimintoja edellisille.
Painikkeen hover-tilan voi muuttaa erottuvammaksi asettamalla painikkeen ulkoasuksi ghost-outline.
Linkkipainike
Linkkipainike soveltuu tilanteisiin, joissa painikkeen teksti halutaan tasata pystysuunnassa samaan linjaan muun sisällön kanssa. Linkkipainiketta voidaan myös käyttää vaihtoehtona kolmannen tason painikkeelle. Linkkipainikkeella ei ole paddingia eikä reunaviivaa. Hover-tilassa se saa korostukseksi alleviivauksen.
Värillisellä tai tummalla taustalla voi käyttää linkkipainikkeen light-varianttia.
Pyöristetty painike
Painikkeen reunojen pyöristys on toteutettavissa rounded-propin avulla.
Huomaa, että pyöristetty painike muistuttaa tyyliltään tiettyjä komponentteja (esim. Badge ja Chip). Jos samassa näkymässä on muotokieleltään samankaltaisia komponentteja, pyöristetyn painikkeen sijaan kannattaa yleensä käyttää tavallista painiketta.
Esimerkiksi kirjautumispainikkeessa pyöreä muotokieli toimii visuaalisena tehokeinona, jonka ansiosta painike erottuu tehokkaasti muusta sisällöstä. Usean pyöristetyn painikkeen käyttöä samassa yhteydessä kannattaa siksi välttää.
Sijainti
Painikkeet tasataan oletuksena vasempaan reunaan.
Kaksipalstaisella lomakeasettelulla painikkeet tasataan näytön oikeaan reunaan.
Järjestys
Järjestä painikkeet painiketyypin mukaan vierekkäin: lukusuunnassa ensimmäiseksi ensisijainen painike, sen jälkeen toissijaiset painikkeet ja lopuksi kolmannen tason painikkeet.
Sijoita toisiinsa liittyvät tai toisilleen vaihtoehtoiset painikkeet rinnakkain. Jos tila ei riitä rinnakkaiseen asetteluun, painikkeet esitetään allekkain.
Poikkeuksen painikkeiden järjestyksessä muodostavat sivutuspainikkeet, joilla voidaan korostaa prosessin etenemistä sivu kerrallaan.
Sivutuksessa eteenpäin vievä oletuspainike voidaan esittää taaksepäin vievän painikkeen jälkeen, jolloin painikkeet vastaavat paremmin lukusuunnan mukaista siirtymistä sivulta toiselle. Älä kuitenkaan sijoita näiden väliin muita painikkeita, vaan aseta ne seuraavalle riville.
Jos painikkeet muodostavat selkeitä toimintoryhmiä, ne voidaan esittää usealla rivillä. Päätoiminto ja sille vaihtoehtoiset toiminnot ovat samalla rivillä. Muut vähemmän tärkeät toiminnot voivat olla näiden alapuolella.
Painikkeiden ryhmittelyssä voi käyttää apuna ButtonGroup ja ButtonToolbar -komponentteja.
Painikkeen voi yhdistää toiseen käyttöliittymäkomponenttiin, jos ne muodostavat selkeästi yhden toiminnon. Esimerkiksi hakukentän tekstikenttä ja Hae-painike.
Painikkeen tilat
Painikkeen käytön voi estää (disable), jos käyttäjä ei voi tilapäisesti suorittaa painikkeen toimintoa. Disabloitu painike ei ole selkeä palaute käyttäjälle, joten sitä tulee käyttää vain poikkeustilanteissa. Tällaisia tilanteita voivat olla mm. painikkeen estäminen lomakkeen lähetyksen yhteydessä tai tietyn toiminnallisuuden estäminen puutteellisten käyttöoikeuksien vuoksi.
- Piilota painike kokonaan tilanteissa, joissa käyttäjä ei voi millään toiminnolla muuttaa sitä aktiiviseksi.
- Vaihtoehtoisesti painike voi olla käytettävissä, mutta käyttäjälle näytetään selkeä virheilmoitus painiketta painettaessa.
Värit
Ensisijainen painike
Toissijainen painike
Kolmannen tason painike
Jos normaali kolmannen tason painike ei erotu riittävästi taustasta, voi asettaa painikkeen ulkoasuksi ghost-outline.
Linkkipainike
Linkkipainike värillisellä taustalla
Värillisillä tai tummilla taustoilla voi tarvittaessa käyttää vaaleaa painiketta, jos muut painikevaihtoehdot eivät erotu taustasta riittävästi.
Painikekoot
Block-level painike
Painike kuvakkeella
Painikkeisiin voi sijoittaa käyttöliittymäkuvakkeen. Aseta kuvake lähtökohtaisesti painikkeen vasempaan reunaan. Edellinen- ja Seuraava-painikkeissa kuvakkeen paikka määräytyy liikkumissuunnan mukaisest. Siten eteenpäin ohjaavassa painikkeessa kuvake asetetaan aina tekstin oikealle puolelle.