Interaction design:structuur en gedrag

Waar bevinden we ons in het proces?

Waar bevinden we ons in het proces?

Waar bevinden we ons in het proces?

Flowchart klaar. En nu?

Hoe komen we van hier...

...naar hier?

wireframes?

wireframes...

wireframes!

wireframes

• Verklaring van de inhoud– hierarchie– onderlinge relaties

• Demonstreren van de inhoud– hoe wordt het

gepresenteerd– functionaliteit

• Interactie met de inhoud

• Heeft niets met esthetiek te maken

• Bevat geen grafische elementen

• Communiceert het merk niet

wat wel: wat niet:

wireframes

soorten

• Schetsen– Snel, experimenteel– Snelle feedback

• Alleen inhoud (low fidelity)– Schematisch

– Goed voor het tonen van flows

• High fidelity wireframes– Gedetailleerde wireframes

– Opmerkingen / Voetnoten

– Beschrijft inhoud en gedrag

– Beschrijft functie (voor developers)

– Wordt begrepen zonder uitleg

wireframes

soorten

• Schetsen– Snel, experimenteel

– Snelle feedback

• Alleen inhoud (low fidelity)– Schematisch

– Goed voor het tonen van flows

• High fidelity wireframes– Gedetailleerde wireframes

– Opmerkingen / Voetnoten

– Beschrijft inhoud en gedrag

– Beschrijft functie (voor developers)

– Wordt begrepen zonder uitleg

wireframes

soorten

• Schetsen– Snel, experimenteel

– Snelle feedback

• Alleen inhoud (low fidelity)– Schematisch

– Goed voor het tonen van flows

• High fidelity wireframes– Gedetailleerde wireframes

– Opmerkingen / voetnoten

– Beschrijft inhoud en gedrag

– Beschrijft functie (voor developers)

– Wordt begrepen zonder uitleg

wireframes

wireframes

wireframes

schieten soms tekort...

schieten soms tekort...

wireframes

schieten soms tekort...

wireframes

schieten soms tekort...

wireframes

Bij AJAX gaan interactie endataverkeer met de server niet

langer gelijk op (asynchroon)

Er is een alternatief: STATES

wireframes

Bijvoorbeeld de drie fasen van ‘drag and drop’:

alle drie dienen te worden gespecificeerd

Daarbij gaat het oa. om:

• Affordances

• Activering

• Overgangen

• Timing

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame• Lo-Fi animaties• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame

• Lo-Fi animaties

• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame

• Lo-Fi animaties

• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Voordelen:– Helder en beknopt

– Interactievolgorde wordt duidelijk

– Veel details

Nadelen:– Geen context

– Geen timing

– Arbeidsintensief

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame

• Lo-Fi animaties

• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame

• Lo-Fi animaties

• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Voordelen:– Geen werkend prototype nodig

– Minimale inspanning, goede resultaten

– Wordt gemakkelijk begrepen

– In aanvulling op andere documenten

Nadelen:– Weinig details

– Geen technische documentatie

– Werkt slecht als deliverable

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame

• Lo-Fi animaties

• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Drie methodes om rijke interactie te documenteren*

wireframes

• Frame-by-frame

• Lo-Fi animaties

• Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Voordelen:– Bekende en duidelijke deliverable

– Holistische benadering: alles in één

– Kunnen ook gemakkelijk full-screen veranderingen vastleggen

– Veelal goede verhouding kosten/baten

Nadelen:– Wordt ingewikkeld met veel ‘states’

– Grote informatie-dichtheid in wireframes

– Geen timing

Terug naar STATES

wireframes

Op moderne websites wemelt het van

grote en kleine interactie elementen die

verschillende ´states´ kennen, bijvoorbeeld:

– Een link die verandert van ‘Aanmelden’ naar ‘Aangemeld’, afhankelijk van de login status van de gebruiker

– Een veld voor het invoeren van een afbeeldingstag dat verschijnt na het klikken op een icoon

– etc. etc.

Terug naar STATES

wireframes

De uitdaging is het vastleggen van het verband tussen de

verschillende ‘states’ van deze paginacomponenten en de

interactie, acties van gebruikers

Toevoeging aan wireframes: ‘region’: een dynamische component

die verschillende ‘states’ kent

‘Wireflow’ of ‘taskframe’

wireframes

Tools

wireframes

• Visio• OmniGraffle• InDesign• Fireworks• Powerpoint (yuk!)• Flash• Flash Catalyst (medio 2009)

• Software vergelijking:• http://www.uxm

atters.com/MT/archives/000161.php

Bronnen

wireframes

Bill Scott (2007), Designing with AJAX: Yahoo! Patterns Library, http://sessions.visitmix.com/, (MIX07>Breakout>Designer)

Jeffrey Zeldman (2007), Web 3.0, http://www.alistapart.com/

Dan Saffer (2007), Interaction Design, Adaptive Path’s UX Intensive Workshop (Amsterdam, juni 2007)

Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State, http://www.uxmatters.com/

visueel design

We kunnen twee delen onderscheiden:

Visuele organisatie

• perceptie• contrast• hiërarchie

Look & feel

• emotie• kleurgebruik• typografie• afbeeldingen• vorm• branding

visueel design

Visuele organisatie

perceptie

visueel design

Visuele organisatie

perceptie

visueel design

Visuele organisatie

contrast

visueel design

Visuele organisatie

hiërarchie