presentatie prototyping
DESCRIPTION
Presentatie van Luc Moers tijdens de masterclass Prototyping van start-up competitie The Challenge.TRANSCRIPT
PROTOTYPING & INTERACTION DESIGN
van idee naar testbaar concept
LUC MOERSEven voorstellen…
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
INTERACTION DESIGNWat is het eigenlijk?
INTERACTION DESIGNBedenken en ontwerpen van de gebruikerservaring van
interactieve producten
USER CENTERED DESIGNEen korte introductie om jezelf op weg te helpen
UITGANGSPUNTENHier hou je rekening mee met UCD
BETREK JE DOELGROEPken hun ervaringen door middel van interviews en tests
STEL DOELEN OPvoor jezelf en je doelgroep door middel van use cases en
scenario's
HOU REKENING MET DE OMGEVING
waar en wanneer gebruikt je doelgroep het product?
DENK VANUIT PROCESSENHoe kan ik een taak logisch en eenvoudig voltooien
ZINVOLLE INFORMATIEWelke informatie verwacht de eindgebruiker en wat heb ik
nodig (maak een mindmap)
WEES EMPATISCHWat wil je dat mensen voelen als ze je product gebruiken?
MAAK EEN PROTOTYPETest of het product echt werkt
PROTOTYPINGJe product voor het eerst gebruiken
WELKE MANIEREN ZIJN ER
WELKE MANIEREN ZIJN ER
• Paper prototyping
• Prototyping software op computer
• Frameworks (zoals Twitter Bootstrap)
WAT HEB JE NODIG?• potlood en papier
• een computer
• Mindmapping tool (handig)
• Word
• Axure 7.0
• Axshare account
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
HOE WERKT AXUREGids met belangrijke features (Start Axure AUB op)
SITEMAPDe onderdelen van Axure
1
SITEMAPDe verschillende pagina’s en processen in je applicatie of
site uitgetekend.
FLOWCHARTSMaak diagrammen om structuur te verduidelijken
WIDGETSDe onderdelen van Axure
2
WIDGETSStandaard (web) elementen
om een pagina op te bouwen. Selecteer bibliotheken voor
widget sets.
DE ONDERDELEN VAN AXUREMasters
3
MASTERSMaak een functionaliteit wat je
meerdere keren kunt gebruiken en in 1 keer op alle
pagina’s kunt veranderen!
DE ONDERDELEN VAN AXUREPage en widget interactions
4
4
INTERACTIONSMaak je prototype interactief, bouw geavanceerd gedrag zelfs met de mogelijkheid om variabelen te gebruiken.
DE ONDERDELEN VAN AXUREDynamic panels en widget manager
5
DYNAMIC PANELS
Paneel dat bestaat uit 1 of meerdere ‘lagen’ die op
interactions kunnen reageren en zichtbaar of onzichtbaar
zijn.
DE ONDERDELEN VAN AXUREAdaptive views voor meerdere schermformaten
6
ADAPTIVE VIEWS
Je prototype op verschillende schermformaten, voor de
gevorderde gebruiker.
DE ONDERDELEN VAN AXUREStyling elementen kleur en zelfs webfonts
7
STYLESHEETKleed je prototype aan met
een look and feel.
DE ONDERDELEN VAN AXUREDeel je prototype
DEEL JE PROTOTYPELokaal als HTML genereren en openen in je browser
EN NU BOUWENWerk een of meerdere schermen uit met interacties.
Presenteer je demo.
PRESENTATIESWie durft?
