Ångra istället för bekräftelsedialoger: Designing av mindre störande UI
Varför rutin "Är du säker?" dialogrutor misslyckas, när en bekräftelse fortfarande är rätt, och hur man utformar ångra skålar som är tydliga, tillgängliga och säkra.
Core Takeaway
Använd ångra för åtgärder som kan ångras: gör åtgärden omedelbart och visa sedan ett kort, icke-blockerande meddelande med en Ångra-knapp. Behåll bekräftelsedialoger för allvarliga, oåterkalleliga åtgärder som permanent radering eller stora betalningar, och gör dem specifika: namnge objektet och konsekvensen. Att bekräfta rutinåtgärder tränar människor att klicka på "OK" utan att läsa.
Varför rutinbekräftelser slutar fungera
Nielsen Norman Group:s vägledning om bekräftelsedialoger är tydliga: använd dem före handlingar med allvarliga konsekvenser, och använd dem inte för rutinåtgärder. När människor ser samma dialogruta många gånger bekräftar de av vana, och dialogen slutar förhindra de fel den var menad att fånga upp. Samma artikel rekommenderar att du erbjuder ångra när det är möjligt istället för att lita på en varning.
Bekräfta eller ångra: en enkel regel
Ställ en fråga: går det att vända på detta? Om ja, agera och erbjuda ångra. Om nej, bekräfta först och gör bekräftelsen specifik.
- Arkivera, flytta, markera som läst, ta bort från en lista: agera nu, erbjuda ångra.
- Skicka ett meddelande: många produkter försenar sändningen en kort stund så att det kan ångras. Gmail låter människor välja ett ångra-fönster på 5, 10, 20 eller 30 sekunder.
- Ta bort permanent, betala, publicera offentligt: bekräfta först, namnge objektet och effekten ("Radera 142 filer").
- Ännu bättre: gör raderingen reversibel med en papperskorgen eller återställningsperiod och använd sedan ångra.
Designa ångra meddelandet
Material Design kallar denna komponent en snackbar: ett kort, minimalt avbrytande meddelande som kan innehålla en enda åtgärd, till skillnad från en dialogruta, som kräver ett svar. Skriv vad som hände med några få ord, sätt Ångra som den enda åtgärden och låt den vara på skärmen tillräckligt länge för att folk ska kunna reagera. Göm inte viktiga ångraåtgärder i meddelanden som försvinner på två sekunder.
Tillgänglighetsinformation
Skålar som försvinner av sig själva kan missas av skärmläsare och personer som behöver mer tid. Meddela meddelandet genom en artig liveregion, låt tangentbordsanvändare nå Ångra-knappen, pausa timern medan meddelandet hålls eller fokuseras, och tillhandahåll ett annat sätt att vända på åtgärden, till exempel en historiklista eller papperskorgen.
Rörelse för ångra
En kort, lugn ingång från skärmens kant och en tydlig utgång hjälper människor att lägga märke till meddelandet utan att bli avbrutna. När du trycker på Ångra, animera objektet tillbaka på plats så att vändningen är synlig. Respektera reducerade rörelseinställningar med en enkel toning.
Nyckel Principles att komma ihåg
- Återställbara åtgärder: agera omedelbart och erbjuda ångra
- Oåterkalleliga, allvarliga handlingar: en specifik bekräftelse som namnger effekterna
- Rutinmässiga bekräftelser klickas igenom av vana
- Gör ångra meddelanden tillgängliga: liveregion, tangentbordsfokus, tillräckligt med tid
- Animera vändningen så att folk ser att det fungerade
Vanliga frågor
Källor
- Confirmation Dialogs Can Prevent User Errors — If Not Overused — Nielsen Norman Group
- Send or unsend Gmail messages — Gmail Hjälp
- Snackbar guidelines — Material Design 3