Presentatie van Luc Moers tijdens de masterclass Prototyping van start-up competitie The Challenge.

1. PROTOTYPING &
INTERACTION DESIGN
van idee naar testbaar concept

2. LUC MOERS
Even voorstellen…

3. 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

4. INTERACTION DESIGN
Wat is het eigenlijk?

5. INTERACTION DESIGN
Bedenken en ontwerpen van de gebruikerservaring van
interactieve producten

7. USER CENTERED DESIGN
Een korte introductie om jezelf op weg te helpen

9. UITGANGSPUNTEN
Hier hou je rekening mee met UCD

10. BETREK JE DOELGROEP
ken hun ervaringen door middel van interviews en tests

11. STEL DOELEN OP
voor jezelf en je doelgroep door middel van use cases en
scenario's

12. HOU REKENING MET DE
OMGEVING
waar en wanneer gebruikt je doelgroep het product?

13. DENK VANUIT PROCESSEN
Hoe kan ik een taak logisch en eenvoudig voltooien

14. ZINVOLLE INFORMATIE
Welke informatie verwacht de eindgebruiker en wat heb ik
nodig (maak een mindmap)

15. WEES EMPATISCH
Wat wil je dat mensen voelen als ze je product gebruiken?

16. MAAK EEN PROTOTYPE
Test of het product echt werkt

17. PROTOTYPING
Je product voor het eerst gebruiken

18. WELKE MANIEREN ZIJN ER

19. WELKE MANIEREN ZIJN ER
•
Paper prototyping
•
Prototyping software op computer
•
Frameworks (zoals Twitter Bootstrap)

20. WAT HEB JE NODIG?
•
potlood en papier
•
een computer
•
Mindmapping tool (handig)
•
Word
•
Axure 7.0
•
Axshare account

21. AXURE PRO
Prototyping tool voor Mac en Windows te downloaden
op www.axure.com

22. 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

23. HOE WERKT AXURE
Gids met belangrijke features (Start Axure AUB op)

24. 1
SITEMAP
De onderdelen van Axure

25. SITEMAP
De verschillende pagina’s en
processen in je applicatie of
site uitgetekend.

26. FLOWCHARTS
Maak diagrammen om structuur te verduidelijken

27. 2
WIDGETS
De onderdelen van Axure

28. WIDGETS
Standaard (web) elementen
om een pagina op te bouwen.
Selecteer bibliotheken voor
widget sets.

29. 3
DE ONDERDELEN VAN AXURE
Masters

30. MASTERS
Maak een functionaliteit wat je
meerdere keren kunt
gebruiken en in 1 keer op alle
pagina’s kunt veranderen!

31. 4
4
DE ONDERDELEN VAN AXURE
Page en widget interactions

32. INTERACTIONS
Maak je prototype interactief, bouw geavanceerd gedrag
zelfs met de mogelijkheid om variabelen te gebruiken.

33. 5
DE ONDERDELEN VAN AXURE
Dynamic panels en widget manager

34. DYNAMIC
PANELS
Paneel dat bestaat uit 1 of
meerdere ‘lagen’ die op
interactions kunnen reageren
en zichtbaar of onzichtbaar
zijn.

35. 6
DE ONDERDELEN VAN AXURE
Adaptive views voor meerdere schermformaten

36. ADAPTIVE
VIEWS
Je prototype op verschillende
schermformaten, voor de
gevorderde gebruiker.

37. 7
DE ONDERDELEN VAN AXURE
Styling elementen kleur en zelfs webfonts

38. STYLESHEET
Kleed je prototype aan met
een look and feel.

39. DE ONDERDELEN VAN AXURE
Deel je prototype

40. DEEL JE PROTOTYPE
Lokaal als HTML genereren en openen in je browser

41. DEEL JE PROTOTYPE
Online via share.axure.com met gratis account

42. EN NU BOUWEN
Werk een of meerdere schermen uit met interacties.
Presenteer je demo.

43. PRESENTATIES
Wie durft?

44. VRAGEN
Luc Moers
l.moers@drecomm.nl