![Page 1: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/1.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Hints, Help & Errors
Helping people complete forms
![Page 2: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/2.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Usability Rule
“If you need a Help section, you are probably doing something wrong.”
(De interface is dan niet intuïtief)
![Page 3: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/3.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Wat betekent dat voor formulieren?
Als je veel moet uitleggen, is wellicht de vraag: niet duidelijk gesteld te complex onnodig
![Page 4: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/4.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Te complex
![Page 5: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/5.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Wat moet je in ieder geval niet doen?
Lange introteksten worden meestal over
het hoofd gezien.
![Page 6: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/6.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
![Page 7: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/7.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Maak de hulp…
Kort en duidelijk Direct bij het veld
![Page 8: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/8.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Automatische helpteksten
![Page 9: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/9.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Automatische helpteksten
+ Altijd netjes naast het veld
- Ruimte voor reserveren
Oogfocus ligt vooral links
+ Kost geen ruimte
Dichtbij de vraag
- Bedekt (deels) andere velden
![Page 10: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/10.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Ook toepasbaar op clusters van velden
![Page 11: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/11.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
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
![Page 12: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/12.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Inline help
HOE WAAROM
Alleen geschikt voor “Hoe” help, niet voor wat of waarom.
![Page 13: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/13.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
![Page 14: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/14.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
User-activated help section
Vooral handig voor formulieren die je vaker gebruikt, met daarin diverse complexe vragen
![Page 15: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/15.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
User-activated help
![Page 16: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/16.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Misschien niet zo’n goed idee
![Page 17: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/17.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Beter
![Page 18: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/18.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Is dit ook goed?
![Page 19: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/19.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Veilige transacties
![Page 20: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/20.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
![Page 21: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/21.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 22: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/22.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 23: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/23.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Dubbele visuele nadruk
![Page 24: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/24.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Meerdere fouten?
![Page 25: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/25.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Maak meldingen op meerdere manieren visueel onderscheidend met icoon, kleur en/of vorm.
Goede meldingen
![Page 26: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/26.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Grappige meldingen?
![Page 27: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/27.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
![Page 28: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/28.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Alternatieve succesmelding
![Page 29: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/29.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
No dead ends
![Page 30: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/30.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Lezen:
Web Form Design (boek)Hoofdstuk 9+10
![Page 31: CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors](https://reader037.vdocuments.us/reader037/viewer/2022110115/54c7e9a54a795916268b45da/html5/thumbnails/31.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper