HCI101 - Dark Patterns (Deceptive Design
- 1. DARK PATTERNS DARK PATTERNS IN UX DESIGN: DECEPTION BY DESIGN HCI101 JASPER M. GARCIA, MIT
- 2. LESSON OBJECTIVES 01 04 02 05 03 DEFINE WHAT A DARK PATTERN IS IN UX/UI DESIGN. UNDERSTAND THE ETHICAL AND USABILITY IMPLICATIONS OF USING DECEPTIVE DESIGN. IDENTIFY COMMON TYPES OF DARK PATTERNS. EVALUATE HOW ETHICAL UX ALTERNATIVES CAN BUILD TRUST AND IMPROVE DESIGN. RECOGNIZE EXAMPLES OF DARK PATTERNS IN EVERYDAY APPS/WEBSITES. By the end of this session, students should be able to:
- 3. Have You Ever Been Tricked by an App?
- 4. DARK PATTERNS Harry is a distinguished user experience (UX) director, passionately committed to exposing deceptive design practices. Harry is the author of the book Deceptive Patterns and from time to time he works as an expert witness in lawsuits that involve deceptive patterns. DR. HARRY BRIGNULL FOUNDER OF THE DECEPTIVE PATTERNS INITIATIVE & EXPERT WITNESS
- 5. DARK PATTERNS “Dark patterns are deceptive design choices that trick users into taking actions they didn’t intend.” — Harry Brignull (2010) DARK PATTERNS ARE DECEPTIVE BY DESIGN. They are not mistakes or bugs — they are intentionally built to manipulate user behavior. THE GOAL IS USUALLY TO BENEFIT THE BUSINESS, NOT THE USER. This could mean getting more sign-ups, collecting more personal data, prolonging subscriptions, or increasing ad clicks — even if it harms the user experience. THEY APPEAR IN MANY DIGITAL CONTEXTS: E-commerce sites (e.g., hiding costs, upselling) Mobile apps (e.g., sneaky subscription renewals) Social media (e.g., hiding privacy controls) Web forms (e.g., pre-checked boxes for email marketing)
- 6. WHY DO COMPANIES USE DARK PATTERNS? To increase conversions or sign-ups To collect more data for marketing or ads To trap users into subscriptions To keep users engaged longer Often used under business pressure
- 7. HOW DO DARK PATTERNS WORK? Dark patterns exploit cognitive biases and mental shortcuts that affect decision-making COMMON MANIPULATION TECHNIQUES: Hiding important information Pre-checking boxes Reversing logic in choices Distracting with color or layout hierarchy
- 8. Persuasive Design Depective Design Encourages action (e.g., sign-up) Tricks users into action Clearly offers opt-in and opt-out Hides or confuses opt-out Builds long-term trust Sacrifices trust for short-term gains Example: Reminder for cart item Example: Auto-add items to cart PERSUASIVE DESIGN VS DEPECTIVE DESIGNS
- 9. Ethical UX Design Dark Pattern Design Transparent choices Hidden intentions Clear and respectful language Guilt or fear tactics Easy to opt out Hard to cancel or unsubscribe Honest interactions Misleading controls or layout ETHICAL UX VS DARK PATTERNS
- 10. Confirmshaming Trick Questions Disguised Ads Roach Motel THE 8 COMMON DARK PATTERNS Hidden Costs Forced Continuity Bait and Switch Privacy Zuckering
- 11. ROACH MOTEL Easy to get into a situation (e.g., sign-up), but hard to get out (e.g., cancel) Example: Free trial subscriptions that require multiple steps to cancel Ethical Fix: Provide a clear, simple cancel button; send reminders
- 12. PRIVACY ZUCKERING Tricking users into sharing more personal information than intended Example: Facebook default settings making your post public Ethical Fix: Clear privacy settings; opt-in instead of opt-out
- 13. CONFIRMSHAMING Guilt-tripping users into compliance Example: "No thanks, I prefer to stay boring" Ethical Fix: Use neutral, respectful language for opt-out choices
- 14. HIDDEN COSTS Revealing extra charges at the end of a transaction Example: Airline websites adding taxes and service fees at the last step Ethical Fix: Display full price upfront
- 15. TRICK QUESTIONS Confusing or misleading wording in forms or checkboxes Example: "Uncheck this box if you don't want to receive emails" Ethical Fix: Use clear, straightforward questions
- 16. FORCED CONTINUITY Charging users after a free trial ends without reminder Example: Streaming services billing you after trial expires Ethical Fix: Notify users before billing; easy unsubscribe option
- 17. DISGUISED ADS Ads designed to look like regular content or buttons Example: Fake "Download" buttons that are actually ads Ethical Fix: Clearly label all ads and sponsored content
- 18. BAIT AND SWITCH User expects one outcome, but something else happens Example: Clicking a link expecting a download, getting redirected to sales page Ethical Fix: Keep actions consistent with labels
- 19. LEGAL AND ETHICAL IMPLICATIONS Legal Frameworks Targeting Dark Patterns GDPR (General Data Protection Regulation) – European Union law that enforces informed consent, user control over data, and transparent design. Local Setup Data Privacy Act of 2012 (RA 10173, Philippines) E-Commerce Act of 2000 (RA 8792) FTC (Federal Trade Commission, USA) – Actively investigates deceptive design practices, particularly related to subscriptions and misleading interfaces. Ethical Implications: Loss of User Trust: Once users discover they were misled, they are less likely to return. Reputational Damage: Brands associated with manipulation risk social media backlash and negative reviews. Moral Responsibility: Designers must advocate for transparency and fairness in all user-facing systems. Consumer Act of the Philippines (RA 7394) NPC Circulars and Advisories
- 20. Should companies be held legally accountable for dark patterns, or should it be left to the user to be aware?
- 21. Analyze Impact & Legal Concern How does it affect users’ trust and behavior? Mention if it violates any data/privacy laws Propose a Redesign Suggest and illustrate a more ethical alternative Presentation 7–10 minutes Slides required (PowerPoint, Google Slides, or Canva) All members must present Be ready for Q&A Define your topic Define your assigned dark pattern clearly. Find 2 real apps or websites using this pattern. Include screenshots or mockups if possible. EXPLORING DARK PATTERNS Each group will investigate one specific type of dark pattern, find real-life examples, assess the impact on users, and propose an ethical redesign solution.
- 22. THANK YOU FOR YOUR ATTENTION DARK PATTERNS DARK PATTERNS IN UX DESIGN: DECEPTION BY DESIGN