SlideShare une entreprise Scribd logo
1  sur  84
Télécharger pour lire hors ligne
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 session
Greet 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 once
Chunk 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

Contenu connexe

Tendances

Validating Ideas with Users
Validating Ideas with UsersValidating Ideas with Users
Validating Ideas with UsersSheen Yap
 
UserTesting Webinar - UX in Action: Fareportal
UserTesting Webinar - UX in Action: FareportalUserTesting Webinar - UX in Action: Fareportal
UserTesting Webinar - UX in Action: FareportalUserTesting
 
Uncovering Need and Validating Ideas with UserTesting by Marieke McCloskey
Uncovering Need and Validating Ideas with UserTesting by Marieke McCloskeyUncovering Need and Validating Ideas with UserTesting by Marieke McCloskey
Uncovering Need and Validating Ideas with UserTesting by Marieke McCloskeyUserTesting
 
A thing or two about User Experience
A thing or two about User ExperienceA thing or two about User Experience
A thing or two about User ExperienceYael Keren
 
Building Delightful Products: A Customer-Centric Approach to Product Strategy...
Building Delightful Products: A Customer-Centric Approach to Product Strategy...Building Delightful Products: A Customer-Centric Approach to Product Strategy...
Building Delightful Products: A Customer-Centric Approach to Product Strategy...Perfetti Media
 
My recruit webinar user testing
My recruit webinar   user testingMy recruit webinar   user testing
My recruit webinar user testingUserTesting
 
Product Visioning: A Proven Method for Product Planning and Prioritization
Product Visioning: A Proven Method for Product Planning and PrioritizationProduct Visioning: A Proven Method for Product Planning and Prioritization
Product Visioning: A Proven Method for Product Planning and PrioritizationProductCamp Boston
 
186 Rethinking Customer Research: Achieving Breakthrough Product Insights
186    Rethinking Customer Research: Achieving Breakthrough Product Insights186    Rethinking Customer Research: Achieving Breakthrough Product Insights
186 Rethinking Customer Research: Achieving Breakthrough Product InsightsProductCamp Boston
 
Don’t Guess It, Test It!
Don’t Guess It, Test It!Don’t Guess It, Test It!
Don’t Guess It, Test It!UserZoom
 
Why Are You Roadmapping?
Why Are You Roadmapping?Why Are You Roadmapping?
Why Are You Roadmapping?Wendy Johansson
 
How growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentHow growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentUserTesting
 
UXPA International 2013 The Note-Taker's Perspective
UXPA International 2013 The Note-Taker's Perspective UXPA International 2013 The Note-Taker's Perspective
UXPA International 2013 The Note-Taker's Perspective UserWorks
 
How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...
How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...
How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...UIEpreviews
 
UX Research - Overview
UX Research - OverviewUX Research - Overview
UX Research - OverviewMike Gallers
 
UserTesting Webinar - Mapping experiences: from insight to Action
UserTesting Webinar - Mapping experiences: from insight to ActionUserTesting Webinar - Mapping experiences: from insight to Action
UserTesting Webinar - Mapping experiences: from insight to ActionUserTesting
 
UXPA DC UX 101 Workshop - Usability Testing
UXPA DC UX 101 Workshop - Usability TestingUXPA DC UX 101 Workshop - Usability Testing
UXPA DC UX 101 Workshop - Usability TestingUXPA DC
 
Introducing Live Conversation | Human Insight on Demand
Introducing Live Conversation | Human Insight on DemandIntroducing Live Conversation | Human Insight on Demand
Introducing Live Conversation | Human Insight on DemandUserTesting
 
Informed & Agile: Test Driven Design w/ Jon Innes
Informed & Agile: Test Driven Design w/ Jon InnesInformed & Agile: Test Driven Design w/ Jon Innes
Informed & Agile: Test Driven Design w/ Jon InnesUserZoom
 
UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...
UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...
UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...UserTesting
 

Tendances (20)

Validating Ideas with Users
Validating Ideas with UsersValidating Ideas with Users
Validating Ideas with Users
 
