SlideShare une entreprise Scribd logo

Interaction Design 3.5: Inline Validation & Smart Defaults

•Télécharger en tant que PPTX, PDF•
•
Ferry den Dopper
Ferry den Dopper
Design
1  sur  17
Interaction Design 103 Vragen of feedback? @ferrydendopper Inline Validation & Smart Defaults Smart ways of helping
Interaction Design 103 Vragen of feedback? @ferrydendopper Inline validatie  Bevestiging  Suggesties  Limieten e.d.
Interaction Design 103 Vragen of feedback? @ferrydendopper BEVESTIGING: kies een gebruikersnaam
Interaction Design 103 Vragen of feedback? @ferrydendopper Bevestiging: kies een gebruikersnaam
Interaction Design 103 Vragen of feedback? @ferrydendopper Beter: direct feedback tijdens typen
Interaction Design 103 Vragen of feedback? @ferrydendopper Metertjes werken (bijna) altijd
Interaction Design 103 Vragen of feedback? @ferrydendopper Voordeel van alles inline valideren: minimaliseren van fouten
Interaction Design 103 Vragen of feedback? @ferrydendopper Nadelen?  Soms kun je wel valideren of de waarde syntactisch correct is, maar niet inhoudelijk. Bv. Naam: hoe weet het formulier mijn naam?  Soms is het onduidelijk voor de gebruiker wat het uitroepteken betekent. Bv. E-mail: Is het niet mijn e-mail, is het adres op deze site al bekend, of is het niet valide?
Interaction Design 103 Vragen of feedback? @ferrydendopper Valkuil
Interaction Design 103 Vragen of feedback? @ferrydendopper SUGGESTIES
Interaction Design 103 Vragen of feedback? @ferrydendopper Gebruikersnaam kiezen kan ook zo
Interaction Design 103 Vragen of feedback? @ferrydendopper LIMIETEN
Interaction Design 103 Vragen of feedback? @ferrydendopper SLIMME ‘DEFAULTS’
Interaction Design 103 Vragen of feedback? @ferrydendopper SLIM WEGLATEN
Interaction Design 103 Vragen of feedback? @ferrydendopper SLIM WEGLATEN
Interaction Design 103 Vragen of feedback? @ferrydendopper Lezen: Web Form Design (boek) Hoofdstuk 9+10
Interaction Design 103 Vragen of feedback? @ferrydendopper Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper

Recommandé

IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataFerry den Dopper
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: WireframesFerry den Dopper
 
SEO Basic - Ronald Bruin
SEO Basic - Ronald BruinSEO Basic - Ronald Bruin
SEO Basic - Ronald BruinEasy Internet Marketing
 
E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013
E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013
E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013AccountOne
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personasFerry den Dopper
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 

Recommandé

IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataFerry den Dopper
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: WireframesFerry den Dopper
 
SEO Basic - Ronald Bruin
SEO Basic - Ronald BruinSEO Basic - Ronald Bruin
SEO Basic - Ronald BruinEasy Internet Marketing
 
E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013
E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013
E-commerce met Magento webshop + koppeling met AccountView - Klantendag 2013AccountOne
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personasFerry den Dopper
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 
IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingFerry den Dopper
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureFerry den Dopper
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry den Dopper
 
De geur van informatie
De geur van informatieDe geur van informatie
De geur van informatieFerry den Dopper
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsFerry den Dopper
 
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability TestCMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability TestFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 1 - Information Architecture
CMD Interaction Design - Y1 Q2 les 1 - Information ArchitectureCMD Interaction Design - Y1 Q2 les 1 - Information Architecture
CMD Interaction Design - Y1 Q2 les 1 - Information ArchitectureFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 2 - Card Sorting
CMD Interaction Design - Y1 Q2 les 2 - Card SortingCMD Interaction Design - Y1 Q2 les 2 - Card Sorting
CMD Interaction Design - Y1 Q2 les 2 - Card SortingFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
CMD Interaction Design - Y1 Q2 les 4 - Search & MetadataCMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
CMD Interaction Design - Y1 Q2 les 4 - Search & MetadataFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
CMD Interaction Design - Y1 Q2 les 3 - Navigation labelingCMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
CMD Interaction Design - Y1 Q2 les 3 - Navigation labelingFerry den Dopper
 
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability TestCMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability TestFerry den Dopper
 
IAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsIAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsFerry den Dopper
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchFerry den Dopper
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignFerry den Dopper
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designFerry den Dopper
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsFerry den Dopper
 

Contenu connexe

En vedette

IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureFerry den Dopper
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry den Dopper
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsFerry den Dopper
 
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability TestCMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability TestFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 1 - Information Architecture
CMD Interaction Design - Y1 Q2 les 1 - Information ArchitectureCMD Interaction Design - Y1 Q2 les 1 - Information Architecture
CMD Interaction Design - Y1 Q2 les 1 - Information ArchitectureFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 2 - Card Sorting
CMD Interaction Design - Y1 Q2 les 2 - Card SortingCMD Interaction Design - Y1 Q2 les 2 - Card Sorting
CMD Interaction Design - Y1 Q2 les 2 - Card SortingFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
CMD Interaction Design - Y1 Q2 les 4 - Search & MetadataCMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
CMD Interaction Design - Y1 Q2 les 4 - Search & MetadataFerry den Dopper
 
CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
CMD Interaction Design - Y1 Q2 les 3 - Navigation labelingCMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
CMD Interaction Design - Y1 Q2 les 3 - Navigation labelingFerry den Dopper
 
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability TestCMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability TestFerry den Dopper
 

En vedette (11)

IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - Labeling
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information Architecture
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - Cardsorting
 
De geur van informatie
De geur van informatieDe geur van informatie
De geur van informatie
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & Errors
 
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability TestCMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test
 
CMD Interaction Design - Y1 Q2 les 1 - Information Architecture
CMD Interaction Design - Y1 Q2 les 1 - Information ArchitectureCMD Interaction Design - Y1 Q2 les 1 - Information Architecture
CMD Interaction Design - Y1 Q2 les 1 - Information Architecture
 
CMD Interaction Design - Y1 Q2 les 2 - Card Sorting
CMD Interaction Design - Y1 Q2 les 2 - Card SortingCMD Interaction Design - Y1 Q2 les 2 - Card Sorting
CMD Interaction Design - Y1 Q2 les 2 - Card Sorting
 
CMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
CMD Interaction Design - Y1 Q2 les 4 - Search & MetadataCMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
CMD Interaction Design - Y1 Q2 les 4 - Search & Metadata
 
CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
CMD Interaction Design - Y1 Q2 les 3 - Navigation labelingCMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling
 
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability TestCMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test
 

Plus de Ferry den Dopper

IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchFerry den Dopper
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignFerry den Dopper
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designFerry den Dopper
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsFerry den Dopper
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenFerry den Dopper
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenFerry den Dopper
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1Ferry den Dopper
 
Interaction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenInteraction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenFerry den Dopper
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassFerry den Dopper
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsFerry den Dopper
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionFerry den Dopper
 
IAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionIAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionFerry den Dopper
 
Interaction Design 1.2: Persona's
Interaction Design 1.2: Persona'sInteraction Design 1.2: Persona's
Interaction Design 1.2: Persona'sFerry den Dopper
 

Plus de Ferry den Dopper (20)

IAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsIAD 5 - les 2 - Apps
IAD 5 - les 2 - Apps
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for Touch
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisited
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form Design
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-off
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patterns
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoeren
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellen
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1
 
Interaction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenInteraction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereiden
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclass
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & Requirements
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich Interaction
 
IAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionIAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich Interaction
 
Interaction Design 1.2: Persona's
Interaction Design 1.2: Persona'sInteraction Design 1.2: Persona's
Interaction Design 1.2: Persona's
 

Interaction Design 3.5: Inline Validation & Smart Defaults