Slides I shared about User Experience Prototyping in a recent sharing session.

1. A Quick Introduction To…
UX PROTOTYPING (For Software Development)
Alan Ho
12 March 2012

2. Agenda
5 minutes 1 Understanding Prototyping
10 minutes 2 Doing Prototyping
10 minutes 3 Prototyping Methods & Tools
2 minutes 4 Conclusion

3. Understanding Prototyping
1 2 3 4

4. Prototyping
T he use of simplified and complete models of a design to explore ideas,
elaborate requirements, refine specifications, and test functionality
- William Lidwell et al, Universal Principles of Design, 2003

5. Prototyping
A means to an end; its purpose is to identify the flaws in your work, early
in the process, while you still have time to do something about it
- Dennis G. Jerz, 2000

6. So What Does This Means (For Us)?

7. Prototyping
Technique used to
express the strategy
Design Your Strategy for an
Effective (User) Experience

8. Prototyping
I t’s one thing to talk about them and have storyboards and another thing
to see them for real.
- Robert Hoekman, Jr

9. Prototyping
Why… Benefits…
Explore •
•
Verifies or disproves assumptions
Clarifies requirements – helps set
Validate expectations and avoid
confusion
Test • Helps identify issues early on
• Brings user perspective early in
Communicate the process
• Minimizes risks/costs
Reduce • Keeps coding rework to a
minimum

10. Prototyping Without it, the success of the project
relies on a high risk gamble of chance

11. What Are They?
• Complete or partial model of a design concept
• Planned for a specific planned purpose
• Customized for a distinct audience
Prototypes • Framed by assumptions - articulated in
requirements
• Planned with specific characteristics
• Portraying specific content and fidelity
• Performed using a specific method
• Created with a specific tool

12. The challenges of gathering How the Customer How the Project Leader How the Analyst How the Programmer How the Business
and analyzing requirements… explained it understood it designed it wrote it Consultant described it
 Prototypes can aid
matching requirements!
How the project was What was actually How the customer was How it was supported What the customer
documented built billed really needed

13. Adapted from a true story…
Product management wants a 1000W mobile hairdryer…
Product management likes the sketch
so we created a prototype…
The initial prototype was great, but customers want it in
green then blue and eventually red

14. Can you imagine if there’s no prototyping and validation?
Product management wants a 1000W mobile hairdryer…
A likely result 

15. Doing Prototyping
1 2 3 4

16. B est practice prototyping requires a process -- an effective one.
Prototyping should not be a random act of design
Michael Arent, Director of user interface standards, SAP

17. Diagram of the iterative design and critique process
Warfel, Todd Zaki. 2009. Prototyping: A Practitioner's Guide

18. The Prototyping
Process Plan
•Verify Requirements
•Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

19. •Verify Requirements
Plan •Define Users
•Develop Task Flows
Business
•Marketing
•Salability
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Development Design •Define Design Criteria
•Create the Design
•Technical
•Functional
•Usage
•Review the Design
Results •Validate the Design
•Deploy the Design

20. •Verify Requirements
Plan •Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

21. •Verify Requirements
Plan •Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

22. •Verify Requirements
Plan •Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

23. •Verify Requirements
Plan •Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

24. •Verify Requirements
Plan •Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

25. QUIS Plan
•Verify Requirements
•Define Users
•Develop Task Flows
NAU
PUEU
USE
•Determine Characteristics
Prepare
SUS
•Define Content & Fidelity
•Choose a Method & Tool
CSUQ ASQ Design •Define Design Criteria
•Create the Design
PHUE
PUTQ
NHE
•Review the Design
Results •Validate the Design
•Deploy the Design

26. 16
•Verify Requirements
14 Plan •Define Users
•Develop Task Flows
Number of Unique Usability Issues
12
10 •Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Low
8
Medium
High
6
Design •Define Design Criteria
•Create the Design
4
2
•Review the Design
Results •Validate the Design
•Deploy the Design
0
Design 1 Design 2 Design 3

27. •Verify Requirements
Plan •Define Users
•Develop Task Flows
•Determine Characteristics
Prepare •Define Content & Fidelity
•Choose a Method & Tool
Design •Define Design Criteria
•Create the Design
•Review the Design
Results •Validate the Design
•Deploy the Design

28. Prototyping Methods & Tools
1 2 3 4

29. Prototyping Tools…
• Keynote (3%) • Illustrator (23%)
• PowerPoint (43%) • HTML Editor (4%)
• Excel (0.1%) • Dreamweaver (47%)
• Visio (59%) • Fireworks (18%)
• Paper (77%) • Flash (21%)
• Acrobat (19%) • Expression Blend
• Photoshop (10%) • OmmiGraffle (30%)
• iRise (0.1%) • InDesign (12%)
• Axure (30%) • Balsamiq Mockups
• Flex (2%)

30. Balsamiq
Mockups

31. Microsoft
Visio

32. Expression
Blend

33. Paper

34. You can prototype with just about anything
• Software you already know is usually better than specialized tools
• There is no one size tool that fits all

35. The method of prototyping you use will change
as your software product develops and evolves…

36. Common Mistakes
• Focusing too much on a particular tool
• Prototyping either too much or too little
• Prototyping the wrong thing
• Not setting expectations for what the prototype
will be
• Prototyping late and infrequently

37. Conclusion
1 2 3 4

38. In Summary…
1. Aids the definition of important design artefacts in a software project
2. Achieving a rational design outcome with or without user-centered design
3. Facilitates a process that supports timely design iterations and explorations
4. Prototyping itself also needs a process
5. You can prototype with just about anything
6. We need to start ASAP!