Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design for Good or Evil. World Usability Day & Limina

85 views

Published on

When it comes to good user experience, there is good design, unintentionally bad design and then there is evil design. Limina takes a look at what exactly makes design go from bad to evil. Good vs Evil in UX

Published in: Design
  • Justin Sinclair has helped thousands of menget their Ex girlfriends back using his methods. Learn them at here●●● http://ow.ly/mOLD301xGxr
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Design for Good or Evil. World Usability Day & Limina

  1. 1. DESIGN FOR GOOD OR EVIL brought to you by Limina
  2. 2. Agenda Evil Design Good Design Problem Solving Design Sprint Workshop
  3. 3. “Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.”- Don Norman
  4. 4. What makes design good? “Good design is one that fills the gap between business goals and user needs. In order to fill this gap, a process must be followed. A process that takes into consideration best practices of user experience (UX) and usability guidelines to produce the desired outcome. Good design is one that is tailored for the human use, and not one that is only functional or usable. A good designer knows how to get into the mindset of his users, and turns their needs into a meaningful, desirable, and easy-to-use product or service.” Quote from “Good Design vs. Bad Design: Examples from Everyday Experiences” on UX Collective https://uxdesign.cc/good-design-vs-bad-design-examples-from-everyday-experiences-18a7d1ba002c
  5. 5. EVIL DESIGN
  6. 6. What makes design evil? “Tricks used in websites and apps that make you buy or sign up for things that you didn’t mean to.” www.darkpatterns.org
  7. 7. Dark Pattern Works… in its own way Productive for one party Exploits human weaknesses Carefully crafted Difficult to identify Not always intentional Doesn’t Work Counter-productive Plain bad design Poorly executed Easily identified metrics Never intentional Anti-Pattern VS
  8. 8. 12 Different Types of Dark Patterns 1. Bait and Switch 2. Confirmshaming 3. Disguised Ads 4. Forced Continuity 5. Friend Spam 6. Hidden Costs 7. Sneak into Basket 8. Misdirection 9. Price Comparison Convention 10. Privacy Zuckering 11. Roach Motel 12. Trick Questions
  9. 9. Bait and Switch You set out to do one thing, but a different, undesirable thing happens instead. Ex. Confusing buttons on a modal that you have to interact with the move forward. When a mobile ad appears a few seconds after the page loads.
  10. 10. Confirmshaming Confirmshaming is the act of guilting the user into opting into something. The option to decline is worded in such a way as to shame the user into compliance. Ex. The most common use is to get a user to sign up for a mailing list.
  11. 11. Disguised Ads Adverts that are disguised as other kinds of content or navigation, in order to get you to click on them. Ex. Huge download buttons on an ad that have nothing to do with the rest of the page.
  12. 12. Forced Continuity When your free trial with a service comes to an end and your credit card silently starts getting charged without any warning. In some cases this is made even worse by making it difficult to cancel the membership. Ex. Many subscription based companies do this like Netflix, Blue Apron, The Honest Company.
  13. 13. Friend Spam The product asks for your email or social media permissions under the pretence it will be used for a desirable outcome (e.g. finding friends), but then spams all your contacts in a message that claims to be from you. Ex. LinkedIn does this by trying to get you to connect with all of your contacts after confirming one connection. The primary button is to add all connections.
  14. 14. Hidden Costs You get to the last step of the checkout process, only to discover some unexpected charges have appeared, e.g. delivery charges, tax, etc. Ex. GoDaddy does this when buying domains. The site offers the user one price in the beginning but by the time they check out, the price increases exponentially.
  15. 15. Sneak into Basket You attempt to purchase something, but somewhere in the purchasing journey the site sneaks an additional item into your basket, often through the use of an opt-out radio button or checkbox on a prior page. Ex. Sites will sneak this in at the last second before the user hits “Place Order”. User has to remove the item in order to avoid the extra charge.
  16. 16. Misdirection The design purposefully focuses your attention on one thing in order to distract you attention from another. Ex. Hidden extra costs that are preselected for you but you can avoid if you hit “skip”.
  17. 17. Price Comparison Prevention The retailer makes it hard for you to compare the price of an item with another item, so you cannot make an informed decision. Ex. Site doesn’t include how much of something you’ll be getting, so you can’t figure out comparing what the final cost will be.
  18. 18. Privacy Zuckering You are tricked into publicly sharing more information about yourself than you really intended to. Named after Facebook CEO Mark Zuckerberg. Ex. When you sign up for anything using Facebook. Hidden private terms and conditions.
  19. 19. Roach Motel The design makes it very easy for you to get into a certain situation, but then makes it hard for you to get out of it (e.g. a subscription). Ex. When you sign up for a service online then try to cancel your subscription, only to find that you have to phone the company to do so. Or if you order something and have to jump through hoops to return it.
  20. 20. Trick Questions You respond to a question, which, when glanced upon quickly appears to ask one thing, but if read carefully, asks another thing entirely. Ex. This happens a lot when users are agreeing to terms and conditions when creating an account for a website
  21. 21. Evil UX Awards
  22. 22. Evil UX patterns can occur in real life too...
  23. 23. Real Life Examples ● Parking signs ● Service fees on tickets ● Speed traps ● Door handles
  24. 24. Real Life Examples
  25. 25. Real Life Examples
  26. 26. Bad UX + Art An artist by the name Katerina Kamprani shows us with “The Uncomfortable”, examples of bad UX with a series of familiar household objects rendered aggravatingly unusable with a few simple adjustments.
  27. 27. GOOD DESIGN
  28. 28. Jakob Nielsen’s ‘10 General Principles for Interaction Design.’ 1. Visibility of system status. 2. Match between system and the real world. 3. User control and freedom. 4. Consistency and standards. 5. Error prevention. 6. Recognition rather than recall. 7. Flexibility and efficiency of use. 8. Aesthetic and minimalist design. 9. Error recovery. 10. Help and documentation.
  29. 29. Predictable Consequences The actions you take have predictable and desired consequences. Ex. Easily visible buttons with clear text to set expectations, common and consistent interaction patterns, an understanding and reflection of the most likely user path.
  30. 30. Meets the User’s Needs + The interaction not only allows you, but helps you achieve your goal as a user, hopefully with a bit of delight. “If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful.” - Alan Cooper littlebigdetails.com Ex. If you leave a slack channel before sending the text you wrote, the # turns into a edit pencil icon. Google Forms can tell if you will want checkbox by the words in your question.
  31. 31. Clear Navigation & Organization - No Cul de sacs Clear nav. is fundamental to a good experience and key in accessibility success. Good nav design also keeps users from becoming stuck somewhere which can lead to frustration & abandonment. Ex. The U.S. Web Design System side nav. component tells the user what page they are, where that page lives in the hierarchy of the this section of architecture and when labeled prescriptively, it can tell the user what type of info is to be found on each page
  32. 32. User Control and Freedom There is a reason why “empowering the user” is commonly heard when discussing UX best practices. Even offboarding is a good chance to improve users experience, empowering not only the user, but your brand and reputation as well. Ex. Clear and easy to use cancellation flows, unsubscribes and customer service links readily available, undo, user customization uxplanet.org
  33. 33. Error Prevention, Error Recovery & Help “Users hate errors, and even more so hate the feeling that they themselves have done something wrong. Either eliminate error-prone conditions or check for them and notify users about that before they commit to the action.” https://uxplanet.org/golden-rules-of-user-interface-design-19282aeb06b Ex. Testing to inform decisions to help prevent interaction pain- points that could cause errors, error checking and user feedback to help correct errors, and no dead end error states.
  34. 34. Minimal Design Aesthetic Minimalism isn’t the same as simplicity. Minimal UI is about making screens as simple as they need to be. “Minimalism is a perfect marriage of form and function. It’s greatest strength is clarity of form — clean lines, generous whitespace, and minimal graphical elements brings simplicity to even the most confounding subject matter. That is, of course, if it’s used effectively.” -Nick Babich Ex. Use of whitespace, clear visual hierarchy, large readable text, use of color and icons to organize information.
  35. 35. Flexible, Efficient, Consistent System Often including a symbol library or component library combine the concepts of consistency, predictability, clarity through minimalism. Ex. Standardized buttons, dropdowns, models, list styles, etc (including all states). Google’s Material Design is a good example of such a library
  36. 36. Real Life Examples
  37. 37. User Trust There is a reason why the UX industry is ripe with practices like empathy mapping and user journeys. There is a real person using your service, product or app and they are doing so because you are offering something they want or need. Users are smart, the moment we forget or worse try to exploit their motivations is the moment we lose them. Trust is hard-won, but rebuilding user trust after hurting it is close to impossible. Comcast’s reputation as a huge internet provider with horrible customer service (i.e. horrible support UX) was so ingrained (they lost over 600,000 customers in 2009), they had to change their entire brand in hopes of regaining customer good will.
  38. 38. RESOURCES
  39. 39. Resources & Tools: WCAG Compliance ● WCAG 2.0 checklists and explanations ○ www.wuhcag.com/wcag-checklist/ ● Plugins ○ Browser plugins like Chrome Color Contrast Analyzer ○ Sketch plugins like Stark ● Online testing tools ○ DYNOMAPPER.COM ○ A11Y COMPLIANCE PLATFORM ○ Many more available ● User Testing “[Testing tools alone] cannot tell you if your web content is accessible. Only a human can determine true accessibility ”
  40. 40. Resources: U.S. Digital Service & Web Design System The U.S. Web Design system of UI components are designed to set a new bar for simplicity and consistency across government services, while providing you with plug-and-play design and code. They also address many aspects of accessibility and WCAG requirements. U.S. Web Design System V2 now in beta https://v2.designsystem.digital.gov/components/
  41. 41. Striving to Go Beyond Good to Noble Why focus on UX at all? Are you in it purely to win the business of users, are you trying just “beat your competitors”? Or… are you looking to truly improve and enhance the lives of your users… maybe even go beyond that to become meaningful to the lives of your users, and be a source of happiness in their lives? There was a TEDx MidAtlantic talk by Joel Salatin who summed up his talk with the following statement: “When you strive for nobility in your given vocation, the world will rise to meet you.” no·bil·i·ty/nōˈbilədē/ noun. the quality of being noble in character or mind. synonyms: virtue, goodness, honor, decency, integrity; magnanimity, generosity, selflessness "the nobility of his/her deed" Abraham Maslow https://en.wikipedia.org/wiki/Abraham_Maslow
  42. 42. FUNCTIONAL
  43. 43. FUNCTIONAL RELIABLE USABLE
  44. 44. FUNCTIONAL RELIABLE USABLE CONVENIENT PLEASURABLE MEANINGFUL
  45. 45. FUNCTIONAL RELIABLE USABLE CONVENIENT PLEASURABLE MEANINGFUL
  46. 46. WORKSHOP
  47. 47. UX Design Sprint Workshop
  48. 48. Design Sprints: In a Nutshell A design sprint is a time-bound, six-part process that uses design thinking with the purpose of limiting risk when bringing a new product, service or feature to the market. It follows six phases: 1. Understand 2. Define 3. Sketch 4. Decide 5. Prototype 6. Validate https://designsprintkit.withgoogle.com
  49. 49. Select a Problem (3 min) Divide into teams of 2-3. Choose a one of our example UX problems to tackle for your design sprint, or, you can tackle one of your own.
  50. 50. Mind Mapping (10 min) Create a high-level overview of all the user tasks and subtasks associated with a product. ● Start high-level ● Expand your branches ● Focus on user needs
  51. 51. Crazy 8s (8 min) Divide your paper into 8 sections, and sketch 8 ideas. ● Rough sketches are ok! ● All 8 sketches can be towards 1 idea or individual ideas
  52. 52. Discussion & Voting (10 min) After sketching, you have a few minutes to discuss your ideas. Then, each person can vote on the 3 best ideas. ● Keep discussion to 3 minutes or less per person ● Each team member uses their dots to denote what they think the top 3 compelling ideas are ● You can use your all your votes on one idea
  53. 53. Solution Sketching (10 min) Based on the top 3 ideas coming out of Crazy 8s voting, create a more detailed sketch of a single idea. ● Include a couple states of your sketch to help illustrate functionality or flows
  54. 54. Storyboarding (10 min) Select which solution sketch your group would like to storyboard. Then, visually show the steps that a user would take to interact with the product. ● Keep to 1 frame per user task
  55. 55. Present (20 min) Give a quick overview of your problem and your final outcomes from your design sprint.
  56. 56. Please share your social media posts including #locowudUP
  57. 57. Thank You
  58. 58. About Event Organizers World Usability Day LOCO | UX Limina World Usability Day is single day of events occurring around the world that brings together communities of professional, industrial, educational, citizen, and government groups for our common objective: to ensure that the services and products important to life are easier to access and simpler to use. This group is for Longmont UX / UI professionals to get together to discuss tools, tips, techniques and trends in user experience. This meetup will be used to organize happy hours, presentations, civic-tech UX workshops, and more. Technical & UX Leadership for Complex Systems We work with startups, enterprise businesses, and government agencies to lead design and integrated UX for complex user-centered systems

×