Pre Code Prototyping

Cort Johnson of Terrible Labs was kind enough to stop by the Harvard I-lab to talk with us about prototyping.  As an engineer at heart my biggest tendency is to build first and ask questions later. I’ve easily wasted years of my life building products to test user demand – when a simple paper (or PowerPoint) prototype would suffice.  So, here are some tips to help you design a great product BEFORE you build it!

 

The Basic Prototyping Process:

1. Plan the tasks you need to test

• Have a clear idea of what you want to learn.

2. Observation

• Watch how users interact with similar or competing products

3. Sketch a user flow

• what tasks needs to be accomplished or what information do we need from the user? Make a simple diagram that links all the tasks together.

4. Beginning with the core, sketch or create simple wireframes of application screens

• Draw simple icons and areas to get a sense for layout. There are great templates for iPhones or websites (or even just paper with a grid of dots) that can help guide this process. A favorite of Cort’s is Pop Prototyping on Paper.
• Cores and Paths – the core is the critical content that people come to the site on. With Flickr it’s photos for a software company it’s the product page. Know that however much navigation you build (from the homepage) know that it’s just one path. Users will mostly likely arrive directly at the critical content – bypassing the rest of your site. Build for that.
• Think about inward paths and outward paths
• What are the user goals and business goals?
• Lastly there are trigger words/content/calls to action

5. Add interactivity and visual polish as needed

• Wireframe – start doing high fidelity wire framing with keynote or PowerPoint. Use conditional links for each button in these presentation systems to mimic the conditional states of your product.
• Fake Doors - Building some new features? Add a button or link that makes it look like the button is there and see how many click on it. Take them to a landing page with maybe a beta user sign up. Don’t build it out until you’ve confirmed interest.

6. Consider audience and intent when selecting the right but make it minimally real

7. Prototype early and often no need to code

And as you’re moving through this whole process here are some tips:

Use realistic content – make it look as close to reality as possible.  Take the time to put real images and real text in there.  People reacting need to focus there.

Test Early Test Often – Make frequent updates and always test first

Consider the Limitations – Keep the impact of the format of the prototype (fidelity/depth) in mind when evaluating the feedback you get.

One Change at at Time – Classic scientific method.  Isolate the variable.  Change it.  See what happens.  If you change many variables at a time its hard to isolate causal vs corollary relationships

Beware of Dead Ends – don’t let a user hit a dead end where they get ‘stuck’ in a state of the app  There should always be a ‘next’.  Users should leave when they feel they are ready – not when they hit a brick wall.

Last (but not least!) here are some really great online resources Court mentioned that will help you get on your way to being a prototyping wiz!

Sketching

• Design pattern library (developer.yahoo.com)
• Templates (interfacesketch.tumblr.com)
• POP for iPhone (http://popapp.in)

Wireframing

• Sketchflow http://microsoft.com/expression
• Axure http://axure.com
• Balsamiq http://balsamiq.com
• Keynote Kung Fu http://keynotekungfu.com
• Keynotopia http://keynotopia.com/themes
• InVision http://invisionapp.com
• http://proto.io