Essential Techniques for Designing Delightful Web Sites

Christine Perfetti, Acquia Twitter: @cperfetti

What makes a delightful design?

What is a delightful design?

What makes a delightful design?Emotional connection: Gives users great pleasure and joy

Delivers value and benefit: Accomplishes users’ goals and goes beyond their basic expectations

• What it’s not:

• A magic bullet

• Bells and whistles

• Sizzle or sexiness

What goes wrong?

It’s not about the big idea

The best products and designs aren’t created by one brilliant person or team

Success comes from:Understand what users want to accomplish

Identify the pain points

Stumble and constructively fail

Measure, learn, and iterate

Essential Techniques for Designing Delightful Web Sites

Focus on techniques and tricks

Methodology! Process! Techniques! Tricks!

Test early and often

Traditional usability tests

A usability test involves putting your users in front

of your product and observing what they do

Not enough time

No resources and staff

No money No buy-in from management

Unsure where to start

Testing is too scientific

The Excuses

Running a test sessionGreet the user

Introduce user to observers

Explain to user how the test will work

Give the user tasks to complete and observe problems they experience

General Q&A

Debrief with observers

Start testing anywhere

Test quickly

Quick and dirty technique for measuring content pages

Takes less than 10 minutes to run

Measures if content pages quickly convey their purpose

Trick: 5 second test

You want to post pictures online from your last vacation

You are concerned that the upload process will be difficult

How confident are you that you can upload photos quickly and easily?

Sharing Your Pictures Online

You want to post pictures online from your last vacation

You are concerned that the upload process will be difficult

How confident are you that you can upload photos quickly and easily?

Sharing Your Pictures Online

You want to post pictures online from your last vacation

You are concerned that the upload process will be difficult

How confident are you that you can upload photos quickly and easily?

Sharing Your Pictures Online

Not for the home page

Research Question

How do we measure the success of

the home page?

Trick: First Click Test

Useful method to assess where users first click on your site’s home or entry page

Provide users with a specific task to complete when they arrive at the site

By observing where users first click, it’s a clear indicator whether they’ll eventually be successful

Start with the problem, not the solution

Understand your users’ pain points

Visit users in their natural environment

Visit users in their natural environment

A field study is the best technique for gathering information about users’ goals, needs, desires, and motivations

What we learn

User frustration and problems

How technology fits into users’ life

Understanding of users’ goals and most important tasks

Discovery starts with field studies

Understanding of work environment

Tasks that users haven’t talked about

Pain points and user frustration“Cheat sheets”

Evidence of technology that isn’t working for the user

What to look for

Understand the user workflow and frustration

It’s about the experience, not the features

Observe your users’ workflow in a realistic way

Identify the frustration and pain points

Tackle the problem areas

Don’t redesign everything all at onceChunk the work

Focus on the user’s journey

The 7-11 Milk Experiment

Mirrors the 7-11 Milk Experiment

Closely approximately a realistic scenario

Allows us to assess the usability of our designs and identify the pain points

Compelled Shopping Study

The Journey Map

Back button

Pogosticking

Search

3 signs of failure

Involve all members of the development team

Someone on the product team didn’t know something they should have known

If they had known, they would have designed the product differently

Anyone who has information that can inform design decisions should be involved

The cause of all usability problems

Product management

Engineering

UX

Who should be on the product team?

Marketing

Support

Legal

Sales

Generate multiple concepts and ideas

Two-day collaborative workshop with key representation from Engineering, Marketing, Product, UX, Customer Support, Sales

Present problem to tackle

Teams design in short time boxes

Present concepts

Critique

Iterate: Lather, rinse, repeat

Design Studio

Measure and learn early

“We’re building a what with what?”Heather O’Neill, Above the Fold

http://www.abovethefolddesign.com/blog/2010/08/24/from-paper-to-prototype/

Tests can happen early

• Paper prototype tests typically happen during the first two weeks of development and involves all team members

• Design is in flux

• Development team needs to try ideas and get feedback quickly

• All team members can participate in the study

• Allows design teams to go through multiple design iterations in a week

Building a paper prototype

• The paper prototype consists of:

• A “screen” (large cardboard or paper rectangle)

• Separate pieces of paper for each screen state, drop-down menu, or pop-up

• One team member silently simulates the behavior of the computer by placing pieces of paper in front of the user

Paper Prototyping by Carolyn Snyder

Measure and learn regularly:

URTH & SURF

Hire the right people

Communication is a core competency

“The most important baseline skill for any position is communication. We want you to be able to explain what you mean; we want you to be articulate. If you don’t have excellent

communication skills it’s going to be very frustrating for you and for other people.”

Phil Libin, CEO, Evernote

Team player

Collaborative

Listen to others’ constraints

Receptive to feedback

Immersed in user research

Understands the problem

What we look for

Questions?

Twitter: @cperfetti

christine.perfetti@acquia.com