Usability and Form Design - University of Calgary
- 1. Internet Marketing and Social Media – Course # BMC - 291- 001 Usability and Form Design
- 2. What is Bad Design? Tries to talk itself out of the problem…
- 3. What is Bad Design? WARNING…could cause seizures.
- 4. What is Bad Design? WARNING…could cause seizures.
- 5. What is Good Design? …effectively anticipates and works with behaviours as they emerge and evolve…
- 6. What is Good Design? …works with natural human cognition and anticipates actual human scenarios and stories…
- 7. What is Good Design? …doesn’t overcomplicate things…
- 8. “A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman What is Good Design?
- 9. “Homepages are the most valuable real estate in the world…Complexity or confusion make people go away”. Jakob Neilsen (www.useit.com) What is Good Design?
- 10. “Usability: denotes the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal.” (http://en.wikipedia.org/wiki/Usability)
- 11. User Experience… Is about how it makes you feel…
- 12. User Experience… is more than ‘ease of use’… Usability Functionality Content Branding
- 13. How do you get from here…
- 14. To here…
- 15. You are not the user and neither is your boss… 1. The User is always Right
- 16. WTH???!!!! 2. Understand the User
- 17. Target Audience Definition 2. Understand the User
- 18. •18 User and Task Analysis 2. Understand the User
- 19. People Objectives Strategies Technology Janice CHU 28 years old, married, expecting her first child, HR manager, Calgary, Alberta First – Timer My name is Janice Chu and my husband’s name is Tom. We both grew up in Calgary and went to university here. We’ve been married for two years. I’m an HR manager for an Oil & Gas company and Tom is a pharmaceutical sales representative. We feel that Calgary is a great place to live and raise children, but we are having trouble finding a home in Calgary’s marketplace. Since we are expecting our first child, we are now looking at the world through the eyes of our children. This includes where and how we live. After renting an apartment downtown, we are looking to buy our first home. Since we are first – time buyers, we are a little nervous about purchasing. We also don’t know a lot about maintaining a house, so we are looking for something brand new with few hassles. We began our search for a new home on the web, and we look for trustworthy sources, such as www.mls.ca. We have been in touch with a real estate agent who is a friend of Tom’s dad, but we are also doing our own research. We find the whole process overwhelming, so we are looking for information that is easy to understand. We both grew up in the suburbs, so we are comfortable living outside the city center. We’ve heard some good things about McKenzie Towne, so we’re looking to buy there. “I want to feel confident knowing that we’re making the right decision” Attributes: – Currently living downtown in a rented condo – Intermediate Internet user – Interests: friends, travelling, yoga, cooking Goals: – Starting a family – Owning a home without a lot of hassles – Get the best value for money – Get recommendations from trusted sources – Living in a safe and fun environment Insights: – Look for value in their purchase – Joint decision – making process – Need to know how their new home’s features will simplify and benefit their lives – location, safety, layout, household appointments, local amenities Other brands in Janice’s life: Everyday brands: ‘Aspirational’ brands: Persona Creation 2. Understand the User
- 20. FAIL! 3. Plan Before you Design
- 21. 3. Plan Before you Design People Objectives Strategies Technology Competitive Analysis
- 22. Information Architecture 3. Plan Before you Design
- 23. Wireframes 3. Plan Before you Design
- 24. What are you trying to measure? 4. Understand your Goal
- 25. Corporate vs. User Goals Key Performance Indicators 4. Understand your Goal Targeted Core Users Business Strategy Enabling Technology Key Performance Indicators
- 26. Corporate vs. User Goals − Organizational Effectiveness − Convert sales and transactions to lower cost channels (cost per interaction) − Lead Generation and Qualification − Deeper Customer Insight − One-to-one Marketing Organization Users − Ease of Use − Clarity around how I can accomplish my goals. − “I just want to the buy the darn thing” − Don’t make me use more than one channel (or experience) to accomplish my goals. − Customer Delight User Goals 4. Understand your Goal
- 27. Corporate vs. User Goals Identify and fully understand problems before finding solutions 5. Avoid Solutioneering
- 28. •28 “Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union.” Frank Lloyd Wright 6. Form Follows Function
- 29. What is the best way for the user to interact? 6. Form Follows Function
- 30. 95% of users don’t read 80% of your content 7. Content is King
- 31. •31 Content auditing and mapping 7. Content is King
- 32. •32 Once they’ve got you, they’ve got you… 8. Persuasive Design
- 33. •33 Designing Seductive Interactions 8. Persuasive Design
- 34. •34 Guide the user to the ‘desired outcome’ using scarcity and visual cues 8. Persuasive Design
- 35. Don’t forget mobile… 9. Access is for Everyone
- 36. •36 10. Learn From Failure
- 37. •37 Split Testing 10. Learn From Failure
- 38. •38 Usability Testing 10. Learn From Failure
- 39. 10 Steps to User Experience User is always Right Understand the User Plan Before you Design Understand Your Goal Avoid Solutioneering Form Follows Function Content is King Persuasive Design Access is for Everyone Learn From Failure
- 41. Why do you make us wait? The Importance of Form Design
- 42. •42 The Importance of Form Design Forms make or break the most crucial online interactions: checkout (commerce), registration (community), data input (participation and sharing), and any task requiring information entry.
- 43. •43 Gradual Engagement Make the process transparent and not overwhelming…
- 44. Required Information Fields Beware Bad Buttons
- 46. Get your chicken s**t together Form FAIL!
- 47. Phone number. Seems reasonable. Form FAIL!
- 49. Error handling. So, I screwed up. Quelle surprise. Form FAIL!
- 50. Postal Code?!! Really? When do I get my chicken? Form FAIL!
- 52. Field Length • Use field length as a visual guide (affordance) • Otherwise, consider consistent length that provides enough room for all inputs Content Grouping • Use relevant content groupings to organize forms Actions • Avoid secondary actions (expand options, go back) • Align primary actions with input fields for clear path to completion Label position • Top Aligned labels for reduced competition times • Right aligned when vertical screen is limited • Left alignment for complex data entry Required Form Fields • Avoid Optional fields • If MOST fields are required: Indicate optional fields • If MOST fields are optional: Indicate require fields • Associate indicators with labels Form Checklist
- 53. Progressive Disclosure • Not all users require all available options all the time • Progressive disclosure provides additional options when appropriate Feedback • Inline validation to provide assistance • Errors should indicate and provide clear resolution • Provide feedback when action is in progress • Verification of success Path to Completion • Remove all unnecessary data requests • Illuminate a clear path to completion • Employ flexible data entry • Enable smart defaults • Show progress & save on long forms Help & Tips • Monitor usage of help and tips (user activated exposure) • Recommend ways of providing data Tabbing • Remember to account for tabbing behaviors • Ensure tabbing works as expected Form Checklist
- 54. • Focus on the end of the conversion funnel • Optimize site copy, titles and labels to improve SEO • Add Location Cues > the user knows where they are on the site • Eliminate unused content • Prevent ‘No results’ site keyword searches • Prioritize home page content to align with user goals and increase cross-sell opportunities • Put key functionality on the home page • Tweak the location and appearance of key buttons Optimization
- 55. Questions… Credits: Nick Finck & Raina Van Cleave: http://www.slideshare.net/nickf/the-ten-commandments-of-user- experience Organizing for Site Optimization, Joe Stanhope, August 2010, Forrester Research Small Web Site Investments That Pay Off by Adele Sage,with Harley Manning and Andrew McInnes, August 2008 Forrester Research
- 56. Contact Me: john@consultconiferous.ca twitter: @john_hutchings linkedin.com/in/johnhutchings consultconiferous.ca Credits & Suggested Readings User Experience Design Form Design Books: • Steve Krug, “Don’t Make Me Think” • Jesse James Garrett, “The Elements of User Experience” • UX books: smashingmagazine.com/2008/01/24/usability-and- interface-design-books/ Sites: • Boxesandarrows.com • Adaptivepath.com • Jjg.net • Xplane.com • Lukew.com • Ewardtufte.com • Backofthenapkin.com Twitter: • @davegray • @sunnibrown • @@brandonschauer Books: Luke Wrobleski, “Web Form Design, Filling in the Blanks” Sites: About the Challenge Disaster: Edward Tufte: edwardtufte.com/bboard/q-and-a-fetch- msg?msg_id=0001yB Twitter: • @lukew • @use_this • @smashingmag • @mikaellindh
Editor's Notes
- #10: “Homepages are the most valuable real estatein the world. Millions of dollars are funneled through a space that's not even a square foot in size. The homepage is also your company's face to the world. Potential customers look at your company's online presence before doing any business with you. Complexity or confusion make people go away”. Jakob Nielsen (www.useit.com)
- #30: Status and visibility
- #34: http://www.uie.com/brainsparks/2010/10/28/learn-from-the-master-of-designing-seductive-interactions/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+indyusability+%28Usability+News+with+Brandon+Corbin%29http://www.uie.com/articles/scarcity/
- #35: http://www.uie.com/brainsparks/2010/10/28/learn-from-the-master-of-designing-seductive-interactions/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+indyusability+%28Usability+News+with+Brandon+Corbin%29
- #43: http://www.flickr.com/people/franck-chilli/
- #44: http://www.flickr.com/people/franck-chilli/
- #47: (First) nameOrderAddressPhone # (for follow up)Payment information
- #50: I in almost 10 won’t be able to see these differences.