introduction to prototyping - scottish upa - june 2011
DESCRIPTION
Presented to the Scottish Usability Professionals Association, Edinburgh, 22 June 2011. Covering the basics, the benefits, some tools, some tips and a case study.TRANSCRIPT
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