Transcript
Interaction design patterns na Tidwell
Het einde van de paginametafoor
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/
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
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
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
Knoppen
Muis en keyboardLeft mouse buttonRight mouse buttonMiddle mouse buttonScroll wheelMeta-keys
Muisacties
PointClickRight-clickClick and dragDouble-clickChord-clickDouble-drag
‘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
Selecteren
Discrete selectieDiscrete selection
Aaneengesloten selectieContiguous selection
Voorbeeld: ‘drag and drop’
Het ‘drag and drop’ idioom is een al heel lang toegepast pattern dat goed het ‘direct manipulation’ principe illustreert.
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?
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.
Principe: maak het direct
Pattern: ‘In-Page Editing’
Principe: maak het direct
Pattern: ‘Module Configuration’‘Non-configuration state’
‘Invitation to configure’
‘Configuration’
‘Completion’
Principe: maak het direct
Pattern: ‘Drag and Drop List’
‘Normal display state’
‘Invitation to drag’
‘Dragging’
‘Dropped’
Principe: maak het direct
Pattern: ‘Drag and Drop Action’
1. ‘Normal display state’
2. ‘Invitation to drag’
3. ‘Dropped’
4. ‘Completed’
Principe: maak het direct
Antipattern: ‘Drag and Drop Action’
Principe: hou het licht
Pattern: ‘Always-Visible Tools’
‘Visible tool’
‘Invitation’
‘Completion’
Principe: hou het licht
Pattern: ‘Hover-Reveal Tools’
‘Normal state’
‘Invitation’
Principe: hou het licht
Anti-pattern: ‘Hover and Cover’
Anti-pattern: ‘Mystery Meat’
Pattern: ‘Secondary Menu’
Principe: hou het licht
‘Normal view of route’‘Invitation’
‘Menu’
Pattern: ‘Dialog Overlay’
Principe: blijf op de pagina
Orbitz: date picker control
Netflix: Lightbox Effect
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.
1. ‘Activation’2. ‘Customization inlay (slide)’
3. ‘Customization inlay’
Principe: blijf op de pagina
Pattern: ‘Dialog Inlay’
‘Google Reader list view’
‘List inlay’
Principe: blijf op de pagina
Pattern: ‘List Inlay’
Principe: blijf op de pagina
Pattern: ‘Inline Paging’
Pattern: ‘Scrolled Paging: Carousel’
Pattern: ‘Virtual Panning’
Principe: blijf op de pagina
Pattern: ‘Zoomable User Interface’
Online collectie Hard Rock Café
Principe: geef een uitnodiging
Pattern: ‘Call to Action Invitation’
Principe: geef een uitnodiging
Pattern: ‘Hover Invitation’
Principe: gebruik overgangen
Pattern: ‘Brighten and Dim’
Principe: gebruik overgangen
Pattern: ‘Animation’
‘Dragging module’
‘Zoom-back animation’
Principe: gebruik overgangen
Pattern: ‘Spotlight’
Bijvoorbeeld voor het benadrukken van
veranderingen
(Backpackit)
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.
Principe: reageer onmiddelijk
Pattern: ‘Refining Search’
Met verschillende soorten controls worden de zoekresultaten ‘real-time’ bijgewerkt.
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.
Bedankt voor jullie aandacht
j.a.m.kemp@hro.nlhttp://vakgroep.cmd.hro.nl/iadhttp://project.cmi.hro.nl/2008_2009/rewind/platform/
top related