The document discusses five techniques for improving user experience in website and application design: 1. Design early by incorporating user experience design into requirements gathering to better understand user needs. 2. Test early and often through prototyping, usability testing, and engaging users to iterate on designs before development is complete. 3. Make prototypes like sketches, flows, and mockups to generate ideas, get stakeholder buy-in, and test designs at low cost before implementing. 4. Focus on user behavior by asking open-ended questions about what users actually do rather than what they say they want. 5. Make "good mistakes" through exploratory prototyping to learn about problems and

1. User Experience Design
Five Techniques for Creating Websites and Applications
ICE Conference | November 3, 2011

2. About Us
• Founded in 2003
• Edmonton & Toronto
- User experience research, strategy &
design
- Evaluate performance of websites, apps and intranets
- Understand customer needs to create better products
- Design: requirements, content analysis, information architecture,
interface and interaction.

3. Clients

4. “We’re getting a lot of calls
about ________”

5. “It looks great but I can’t
do ________”

6. “Our customers can’t find
________”

7. The Problem
- Success rates for IT Projects
- 32% Succeed
- 44% Challenged
- 24% Failed
Source: 2009 Standish CHAOS Reports

8. Why does this
happen?
Top reasons were...
- Lack of user input
- Incomplete requirements
- Changing requirements
Consistent over the last 10 years!

9. User experience can help.

10. What is UX?
“A term used to describe the overall
experience or satisfaction a user has with a
product or service”

11. What is UX?
A holistic practice of designing a product or
system to achieve a set of objectives:
- Positive experience for the user (useful,
pleasurable, fun, unobtrusive, helpful)
- Specified business goals (increased
revenue, cost avoidance, streamlined
processes)

12. Five Techniques
1. Design Early
2. Test Early and Often
3. Make Prototypes
4. Focus on Behaviour
5. Make Good Mistakes

13. Why Bother?
- People expect good software because
they use it every day
- More successful projects
- Reduce ongoing expenditures like
training and support

14. 1. Design Early

15. What is “design”
anyway?
Typical Approach on IT Projects
Requirements → Development → Design
System & business Building system Colours
documentation components & fonts

16. Rethinking Design
“The engineer, and more
generally the designer, is
concerned with how things
ought to be - how they
ought to be in order to
attain goals, and to
function.” Herbert Simon

17. Rethinking Design
“In most people’s
vocabularies, design means
veneer. It’s interior
decorating... But to me,
nothing could be further from
the meaning of design. Design
is the fundamental soul of a
human-made creation that Steve Jobs
ends up expressing itself in
successive outer layers of the
product or service.”

18. Rethinking Design
“Design is how it works”
Steve Jobs

19. How do we design
earlier?
• Think of design as part of the
requirements process
• Use low-fidelity techniques to generate
lots of ideas
• Use visual deliverables to get
agreement

20. Design as
Requirements
• Recognize that user experience and
business analysis are complementary
activities
• Visual BA: using design to create better
requirements

21. BA/UX
Functional
Interface Development
Visual Design
Users Stakeholders
Process Modelling & Improvement
Data Modelling & Analysis
Use Cases
Technical
Adapted from Business Analysis & User Experience
http://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/1892/Business-Analysis-and-User-Experience.aspx

22. BA/UX
Adapted from Business Analysis & User Experience
http://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/1892/Business-Analysis-and-User-Experience.aspx

23. 2. Make Prototypes

24. What’s a Prototype?
• A prototype is a visual model of a
system.

25. Kinds of Prototypes
• Sketches
• Flows
• Mock-ups
• Wireframes & Documentation

31. Why Prototype?
• A common language that everyone
understands
• An inexpensive way to make mistakes
• An inexpensive way to explore ideas
• A tool to iterate and refine
• A way to document design

33. Common Language
• Pictures can be understood by
everyone
• Pictures raise questions
• Pictures reveal hidden problems

34. Iteration
• Prototypes let us iterate easily
• Explore options and ideas
• Throw away bad ideas (no sunk costs)
• Test vehicle (crash them and see what
happens)

35. 3. Engage Users Early
& Often

36. • UAT vs. Usability Testing
• Evaluation methods
• You vs them

37. UX, Usability & UAT
Positive experience for users
UX
System can be used efficiently
Usability
User Acceptance Testing System meets requirements

38. You vs. Them
• Intelligent
• Analytical
• Comfortable with technology
• Comfortable with complexity
• Hackers or tinkerers
• Not always comfortable with ambiguity
• Invested in your projects

39. Them
• Not as smart as you
• Less comfortable with technology
• Less comfortable with complexity,
abstraction
• Just want things to work
• Can describe problems, not great at
describing solutions

40. Ways to Engage
Users
• Conversations!
• Workshops
• Surveys
• Usability Evaluation

43. Survey Tools
• Surveymonkey
• Optimal Workshop
• Usertesting.com

44. 4. Focus on Behavior

45. Video from The Simpsons episode 215 where
Homer designs his own car (removed)

47. What can we do
instead?
• Ask questions about what people do
instead of what they want.
• Keep questions open-ended
• Listen to their problems
• Do not sell ideas or attempt to get their
agreement on a solution
• E.g. “would it help if you had a really robust
search interface?”

49. 7 Kinds of Questions
Task Can you show me how you make tea?
Sequence Walk me through the steps.
Specific Example What did you do the last time you made tea?
Peer Comparison Do other people do it that way?
Project Ahead How do you think you’ll make tea in 5 years?
Exhaustive List What are the things you use when you make tea?
Other Viewpoint What do coffee drinkers think about the way you make tea?
Adapted from work by Steve Portigal

50. Teatumbler from Kicker Studio

51. 5. Make Good Mistakes

52. Mistakes!
Good Mistakes Bad Mistakes
- Recognized early - Cause critical failures
and corrected
- Are expensive to fix
- Part of an
- Caught late (end of
exploratory process
project or in
- Teach us something production)
new about a problem

53. "He was gifted with the special capability of
making many mistakes, mostly in the right
direction. I envied him this and tried in vain to
imitate him, but found it quite difficult to make
good mistakes."
Yutaka Taniyama

54. “Mistakes are the portals
of discovery.”
James Joyce

55. "Anyone who has never made
a mistake has never tried
anything new."
Albert Einsten

56. How do we make
good mistakes?
- Start with low-fidelity tools
- Generate lots of ideas

57. Sketches
Mockups
Design

58. http://culturedcode.com/things/iphone/makingof/ThingsTouch-PaperCollage.jpg

59. Which option do you
prefer?
1 2 3 4 5 6

60. 3-5-3 Exercise
• 3-5-3
• Give everyone three minutes to sketch
out 5 ideas
• Repeat three times
• Post the ideas on a white board and
discuss.

61. Five Techniques
1. Design Early
2. Test Early and Often
3. Make Prototypes
4. Focus on Behaviour
5. Make Good Mistakes

62. Benefits
- Reduce costs
- Less rework, more clarity
- Less training and support
- Reduced risk
- Lower chance of failure
- Improve adoption, satisfaction

63. Development Cheaper to find and fix problems
early in the project
Design
$1 $5 $10

64. Budget Too often we catch user experience
problems late in projects when there’s
no budget to fix them.
Time

65. Resources
UX Cards
http://nform.com/cards

66. Thank you!
gene.smith@nform.com | @gsmith
http://nform.com | @nform