Download - Presentatie Prototyping
![Page 1: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/1.jpg)
PROTOTYPING & INTERACTION DESIGN
van idee naar testbaar concept
![Page 2: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/2.jpg)
LUC MOERSEven voorstellen…
![Page 3: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/3.jpg)
WAT GAAN WE DOEN• Introductie User Centered Design
• Een aantal UCD principes om je prototype vanuit op te bouwen
• Introductie prototyping
• Onderdelen in Axure
• Prototype maken met Axure
• Presenteer je prototype
• Eventueel doornemen hoe je user testing kan doen
![Page 4: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/4.jpg)
INTERACTION DESIGNWat is het eigenlijk?
![Page 5: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/5.jpg)
INTERACTION DESIGNBedenken en ontwerpen van de gebruikerservaring van
interactieve producten
![Page 6: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/6.jpg)
![Page 7: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/7.jpg)
USER CENTERED DESIGNEen korte introductie om jezelf op weg te helpen
![Page 8: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/8.jpg)
![Page 9: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/9.jpg)
UITGANGSPUNTENHier hou je rekening mee met UCD
![Page 10: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/10.jpg)
BETREK JE DOELGROEPken hun ervaringen door middel van interviews en tests
![Page 11: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/11.jpg)
STEL DOELEN OPvoor jezelf en je doelgroep door middel van use cases en
scenario's
![Page 12: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/12.jpg)
HOU REKENING MET DE OMGEVING
waar en wanneer gebruikt je doelgroep het product?
![Page 13: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/13.jpg)
DENK VANUIT PROCESSENHoe kan ik een taak logisch en eenvoudig voltooien
![Page 14: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/14.jpg)
ZINVOLLE INFORMATIEWelke informatie verwacht de eindgebruiker en wat heb ik
nodig (maak een mindmap)
![Page 15: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/15.jpg)
WEES EMPATISCHWat wil je dat mensen voelen als ze je product gebruiken?
![Page 16: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/16.jpg)
MAAK EEN PROTOTYPETest of het product echt werkt
![Page 17: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/17.jpg)
PROTOTYPINGJe product voor het eerst gebruiken
![Page 18: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/18.jpg)
WELKE MANIEREN ZIJN ER
![Page 19: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/19.jpg)
WELKE MANIEREN ZIJN ER
• Paper prototyping
• Prototyping software op computer
• Frameworks (zoals Twitter Bootstrap)
![Page 20: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/20.jpg)
WAT HEB JE NODIG?• potlood en papier
• een computer
• Mindmapping tool (handig)
• Word
• Axure 7.0
• Axshare account
![Page 22: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/22.jpg)
WAT IS AXURE?• Rapid Prototyping tool sinds 2006
• Geschikt voor Mac en PC
• Voor mobile apps, web applicaties, software
• Tutorials en met bibliotheken
• Toegankelijk voor beginners, krachtig voor gevorderden
• Bekijk en test je prototype in je browser of deel het op AxShare
![Page 23: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/23.jpg)
HOE WERKT AXUREGids met belangrijke features (Start Axure AUB op)
![Page 24: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/24.jpg)
SITEMAPDe onderdelen van Axure
1
![Page 25: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/25.jpg)
SITEMAPDe verschillende pagina’s en processen in je applicatie of
site uitgetekend.
![Page 26: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/26.jpg)
FLOWCHARTSMaak diagrammen om structuur te verduidelijken
![Page 27: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/27.jpg)
WIDGETSDe onderdelen van Axure
2
![Page 28: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/28.jpg)
WIDGETSStandaard (web) elementen
om een pagina op te bouwen. Selecteer bibliotheken voor
widget sets.
![Page 29: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/29.jpg)
DE ONDERDELEN VAN AXUREMasters
3
![Page 30: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/30.jpg)
MASTERSMaak een functionaliteit wat je
meerdere keren kunt gebruiken en in 1 keer op alle
pagina’s kunt veranderen!
![Page 31: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/31.jpg)
DE ONDERDELEN VAN AXUREPage en widget interactions
4
4
![Page 32: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/32.jpg)
INTERACTIONSMaak je prototype interactief, bouw geavanceerd gedrag zelfs met de mogelijkheid om variabelen te gebruiken.
![Page 33: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/33.jpg)
DE ONDERDELEN VAN AXUREDynamic panels en widget manager
5
![Page 34: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/34.jpg)
DYNAMIC PANELS
Paneel dat bestaat uit 1 of meerdere ‘lagen’ die op
interactions kunnen reageren en zichtbaar of onzichtbaar
zijn.
![Page 35: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/35.jpg)
DE ONDERDELEN VAN AXUREAdaptive views voor meerdere schermformaten
6
![Page 36: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/36.jpg)
ADAPTIVE VIEWS
Je prototype op verschillende schermformaten, voor de
gevorderde gebruiker.
![Page 37: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/37.jpg)
DE ONDERDELEN VAN AXUREStyling elementen kleur en zelfs webfonts
7
![Page 38: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/38.jpg)
STYLESHEETKleed je prototype aan met
een look and feel.
![Page 39: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/39.jpg)
DE ONDERDELEN VAN AXUREDeel je prototype
![Page 40: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/40.jpg)
DEEL JE PROTOTYPELokaal als HTML genereren en openen in je browser
![Page 42: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/42.jpg)
EN NU BOUWENWerk een of meerdere schermen uit met interacties.
Presenteer je demo.
![Page 43: Presentatie Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051609/54639afeaf795983338b45ac/html5/thumbnails/43.jpg)
PRESENTATIESWie durft?