Download - Interaction Design 3.4: Hints, Help & Errors
![Page 1: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/1.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Hints, Help & Errors
Helping people complete forms
![Page 2: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/4.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Te complex
![Page 5: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/7.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Maak de hulp…
Kort en duidelijk Direct bij het veld
![Page 8: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/8.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Automatische helpteksten
![Page 9: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/10.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Ook toepasbaar op clusters van velden
![Page 11: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/15.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
User-activated help
![Page 16: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/16.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Misschien niet zo’n goed idee
![Page 17: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/17.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Beter
![Page 18: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/18.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Is dit ook goed?
![Page 19: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/19.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Veilige transacties
![Page 20: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/21.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 22: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/22.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 23: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/23.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Dubbele visuele nadruk
![Page 24: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/24.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Meerdere fouten?
![Page 25: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/26.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Grappige meldingen?
![Page 27: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/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: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/28.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Alternatieve succesmelding
![Page 29: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/29.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
No dead ends
![Page 30: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/30.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Lezen:
Web Form Design (boek)Hoofdstuk 9+10
![Page 31: Interaction Design 3.4: Hints, Help & Errors](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7e94a4a795904268b45d1/html5/thumbnails/31.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper