Principles of UX / UI (Product Design): Design Ethics and Inclusive Design

Design Ethics and Inclusive Design

Portfolio-Ready Study Guide: Design Ethics & Inclusive Design

What This Is

Design ethics and inclusive design ensure products are fair, accessible, and respectful to all users—regardless of ability, background, or context. Ethical design avoids dark patterns (e.g., hidden fees, forced subscriptions), while inclusive design removes barriers (e.g., colorblind-friendly palettes, screen-reader compatibility). Example: Redesigning a banking app’s loan application to avoid predatory terms (e.g., unclear interest rates) or ensuring a healthcare portal works for elderly users with low vision.

Key Terms & Principles

• Inclusive Design: Designing for diverse human needs (e.g., motor impairments, cognitive differences). Example: Adding keyboard navigation to a form so users who can’t use a mouse can still complete it.
• Accessibility (a11y): Making products usable for people with disabilities. Example: Ensuring 4.5:1 contrast ratio (WCAG AA) for text on buttons (e.g., dark blue text on a light gray button).
• Dark Patterns: Deceptive UI tricks that manipulate users into actions they didn’t intend. Example: A "Free Trial" button that auto-enrolls users in a paid subscription without clear disclosure.
• Cognitive Load (Miller’s Law): Humans can hold 7±2 items in working memory. Example: Breaking a long checkout form into 3 steps instead of one overwhelming page.
• Progressive Disclosure: Showing only essential info first, hiding advanced options. Example: A "Show More" button for additional product filters in an e-commerce app.
• Universal Design: Creating products usable by all people, without adaptation. Example: Closed captions on videos for deaf users and users in noisy environments.
• Heuristic Evaluation (Nielsen’s 10 Usability Heuristics): A quick way to find usability issues using 10 rules of thumb. Example: Checking if error messages are clear and actionable (e.g., "Password must be 8+ characters" vs. "Invalid password").
• Intersectionality: Recognizing users have multiple overlapping identities (e.g., a Black woman with a disability). Example: Testing a job application form with users who are neurodivergent and from underrepresented ethnic groups.
• Ethical Design Manifesto: A framework prioritizing user well-being over business metrics. Example: Avoiding infinite scroll in social media apps to reduce addictive behavior.
• WCAG (Web Content Accessibility Guidelines): Global standards for accessibility. Example: Success Criterion 1.4.3 requires text to have a 4.5:1 contrast ratio against its background.
• Bias in Design: Unintentional exclusion of certain groups. Example: A fitness app defaulting to "male" body metrics, alienating non-binary users.
• Design Justice: Centering marginalized communities in the design process. Example: Co-designing a public transit app with wheelchair users to ensure route accessibility.

Step-by-Step Process Flow

1. Audit for Exclusion & Bias

• Action: Use a checklist (e.g., Microsoft’s Inclusive Design Toolkit) to spot biases.
• Figma Tip: Overlay a colorblind simulator (e.g., Stark plugin) on your designs.
• Example: If your app uses red/green for "stop/go", add icons (✓/✗) for colorblind users.
• Output: A list of exclusion risks (e.g., "No alt text on images → screen reader users excluded").

2. Conduct Inclusive Research

• Action: Recruit diverse participants (e.g., users with disabilities, non-native speakers).
• Method: Run a usability test with a screen reader (e.g., VoiceOver on iOS).
• Example: If a dropdown menu isn’t keyboard-navigable, fix it with tabindex and ARIA labels.
• Output: User pain points (e.g., "Users with motor impairments struggle with small touch targets").

3. Apply Accessibility Standards

• Action: Use WCAG 2.1 AA as a baseline.
• Figma Tip: Set up a design system with accessible components (e.g., buttons with 4.5:1 contrast, 48x48px touch targets).
• Example: Replace a low-contrast "Submit" button (gray on white) with #0056B3 on white (4.6:1 contrast).
• Output: A compliant UI (e.g., "All interactive elements are keyboard-navigable").

4. Test with Real Users

• Action: Run guerrilla testing with 5+ diverse users.
• Method: Ask users to complete a task (e.g., "Book a doctor’s appointment") while observing struggles.
• Example: If a senior user can’t find the "Help" button, increase its size and add an icon (?).
• Output: Iterative fixes (e.g., "Added a sticky help button for low-vision users").

5. Advocate for Ethics in Stakeholder Meetings

• Action: Present data + stories to justify ethical choices.
• Example: Show a heatmap of users abandoning a form due to dark patterns (e.g., hidden fees).
• Script: "If we remove the pre-checked ‘Subscribe to emails’ box, we’ll lose 5% conversions but gain trust and long-term retention."
• Output: Aligned stakeholders (e.g., "Team agrees to remove manipulative upsells").

Common Mistakes

Design Interview / Portfolio Tips

What Interviewers Look For

1. Ethical Dilemma Responses
2. Question: "A PM wants to add a ‘Last Chance!’ countdown timer to increase conversions. How do you respond?"

3. Answer: "I’d push back using ethical design principles—countdown timers create false urgency, which erodes trust. Instead, I’d propose social proof (e.g., ‘100 people bought this today’) or scarcity (e.g., ‘Only 3 left in stock’)."

4. Accessibility in Your Process

5. Show: A case study where you fixed an accessibility issue (e.g., "Redesigned a form to be screen-reader friendly").

6. Mention: Tools like Stark, axe, or WAVE for audits.

7. Inclusive Research Methods

8. Distinction: Usability Test (observing task completion) vs. User Interview (asking about pain points).

9. Example: "I ran a usability test with a blind user to see if our app’s navigation worked with VoiceOver."

10. Portfolio Storytelling

11. Structure: Problem → Research → Solution → Impact
12. Example: "Problem: Users with motor impairments struggled with small buttons. Research: Tested with 5 users using a touch target heatmap. Solution: Increased button size to 48x48px and added haptic feedback. Impact: 20% increase in task completion."

Quick Check Questions

1. Scenario: A stakeholder insists on adding a "Sign up for our newsletter" checkbox pre-checked at checkout. How do you respond?

2. Answer: "This is a dark pattern—it manipulates users into opting in. Instead, I’d recommend an un-checked box with clear value (e.g., ‘Get 10% off your next order’). This builds trust and complies with GDPR."

3. Scenario: Your team wants to use AI-generated avatars for a mental health app. What ethical concerns should you raise?

4. Answer: "AI avatars can perpetuate biases (e.g., defaulting to white, thin, or young faces). We should audit the dataset for diversity and allow users to customize avatars to reflect their identity. Also, transparency is key—users should know they’re interacting with AI."

5. Scenario: A client says, "We don’t need to test with disabled users—our product is for young professionals." How do you advocate for inclusive design?

6. Answer: "15% of the world’s population has a disability, and many young professionals have temporary impairments (e.g., broken arm, migraine). Testing with disabled users improves usability for everyone (e.g., captions help in noisy environments). It’s also a legal risk—many countries require accessibility compliance."

Last-Minute Cram Sheet

1. WCAG 2.1 AA Contrast Ratio: 4.5:1 for text, 3:1 for large text.
2. Dark Patterns to Avoid: Forced continuity, hidden costs, confirm-shaming (e.g., "No, I don’t want to save money").
3. Inclusive Design ≠ Accessibility: Accessibility is one part of inclusive design (which also includes culture, language, age, etc.).
4. ⚠️ User Interviews ≠ Usability Tests: Interviews uncover problems; usability tests observe task completion.
5. Fitts’s Law: Bigger + closer = easier to click (e.g., mobile "Buy" button at thumb zone).
6. Hick’s Law: More choices = slower decisions (e.g., limit filters to 5-7 options).
7. Progressive Disclosure: Show only essential info first (e.g., "Show More" buttons).
8. ARIA Labels: Use aria-label="Close menu" for screen readers.
9. ⚠️ "We’ll fix accessibility later" = Never happens. Bake it in from the start.
10. Design Justice: Co-design with marginalized communities—don’t assume you know their needs.