iasi code camp 20 april 2013 lets make users happy

Let’s make users happy

Daniel Puiu Software Developer & User Experience Enthusiast daniel.puiu@gmail.com

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/