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:
Plan the tasks you need to test
- Have a clear idea of what you want to learn.
- Watch how users interact with similar or competing products
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.
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
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.
Consider audience and intent when selecting the right but make it minimally real
Prototype early and often no need to code
And as you’re moving through this whole process here are some tips:
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!
- Design pattern library (developer.yahoo.com)
- Templates (interfacesketch.tumblr.com)
- POP for iPhone (http://popapp.in)