iad 4 - les 2+3 - rich interaction
DESCRIPTION
TRANSCRIPT
![Page 1: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/1.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Rich Interaction
There is no page
![Page 2: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/2.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Ajax (Asynchronous JavaScript And XML )
‘Ajax engine’ laag tussen gebruiker en server; activiteiten van gebruikers en respons van het systeem worden onafhankelijk.
In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht.
Niet langer wachten op die pagina!
Uit: Jesse James Garrett, http://www.adaptivepath.com/publications/essays/archives/000385.php
![Page 3: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/3.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorbeeld
![Page 4: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/4.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorbeeld
![Page 5: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/5.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Impact
Volledig herladen van pagina’s wordt vervangen door kleine content updates.
Hyperlink en Submit worden vervangen door een scala aan interactieve elementen.
Micro-interactie en micro-updates leiden tot micro-’states’.
Impact voor manier van ontwerpen, bouwen en gebruiken
![Page 6: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/6.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Desktop-gedrag
Drag & drop Resizing Menu’s & toolbars (ook contextmenu’s)
Panels (tabs) enz.
THERE IS A WORLD TO EXPLORE 6
![Page 7: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/7.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vloeiende effecten
Geven informatie over de UI, zodat we:• Begrijpen dat de computer bezig is• Begrijpen waar objecten naartoe gaan of
waar ze vandaan komen• Zien wat de toestand is van een object
THERE IS A WORLD TO EXPLORE 7
![Page 8: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/8.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Directe manipulatie
Affordance: Eigenschappen van een object die duidelijk maken hoe het moet worden gebruikt
Hinting: Aanwijzing geven
![Page 9: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/9.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Visuele feedback bij drag & drop
1. Voor gebruiker overgaat tot handelenWelke objecten zijn manipuleerbaar?
2. Gebruiker is begonnen te slepenWat ben je aan het doen? Waar kan het heen?
3. Gebruiker heeft muisknop losgelatenWat is er veranderd? Is het gelukt?
![Page 10: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/10.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principes voor rijke interactie
1. Maak het direct2. Hou het licht3. Blijf op de pagina4. Geef een uitnodiging5. Gebruik overgangen6. Reageer onmiddellijk
Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.
![Page 11: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/11.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘In-Page Editing’
![Page 12: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/12.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘Module Configuration’
Invitation to configure
Configuration
Completion
![Page 13: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/13.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘Drag and Drop List’
Default state
Invitation to drag
Dragging
Dropped
![Page 14: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/14.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘Drag and Drop Action’
Default state
Dropped
Completed
![Page 15: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/15.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wat gaat hier mis?
![Page 16: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/16.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2: hou het licht
Design pattern: ‘Always-Visible Tools’
Visible tool
Invitation
Completed
![Page 17: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/17.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2: hou het licht
Design pattern: ‘Hover-Reveal Tools’
Default state
Invitation
Let op de ‘discoverability’
![Page 18: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/18.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wat gaat hier mis?
Anti-pattern: ‘Hover and Cover’
Anti-pattern: ‘Mystery Meat’
![Page 19: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/19.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2: hou het licht
Pattern: ‘Secondary Menu’
‘Menu’
Design pattern: ‘Secondary Menu’
Default state
Invitation
Menu
![Page 20: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/20.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
Design pattern: ‘Dialog Overlay’
Date Picker Control
Lightbox Effect (NetFlix)
![Page 21: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/21.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
1. ‘Activation’2. ‘Customization inlay (slide)’
3. ‘Customization inlay’
Principe 3: blijf op de pagina
Design pattern: ‘Dialog Inlay’
![Page 22: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/22.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Google Reader list view’
‘List inlay’
Principe 3: blijf op de pagina
Design pattern: ‘List Inlay’
![Page 23: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/23.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
1. ‘drag and drop’ van 3 foto’s in album
… maar geen feedback over ‘drop candidacy’2. Bevestigingsdialoog
3. Ja, ja, de foto’s zijn toegevoegd
… terwijl de status van het album
ogenschijnlijk niet is veranderd
Twee pop-ups die voorkomen hadden kunnen worden door een goed
ontwerp van de ‘drag and drop’.
Conclusie: onnodige onderbreking van de flow van gebruikers voor het doen van onzinnige mededelingen.
![Page 24: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/24.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
Pattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’
Pattern: ‘Scrolled Paging: Carousel’
![Page 25: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/25.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
Online collectie Hard Rock Café
Design pattern: ‘Zoomable User Interface’
![Page 26: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/26.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 4: geef een uitnodiging
Design pattern: ‘Call to Action Invitation’
![Page 27: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/27.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 4: geef een uitnodiging
Design pattern: ‘Hover Invitation’
![Page 28: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/28.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5: gebruik overgangen
Design pattern: ‘Brighten and Dim’
![Page 29: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/29.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5: gebruik overgangen
Design pattern: ‘Animation’
Dragging module
Zoom-back animation
![Page 30: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/30.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5: gebruik overgangen
Design pattern: ‘Spotlight’
Bijvoorbeeld voor het benadrukken van veranderingen op het scherm
![Page 31: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/31.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 6: reageer onmiddelijk
Invoeren van ‘z’ doet alle namen die beginnen met een ‘z’ verschijnen.
‘Tab’ selecteert onmiddelijk de geselecteerde optie.
De mogelijke opties verschijnen tijdens het typen.
‘Tab’ geeft NIET de eerste mogelijke optie.
Design pattern: ‘Auto Complete’
![Page 32: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/32.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 6: reageer onmiddelijk
Met verschillende soorten controls worden de zoekresultaten ‘real-time’ bijgewerkt.
Design pattern: ‘Refining Search’
![Page 33: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/33.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Samenvattend
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.
![Page 34: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/34.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Designing Web InterfacesBill Scott
Tentamenstof
Patterns:In-Page Editing:
Single Field Inline Edit
Multi-Field Inline Edit
Overlay EditModule
ConfigurationDrag and Drop:
AllesDirect Manipulation:
Toggle SelectionCollected
SelectionContextual Tools
Always Visible Tools
Hover-Reveal Tools
Toggle-Reveal Tools
OverlaysDialog Overlay
InlaysDialog InlayList Inlay
(accordion)Virtual Pages
Inline PagingScrolled Paging
(carousel)
![Page 35: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/35.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Even oefenen: Maak hier een RIA van
http://www.kpn.com/mobiel/alle-telefoons.cat
![Page 36: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/36.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Verder met de module-opdracht
Pas ook rich interaction patterns toe!
![Page 37: IAD 4 - les 2+3 - Rich Interaction](https://reader035.vdocuments.site/reader035/viewer/2022070304/54c7e99a4a795999488b4776/html5/thumbnails/37.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper