User Experience Design: 5 Techniques for Creating Better Websites and Applications
-
Upload
nform-user-experience -
Category
Technology
-
view
103 -
download
0
description
Transcript of User Experience Design: 5 Techniques for Creating Better Websites and Applications
![Page 1: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/1.jpg)
User Experience DesignFive Techniques for Creating Websites and Applications
ICE Conference | November 3, 2011
![Page 2: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/2.jpg)
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.
![Page 3: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/3.jpg)
Clients
![Page 4: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/4.jpg)
“We’re getting a lot of calls about ________”
![Page 5: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/5.jpg)
“It looks great but I can’t do ________”
![Page 6: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/6.jpg)
“Our customers can’t find ________”
![Page 7: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/7.jpg)
The Problem
- Success rates for IT Projects- 32% Succeed- 44% Challenged- 24% Failed
Source: 2009 Standish CHAOS Reports
![Page 8: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/8.jpg)
Why does this happen?
Top reasons were...- Lack of user input- Incomplete requirements- Changing requirements
Consistent over the last 10 years!
![Page 9: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/9.jpg)
User experience can help.
![Page 10: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/10.jpg)
What is UX?
“A term used to describe the overall experience or satisfaction a user has with a product or service”
![Page 11: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/11.jpg)
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)
![Page 12: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/12.jpg)
Five Techniques
1. Design Early2. Test Early and Often3. Make Prototypes4. Focus on Behaviour5. Make Good Mistakes
![Page 13: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/13.jpg)
Why Bother?
- People expect good software because they use it every day
- More successful projects- Reduce ongoing expenditures like
training and support
![Page 14: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/14.jpg)
1. Design Early
![Page 15: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/15.jpg)
What is “design” anyway?
Requirements → Development → DesignSystem & business
documentationBuilding system
componentsColours & fonts
Typical Approach on IT Projects
![Page 16: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/16.jpg)
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
![Page 17: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/17.jpg)
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 ends up expressing itself in successive outer layers of the product or service.”
Steve Jobs
![Page 18: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/18.jpg)
Rethinking Design
Steve Jobs
“Design is how it works”
![Page 19: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/19.jpg)
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
![Page 20: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/20.jpg)
Design as Requirements
• Recognize that user experience and business analysis are complementary activities
• Visual BA: using design to create better requirements
![Page 21: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/21.jpg)
BA/UX
Users Stakeholders
Functional
Technical
Process Modelling & Improvement
Interface Development
Visual Design
Data Modelling & Analysis
Use Cases
Adapted from Business Analysis & User Experiencehttp://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/1892/Business-Analysis-and-User-Experience.aspx
![Page 22: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/22.jpg)
BA/UX
Adapted from Business Analysis & User Experiencehttp://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/1892/Business-Analysis-and-User-Experience.aspx
![Page 23: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/23.jpg)
2. Make Prototypes
![Page 24: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/24.jpg)
What’s a Prototype?
• A prototype is a visual model of a system.
![Page 25: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/25.jpg)
Kinds of Prototypes
• Sketches• Flows• Mock-ups• Wireframes & Documentation
![Page 26: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/26.jpg)
![Page 27: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/27.jpg)
![Page 28: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/28.jpg)
![Page 29: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/29.jpg)
![Page 30: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/30.jpg)
![Page 31: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/31.jpg)
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
![Page 32: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/32.jpg)
![Page 33: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/33.jpg)
Common Language
• Pictures can be understood by everyone
• Pictures raise questions• Pictures reveal hidden problems
![Page 34: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/34.jpg)
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)
![Page 35: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/35.jpg)
3. Engage Users Early & Often
![Page 36: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/36.jpg)
• UAT vs. Usability Testing• Evaluation methods• You vs them
![Page 37: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/37.jpg)
UX, Usability & UAT
User Acceptance Testing
Usability
UX
System meets requirements
System can be used efficiently
Positive experience for users
![Page 38: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/38.jpg)
You vs. Them• Intelligent
• Analytical
• Comfortable with technology
• Comfortable with complexity
• Hackers or tinkerers
• Not always comfortable with ambiguity
• Invested in your projects
![Page 39: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/39.jpg)
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
![Page 40: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/40.jpg)
Ways to Engage Users
• Conversations!• Workshops• Surveys• Usability Evaluation
![Page 41: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/41.jpg)
![Page 42: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/42.jpg)
![Page 43: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/43.jpg)
Survey Tools
• Surveymonkey• Optimal Workshop• Usertesting.com
![Page 44: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/44.jpg)
4. Focus on Behavior
![Page 45: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/45.jpg)
Video from The Simpsons episode 215 where Homer designs his own car (removed)
![Page 46: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/46.jpg)
![Page 47: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/47.jpg)
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?”
![Page 48: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/48.jpg)
![Page 49: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/49.jpg)
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
![Page 50: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/50.jpg)
Teatumbler from Kicker Studio
![Page 51: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/51.jpg)
5. Make Good Mistakes
![Page 52: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/52.jpg)
Mistakes!Good Mistakes
- Recognized early and corrected
- Part of an exploratory process
- Teach us something new about a problem
Bad Mistakes
- Cause critical failures
- Are expensive to fix
- Caught late (end of project or in production)
![Page 53: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/53.jpg)
"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
![Page 54: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/54.jpg)
“Mistakes are the portals of discovery.”
James Joyce
![Page 55: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/55.jpg)
"Anyone who has never made a mistake has never tried anything new."
Albert Einsten
![Page 56: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/56.jpg)
How do we make good mistakes?
- Start with low-fidelity tools- Generate lots of ideas
![Page 57: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/57.jpg)
Sketches
Mockups
Design
![Page 58: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/58.jpg)
http://culturedcode.com/things/iphone/makingof/ThingsTouch-PaperCollage.jpg
![Page 59: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/59.jpg)
Which option do you prefer?
1 2 3 4 5 6
![Page 60: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/60.jpg)
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.
![Page 61: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/61.jpg)
Five Techniques
1. Design Early2. Test Early and Often3. Make Prototypes4. Focus on Behaviour5. Make Good Mistakes
![Page 62: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/62.jpg)
Benefits- Reduce costs
- Less rework, more clarity- Less training and support
- Reduced risk- Lower chance of failure
- Improve adoption, satisfaction
![Page 63: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/63.jpg)
$1 $5 $10
Design
Development Cheaper to find and fix problems early in the project
![Page 64: User Experience Design: 5 Techniques for Creating Better Websites and Applications](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c779d04a79590c788b4580/html5/thumbnails/64.jpg)
Time
Budget Too often we catch user experienceproblems late in projects when there’s no budget to fix them.