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 wat wel: wat niet: 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

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 Alleen inhoud (low fidelity) 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 Alleen inhoud (low fidelity) 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...

wireframes schieten soms tekort...

wireframes schieten soms tekort...

wireframes schieten soms tekort... Bij AJAX gaan interactie en dataverkeer met de server niet langer gelijk op (asynchroon)

wireframes Er is een alternatief: STATES Bijvoorbeeld de drie fasen van ‘drag and drop’: alle drie dienen te worden gespecificeerd Daarbij gaat het oa. om: Affordances Activering Overgangen Timing

wireframes Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Drie methodes om rijke interactie te documenteren* Voordelen: Helder en beknopt Interactievolgorde wordt duidelijk Veel details Nadelen: Geen context Geen timing Arbeidsintensief Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Drie methodes om rijke interactie te documenteren* 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 Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Drie methodes om rijke interactie te documenteren* 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 Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

wireframes Terug naar STATES 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.

wireframes Terug naar STATES 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

wireframes ‘Wireflow’ of ‘taskframe’

wireframes Tools Visio OmniGraffle InDesign Fireworks Powerpoint (yuk!) Flash Flash Catalyst (medio 2009) Software vergelijking: http://www.uxmatters.com/MT/archives/000161.php

wireframes Bronnen 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: Look & feel emotie kleurgebruik typografie afbeeldingen vorm branding Visuele organisatie perceptie contrast hiërarchie

visueel design Visuele organisatie perceptie

visueel design Visuele organisatie perceptie

visueel design Visuele organisatie contrast

visueel design Visuele organisatie hiërarchie