iterate quickly with a prototype you can test
TRANSCRIPT
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