Feedback in formulieren, een kleurig verhaal
Categorie: Artikelen
Datum: 21 01 10 - 15:40
Een webformulier is niet altijd een makkelijk ding. Soms vergt een formulier uitleg, soms validatie, soms bevestiging.
De interactie tussen een formulier-invoerder en de machine kan je stroomlijnen met kleur. Door eenduidig te communiceren met concequente kleuren wordt de invoerder aan de hand genomen en door de moelijke invoer geloosd.
Eén van de facetten van een formulier zijn de notificaties: een foutmelding, een bevestiging of een informerenede "let-op"-tekst.
"Fouten en rood", "bevestiging en groen", en "informeren en licht-geel" zijn logische keuzes. Grote voorbeelden zoals Google, Yahoo en Wordpress zie je dat ook doen.
- Rood: universele kleur om even te stoppen, er is namelijk gevaar....: een foutmelding dus.
- Groen: "Ja, dan mag je doorgaan". Je bestand is dan bijvoorbeeld met succes verzonden.
- Lichtgeel is een arceerkleur. Het trekt de aandacht even naar zich toe. "Niet om t een of ander, maar let hier even op. Ik help je er alleen maar mee. "
Door met lichtere kleuren te werken dan de verzadigde signaalkleuren kan je toch nog je normale typografie gebruiken. De basiskleur waar de lichte variant van is afgeleid kan dan prima als rand rondom de notificatie extra attentie geven aan de kleur.
Na wat vergelijkend onderzoek adviseer ik onderstaande kleuren. van Klaske Vogd en Wim Korvinus heb ik op de academie geleerd dat wetmatigheid in kleurtoon, verzadiging en helderheid rust en regelmaat, maar ook schoonheid geven aan de combinaties.
Foutmeldingen: Signaalkleur rood:
Rand: Zou in theorie primair rood moeten zijn. Om de kleur iets warmer te houden schroef ik de helderheid en verzadiging naar 85%: #d92121
Bevestigingen: Signaalkleur groen
Rand: Zou in theorie fris groen moeten zijn. Om de kleur iets warmer te houden schroef ik de helderheid en verzadiging weer naar 85%: #8dd921
Notificatie: Afgeleid van de Post-it memootjes:
Rand: zou in theorie dus primair geel moeten zijn. Dit kadert alleen onvoldoende af, geeft niet genoeg contrast. Mijn keus is dus een neutrale kleur die niet botst met huisstijlkleuren, de kleurloze grijs: #666666
Omdat alleen kleur niet voldoende is voor een foutmelding (denk aan kleurenblinden) zegt Jacob Nielsen dat je ook nog een andere grafische oplossing moet aanbieden ter onderscheid. Uiteraard is de foutmelding zélf wellicht al tekstueel duidelijk genoeg, maar ter ondersteuning zou een uitroepteken of ander waarschuwingssignaal ondersteunend zijn.
Notificaties horen in het oog te springen. Zet geen foutmeldingen ver boven of onder je formulier, maar zo mogelijk direct bij het invoerveld. Bijvoorbeeld zo:
Nog sterker wordt de aanwijzing als het bijvoorbeeld met een pijl wijst naar de goede plek. Tooltips als bijv. http://www.walterzorn.com/tooltip/extensions.htm doen dat leuk.
Heb je nog meer tips of voorbeelden? Ik hoor het graag!