...
En annan nackdel är att om det inte implementeras rätt kan inaktiva knappar förvirra användaren, exempelvis kan nedtonade knappar se ut som sekundära alternativ eller att kontrasten på knappen är så låg att användare inte ser den.
Rekommendation
UX-ramverket rekommenderar att avstå från disabled states om möjligt.
I exempelvis formulär som innehåller obligatoriska fält så kan man istället för att använda en inaktiverad-knapp låta den vara aktiv. När användaren klickar på knappen “skicka” och inte har fyllt i alla obligatoriska fält så kan man istället trigga ett valideringsfel som förklarar för användaren vad som saknas för att kunna utföra uppgiften. På så sätt så minskas risken att användaren blir förvirrad över varför det inte går att klicka på skicka-knappen på grund utav att hen kan ha missat att fylla i något.
...
Om disabled states måste användas, se då till att det finns text som beskriver för användaren vad hen behöver göra för att aktivera den inaktiva knappen/ komponenten, så det inte uppstår onödig förvirring.
...
Överväg om det istället kan användas aktiva knappar/ komponenter men som triggar felmeddelanden vid felaktig inmatning, istället för att använda inaktiva komponenter.
Tips vid implementering av disabled states
Tips | Bild |
|---|---|
På denna bild har vi en jämförelse mellan två bilder, bilden till vänster har enbart gjort den gråa färgen ljusare vilket gör att den vita texten blir svårt att se när den blir inaktiv, medans den högra bilden ändrar färgen från blå till lite mörkare grå som gör att båda fortfarande går att se även om knappen blir inaktiv. |  Bild hämtat från Is it ok to ‘grey out’ disabled buttons? | by H Locke | Medium |
Se till (om möjligt) att ha den inaktiva knappen på ett ställe där du vet att användaren kommer se den. Detta kan vara bredvid knappar som är aktiva. |
|
Bilden ger ett exempel där man kan ha stödjande text som beskriver varför knappen är inaktiv, detta för att klargöra vad det är som behövs för att kunna använda knappen. |  Bild hämtat från Is it ok to ‘grey out’ disabled buttons? | by H Locke | Medium |
Se till att font storleken inte ändras beroende på storleken på skärmen, detta gäller aktiva som inaktiva knappar. |
|
Knappen ska vara läsbar av skärmläsare, detta kan göras med “aria-disabled=true” istället för “disabled” detta låter användaren veta om att det finns en knapp. “aria-live” låter användaren inte skicka in något. | Exempel finns här: |
Använd “cursor disabled” när man hovrar musen över knappen om det är en inaktiv knapp. Då får man ytterligare en indikation att den är inaktiv. |  Bild hämtat från Is it ok to ‘grey out’ disabled buttons? | by H Locke | Medium |
WCAG-krav vid användning av disabled states
Enligt WCAG så behöver man inte tillämpa någon kontrast skillnad mellan den inaktiva knappen och bakgrunden just för att det räknas som en tillfällighet, med det sagt är det ändå viktigt att tänka på att knappen inte är allt för nedtonad så att knappen inte är allt för svår att kunna se. Samt att man måste tänka på att inte enbart förmedla genom en nedtonad grå färg att knappen är inaktiv.
...