Button (Painike)
Painike käynnistää toiminnon. Painiketta voidaan käyttää esimerkiksi siirtymiseen toiseen näkymään, tai painikkeella voidaan hyväksyä toiminto.
Saavutettavuus ja käytettävyys
- Painike käynnistää yleensä toiminnon. Joissakin erityistapauksissa painiketta voidaan käyttää normaalin linkkityylin asemesta, kun käyttäjä ohjataan toiselle sivulle.
- Painikkeet korostuvat helposti käyttöliittymässä ja siksi painikkeiden määrä sivulla kannattaa pitää rajallisena.
Mistä komponentti koostuu
Teksti kertoo painikkeen toiminnon. Toimintopainike kertoo vain olennaisen toiminnon, jonka se toteuttaa, esimerkiksi "Valitse" tai "Seuraava". Jos toimintopainikkeen nimi on yli kolme sanaa pitkä, mieti miten sitä voidaan lyhentää. Painikkeen teksti alkaa verbillä sekä aina isolla alkukirjaimella.
Koko ja käyttö
Mobiilikoossa käytetään täysleveää painiketta, joka skaalautuu näytön leveyden mukaan. Desktop-koossa käytetään kapeaa painiketta, joka skaalautuu painikkeen sisällön mukaan.
Ensisijainen painike (Primary Button)
Ensisijaista painiketta käytetään, kun toiminto on ensisijainen, pakollinen tai olennainen prosessin tai muun toiminnon kannalta. Ensisijainen painike on yleisimmin käytetty painike. Painiketta käytetään erityisesti korostamaan pakollisia tai huomionarvoisia toimintoja, jotka ovat käyttäjälle keskeisiä. Usean ensisijaisen painikkeen käyttöä yhdessä näkymässä tulisi välttää.
Käänteinen painike (Inverted Button)
Käänteistä painiketta käytetään erivärisillä taustoilla. Painikkeen käyttäminen kuvan päällä ei ole saavutettavuuden kannalta suositeltavaa. Jos painiketta käyttää kuvan tai kuvituksen päällä, tulee huomioida kuvan ja painikkeen välinen riittävä kontrasti.
Toissijainen painike (Secondary Button)
Toissijaista painiketta käytetään, jos painike ei ole olennainen esimerkiksi prosessin läpäisemisen kannalta tai toiminto on käyttäjän kannalta toissijainen. Jos toiminto ei ole pakollinen, esimerkiksi "paluu edelliselle sivulle" toimintapolussa (wizard), valitaan käyttöön toissijainen painike.
Kevyt toissijainen painike (Light Secondary Button)
Kevyttä toissijaista painiketta käytetään tärkeän huomionarvoisen toiminnon esittämiseen, mutta toiminto ei ole käyttäjälle välttämättä pakollinen. Painiketta voidaan käyttää esimerkiksi taulukossa, jossa sama painike toistuu riveittäin.
Reunukseton painike (Borderless Button)
Reunuksetonta painiketta käytetään silloin, kun toiminnon huomioarvoa halutaan alentaa muihin nähden. Reunuksetonta painiketta voidaan käyttää toissijaisen painikkeen kaltaisesti esimerkiksi dialogin "Keskeytä"-painikkeena. Huomioi, että tekstipainikkeen taustaväri on oletuksena valkoinen, mutta on myös määriteltävissä käyttötapauksen mukaisesti.
Painike ikonilla (Button with Icon)
Ikonillista painiketta käytetään selkeyttämään toimintoa tai erottamaan tärkeä toiminto muista painikkeista. Ikoni korostaa painikkeen roolia ja auttaa painikkeen tunnistamisessa. Kuvaava ikoni myös helpottaa ymmärtämään, mitä painikkeesta tapahtuu. Jos käytetään painiketta, jossa on pelkkä ikoni ilman visuaalista tekstiä, tuetaan saavutettavuutta käyttämällä aria-label attribuuttia. Tyypillinen esimerkki on sulje-painike (X), jolloin luettava nimi annetaan aria-label="Sulje".
Estetty painike (Disabled Button)
Estettyä painiketta käytetään silloin, kun toiminto ei ole jostain syystä klikattava. Painike voi olla estettynä esimerkiksi silloin, jos käyttäjä ei ole täyttänyt tarvittavia tietoja edetäkseen toiminnossa tai prosessissa eteenpäin. Estetty painike ei reagoi hover-toimintoon (hiiren kohdistimen siirtämistä painikkeen päälle). Vaikka estetty painike ei täytä saavutettavuuden kontrastivaatimusta, sitä on suositeltavaa käyttää, jos sen avulla voidaan parantaa käyttöliittymän ymmärrettävyyttä. Näin voidaan toimia, koska painikkeeseen ei kuitenkaan liity varsinaista toiminnallisuutta.