prototyping for interaction think to build, build to think
Vandaag: ★ Hoe ging het? ★ Over digital prototyping ★ Fidelity ★ Tools voor digital prototyping ★ Iets over game mechanics ★ Opdracht 2A ★ Opdracht 2B ★ Huiswerk
HET SCHEMA
Vragen n.a.v. opdracht 1? Criteria: ★ Huiswerk week 1 af (INDIVIDUEEL) ★ Filmpje (met geluid en tekst) van usabilitytest van max. 2 minuten ★ Minimaal 3 interactie elementen verbeteren ★ Het sociale aspect heeft prioriteit ★ Toelichting op je redesign: - leg uit wat je hebt aangepast en waarom - welke patterns heb je gebruikt en waarom - leg uit hoe je het sociale aspect hebt benadrukt DEADLINE: vrijdag 30 november 18:00
Vragen n.a.v. opdracht 1? Frequently made mistakes: ★ Filmpje met slecht geluid en/of geen tekst ★ Geen 3 interactie elementen verbeterd ★ Het sociale aspect geen prioriteit gegeven ★ Geen of magere toelichting op je redesign: - wat je hebt aangepast en waarom - welke patterns heb je gebruikt en waarom - leg uit hoe je het sociale aspect hebt benadrukt TIP: Gebruik geen jargon tijdens testen (prototype, concept, lay out, scenario), maar mensentaal.
Digital prototyping ★ Iets later in het proces ★ Vaker conventionele oplossingen ★ Ideaal voor websites ★ Makkelijk te delen (en soms is code productieklaar) ★ Goed te testen (en schaalbaar) ★ Gedetailleerder dan Paper Prototyping ★ Maar wij gaan vandaag een stapje verder
High en Low Fidelity in functioneel design
loading...
statisch & lineair
dynamisch & interactief
High en Low Fidelity
avarage income
visueel design
Canadian cities
schets
gestileerd
High en Low Fidelity inhoudelijk
placeholder
afbeeldingen
High en Low Fidelity inhoudelijk
http://placehold.it/350x200
placeholder
http://placekitten.com/g/350/200
afbeeldingen
High en Low Fidelity inhoudelijk
http://placehold.it/350x200
placeholder
http://lorempixel.com/350/200/
afbeeldingen
High en Low Fidelity inhoudelijk
Perspiciatis unde omnis Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum
High fidelity prototypes and how to handle real content These prototypes are appropriate when high visual and functional fidelity is required; for example, when introducing a new technology (say, when moving from a mainframe application —yes, they still exist!—to a Web-based solution. Most of these prototypes cannot be converted to usable code, but they serve as an excellent reference for developers. These are also useful for conducting usability testing and training users.
echte tekst
High en Low Fidelity inhoudelijk High fidelity prototypes and how to handle real content These prototypes are appropriate when high visual and functional fidelity is required; for example, when introducing a new technology (say, when moving from a mainframe application —yes, they still exist!—to a Web-based solution. Most of these prototypes cannot be converted to usable code, but they serve as an excellent reference for developers. These are also useful for conducting usability testing and training users.
slipsum.com
echte tekst
Tools
Game mechanics wtf? Game mechanics are rule based systems / simulations that facilitate and encourage a user to explore and learn the properties of their possibility space through the use of feedback mechanisms.
wtf? http://gamification.org/
Opdracht oksluis
Geschut
Entrepotd
k Laagte Kadij
welkom in Natura Artis Magistra
swerf
Entrepotdok
aanmeerplaats
Nijlpaardenbrug
Entrepotdok aanmeerplaats
E n t r e p o t d o k
III
I
31
59
44
Plantag e Dokl aan
Digital
13
15
Plantage Kerklaan
46
14
43
42 30 29
16
47 1
12 41
2
48
48
V 17
32 28
7
47
33 39
18
11
40
ingang
27 38
10
Serious Game
5
20
3
39 49
19
VI 37
26
6
34
21 23 25
4
50
22
II
24
35
36
500 meter
metro Waterlooplein
ingang
ingang
Artis Bibliotheek
Plantage Middenlaan
Plantage Middenlaan
Plantage Middenlaan tram 9 - 14
20meter
10
0
20
High Fidelity
45
9
8
Tablet
31
Informatiehuisje
geldautomaat
horeca
kassa
rolstoelen
werk in uitvoering
1
toiletten
kinderkarretjes
De Twee Cheetahs
winkel
kinderspeelplaats
Flamingoserre
kluisjes
leslokaal (de Uithoek)
Savannekiosk
uitgang
leslokaal (de Kuil)
Vlinderrestaurant
parkeren
leslokaal (de Stolp)
Planetariumcafé
parkeerautomaat
leslokaal (de Ark)
Poffertjeshuis
fietsenstalling
2 3 I
4 5
II
6 III
VI
7 IV V
8 9 10 11 12
Planetarium Kamelenveld Kinderboerderij Weidevogelvolière Broedmachinehuis Prieeltje bij de flamingo’s Apenrots Vogelhuis vanaf juli heropend Apenhuis vanaf juli heropend Gibboneiland Steenbokkenrots Lemurenland
Reptielenhuis Kerbertterras: leeuwen Roofdierengalerij 16 Hollandse Tuin 17 beverratten 18 Kleine-Zoogdierenhuis 19 wallabies 20 Muziektent bij de Pampa 21 Pampa: grote miereneters, capibara’s, lama’s, mara’s, nandoes en Zuid-Amerikaanse tapirs 22 manenwolven 13
14 15
maraboes helmkasuarissen prairiehondjes 26 kleine panda’s 27 wasberen 28 wilde honden 29 Uilenruïne 30 olifanten 31 Savanne: giraffen, gnoes, zebra’s, springbokken, struisvogels en spiesbokken 32 anoa’s (tijdelijk) 23
24 25
anoa’s en kuifmakaken Fazanterie Aquarium 36 Zoölogisch Museum/ Heimans Diorama 37 Het Paradijs 38 Wolvenbos 39 chimpansees 40 Heimans-eik 41 Gierenvolière 42 Collegezaal* 43 wisenten 33
34 35
algazellen Insectarium sitatoenga’s 47 Gorillahuis 48 Maleisische tap 49 guanaco’s, axis 50 pinguïns 51 Artis Ateliers (S 52 EAZA-kantoor Nederlandse V Dierentuinen (S 53 Berenrots
44 45
46
Opdracht 2a ★ Maak een nieuwe blogpost aan ★ Noteer je bevindingen op je blog: ★ Onderzoek routes en informatie binnen Artis (wat is er te doen en waar?) ★ Onderzoek gamification (begin bv bij gamification.org) ★ Onderzoek tools bv bij adaptivepath.com/ ideas/rapid-prototyping-tools ★ Bepaal de doelgroep
Opdracht 2b ★ Bedenk hoe je de plattegrond, de routes en de informatie kunt “gamifien” ★ maak een paperprototype van je mapgame ★ Test je prototype op een medestudent
Opdracht 2 huiswerk: ★ Werk individueel ★ Lees hoofdstuk 3 t/m 5 van Prototyping en maak een samenvatting ★ Zet de schetsen en foto’s van de mapgame op je blog en licht toe welke game mechanics je gaat gebruiken: WAAROM deze? ★ Werk de basis verder digitaal uit met een tool naar keuze. DEADLINE: vrijdag 7 december 18:00
