Ontwerpen van interactieve producten

ONTWERPEN VAN INTERACTIEVE PRODUCTEN
WORKSHOP INTERACTIEF PROTOTYPE BOUWEN
F. van Slooten
WORKSHOP INTERACTIEF PROTOTYPE BOUWEN
2 dagen:
dinsdag 23 september
Ochtend: OH 113
Middag: HT 900
 Ontwerp
 Keuze tool/techniek
dinsdag 30 september
hele dag OH 111
 Maken layout
 Programmeren interactie
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
2
DOEL WORKSHOP
 Introductie van software tools die gebruikt kunnen worden voor het
maken van een GUI / interactieve product simulatie
 Hulp bij plan van aanpak en selecteren van geschikte tools voor het
bouwen van de simulatie
 Kennismaking gebruik HTML
 Ondersteuning bij het bouwen
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
3
ONTWERP: PLAN VAN AANPAK
Denk na over werkwijze en geschiktheid tool







Wat moet er getest worden?
Wat moet gedemonstreerd worden? Aan wie?
Welke taken worden uitgevoerd
Dynamische vs statische test
Niveau van realisme
Gewenste interactie & animatie
Grafische presentatie
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
4
ONTWERP: LAYOUT
Ook van
prototype/demo
maak je een
ontwerp!
 Schetsen
 Opzet voor layout
 Flowchart, paper prototype
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
5
KIES EEN TOOL





Axure
Basis editor
Adobe Dreamweaver
Adobe Muse
Adobe Flash
HTML
Browser, tablet, telefoon
Andere tools (niet ondersteund):
Balsamiq Mockups, Mockingbird, InVision,
Justinmind, Solidify, SketchFlow
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
6
AXURE
axure.com
 Flexibel, geschikt voor prototypen en bouwen
apps en websites
Licentie beschikbaar op
aanvraag via docent
 Kan complexe interacties aan
Trial licentie 30 dagen
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
7
AXURE
axure.com
Licentie beschikbaar op
aanvraag via docent
 Eenvoudig en snel te leren
 Uitvoer HTML:
 Geschikt voor plaatsen op website
 Verder uitwerken (buiten Axure om) mogelijk
axure.com/learn
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
8
AXURE
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
9
HTML
Adobe CC bundle student-licentie
bij Surfspot.nl €132
Tools:
 ‘Met de hand’: editor + browser
 ‘Grafisch’: Adobe Muse
 Beide: Adobe Dreamweaver
Voor/nadelen:
 Huidige standaard voor web en apps
 Leerdoel voor Website Design (2e kwartiel).
 Javascript+JQuery geeft goede animatiemogelijkheden.
 Mogelijkheid door ontwikkelen naar doel-applicatie
▼ Tijdintensief om interface op te zetten/aan te passen.
▼ Zelf code schrijven (of zoeken).
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
10
HTML: EDITORS
 Notepad++: goede editor met syntax-highlighting, HTML preview (via
plugin)
 Brackets.io: Editor van Adobe met ingebouwde live preview
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
11
FLASH
Adobe Flash Professional CC
Onderdeel Creative Cloud Bundle
Voor/nadelen
 Veel vrijheid in animaties
 Library met basis interactie en elementen
 Veel mogelijk met basis code
 Dynamisch bewerkbaar prototype
▼ Is verouderd product
▼ Tijdlijn gebaseerd: daar omheen werken is lastig
▼ Leercurve programmeren Action Script
▼ Animatie-focus sluit niet zo aan bij product applicaties
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
12
HTML LAYOUT: DIV ELEMENTEN
DENK IN BLOKKEN
<div>
<div>
<div> </div>
</div>
<div>onder
</div>
<div><!–
-->
<div> </div>
</div>
</div>
</div>
<div><!– onder -->
</div>
</div>
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
13
HTML LAYOUT: DIV ELEMENTEN
DENK IN BLOKKEN
Stijl:
HTML:
width: 300px; /* vaste breedte */
margin: 10px auto; /* centreren */
height: 300px;
width: 100%;
<div>
<div>
</div>
<div><!– onder -->
</div>
</div>
height: 300px;
learnlayout.com
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
14
HTML: STATISCHE INTERFACE
 Na layout: blokken vullen met elementen
 Elementen positioneren
 Elementen afwerken (kleur, stijl)
Stijl:
button {
border-radius: 5px;
/* ronde hoeken */
background-color: grey;
/* grijze kleur */
border: 2px solid grey;
/* dunne grijze rand */
}
HTML:

<ul>
<li><button>Knop</button></li>
<li><button>Knop</button></li>
<li><button>Knop</button></li>
<li><button>Knop</button></li>
</ul>
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
15
HTML: PROGRAMMEREN INTERACTIE
JAVASCRIPT/JQUERY
<div class="knoppen">
<button id="b1"></button>
</div>
Programma:
event
<div id="hoofdtekst">Welkom
bij IO bank, ...</div>
$('.knoppen button').click(function() {
id=$(this).attr('id');
$('#hoofdtekst').html("Je klikte op knop "+id);
});
Selector
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
16
AAN DE SLAG
 Denk na over werkwijze en geschiktheid tool
 Wat moet er getest worden?
 Wat moet gedemonstreerd worden? Aan wie?
 Welke taken worden uitgevoerd
 Dynamische vs statische test
 Niveau van realisme
 Gewenste interactie & animatie
 Grafische presentatie
 Volg tutorial op vanslooten.com/ovip
 Bouw eigen prototype
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
17
DEMO’S EN HANDLEIDINGEN:
VANSLOOTEN.COM/OVIP

Download Report