User Experience Design: 5 Techniques for Creating Better Websites and Applications

User Experience DesignFive Techniques for Creating Websites and Applications

ICE Conference | November 3, 2011

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.

Clients

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

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

“Our customers can’t find ________”

The Problem

- Success rates for IT Projects- 32% Succeed- 44% Challenged- 24% Failed

Source: 2009 Standish CHAOS Reports

Why does this happen?

Top reasons were...- Lack of user input- Incomplete requirements- Changing requirements

Consistent over the last 10 years!

User experience can help.

What is UX?

“A term used to describe the overall experience or satisfaction a user has with a product or service”

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)

Five Techniques

1. Design Early2. Test Early and Often3. Make Prototypes4. Focus on Behaviour5. Make Good Mistakes

Why Bother?

- People expect good software because they use it every day

- More successful projects- Reduce ongoing expenditures like

training and support

1. Design Early

What is “design” anyway?

Requirements → Development → DesignSystem & business

documentationBuilding system

componentsColours & fonts

Typical Approach on IT Projects

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

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

Rethinking Design

Steve Jobs

“Design is how it works”

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

Design as Requirements

• Recognize that user experience and business analysis are complementary activities

• Visual BA: using design to create better requirements

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

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

2. Make Prototypes

What’s a Prototype?

• A prototype is a visual model of a system.

Kinds of Prototypes

• Sketches• Flows• Mock-ups• Wireframes & Documentation

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

Common Language

• Pictures can be understood by everyone

• Pictures raise questions• Pictures reveal hidden problems

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)

3. Engage Users Early & Often

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

UX, Usability & UAT

User Acceptance Testing

Usability

UX

System meets requirements

System can be used efficiently

Positive experience for users

You vs. Them• Intelligent

• Analytical

• Comfortable with technology

• Comfortable with complexity

• Hackers or tinkerers

• Not always comfortable with ambiguity

• Invested in your projects

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

Ways to Engage Users

• Conversations!• Workshops• Surveys• Usability Evaluation

Survey Tools

• Surveymonkey• Optimal Workshop• Usertesting.com

4. Focus on Behavior

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

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?”

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

Teatumbler from Kicker Studio

5. Make Good Mistakes

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)

"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

“Mistakes are the portals of discovery.”

James Joyce

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

Albert Einsten

How do we make good mistakes?

- Start with low-fidelity tools- Generate lots of ideas

Sketches

Mockups

Design

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

Which option do you prefer?

1 2 3 4 5 6

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.

Five Techniques

1. Design Early2. Test Early and Often3. Make Prototypes4. Focus on Behaviour5. Make Good Mistakes

Benefits- Reduce costs

- Less rework, more clarity- Less training and support

- Reduced risk- Lower chance of failure

- Improve adoption, satisfaction

$1 $5 $10

Design

Development Cheaper to find and fix problems early in the project

Time

Budget Too often we catch user experienceproblems late in projects when there’s no budget to fix them.

ResourcesUX Cards

http://nform.com/cards

Thank you!gene.smith@nform.com | @gsmith

http://nform.com | @nform