SlideShare a Scribd company logo
1 of 37
There is no page





   




   



                         Uit: Jesse James Garrett,
http://www.adaptivepath.com/publications/essays/
                           archives/000385.php
















    THERE IS A WORLD TO EXPLORE   6





    THERE IS A WORLD TO EXPLORE   7
Uit: Bill Scott and Theresa Neil (2009).
Designing Web Interfaces.
Let op de
‘discoverability’
Anti-pattern: ‘Hover and Cover’




Anti-pattern: ‘Mystery Meat’
‘Menu’
Webapplicaties kunnen tegenwoordig, dankzij technologieën als
  Ajax, worden ontworpen met een rijke gebruiksbeleving die
  niet meer onder doet voor de gebruiksbeleving van een
  (desktop) software programma.

Hierdoor kan het interactie ontwerp van web interfaces beter
   worden afgestemd op het mentale model en flow van
   gebruikers: weg met de browser en de pagina-metafoor, lang
   leve het principe van direct manipulation!

Er zijn 6 ontwerpprincipes voor rijke interactie die zorgen voor
   een betere gebruiksbeleving. De succesvolle interactie
   ontwerppatronen volgen één of meer van deze
   ontwerpprincipes.
f.den.dopper@hr.nl

@ferrydendopper

More Related Content

Similar to IAD 4 - les 2+3 - Rich Interaction

Usabilityweb magazine nr 1
Usabilityweb magazine nr 1Usabilityweb magazine nr 1
Usabilityweb magazine nr 1srprs.me
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere uxPaul Immerzeel
 
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich InteractionCMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich InteractionFerry den Dopper
 
Iad2 0910 q4 les 1 ontwerpen met patronen
Iad2 0910 q4 les 1   ontwerpen met patronenIad2 0910 q4 les 1   ontwerpen met patronen
Iad2 0910 q4 les 1 ontwerpen met patronenHans Kemp
 
Week5 Woensdag Website 1
Week5 Woensdag Website 1Week5 Woensdag Website 1
Week5 Woensdag Website 1Joey van Boxel
 
HAN - ReDesign -Introductie The Elements of User Experience Design
HAN - ReDesign -Introductie The Elements of User Experience DesignHAN - ReDesign -Introductie The Elements of User Experience Design
HAN - ReDesign -Introductie The Elements of User Experience DesignLammert Postma
 
Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Rasin Bekkevold
 
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht ExtInfo Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht ExtInfo.nl
 
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
 
Usability Martin van Kranenburg
Usability Martin van KranenburgUsability Martin van Kranenburg
Usability Martin van KranenburgChickelien
 
20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie Bram20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie BramFARO
 
20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie Bram20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie BramFARO
 
0708 Iad2 Q3 Hoorcollege1
0708 Iad2 Q3 Hoorcollege10708 Iad2 Q3 Hoorcollege1
0708 Iad2 Q3 Hoorcollege1Hans Kemp
 
0708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege20708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege2Hans Kemp
 
Application lifecycle management wat betekent dat nou eigenlijk
Application lifecycle management wat betekent dat nou eigenlijkApplication lifecycle management wat betekent dat nou eigenlijk
Application lifecycle management wat betekent dat nou eigenlijkHenk Beekhuis
 
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7srprs.me
 

Similar to IAD 4 - les 2+3 - Rich Interaction (20)

Usabilityweb magazine nr 1
Usabilityweb magazine nr 1Usabilityweb magazine nr 1
Usabilityweb magazine nr 1
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
 
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich InteractionCMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
 
Iad2 0910 q4 les 1 ontwerpen met patronen
Iad2 0910 q4 les 1   ontwerpen met patronenIad2 0910 q4 les 1   ontwerpen met patronen
Iad2 0910 q4 les 1 ontwerpen met patronen
 
Week5 Woensdag Website 1
Week5 Woensdag Website 1Week5 Woensdag Website 1
Week5 Woensdag Website 1
 
HAN - ReDesign -Introductie The Elements of User Experience Design
HAN - ReDesign -Introductie The Elements of User Experience DesignHAN - ReDesign -Introductie The Elements of User Experience Design
HAN - ReDesign -Introductie The Elements of User Experience Design
 
Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017
 
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht ExtInfo Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht Ext
 
UX & Library Services
UX & Library ServicesUX & Library Services
UX & Library Services
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
 
Usability Martin van Kranenburg
Usability Martin van KranenburgUsability Martin van Kranenburg
Usability Martin van Kranenburg
 
Expression Blend
Expression BlendExpression Blend
Expression Blend
 
20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie Bram20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie Bram
 
20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie Bram20081126 Hands On Presentatie Bram
20081126 Hands On Presentatie Bram
 
HTML 5 in een vogelvlucht (Dutch)
HTML 5 in een vogelvlucht (Dutch)HTML 5 in een vogelvlucht (Dutch)
HTML 5 in een vogelvlucht (Dutch)
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
0708 Iad2 Q3 Hoorcollege1
0708 Iad2 Q3 Hoorcollege10708 Iad2 Q3 Hoorcollege1
0708 Iad2 Q3 Hoorcollege1
 
0708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege20708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege2
 
Application lifecycle management wat betekent dat nou eigenlijk
Application lifecycle management wat betekent dat nou eigenlijkApplication lifecycle management wat betekent dat nou eigenlijk
Application lifecycle management wat betekent dat nou eigenlijk
 
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7
 

More from Ferry den Dopper

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsFerry 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 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.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry 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 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry 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
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry 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 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
 
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
 

More from Ferry den Dopper (20)

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart Defaults
 
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 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
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personas
 
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.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
 
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
 
IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - Labeling
 
IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - Metadata
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - Navigation
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
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 informatie
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - Cardsorting
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information Architecture
 
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
 
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
 

IAD 4 - les 2+3 - Rich Interaction

  • 1. There is no page
  • 2.   Uit: Jesse James Garrett, http://www.adaptivepath.com/publications/essays/ archives/000385.php
  • 3.
  • 4.
  • 6.      THERE IS A WORLD TO EXPLORE 6
  • 7. THERE IS A WORLD TO EXPLORE 7
  • 8.
  • 9.
  • 10. Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 18. Anti-pattern: ‘Hover and Cover’ Anti-pattern: ‘Mystery Meat’
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. Webapplicaties kunnen tegenwoordig, dankzij technologieën als Ajax, worden ontworpen met een rijke gebruiksbeleving die niet meer onder doet voor de gebruiksbeleving van een (desktop) software programma. Hierdoor kan het interactie ontwerp van web interfaces beter worden afgestemd op het mentale model en flow van gebruikers: weg met de browser en de pagina-metafoor, lang leve het principe van direct manipulation! Er zijn 6 ontwerpprincipes voor rijke interactie die zorgen voor een betere gebruiksbeleving. De succesvolle interactie ontwerppatronen volgen één of meer van deze ontwerpprincipes.
  • 34.
  • 35.
  • 36.