presentatie prototyping

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

AXURE PROPrototyping tool voor Mac en Windows te downloaden

op www.axure.com

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

DEEL JE PROTOTYPEOnline via share.axure.com met gratis account

EN NU BOUWENWerk een of meerdere schermen uit met interacties.

Presenteer je demo.

PRESENTATIESWie durft?

VRAGENLuc Moers

l.moers@drecomm.nl