iad 4 - les 2+3 - rich interaction
DESCRIPTION
TRANSCRIPT
Interaction Design 201 Vragen of feedback? @ferrydendopper
Rich Interaction
There is no page
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorbeeld
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorbeeld
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
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
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
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
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?
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.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘In-Page Editing’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘Module Configuration’
Invitation to configure
Configuration
Completion
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1: maak het direct
Design pattern: ‘Drag and Drop Action’
Default state
Dropped
Completed
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wat gaat hier mis?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2: hou het licht
Design pattern: ‘Always-Visible Tools’
Visible tool
Invitation
Completed
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2: hou het licht
Design pattern: ‘Hover-Reveal Tools’
Default state
Invitation
Let op de ‘discoverability’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wat gaat hier mis?
Anti-pattern: ‘Hover and Cover’
Anti-pattern: ‘Mystery Meat’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2: hou het licht
Pattern: ‘Secondary Menu’
‘Menu’
Design pattern: ‘Secondary Menu’
Default state
Invitation
Menu
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
Design pattern: ‘Dialog Overlay’
Date Picker Control
Lightbox Effect (NetFlix)
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’
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Google Reader list view’
‘List inlay’
Principe 3: blijf op de pagina
Design pattern: ‘List Inlay’
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.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
Pattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’
Pattern: ‘Scrolled Paging: Carousel’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3: blijf op de pagina
Online collectie Hard Rock Café
Design pattern: ‘Zoomable User Interface’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 4: geef een uitnodiging
Design pattern: ‘Call to Action Invitation’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 4: geef een uitnodiging
Design pattern: ‘Hover Invitation’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5: gebruik overgangen
Design pattern: ‘Brighten and Dim’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5: gebruik overgangen
Design pattern: ‘Animation’
Dragging module
Zoom-back animation
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5: gebruik overgangen
Design pattern: ‘Spotlight’
Bijvoorbeeld voor het benadrukken van veranderingen op het scherm
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’
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’
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.
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)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Even oefenen: Maak hier een RIA van
http://www.kpn.com/mobiel/alle-telefoons.cat
Interaction Design 201 Vragen of feedback? @ferrydendopper
Verder met de module-opdracht
Pas ook rich interaction patterns toe!
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper