Upload
oni
View
52
Download
0
Embed Size (px)
DESCRIPTION
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!. Verklaring van de inhoud - PowerPoint PPT Presentation
Citation preview
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
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