Menu


Vahvistusdialogien kuolemansynnit

13.4.2019

Vahvistus­dialogit ovat kattavasti käytössä miltei kaikissa käyttö­liittymissä, aina mobiili­laitteista ohjus­hälytys­järjestelmiin. Periaatteessa tämä tehokas elementti kuitenkin on melko helppo sössiä, jolloin vahvistuksesta on pelkää haittaa. Tässäpä lista niiden käytettävyyden parantamiseksi esimerkein havainnollistettuna.

Vahvistus­dialogit (confirm dialog) ovat useimmiten modaalisia ponnahdusikkunoita, joiden tarkoitus on nimensä mukaan pyytää vahvistus käyttäjän valitsemalla toiminnolle. Ajatus ylimääräisen vahvistuksen takana on poistaa virhepainallusten todennäköisyyttä ja toimia tuplavarmistuksena peruuttamattomille toiminnoille.

Vahvistus­dialogi korjattuna

Tässäpä yhdeksän kohdan checklist vahvistus­dialogien kuolemansynneistä. Visuaalisen tyylin suhteen kannattaa käyttää alustan tyylimäärityksiä, huomioiden kuitenkin riittävä kontrasti ja värisokeat käyttäjät. Tässä esitettävä layout on lähinnä suuntaa antava.

1. Tarpeeton vahvistus­dialogi

Vahvistus­dialogin on tarkoitus hieman ravistella käyttäjää. Sen täytyy hyvällä tavalla hieman säikäyttää käyttäjä miettimään tekosiaan. Jos vahvistus­dialogeja käyttää liian usein tai yllättävällä hetkellä, ei niillä ole tarvittavaa vaikutusta; käyttäjä yksinkertaisesti kuittaa dialogin lukematta sitä.

Tarpeeton vahvistus­dialogi Älä käytä vahvistus­dialogia rutiininomaisissa toimenpiteissä.

Mieti, voisiko vahvistus­dialogin korvata ohjetekstillä sisällössä, tai onko asia oikeasti niin tärkeä, että siitä täytyy erikseen kysellä. Huomaa myös, että vahvistus­dialogi pysäyttää käyttäjän flow’n hetkeksi, mikä voi saada tämän harkitsemaan toimintoaan uudestaan myös ei-toivotulla tavalla, kuten verkkokaupan kassalla ollessa.

2. Tasa-arvoiset painikkeet

Vahvistus­dialogeissa on miltei aina jonkinlainen peruutustoiminto, jonka pitäisi olla selkeästi erotettavissa visuaalisen tyylinsä perusteella. Tällöin ensisijainen toiminto­painike nousee helpommin ymmärrettävästi, eikä sen tekstiä välttämättä edes tarvitse lukea.

Visuaalisesti muotoiltu peruutuspainike Luo painikkeille visuaalinen hierarkia.

Peruutus-painikkeen visuaalisen tyylin on syytä olla neutraali. Tyypillisesti käytettäviä tyylejä ovat yllä oleva harmaa painike, tai esim. Google Material Designin käyttämä reunukseton, linkkimäinen nappi.

3. Puhtaan graafiset painikkeet

Varsinkin peleissä ja mobiilisovelluksissa näkee painikkeissa usein tekstin sijaan kuvakkeet, mikä on vahvistus­dialogien tapauksessa hankalaa. Painikkeista kun pitäisi yksiselitteisesti ymmärtää, kummallako pankkitili vedetään tyhjäksi.

Tarpeettoman graafiset painikkeet Kummalla poistutaan päävalikkoon: kysymykseen hyväksyvästi vastaavalla check-painikkeella, vai poistumista usein kuvaavalla x-painikkeella?

Kuvakkeita voi toki käyttää tarvittaessa tekstien yhteydessä, mutta peruuttamatonta toimintoa kuittaavaan vahvistus­dialogiin ne ovat riittämättömiä ainoana nappisisältönä.

4. Monitulkintaiset painikkeet

Koska vahvistus­dialogin tulos on usein peruuttamaton, on nappien tekstien oltava yksiselitteisiä. Varsinkin webin puolella näkee vielä varsin usein OK/Cancel ja Yes/No -tyylisiä selaimen oletusdialogeja, joista ei voi kuin arvailla, mitä nappia pitäisi painaa.

Epäselvät painiketekstit Hieman erikoisempi tapaus, jossa sanaa ”Cancel” ei ole mahdollista käyttää painiketekstissä.

