Introduction to prototyping

Scottish UPA

22 June 2011

Neil Allison

Overview

• What is prototyping?

• What are the benefits?

• Prototyping tools

• Some example outputs

• Case studies

What is a prototype?

“…a conceptual model that captures

the intent or idea

of a design.”

Todd Warfel (A Practitioner’s Guide

to Prototyping)

When is a prototype not a prototype?

• When you can’t implement changes quickly for retesting

• When it’s a pain to try alternative approaches, particularly in parallel

• When the thought of starting over because something fundamental is wrong makes you want to cry

So what is prototyping?

• Trialling, testing, communicating

• Exploring a concept or idea

• Using a prototype to inform the development process

…so long as you can be when you present or test them

Prototypes don’t have to be clever or sophisticated…

Benefits of prototyping

Why prototype?

“Prototypes are a great communication

tool for fleshing out design ideas, testing

assumptions, and gathering real-time

feedback from users.”

Todd Warfel (A Practitioner’s Guide

to Prototyping)

Why prototype?

• To help gather user (or business) requirements– Better requirements gathering = less feature creep

• To think through scenarios & possibilities– Highlight user priorities & top tasks

• To try out different potential solutions– Diffuse Steve Krug’s “religious debates”

• To communicate effectively– With end users, with developers, with business owners

• To reduce risk of rework– Reduce the risk of needing a redeploy

In a nutshell…

Better end products

Save time and money

Another way to think about it

Specification Development Deployment

Number of options available

Cost of making changes

Maximum benefit

Prototyping tools

Prototype sophistication

• It depends:– On what you’re looking to find– On where you are in the design process– On who you’re working with

• Does it facilitate– Interaction?– Communication?

Choosing the right tools

• Use the tool(s) that work best for you– I usually prefer a combination

• Doesn’t matter what you prototype with– Are you comfortable with it?– Can you work quickly?– Opportunities for collaboration are good too

Some prototyping options

• Pencil, paper, post-it notes

• Graphics packages (I love Snagit)• Office packages: PowerPoint, Visio, Word• Firefox free add-on: Pencil• Online services like Mockingbird

• Specialist tools like Axure, iRise, Balsamiq • Your preferred development framework

Some examples…

Paper etc

• Scenario planning required!– Only limited by your imagination

(dental tape anybody?)– e-Commerce example:

http://bit.ly/lClK54

• 10 video examples: http://bit.ly/lx7g4o

I ♥ Visio

• Free templates:http://bit.ly/itKeQS

Some specialist tools

• Mockingbird: http://bit.ly/itKeQS

• Balsamiq: https://www.wiki.ed.ac.uk/x/5so8Bw(Edinburgh Uni users only)

• Axure: http://bit.ly/mow0BN

Case study

Content Management System (CMS) interface enhancements

What we did #1

• Identified functional & usability enhancement requirements

– Through user feedback • Discussion board then priority survey

– Through observation in training and testing

– Through support requests

What we did #2

• User rep, developer and graphic designer met to discuss potential solutions– First prototypes: pencil & paper

• Agreed preferred solution from a development perspective– Meeting functional and usability requirements

What we did #3

• Prototypes worked up with Visio & Snagit– Some based on CMS development proof of concept– All paper based

• Scenarios developed to encourage interaction with prototypes

• Usability testing with small numbers of CMS users

• Minor tweaks made to prototypes based on findings– One quick retest

All paper based

Writing not typing

Playing computer

Quick results summary

Top tips

• Trial the prototype activities before arranging sessions with participants

• Make sure the participants are representative of your target users– Or make allowances with your results

• Talk through the full test with development team – before and after sessions– Looking at prototypes sometimes not enough

Benefits: Usability

• Interface changes deployed smoothly

• Enhancements universally well received– User base were listened to & engaged with

• Demonstrably improved the publishing process– ROI tests show task times cut by up to 33%– Saving at least £50,000 per year in staff time

Benefits: Development

• Initial development time cut– Rough prototypes facilitated discussion– Misconceptions identified– Better understanding of user behaviours– Development approaches ruled in/out

• Redevelopment significantly reduced– Only one notable redevelopment needed

• Lesson learned: demo test with developer

– No redeploys needed

Conclusions

• Doesn’t matter what you prototype with– So long as it’s quick– Best options enable collaboration

• It’s not about the prototype itself– It’s about the interaction– It’s about communication– It’s about shared understanding

Final thought

• You will make mistakes when usability testing, but with practice you will get better– Steve Krug: “It’s not rocket surgery”

• Usability is like cookery– You don’t need to be a gourmet chef

• Beans on toast will usually do

– Jakob Nielsen article: http://bit.ly/cPjMhc

Learn more

• My blog posts on prototyping:http://bit.ly/cEFnaq

• Great books– Prototyping by Todd Warfel

http://bit.ly/lckF0N

– Rocket Surgery Made Easyby Steve Krug http://bit.ly/mHfHSy

Thank you

Neil AllisonUniversity of Edinburgh

www.usability-ed.blogspot.com http://uk.linkedin.com/in/neilallison

www.ed.ac.uk/website-programme