UserTesting Webinar - UX in Action: Fareportal
UserTesting Webinar - UX in Action: FareportalUserTesting Webinar - UX in Action: Fareportal
UserTesting Webinar - UX in Action: Fareportal
 
Uncovering Need and Validating Ideas with UserTesting by Marieke McCloskey
Uncovering Need and Validating Ideas with UserTesting by Marieke McCloskeyUncovering Need and Validating Ideas with UserTesting by Marieke McCloskey
Uncovering Need and Validating Ideas with UserTesting by Marieke McCloskey
 
A thing or two about User Experience
A thing or two about User ExperienceA thing or two about User Experience
A thing or two about User Experience
 
Building Delightful Products: A Customer-Centric Approach to Product Strategy...
Building Delightful Products: A Customer-Centric Approach to Product Strategy...Building Delightful Products: A Customer-Centric Approach to Product Strategy...
Building Delightful Products: A Customer-Centric Approach to Product Strategy...
 
My recruit webinar user testing
My recruit webinar   user testingMy recruit webinar   user testing
My recruit webinar user testing
 
Product Visioning: A Proven Method for Product Planning and Prioritization
Product Visioning: A Proven Method for Product Planning and PrioritizationProduct Visioning: A Proven Method for Product Planning and Prioritization
Product Visioning: A Proven Method for Product Planning and Prioritization
 
186 Rethinking Customer Research: Achieving Breakthrough Product Insights
186    Rethinking Customer Research: Achieving Breakthrough Product Insights186    Rethinking Customer Research: Achieving Breakthrough Product Insights
186 Rethinking Customer Research: Achieving Breakthrough Product Insights
 
Don’t Guess It, Test It!
Don’t Guess It, Test It!Don’t Guess It, Test It!
Don’t Guess It, Test It!
 
Why Are You Roadmapping?
Why Are You Roadmapping?Why Are You Roadmapping?
Why Are You Roadmapping?
 
How growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentHow growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product development
 
UXPA International 2013 The Note-Taker's Perspective
UXPA International 2013 The Note-Taker's Perspective UXPA International 2013 The Note-Taker's Perspective
UXPA International 2013 The Note-Taker's Perspective
 
How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...
How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...
How to Win UX Advocates and Influence Stakeholders - Melinda Baker UX Thursda...
 
UX Research - Overview
UX Research - OverviewUX Research - Overview
UX Research - Overview
 
UserTesting Webinar - Mapping experiences: from insight to Action
UserTesting Webinar - Mapping experiences: from insight to ActionUserTesting Webinar - Mapping experiences: from insight to Action
UserTesting Webinar - Mapping experiences: from insight to Action
 
UXPA DC UX 101 Workshop - Usability Testing
UXPA DC UX 101 Workshop - Usability TestingUXPA DC UX 101 Workshop - Usability Testing
UXPA DC UX 101 Workshop - Usability Testing
 
Introducing Live Conversation | Human Insight on Demand
Introducing Live Conversation | Human Insight on DemandIntroducing Live Conversation | Human Insight on Demand
Introducing Live Conversation | Human Insight on Demand
 
Informed & Agile: Test Driven Design w/ Jon Innes
Informed & Agile: Test Driven Design w/ Jon InnesInformed & Agile: Test Driven Design w/ Jon Innes
Informed & Agile: Test Driven Design w/ Jon Innes
 
Modular UX Process
Modular UX ProcessModular UX Process
Modular UX Process
 
UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...
UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...
UserTesting Webinar - Everything I've learned about Lean UX: AMA with Jeff Go...
 

En vedette

Effective Techniques for Measuring Your Content's Success
Effective Techniques for Measuring Your Content's SuccessEffective Techniques for Measuring Your Content's Success
Effective Techniques for Measuring Your Content's SuccessPerfetti Media
 
The Product Visioning Workshop: A Proven Method for Product Planning and Prio...
The Product Visioning Workshop: A Proven Method for Product Planning and Prio...The Product Visioning Workshop: A Proven Method for Product Planning and Prio...
The Product Visioning Workshop: A Proven Method for Product Planning and Prio...Perfetti Media
 
Creative Observations
Creative ObservationsCreative Observations
Creative ObservationsBrian Crooks
 
Social Media and Local Government - What we do and why we do it
Social Media and Local Government - What we do and why we do itSocial Media and Local Government - What we do and why we do it
Social Media and Local Government - What we do and why we do itAlastair Smith
 
Israel (Actualizada) Sct
Israel (Actualizada) SctIsrael (Actualizada) Sct
Israel (Actualizada) Sctpenderyn
 
Plavusin Poklopac
Plavusin PoklopacPlavusin Poklopac
Plavusin Poklopaczamajana
 
Presentation For ASAP Conference
Presentation For ASAP ConferencePresentation For ASAP Conference
Presentation For ASAP ConferenceMichelle Gross
 
Social Media GLAM
Social Media GLAMSocial Media GLAM
Social Media GLAMJosh Peters
 
Ufone prepaid
Ufone prepaidUfone prepaid
Ufone prepaidUfone
 
James Presentation
James PresentationJames Presentation
James PresentationTofudude
 
ALA 2013 - University of Salamanca - Academic Library Services to Internation...
ALA 2013 - University of Salamanca - Academic Library Services to Internation...ALA 2013 - University of Salamanca - Academic Library Services to Internation...
ALA 2013 - University of Salamanca - Academic Library Services to Internation...JA Merlo Vega USAL
 

En vedette (20)

Effective Techniques for Measuring Your Content's Success
Effective Techniques for Measuring Your Content's SuccessEffective Techniques for Measuring Your Content's Success
Effective Techniques for Measuring Your Content's Success
 
The Product Visioning Workshop: A Proven Method for Product Planning and Prio...
The Product Visioning Workshop: A Proven Method for Product Planning and Prio...The Product Visioning Workshop: A Proven Method for Product Planning and Prio...
The Product Visioning Workshop: A Proven Method for Product Planning and Prio...
 
Creative Observations
Creative ObservationsCreative Observations
Creative Observations
 
Social Media and Local Government - What we do and why we do it
Social Media and Local Government - What we do and why we do itSocial Media and Local Government - What we do and why we do it
Social Media and Local Government - What we do and why we do it
 
Kirli Uzlasma
Kirli UzlasmaKirli Uzlasma
Kirli Uzlasma
 
Ruke
RukeRuke
Ruke
 
Israel (Actualizada) Sct
Israel (Actualizada) SctIsrael (Actualizada) Sct
Israel (Actualizada) Sct
 
Digital
DigitalDigital
Digital
 
08lang
08lang08lang
08lang
 
Plavusin Poklopac
Plavusin PoklopacPlavusin Poklopac
Plavusin Poklopac
 
Presentation For ASAP Conference
Presentation For ASAP ConferencePresentation For ASAP Conference
Presentation For ASAP Conference
 
Water Cycle
Water CycleWater Cycle
Water Cycle
 
Social Media GLAM
Social Media GLAMSocial Media GLAM
Social Media GLAM
 
Ufone prepaid
Ufone prepaidUfone prepaid
Ufone prepaid
 
Novi Lek
Novi LekNovi Lek
Novi Lek
 
James Presentation
James PresentationJames Presentation
James Presentation
 
ALA 2013 - University of Salamanca - Academic Library Services to Internation...
ALA 2013 - University of Salamanca - Academic Library Services to Internation...ALA 2013 - University of Salamanca - Academic Library Services to Internation...
ALA 2013 - University of Salamanca - Academic Library Services to Internation...
 
Eclispe Credential 1.0
Eclispe Credential 1.0Eclispe Credential 1.0
Eclispe Credential 1.0
 
PIRC 101
PIRC 101PIRC 101
PIRC 101
 
Facts About Me
Facts About MeFacts About Me
Facts About Me
 

Similaire à Essential Techniques for Designing Delightful Web Sites

User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
How to Effectively Lead Focus Groups: Presented at Product School NYC
How to Effectively Lead Focus Groups: Presented at Product School NYC How to Effectively Lead Focus Groups: Presented at Product School NYC
How to Effectively Lead Focus Groups: Presented at Product School NYC Tremis Skeete
 
