Hur man designar felmeddelanden som minskar frustration
Hur man designar feltillstånd som människor kan återhämta sig från: placering, timing, formulering, bevara input, tillgänglighet och rörelse, baserat på användbarhetsforskning.
Core Takeaway
Ett bra felmeddelande är synligt och placeras bredvid problemet, skrivet på vanligt språk, säger hur man åtgärdar det, behåller det personen redan skrivit och skyller aldrig på dem. Visa det när personen är klar med ett fält eller skickat in, inte medan de fortfarande skriver, och se till att skärmläsare meddelar det.
Riktlinjerna
Nielsen Norman Group sammanfattar effektiva felmeddelanden som mycket synliga, konstruktiva och respektfulla för användarens ansträngning. I praktiken betyder det:
- Placera meddelandet bredvid fältet eller elementet med problemet.
- Använd ett vanligt, specifikt språk: "Detta nummer är en siffra kort", inte "Ogiltig inmatning".
- Erbjud en lösning: vilket format förväntas, vad du ska prova härnäst.
- Behåll det som folk skrev så att de kan redigera det istället för att börja om.
- Skyll inte på: undvik ord som ogiltiga, olagliga eller felaktiga.
Timing
Att visa ett fel innan någon har gjort klart är ett av de vanligaste misstagen. NN/g kallar förtida fel för ett fientligt mönster, som att betygsätta ett test innan studenten är klar. Validera ett fält när personen lämnar det eller skickar formuläret, uppdatera sedan meddelandet live medan de korrigerar det.
Fel som inte handlar om formulär
För systemfel som en misslyckad lagring eller förlorad anslutning, säg vad som hände, vad som behölls och vad personen kan göra: försöka igen, arbeta offline eller kontakta support. Undvik felkoder på egen hand; om du behöver en som stöd, visa den tillsammans med en mänsklig förklaring.
Tillgänglighet
Lita inte bara på rött: lägg till en ikon och text. Koppla meddelandet till dess fält så att skärmläsare läser det med fältet och flytta fokus till det första felet, eller en sammanfattning av fel, efter en misslyckad inlämning.
Rörelse i feltillstånd
En kort skakning eller färgändring kan dra uppmärksamheten till fältet med problemet, men håll det kort, upprepa det inte vid varje knapptryckning och ersätt rörelse med en färg- eller ikonändring när reducerad rörelse är aktiverad. Budskapet i sig är viktigare än animationen.
Nyckel Principles att komma ihåg
- Placera fel bredvid problemet, i klartext, med en fix
- Behåll vad folk skrev
- Validera efter att ett fält är klart, inte medan du skriver
- Lita aldrig enbart på färg; koppla meddelanden för skärmläsare
- Håll felrörelse kort och respektera reducerad rörelse
Vanliga frågor
Källor
- Error-Message Guidelines — Nielsen Norman Group
- Indicators, Validations, and Notifications — Nielsen Norman Group