Essential Techniques forDesigning Delightful Web SitesChristine 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 joyDeliver...
What goes wrong?
It’s not about the big ideaThe best products and designs aren’t created by onebrilliant person or teamSuccess comes from:U...
Essential Techniques forDesigning Delightful Web Sites
Focus on techniques andtricks
Methodology! Process! Techniques! Tricks!
Test early and often
Traditional usability testsA usability test involvesputting your users in frontof your product andobserving what they do
Not enough timeNo resources and staffNo money No buy-in from managementUnsure where to startTesting is too scientificThe Ex...
Running a test sessionGreet the userIntroduce user to observersExplain to user how the test will workGive the user tasks t...
Start testinganywhere
Test quickly
Quick and dirty technique for measuring contentpagesTakes less than 10 minutes to runMeasures if content pages quickly con...
You want to post pictures online from your last vacationYou are concerned that the upload process will bedifficultHow confid...
You want to post pictures online from your last vacationYou are concerned that the upload process will bedifficultHow confid...
You want to post pictures online from your last vacationYou are concerned that the upload process will bedifficultHow confid...
Not for the home page
Research QuestionHow do we measure the success ofthe home page?
Trick: First Click TestUseful method to assess where users first click onyour site’s home or entry pageProvide users with a...
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 gatheringinformation about users’ goals, needs, desires, andmotivationsWhat we lear...
Understanding of work environmentTasks that users haven’t talked aboutPain points and user frustration“Cheat sheets”Eviden...
Understand the userworkflow and frustration
It’s about the experience, not the features
Observe your users’ workflow in a realistic wayIdentify the frustration and pain pointsTackle the problem areasDon’t redesi...
The 7-11 Milk Experiment
Mirrors the 7-11 Milk ExperimentClosely approximately a realistic scenarioAllows us to assess the usability of our designs...
The Journey Map
Back buttonPogostickingSearch3 signs of failure
Involve all members of thedevelopment team
Someone on the product team didn’t know somethingthey should have knownIf they had known, they would have designed theprod...
Product managementEngineeringUXWho should be on the product team?MarketingSupportLegalSales
Generate multipleconcepts and ideas
Two-day collaborative workshop with key representationfrom Engineering, Marketing, Product, UX, CustomerSupport, SalesPres...
Measure and learn early
“We’re building a what with what?”Heather O’Neill, Above the Foldhttp://www.abovethefolddesign.com/blog/2010/08/24/from-pa...
Tests can happen early• Paper prototype tests typically happen during thefirst two weeks of development and involves alltea...
Building a paper prototype• The paper prototype consists of:• A “screen” (large cardboard or paper rectangle)• Separate pi...
Paper Prototyping by Carolyn Snyder
Measure and learnregularly: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 beab...
Team playerCollaborativeListen to others’ constraintsReceptive to feedbackImmersed in user researchUnderstands the problem...
Questions?Twitter: @cperfettichristine.perfetti@acquia.com
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Essential Techniques for Designing Delightful Web Sites
Upcoming SlideShare
Loading in...5
×

Essential Techniques for Designing Delightful Web Sites

950

