CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors

Interaction Design 103 Vragen of feedback? @ferrydendopper

Hints, Help & Errors

Helping people complete forms


Usability Rule

“If you need a Help section, you are probably doing something wrong.”

(De interface is dan niet intuïtief)


Wat betekent dat voor formulieren?

Als je veel moet uitleggen, is wellicht de vraag: niet duidelijk gesteld te complex onnodig


Te complex


Wat moet je in ieder geval niet doen?

Lange introteksten worden meestal over

het hoofd gezien.


Wanneer is hulp wel zinvol?

Als formulieren vragen om onbekende data: “Wat is een PAC code?”

Als mensen kritisch zijn waarom een bepaalde vraag gesteld wordt: “Waarom moeten wij uw geboortedatum weten?”

Als mensen bezorgd zijn over de veiligheid of privacy van hun data: “Is mijn creditcard nummer hier veilig?”

Als er een aanbevolen manier is om iets in te vullen: “Scheid uw tags met komma’s”

Als sommige velden optioneel of juist verplicht zijn.


Maak de hulp…

Kort en duidelijk Direct bij het veld


Automatische helpteksten


Automatische helpteksten

+ Altijd netjes naast het veld

- Ruimte voor reserveren

Oogfocus ligt vooral links

+ Kost geen ruimte

Dichtbij de vraag

- Bedekt (deels) andere velden


Ook toepasbaar op clusters van velden


Nadeel van automatische helpteksten

Als mensen aan het formulier willen beginnen, zien ze nog niet dat er hulp beschikbaar is.

Mensen die verwachten hulp nodig te hebben, kunnen ontmoedigd raken en zelfs afhaken.

Oplossingen:• Inline help• User-activated help


Inline help

HOE WAAROM

Alleen geschikt voor “Hoe” help, niet voor wat of waarom.


Inline help: let op!

Zorg dat de helptekst verdwijnt als mensen het antwoord gaan typen, anders wordt het deel van het antwoord;

Weet dat dus tijdens het invoeren de gebruiker geen assistentie meer heeft;

Gebruik het liever niet voor complexe invoer;

Zorg dat mensen het verschil kunnen zien tussen helptekst en antwoord.


User-activated help section

Vooral handig voor formulieren die je vaker gebruikt, met daarin diverse complexe vragen


User-activated help


Misschien niet zo’n goed idee


Beter


Is dit ook goed?


Veilige transacties


Fout- en succesmeldingen

Stap 1: Probeer fouten te voorkomen

Stap 2: Probeer fouten te voorkomen

Stap 3: Laat zo duidelijk mogelijk

weten wat er mis is gegaan en

hoe de gebruiker het kan

oplossen.


Dubbele visuele nadruk


Meerdere fouten?


Maak meldingen op meerdere manieren visueel onderscheidend met icoon, kleur en/of vorm.

Goede meldingen


Grappige meldingen?


Succes!

Belangrijk om te bevestigen dat het proces succesvol voltooid is.

Melding moet opvallen, maar mag de gebruiker niet blokkeren zoals een foutmelding.

Integendeel, het moet stimuleren tot meer.


Alternatieve succesmelding


No dead ends


Lezen:

Web Form Design (boek)Hoofdstuk 9+10


Vragen? Feedback?

[email protected]

@ferrydendopper

CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors

Design

Transcript of CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors