Essential Techniques for Designing Delightful Web Sites
2 likes1,453 views
The document discusses essential techniques for designing delightful web sites. It emphasizes starting with user research to understand needs and pain points, testing designs early and often through methods like paper prototyping, and measuring and iterating based on user feedback. Key techniques include field studies to observe users in their environment, usability testing, the first click test to see where users look on a homepage, and involving representatives from different teams in design workshops. The goal is to focus on the user experience, tackle problems, and learn through regular measurement and feedback.
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
- 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
- 12. Methodology! Process! Techniques! 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
- 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
- 19. Test quickly
- 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
- 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
- 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
- 30. Not for the home page
- 31. Research Question How do we measure the success of the home page?
- 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
- 37. Start with the problem, not the solution
- 38. Understand your users’ pain points
- 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
- 61. The Journey Map
- 62. Back button Pogosticking Search 3 signs of failure
- 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
- 68. Generate multiple concepts and ideas
- 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
- 72. Measure and learn early
- 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
- 77. Paper Prototyping by Carolyn Snyder
- 78. Measure and learn regularly: URTH & SURF
- 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