Published on

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
950
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Essential Techniques for Designing Delightful Web Sites

  1. 1. Essential Techniques forDesigning Delightful Web SitesChristine Perfetti, Acquia Twitter: @cperfetti
  2. 2. What makes a delightful design?
  3. 3. What is a delightful design?What makes a delightful design?Emotional connection: Gives users great pleasure and joyDelivers value and benefit: Accomplishes users’ goals and goesbeyond their basic expectations• What it’s not:• A magic bullet• Bells and whistles• Sizzle or sexiness
  4. 4. What goes wrong?
  5. 5. It’s not about the big ideaThe best products and designs aren’t created by onebrilliant person or teamSuccess comes from:Understand what users want to accomplishIdentify the pain pointsStumble and constructively failMeasure, learn, and iterate
  6. 6. Essential Techniques forDesigning Delightful Web Sites
  7. 7. Focus on techniques andtricks
  8. 8. Methodology! Process! Techniques! Tricks!
  9. 9. Test early and often
  10. 10. Traditional usability testsA usability test involvesputting your users in frontof your product andobserving what they do
  11. 11. Not enough timeNo resources and staffNo money No buy-in from managementUnsure where to startTesting is too scientificThe Excuses
  12. 12. Running a test sessionGreet the userIntroduce user to observersExplain to user how the test will workGive the user tasks to complete and observe problemsthey experienceGeneral Q&ADebrief with observers
  13. 13. Start testinganywhere
  14. 14. Test quickly
  15. 15. Quick and dirty technique for measuring contentpagesTakes less than 10 minutes to runMeasures if content pages quickly convey theirpurposeTrick: 5 second test
  16. 16. You want to post pictures online from your last vacationYou are concerned that the upload process will bedifficultHow confident are you that you can upload photosquickly and easily?Sharing Your Pictures Online
  17. 17. You want to post pictures online from your last vacationYou are concerned that the upload process will bedifficultHow confident are you that you can upload photosquickly and easily?Sharing Your Pictures Online
  18. 18. You want to post pictures online from your last vacationYou are concerned that the upload process will bedifficultHow confident are you that you can upload photosquickly and easily?Sharing Your Pictures Online
  19. 19. Not for the home page
  20. 20. Research QuestionHow do we measure the success ofthe home page?
  21. 21. Trick: First Click TestUseful method to assess where users first click onyour site’s home or entry pageProvide users with a specific task to complete whenthey arrive at the siteBy observing where users first click, it’s a clearindicator whether they’ll eventually be successful
  22. 22. Start with the problem,not the solution
  23. 23. Understand your users’ pain points
  24. 24. Visit users in their natural environment
  25. 25. Visit users in their natural environment
  26. 26. A field study is the best technique for gatheringinformation about users’ goals, needs, desires, andmotivationsWhat we learnUser frustration and problemsHow technology fits into users’ lifeUnderstanding of users’ goals and most important tasksDiscovery starts with field studies
  27. 27. Understanding of work environmentTasks that users haven’t talked aboutPain points and user frustration“Cheat sheets”Evidence of technology that isn’t working for the userWhat to look for
  28. 28. Understand the userworkflow and frustration
  29. 29. It’s about the experience, not the features
  30. 30. Observe your users’ workflow in a realistic wayIdentify the frustration and pain pointsTackle the problem areasDon’t redesign everything all at onceChunk the workFocus on the user’s journey
  31. 31. The 7-11 Milk Experiment
  32. 32. Mirrors the 7-11 Milk ExperimentClosely approximately a realistic scenarioAllows us to assess the usability of our designs andidentify the pain pointsCompelled Shopping Study
  33. 33. The Journey Map
  34. 34. Back buttonPogostickingSearch3 signs of failure
  35. 35. Involve all members of thedevelopment team
  36. 36. Someone on the product team didn’t know somethingthey should have knownIf they had known, they would have designed theproduct differentlyAnyone who has information that can inform designdecisions should be involvedThe cause of all usability problems
  37. 37. Product managementEngineeringUXWho should be on the product team?MarketingSupportLegalSales
  38. 38. Generate multipleconcepts and ideas
  39. 39. Two-day collaborative workshop with key representationfrom Engineering, Marketing, Product, UX, CustomerSupport, SalesPresent problem to tackleTeams design in short time boxesPresent conceptsCritiqueIterate: Lather, rinse, repeatDesign Studio
  40. 40. Measure and learn early
  41. 41. “We’re building a what with what?”Heather O’Neill, Above the Foldhttp://www.abovethefolddesign.com/blog/2010/08/24/from-paper-to-prototype/
  42. 42. Tests can happen early• Paper prototype tests typically happen during thefirst two weeks of development and involves allteam members• Design is in flux• Development team needs to try ideas and getfeedback quickly• All team members can participate in the study• Allows design teams to go through multiple designiterations in a week
  43. 43. 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 ofthe computer by placing pieces of paper in front ofthe user
  44. 44. Paper Prototyping by Carolyn Snyder
  45. 45. Measure and learnregularly:URTH & SURF
  46. 46. Hire the right people
  47. 47. Communication is a core competency“The most important baseline skill for any position is communication.We want you to beable to explain what you mean; we want you to be articulate. If you don’t have excellentcommunication skills it’s going to be very frustrating for you and for other people.”Phil Libin, CEO, Evernote
  48. 48. Team playerCollaborativeListen to others’ constraintsReceptive to feedbackImmersed in user researchUnderstands the problemWhat we look for
  49. 49. Questions?Twitter: @cperfettichristine.perfetti@acquia.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×