IAD 4 - les 2+3 - Rich Interaction

Interaction Design 201 Vragen of feedback? @ferrydendopper

Rich Interaction

There is no page


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

http://www.adaptivepath.com/publications/essays/archives/000385.php

http://www.adaptivepath.com/publications/essays/archives/000385.php


Voorbeeld


Voorbeeld


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


Desktop-gedrag

Drag & drop Resizing Menu’s & toolbars (ook contextmenu’s)

Panels (tabs) enz.

THERE IS A WORLD TO EXPLORE 6


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


Directe manipulatie

Affordance: Eigenschappen van een object die duidelijk maken hoe het moet worden gebruikt

Hinting: Aanwijzing geven


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?


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.


Principe 1: maak het direct

Design pattern: ‘In-Page Editing’



Design pattern: ‘Module Configuration’

Invitation to configure

Configuration

Completion



Design pattern: ‘Drag and Drop List’

Default state

Invitation to drag

Dragging

Dropped



Design pattern: ‘Drag and Drop Action’

Default state

Dropped

Completed


Wat gaat hier mis?


Principe 2: hou het licht

Design pattern: ‘Always-Visible Tools’

Visible tool

Invitation

Completed



Design pattern: ‘Hover-Reveal Tools’

Default state

Invitation

Let op de ‘discoverability’


Wat gaat hier mis?

Anti-pattern: ‘Hover and Cover’

Anti-pattern: ‘Mystery Meat’



Pattern: ‘Secondary Menu’

‘Menu’

Design pattern: ‘Secondary Menu’

Default state

Invitation

Menu


Principe 3: blijf op de pagina

Design pattern: ‘Dialog Overlay’

Date Picker Control

Lightbox Effect (NetFlix)


1. ‘Activation’2. ‘Customization inlay (slide)’

3. ‘Customization inlay’


Design pattern: ‘Dialog Inlay’


‘Google Reader list view’

‘List inlay’


Design pattern: ‘List Inlay’



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.



Pattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’

Pattern: ‘Scrolled Paging: Carousel’



Online collectie Hard Rock Café

Design pattern: ‘Zoomable User Interface’


Principe 4: geef een uitnodiging

Design pattern: ‘Call to Action Invitation’


Principe 4: geef een uitnodiging

Design pattern: ‘Hover Invitation’


Principe 5: gebruik overgangen

Design pattern: ‘Brighten and Dim’



Design pattern: ‘Animation’

Dragging module

Zoom-back animation



Design pattern: ‘Spotlight’

Bijvoorbeeld voor het benadrukken van veranderingen op het scherm


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’


Principe 6: reageer onmiddelijk

Met verschillende soorten controls worden de zoekresultaten ‘real-time’ bijgewerkt.

Design pattern: ‘Refining Search’


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.


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)


Even oefenen: Maak hier een RIA van

http://www.kpn.com/mobiel/alle-telefoons.cat


Verder met de module-opdracht

Pas ook rich interaction patterns toe!


Vragen? Feedback?

[email protected]

@ferrydendopper