Getting Started With UX Research
Getting Started With UX ResearchGetting Started With UX Research
Getting Started With UX ResearchGilang Andi Pradana
 
D school assignment 3 Prototype and Test
D school assignment 3 Prototype and TestD school assignment 3 Prototype and Test
D school assignment 3 Prototype and TestLee-Anne Walker
 
501 Talks Tech: Design Thinking Workshop by Dupla Studios
501 Talks Tech: Design Thinking Workshop by Dupla Studios501 Talks Tech: Design Thinking Workshop by Dupla Studios
501 Talks Tech: Design Thinking Workshop by Dupla Studios501 Commons
 
Research and Design for the UX Team of One
Research and Design for the UX Team of OneResearch and Design for the UX Team of One
Research and Design for the UX Team of OneUIEpreviews
 
How to do usability testing and eye tracking
How to do usability testing and eye trackingHow to do usability testing and eye tracking
How to do usability testing and eye trackingObjective Experience
 
IXDA Chicago May 2015 : Recruiting Wunderland Judi Wunderlich
IXDA Chicago May 2015 : Recruiting Wunderland Judi WunderlichIXDA Chicago May 2015 : Recruiting Wunderland Judi Wunderlich
IXDA Chicago May 2015 : Recruiting Wunderland Judi WunderlichIxDA Chicago
 
Defining the Damn Data
Defining the Damn DataDefining the Damn Data
Defining the Damn DataJen Matson
 
Art Center Interactive Design 4 - #4 Usability Testing
Art Center Interactive Design 4 - #4 Usability TestingArt Center Interactive Design 4 - #4 Usability Testing
Art Center Interactive Design 4 - #4 Usability TestingJoy Liu
 
Building innovative products
Building innovative productsBuilding innovative products
Building innovative productsShishir Choudhary
 
Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15Shilpa Thanawala
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web SeminarExperience Dynamics
 
When Mobile meets UX/UI powered by Growth Hacking Asia
When Mobile meets UX/UI powered by Growth Hacking AsiaWhen Mobile meets UX/UI powered by Growth Hacking Asia
When Mobile meets UX/UI powered by Growth Hacking AsiaGrowth Hacking Asia
 
How to Effectively Lead a Focus Group by nexTier Product Manager
How to Effectively Lead a Focus Group by nexTier Product ManagerHow to Effectively Lead a Focus Group by nexTier Product Manager
How to Effectively Lead a Focus Group by nexTier Product ManagerProduct School
 
Usability Testing On A Digital Product
Usability Testing On A Digital ProductUsability Testing On A Digital Product
Usability Testing On A Digital ProductKyle Soucy
 
User Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with UsersUser Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with UsersLaura B
 
More Than Usability
More Than UsabilityMore Than Usability
More Than UsabilityRazan Sadeq
 

Similaire à Essential Techniques for Designing Delightful Web Sites (20)

User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
How to Effectively Lead Focus Groups: Presented at Product School NYC
How to Effectively Lead Focus Groups: Presented at Product School NYC How to Effectively Lead Focus Groups: Presented at Product School NYC
How to Effectively Lead Focus Groups: Presented at Product School NYC
 
Getting Started With UX Research
Getting Started With UX ResearchGetting Started With UX Research
Getting Started With UX Research
 
D school assignment 3 Prototype and Test
D school assignment 3 Prototype and TestD school assignment 3 Prototype and Test
D school assignment 3 Prototype and Test
 
501 Talks Tech: Design Thinking Workshop by Dupla Studios
501 Talks Tech: Design Thinking Workshop by Dupla Studios501 Talks Tech: Design Thinking Workshop by Dupla Studios
501 Talks Tech: Design Thinking Workshop by Dupla Studios
 
Intro to Lean UX with UserTesting
Intro to Lean UX with UserTestingIntro to Lean UX with UserTesting
Intro to Lean UX with UserTesting
 
Research and Design for the UX Team of One
Research and Design for the UX Team of OneResearch and Design for the UX Team of One
Research and Design for the UX Team of One
 
How to do usability testing and eye tracking
How to do usability testing and eye trackingHow to do usability testing and eye tracking
How to do usability testing and eye tracking
 
IXDA Chicago May 2015 : Recruiting Wunderland Judi Wunderlich
IXDA Chicago May 2015 : Recruiting Wunderland Judi WunderlichIXDA Chicago May 2015 : Recruiting Wunderland Judi Wunderlich
IXDA Chicago May 2015 : Recruiting Wunderland Judi Wunderlich
 
Defining the Damn Data
Defining the Damn DataDefining the Damn Data
Defining the Damn Data
 
Art Center Interactive Design 4 - #4 Usability Testing
Art Center Interactive Design 4 - #4 Usability TestingArt Center Interactive Design 4 - #4 Usability Testing
Art Center Interactive Design 4 - #4 Usability Testing
 
Building innovative products
Building innovative productsBuilding innovative products
Building innovative products
 
Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
 
When Mobile meets UX/UI powered by Growth Hacking Asia
When Mobile meets UX/UI powered by Growth Hacking AsiaWhen Mobile meets UX/UI powered by Growth Hacking Asia
When Mobile meets UX/UI powered by Growth Hacking Asia
 
How to Effectively Lead a Focus Group by nexTier Product Manager
How to Effectively Lead a Focus Group by nexTier Product ManagerHow to Effectively Lead a Focus Group by nexTier Product Manager
How to Effectively Lead a Focus Group by nexTier Product Manager
 
Usability Testing On A Digital Product
Usability Testing On A Digital ProductUsability Testing On A Digital Product
Usability Testing On A Digital Product
 
User Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with UsersUser Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with Users
 
UX Research Methodologies
UX Research MethodologiesUX Research Methodologies
UX Research Methodologies
 
More Than Usability
More Than UsabilityMore Than Usability
More Than Usability
 

Dernier

AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 

Dernier (20)

AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 

Essential Techniques for Designing Delightful Web Sites

  • 1. Essential Techniques for Designing Delightful Web Sites Christine Perfetti, Acquia Twitter: @cperfetti
  • 2. What makes a delightful design?
  • 3. 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
  • 4.
  • 5.
  • 6.
  • 7.
  • 9. 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
  • 10. Essential Techniques for Designing Delightful Web Sites
  • 11. Focus on techniques and tricks
  • 13. Test early and often
  • 14. Traditional usability tests A usability test involves putting your users in front of your product and observing what they do
  • 15. Not enough time No resources and staff No money No buy-in from management Unsure where to start Testing is too scientific The Excuses
  • 16.
  • 17. Running a test session Greet 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
  • 20. 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
  • 21. 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
  • 22.
  • 23.
  • 24. 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
  • 25.
  • 26.
  • 27. 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
  • 28.
  • 29.
  • 30. Not for the home page
  • 31. Research Question How do we measure the success of the home page?
  • 32.
  • 33. 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
  • 34.
  • 35.
  • 36.
  • 37. Start with the problem, not the solution
  • 39. Visit users in their natural environment
  • 40. Visit users in their natural environment
  • 41. 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
  • 42. 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
  • 43. Understand the user workflow and frustration
  • 44. It’s about the experience, not the features
  • 45. Observe your users’ workflow in a realistic way Identify the frustration and pain points Tackle the problem areas Don’t redesign everything all at once Chunk the work Focus on the user’s journey
  • 46. The 7-11 Milk Experiment
  • 47. 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
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 63. Involve all members of the development team
  • 64. 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
  • 65. Product management Engineering UX Who should be on the product team? Marketing Support Legal Sales
  • 66.
  • 67.
  • 69. 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
  • 70.
  • 71.
  • 73. “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/
  • 74. 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
  • 75. 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
  • 76.
  • 77. Paper Prototyping by Carolyn Snyder
  • 79.
  • 80.
  • 81. Hire the right people
  • 82. 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
  • 83. Team player Collaborative Listen to others’ constraints Receptive to feedback Immersed in user research Understands the problem What we look for