iad2 0809 q4 hoorcollege 1
DESCRIPTION
TRANSCRIPT
![Page 1: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/1.jpg)
Interaction design patterns na Tidwell
Het einde van de paginametafoor
![Page 2: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/2.jpg)
Bronnen
Cooper, About Face 3, hoofdstuk 19Scott & Neil, Designing Web Interfaces, complete boekTim O’Reilly, What Is Web 2.0 http
://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
Jesse James Garrett, Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385.php
Bill Scott, O’Reilly Webcast: Designing Web Interfaces http://www.youtube.com/watch?v=LW4MwvgW_ww&eurl=http://looksgoodworkswell.blogspot.com/&feature=player_embedded
Kijk ook eens op: http://www.looksgoodworkswell.com/
![Page 3: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/3.jpg)
De zeven principes van Web 2.0 ‘The web as a platform’‘Harnessing collective intelligence’‘Data is the next Intel inside’‘End of the software release cycle’‘Lightweight programming
models’‘Software above the level of a
single device’‘A rich user experience’
Uit: Tim O’Reilly, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
![Page 4: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/4.jpg)
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 6: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/6.jpg)
Direct Manipulation
Direct manipulation (Ben Shneiderman, 1974)
1. Visuele representatie van de te manipuleren data of objecten
2. Fysieke acties in plaats van tekst intypen om objecten te manipuleren
3. Directe visuele terugkoppeling van de actie
![Page 7: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/7.jpg)
Knoppen
Muis en keyboardLeft mouse buttonRight mouse buttonMiddle mouse buttonScroll wheelMeta-keys
![Page 8: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/8.jpg)
Muisacties
PointClickRight-clickClick and dragDouble-clickChord-clickDouble-drag
![Page 9: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/9.jpg)
‘Pliancy’ en ‘hinting’
‘Pliancy’: manipuleerbaarheid
‘Hinting’: het geven van een aanwijzing
‘Affordance’: de eigenschappen van een object die duidelijk maken hoe het moet worden gebruikt
Cursor hinting
Static object hinting
![Page 10: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/10.jpg)
Selecteren
Discrete selectieDiscrete selection
Aaneengesloten selectieContiguous selection
![Page 11: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/11.jpg)
Voorbeeld: ‘drag and drop’
Het ‘drag and drop’ idioom is een al heel lang toegepast pattern dat goed het ‘direct manipulation’ principe illustreert.
![Page 12: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/12.jpg)
Visuele feedback bij ‘drag and drop’
1. Voor gebruiker overgaat tot handelen.Welke 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 13: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/13.jpg)
Principes voor rijke interactie
Maak het directMake It Direct
Hou het lichtKeep It Lightweight
Blijf op de paginaStay on the Page
Geef een uitnodigingProvide an Invitation
Gebruik overgangenUse Transitions
Reageer onmiddelijkReact Immediately
Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.
![Page 14: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/14.jpg)
Principe: maak het direct
Pattern: ‘In-Page Editing’
![Page 15: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/15.jpg)
Principe: maak het direct
Pattern: ‘Module Configuration’‘Non-configuration state’
‘Invitation to configure’
‘Configuration’
‘Completion’
![Page 16: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/16.jpg)
Principe: maak het direct
Pattern: ‘Drag and Drop List’
‘Normal display state’
‘Invitation to drag’
‘Dragging’
‘Dropped’
![Page 17: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/17.jpg)
Principe: maak het direct
Pattern: ‘Drag and Drop Action’
1. ‘Normal display state’
2. ‘Invitation to drag’
3. ‘Dropped’
4. ‘Completed’
![Page 18: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/18.jpg)
Principe: maak het direct
Antipattern: ‘Drag and Drop Action’
![Page 19: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/19.jpg)
Principe: hou het licht
Pattern: ‘Always-Visible Tools’
‘Visible tool’
‘Invitation’
‘Completion’
![Page 20: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/20.jpg)
Principe: hou het licht
Pattern: ‘Hover-Reveal Tools’
‘Normal state’
‘Invitation’
![Page 21: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/21.jpg)
Principe: hou het licht
Anti-pattern: ‘Hover and Cover’
Anti-pattern: ‘Mystery Meat’
![Page 22: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/22.jpg)
Pattern: ‘Secondary Menu’
Principe: hou het licht
‘Normal view of route’‘Invitation’
‘Menu’
![Page 23: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/23.jpg)
Pattern: ‘Dialog Overlay’
Principe: blijf op de pagina
Orbitz: date picker control
Netflix: Lightbox Effect
![Page 24: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/24.jpg)
Principe: blijf op de pagina
Anti-pattern: ‘Idiot Boxes’
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 25: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/25.jpg)
1. ‘Activation’2. ‘Customization inlay (slide)’
3. ‘Customization inlay’
Principe: blijf op de pagina
Pattern: ‘Dialog Inlay’
![Page 26: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/26.jpg)
‘Google Reader list view’
‘List inlay’
Principe: blijf op de pagina
Pattern: ‘List Inlay’
![Page 27: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/27.jpg)
Principe: blijf op de pagina
Pattern: ‘Inline Paging’
Pattern: ‘Scrolled Paging: Carousel’
Pattern: ‘Virtual Panning’
![Page 28: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/28.jpg)
Principe: blijf op de pagina
Pattern: ‘Zoomable User Interface’
Online collectie Hard Rock Café
![Page 29: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/29.jpg)
Principe: geef een uitnodiging
Pattern: ‘Call to Action Invitation’
![Page 30: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/30.jpg)
Principe: geef een uitnodiging
Pattern: ‘Hover Invitation’
![Page 31: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/31.jpg)
Principe: gebruik overgangen
Pattern: ‘Brighten and Dim’
![Page 32: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/32.jpg)
Principe: gebruik overgangen
Pattern: ‘Animation’
‘Dragging module’
‘Zoom-back animation’
![Page 33: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/33.jpg)
Principe: gebruik overgangen
Pattern: ‘Spotlight’
Bijvoorbeeld voor het benadrukken van
veranderingen
(Backpackit)
![Page 34: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/34.jpg)
Principe: reageer onmiddelijk
Pattern: ‘Auto Complete’
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.
![Page 35: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/35.jpg)
Principe: reageer onmiddelijk
Pattern: ‘Refining Search’
Met verschillende soorten controls worden de zoekresultaten ‘real-time’ bijgewerkt.
![Page 36: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/36.jpg)
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 zes ontwerpprincipes voor rijke interactie die zorgen voor een betere gebruiksbeleving. De succesvolle interactie ontwerppatronen volgen één of meer van deze ontwerpprincipes.
![Page 37: Iad2 0809 Q4 Hoorcollege 1](https://reader036.vdocuments.us/reader036/viewer/2022081414/54879a76b4af9f5f388b5ea4/html5/thumbnails/37.jpg)
Bedankt voor jullie aandacht
[email protected]://vakgroep.cmd.hro.nl/iadhttp://project.cmi.hro.nl/2008_2009/rewind/platform/