iterate quickly with a prototype you can test

Iterate quickly by designing and creating a clickable

prototype you can testCC License - Flickr darkday

A hands-on workshop by Will Kesling & Nicole Capuana

Creative Commons License - Flickr Some rights reserved by garryknight

Will Kesling@willkesling

Nicole Capuana@ncapuana

Concept > Prototype > Test

CC License - Flickr Alberto Garcia

Cone of Uncertainty

Prototype Tools

● InvisionApp● UXPin● Prototype on Paper● Flinto● Origami● Solidify

Some ● are free, some cost a bit - still

overall pretty low cost and fairly easy to start with

● are for mobile design only, others cover any interaction designs

● have extensive UI libraries or building kits to get you started quickly

● allow on device testing● allow for real-time

collaboration and annotations

Skala PreviewPreview your mockups/designs on your mobile device (sends images, previews and Photoshop designs)

http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes

Excellent review by Cooper in “Designer’s Toolkit: Road Testing Prototype Tools”

Design tools

Pen & Paper

KeynotopiaBalsamiq

SketchThe monsters - Illustrator and Photoshop

low highFidelity

$1 Prototype

Greg Nudelman - https://publishizer.com/1-prototype/CC License - Flickr David Michalczuk

Let’s get started

1. Form teams of 22. Grab some post-its & markers3. Find a spot to work together

Here’s what we did

An app for comedians to time their set

Design a mobile app

Determine as a team what you want to design.

Sketch screens - it doesn’t have to be the app in it’s entirety but just a path that we can test.

You will have:● 5 minutes to come up with an idea● 10 minutes to sketch

15 minutes

Our prototype

Create prototypeCreate an account at http://www.invisionapp.com/With your free account you are allowed one project.

Take photos of your sketches - you may have to resize them iOS 4 640 x 960 iOS 5 640 x 1136

Drag or upload your photos

Create hotspots and link your screens together

15 minutes

How to structure a test

Set objective of what you need to answer or learn - can they use it?Task basedCreate script for user and moderator

Our testObjective: User can set and use a cue timer

Scenario: You need to set up a cue timer for your upcoming gig. You’ll have the stage for 5 minutes.

Your tasks:● Launch the Stage Timer app and set up your timer. You want to know

when you hit the 4 minute and 4:30 marks. ● Answer the facilitator’s questions.

For the facilitator:1. How do you create a new timer?2. How do you play/activate a timer?3. What do the colors mean?

Scoring

Draft your test● Write out your test objective● Draft your scenario, participant tasks & facilitator

questions● Set up your scorecard

15 minutes

Test with someone● Pair up with another team and test your app● 1 of you should be the facilitator (asking questions)● 1 of you should take notes and score● Switch and repeat

15 minutes

Why this approach can help you validate, experiment and learn fast● Anyone on the team can do it - you don’t need a designer

(although they will make you move faster)● Validate if a concept is worth pursuing● Easily experiment more● Your 1st design is never perfect● Cheap way to determine what to develop● Quick & objective● You will always learn something

How Prototyping is Replacing Documentation The power of prototypes and how to utilize them.https://medium.com/goodux-badux/how-prototyping-is-replacing-documentation-c42e97d07a11

Vive le Prototypehttp://www.designmap.com/practice/vive-le-prototype/

Building Clickthrough Prototypes To Support Participatory Designhttp://www.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design/

State of the Prototyping Union – A Review of the Top 5 Mobile Prototyping Toolshttp://www.openroad.ca/2013/09/13/mobile-prototyping-tools/

Good reads