Let’s make users happy
Daniel Puiu Software Developer & User Experience Enthusiast [email protected]
Agenda
1. What is usability? 2. Benefits of usability 3. What we can do for our users?
As business analysts (user centered design)
As developers/designers (design principles)
As testers (usability testing)
4. Conclusions
Usability is the measure of quality of the user experience
when interacting with something.
What is usability?
1. Easy and quick to learn 2. Easy and efficient to use 3. Error tolerant 4. Easy to remember 5. Subjective satisfaction
Usability is a combination of factors
Your software is usable when users ... don’t think too much when using an application don’t feel the need to use help windows easily find the information they are looking for feel comfortable when navigation trough the application don’t feel stupid
When your software is usable?
ISO 9241-11 (part 11 - 1998) This part deals with the extent to which a product can be used by specified users to achieve specified goals with effectiveness (task completion by users), efficiency (task in time) and satisfaction (responded by user in term of experience) in a specified context of use (users, tasks, equipments & environments). ISO 9241-210 (ex ISO 13407) Provides requirements and recommendations for human-centered design principles and activities throughout the life cycle of computer-based interactive systems. It is intended to be used by those managing design processes, and is concerned with ways in which both hardware and software components of interactive systems can enhance human–system interaction.
International standards
Usability may save lives …
http://harryzzz.blogspot.ro/2010_07_01_archive.html
Usability may save money …
“I'm not here to enter into a relationship. I just want to buy something.”
https://www.facebook.com/HodanGlobal
it may make you smile
Increase sales Increase traffic Increase of registered users Market share increase Creates a positive brand
Usability benefits for …
public websites
intranets
internal
Decrease training budget for users Productivity increase Increase user satisfaction at work
Reduces development time Decrease maintenance costs Remove re-design costs Decrease documentation and training time
Before
Conversion rate 10%
Annual revenue $100.000
improved conversion rate annual revenue annual ROI
annual revenue current conversion rate
Calculating increased conversion rate
After
Conversion rate 15%
Annual revenue 100.000 * (15/10) = 150.000
Annual ROI 150.000 – 100.000 = 50.000$
The formula
Example: Increase conversion rate by 5%
annual ROI users
number
Calculating increased productivity
Assumptions
Employees 500
Loaded salary $20.000 (or $0.008/second)
Use 10 tasks/day
Increased efficiency 6 seconds/task
Annual ROI 500 x 10 x 230 x 6 x 0.008 = 20.125$
The formula
uses/ day
days/ year
increased efficiency
loaded salary
Example: Reorganize intranet to increase efficiency by 6 seconds/task
90s Hardware
was the KING
00s Software
was the KING
10s Interaction
will be the KING
From past to future
User centered analysis
I’ll go up and find out what they need and the rest of you just start coding!
Traditional project life cycle
Project planning
Requirements definitions
Design Development
Integration Test
Installation Acceptance
Maintenance
http://blogs.msdn.com/b/devschool/archive/2012/09/10/design-principles-why-use-paper-and-pencil-or-similar-on-slate.aspx
Help desk
Training
Maintenance
Implementation
Detail design
High level design
User/task analysis
Investment in Resources
Project Life
Cycle
Less user centered design = more hidden costs
Investment in Resources
Project Life
Cycle
More user centered design = less hidden costs
Help desk
Training
Maintenance
Implementation
Detail design
High level design
User/task analysis
Get smart early!
Time
Pro
bab
ility
Begin End
Hig
h
Low
Mental models
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
Simplicity Familiarity Availability Flexibility Feedback Safety Affordance
How to apply mental models in software?
http://iasi.codecamp.ro
Register
Interviews
“Everyone has a story, make yours worth telling”, Patrick Ricketts
http://4.bp.blogspot.com/-HTtRjPqHn2U/UDTdBhB_v7I/AAAAAAAAALk/LkbZEFEQmOw/s1600/job-interview.jpg
User observation
“First rule of usability? Don’t listen to users” by Jacob Nielsen
http://www.newswire.ca/en/story/970075/brunswick-mine-earns-prestigious-john-t-ryan-safety-award-for-the-safest-metal-mine-in-canada
Focus groups
http://rosemedicalcenter.files.wordpress.com/2010/08/focus-group.jpg
Surveys
because knowledge is everything
1. design 2. collect 3. analyze
Environment Works in centralized room Busy environment, people, radios Climate control, but dusty, mal dust Operators, supervisors, visitors Good lighting conditions
Technology 21” monitors, multiple (3-4) Good internet connection Looks like a control room Someone in the chair 24/7 2-way radios
Demographics 37 years old Been at mine since 2000 (13 years) Enjoys what he does Firm and fair Minimal computer experience
Develop personas
Make Mircea love your system!
Do you think that Mircea has time for this wizard?
Card sorting
http://www.localhiddenvariable.com/ciid/wp-content/uploads/2009/03/dsc03416.jpg
Closed card sorting
Fitness Happiness Diet Health
Weight Loss Nutrition
Workout Plans
Disease Risks
For Vegetarians
Living Green
Lowering Stress Workouts
Finance Tips Meal Plans
Recipes Skin Care
Fitness Happiness Diet Health
Weight Loss
Nutrition
Workout Plans
Disease Risks
Living Green
Lowering Stress Workouts
Finance Tips Meal Plans
Recipes
Skin Care
For Vegetarians
http://sixrevisions.com/usabilityaccessibility/card-sorting/
Open card sorting
Tour
About Us
Affiliates
Developer Overview
Subscription Plans Download
Trial
Support
API Info
Testimonials
Pricing
Tour
About Us
Affiliates
Developer Overview
Subscription Plans
Download Trial
Support
API Info
Testimonials
Pricing
http://sixrevisions.com/usabilityaccessibility/card-sorting/
Design Principles
Developers spend a lot of time worrying what makes things easy for themselves, like unit testing, continuous integration but we should spend more time worrying what makes things easy for our users Software exits because users exist, not because we develop it, so it’s worth a lot to make their jobs easier Developers gains success by making something possible instead of making something easy.
About developers
If you are not looking for something, very often
you won't see it!
Inattentional Blindness
… 5 buttons are executed for 80% of user actions … 4 applications are used in 80% of user’s time
Pareto rule (80/20 rule)
Hick’s Law
Gestalt principles
Similarity Proximity
0
1
2
3
4
5
6
Category 1 Category 2 Category 3 Category 4
Series 1
Series 2
Series 3
Gestalt principles in software design
Why the Register button is on the bottom-right?
Question
For typical rectangular screens the eye scans from top left to bottom right
Guttenberg Diagram
Primary Optical Area Strong Follow Area
Weak Follow Area Terminal Area
Axis of orientation
Guttenberg Diagram in software design
http://51bits.com/articles/design-by-gutenberg/
Why do we use gradients?
Why do we use rounded corners?
Questions
Naturalness
http://www.flickr.com/photos/aidanmorgan/7530821574/sizes/h/in/photostream/
Contour bias
Contour bias & Naturalenes in software design
Savanna preference
http://www.billycanu.com/wp-content/uploads/2012/12/jungle2.jpeg http://hd-wallpapers.com/download/green-plains-of-wales_1920x1080_273-hd.jpg
Desire lines
http://fotografiskskole.files.wordpress.com/2012/04/olifantenpaadje3.jpg
1
2
3
4
5
6
Usability Testing
Usability testing
http://www.statesman.com/news/lifestyles/school-of-information-professor-teaches-students-t/nTCj8/
Circle five words that describe your impression of the design.
Friendly Good
Cool Confident
Secure Up-To-Date
Helpful High-Tech
Cluttered Stable
Reputable Annoying
Confusing Trustworthy
Easy-To-Use Comfortable
Evaluate brand message
Test sample
Where would you go to read about? 1. Women’s medical
procedures 2. Home care 3. Wight loss surgery 4. Local centers
Evaluate content organization
Test sample
1. Can you please tell me what is the price for Canon 1000D?
2. Can you please find the differences between Nokia S500 and Nokia S600?
3. Please add on order for Dell Latitude 400.
Evaluate navigation design
Test sample
Circle everything that you believe to be a hyperlink.
Evaluate affordance
Test sample
Prototype Testing
Eye tracking
http://www.webusability.co.uk/wp-content/uploads/2011/09/DSCN7857.JPG
Gaze Plot Visualization Heat Maps
Eye tracking data analysis
http://www.doublejumpmedia.com/blog/2009/05/eye-tracking-and-usability-testing-with-city-university-london/
Moderate testing Heat maps
Peer reviews User feedback Screen recording
User testing
Remote testing
http://www.techsmith.com/morae.html http://www.loop11.com/ https://usabilla.com/
http://verifyapp.com/ http://www.conceptfeedback.com/ http://openhallway.com/
Web log analysis
Page title
News form
Signup form
Content body
Nav. bar
A-B Testing
Version A 50 signups
Page title
News form
Signup form
Content body Nav. bar
Version B 75 signups
randomly distributed
A B 15.2 Conversion rate 20.9 Conversion rate
TextMagic.com – Homepage A/B test
http://www.abtests.com/test/275002/homepage-for-textmagic-homepage-ab-test
In the end ...
The inconvenient truth about SEO
http://www.smashingmagazine.com/2012/12/11/seo-the-inconvenient-truth/
Your primary objective should be better content, not higher rankings
Mint.com – no ad campaign
“Take a complicated process, make it easy, and you will win!”
http://www.ebusinessblog.org/554/user-experience-success-mint-com-has-made-doing-the-bills-a-joint-effort/
Usability vs. User experience
http://roomoramablog.files.wordpress.com/2012/10/transfagarasan-romania.jpg http://www.consulting.ait.asia/images/news/detail/freeway.jpg
Sketchbook vs. Paper
That was EASY!
Whoa. That was AWESOME!
http://www.fingerpainted.it/wp-content/uploads/2010/04/iPad_SketchBookPro_Photo.jpg
http://static.squarespace.com/static/50271a61c4aab6c54f9af5ee/5028140ee4b0195d2ee37559/5028140ee4b0195d2ee37e7e/1334450945277/1000w
let’s get rid of the user’s frustration …
and let’s make users happy!
Steve Krug Don’t make me
think
Donald Norman The design of
everyday things
Jenifer Tidwell Designing interfaces
Jacob Nielsen Prioritizing Web
Usability
Lidwel, Holden & Butle Universal Principles of
Design
http://www.humanfactors.com http://www.uxbooth.com/ http://www.smashingmagazine.com/ http://www.uxmatters.com/index.php http://www.usabilityfirst.com/
B O O K S
W E B S I T E S
Resources
http://www.upassoc.org/ http://www.uie.com/brainsparks/ http://uxmovement.com/ http://uxdesign.ro/
Top Related