Download de presentatie
De presentatie wordt gedownload. Even geduld aub
GepubliceerdKaren Lambrechts Laatst gewijzigd meer dan 10 jaar geleden
1
Interaction design: structuur en gedrag
2
Waar bevinden we ons in het proces?
3
Waar bevinden we ons in het proces?
4
Waar bevinden we ons in het proces?
5
Flowchart klaar. En nu?
6
Hoe komen we van hier...
7
...naar hier?
8
wireframes?
9
wireframes...
10
wireframes!
11
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
12
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
13
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
14
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
15
wireframes
16
wireframes
17
wireframes schieten soms tekort...
18
wireframes schieten soms tekort...
19
wireframes schieten soms tekort...
20
wireframes schieten soms tekort... Bij AJAX gaan interactie en
dataverkeer met de server niet langer gelijk op (asynchroon)
21
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
22
wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path
23
wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path
24
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
25
wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path
26
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
27
wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path
28
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
29
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.
30
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
31
wireframes ‘Wireflow’ of ‘taskframe’
32
wireframes Tools Visio OmniGraffle InDesign Fireworks
Powerpoint (yuk!) Flash Flash Catalyst (medio 2009) Software vergelijking:
33
wireframes Bronnen Bill Scott (2007), Designing with AJAX: Yahoo! Patterns Library, (MIX07>Breakout>Designer) Jeffrey Zeldman (2007), Web 3.0, 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,
34
visueel design We kunnen twee delen onderscheiden: Look & feel emotie
kleurgebruik typografie afbeeldingen vorm branding Visuele organisatie perceptie contrast hiërarchie
35
visueel design Visuele organisatie perceptie
36
visueel design Visuele organisatie perceptie
37
visueel design Visuele organisatie contrast
38
visueel design Visuele organisatie hiërarchie
Verwante presentaties
© 2024 SlidePlayer.nl Inc.
All rights reserved.