What is rapid prototyping? •Usercentered design methodology • For designing, communicating and evaluating user interfaces •Getting feedback as early as possible Common techniques • Paper prototyping •Wireframes and page schematics •HTML wireframes •Interactive prototypes So how do we describe what users do? Visualise the experience... • Show every step to complete a task • Show every click • Preview the experience see and feel how everything flows together The timeline is your friend • Efficient digital sketching tool • Best way to manage changes over time • Supports low to high fidelity • Natural starting point for exploring movement and transitions
Visualising the User Experience Grant Robinson Senior Interaction Designer at Xero grant@xero.com 1. 2. 3. Let’s talk about Rapid prototyping Visualising the UX with screenflows Movement and transitions Rapid prototyping Is this rapid prototyping? Is this rapid prototyping? Nope! What is rapid prototyping? • User-centered design methodology • For designing, communicating and evaluating user interfaces • Getting feedback as early as possible • Fast Prototyping life-cycle Prototyping life-cycle The more cycles the better release early, release often Agile development mantra: fail early, fail often Agile design mantra: "If you’re not failing now and again, it’s a sure sign you’re not doing anything very innovative." Woody Allen [...]...No designer is an island 1 Fellow designers 2 Project team 3 Wider team 4 Users 5 Your mum Common techniques • Paper prototyping • Wireframes and page schematics • HTML wireframes • Interactive prototypes Paper prototypes Paper prototypes Love: • Quick & dirty • No software... page schematics http://gapingvoid.com/2007/05/15/random-thought/ Wireframes Love: • Good for defining content • Good for documenting screens Hate: • Bad at showing interactivity / flow • Can’t really use them for testing • Slow Too much time spent describing HTML wireframes • Better success rate • Much faster • Less confusion