Älä käytä samoja sanoja painikkeissa, jos voit suinkin välttää sitä. Näin painikkeet eriävät paremmin toisistaan, eikä niiden sisältöä epähuomiossa sekoita niin helposti. Älä siis sano ”Save changes / Don’t save changes”, vaan ”Save document / Discard changes”.

5. Riittämätön tietosisältö

Kun käyttäjä näkee toimintansa tuloksena vahvistus­dialogin, häviää häneltä usein konteksti juuri suoritettuun toimintoon. Tätä vahvistaa yleisesti käytössä oleva tapa sumentaa tai tummentaa dialogin tausta.

Liian vähän tietoa Jos toiminto kohdistuu tiettyyn tietoon, kerro mistä tiedosta on kyse ja tarjoa esikatselutoiminto, jos mahdollista.

Mikäli vahvistus­dialogi liittyy tiettyyn tietosisältöön – kuten tiedostoon tai käyttäjänimeen – toista tämä tietosisältö myös vahvistus­dialogissa. Näin vähennät virhepainalluksia ja hälvennät käyttäjän stressiä siitä, että hän varmasti valitsi oikean tietosisällön.

6. Liikaa tekstiä

Käänteinen kuolemansynti edelliselle on tietenkin liiallisen tekstin määrä. Yleisenä nyrkkisääntönä voidaan pitää, että käyttäjän pitäisi voida tehdä vahvistus­dialogin valinta ainoastaan lukemalla sen otsikko ja painiketekstit.

Liian paljon tietoa Liika tekstisisältö tekee toiminnosta hankalamman tuntuisen, kuin se oikeasti on.

Käytä yksinkertaista kieltä ja vältä korostuksia. Käytä mahdollisuuksien mukaan ranskalaisia viivoja pitkien lauseiden sijaan, ja piilota tekniset yksityiskohdat tarvittaessa lisätietovalinnan alle.

7. Sulkunapin toiminnan epävarmuus

Vahvistus­dialogeissa kannattaa aina käyttää sulkupainiketta. Se toimii käyttäjälle tietynlaisena yleisavaimena päästä tilanteesta pois kuivin jaloin.

Epäselvä sulkupainike Mitä sulkupainikkeen painaminen tekee? Palauttaako se poistetut tiedostotkin?

Joissain tilanteissa vahvistus­dialogin toiminta tai sisältö on kuitenkin sellainen, ettei sitä voi yksiselitteisesti peruuttaa. Näissä tapauksissa jätä sulkupainike yksinkertaisesti pois, jolloin käyttäjän ei tarvitse arvailla sen painamisen seuraamuksia.

8. Liian monta painiketta

Pääsääntöisesti vahvistus­dialogeissa pitäisi olla vain kaksi toimintoa: kuittaaminen ja peruuttaminen. Useamman painikkeen käyttäminen heikentää painikkeen vaikutuksen ennustamista ja vaikeuttaa valinnan tekemistä.

Liian monta painiketta Mihin näkymään Settings-painike vie käyttäjän tässä esimerkissä?

Jos käyttötapauksesi vaatii usean painikkeen käyttämistä, harkitse valinnan siirtämistä vahvistus­dialogin ulkopuolelle. Vältä erityisesti tapauksia, joissa dialogissa on lisäpainikkeita, jotka vievät dialogista pois, sillä tällöin käyttäjä ei voi tietää sitä, vahvistettiinko toiminta vai ei.

9. Liian helppo katastrofin kuittaaminen

Jos järjestelmässä ollaan tekemässä jotain sangen dramaattista, kuten... no, koko järjestelmän tuhoaminen, on jonkinlainen vahvistus aika tarpeen. Koska käyttäjän ei näissä tapauksissa haluta epähuomiossa kuittaavan dialogia, on kannattaa tällöin käyttää perinteisen vahvistus­dialogin sijaan hieman vaikeakäyttöisempää dialogia. Kyllä vain, parempaa käytettävyyttä vaikealla käyttöliittymällä!

Liian helppo vahvistaminen Katastrofaalisen toiminnon kuittaamiseen kannattaa käyttää tahallisen vaikeaa käyttöliittymää.

Tyypillisiä vahvistus­dialogin vaikeutuksia ovat erilaiset luetunymmärrystehtävät, kuten ”klikkaa alla olevaa kuvaa kuusi kertaa”. Erityisen tehokas tapa on vaatia käyttäjä kirjoittamaan haluttu toiminto, sillä toiminnon aukikirjoittaminen on omiaan konkretisoimaan sen vaikutuksen.

« Takaisin blogilistaukseen