Ethical Design

2022/07/30 (增加連結)

簡介

• User Experience is … applying ethical design

  • Hierarchy of Ethics

    • Human Rights

    • Human Effort

    • Human Experience

• How to Design With Ethics: Establish your values and find the design opportunities to match

  • Tactics for designing with ethics

    • Read

    • Understand how a business makes money

    • Embrace a position, but hold it loosely

• 10 Principles for Ethical UX Designs

  • Notify Me: Inform your users every time they are about to be charged.

  • Highlight negative information

  • Default to the option that’s safest for the user

  • Experience over revenue

  • Price transparency

  • Stop Spamming

  • Privacy transparency

  • Honest offers

  • Make it easy as pie to cancel

  • Ask for permission

• Ethical design and accessibility

  • Why no ethical design for PwDs?

  • Is your design providing a benefit to one group of people but at the detriment to another?

  • Dark patterns are the quintessential definition of unethical

  • Dark patterns and Disabilities

    • Disguised Ads and Bait and Switch

    • Hidden Costs and Sneak into Basket

    • Trick Questions / Confirmshaming

    • Roach Motel

• Designers, organizations, and ethics: Examples of mediation in ethical UX practice

• Reflection point: usability, accessibility, and ethics in UX

• Ethical and responsible (UX) design — A reminder

Accessibility

• 【無障礙網頁祕技】

  • 認識無障礙網頁與分級

  • 前端切版前要注意什麼細節呢？

  • 介面設計大補丸

• The three levels of accessibility

  • Strategy & Reach

  • Design & Clarity

  • Implementation & Inclusivity

• The three pillars of accessibility

  • Emotional accessibility

  • Functional accessibility

  • Technical accessibility

• 5 Tips To Master Web Accessibility : HTML Semantics, ARIA, the Accessibility tree, and more

• 5 Accessibility Quick Wins You Can Implement Today

• Personas with Disabilities

• Ethical design and accessibility

• Usability and Accessibility: Two Birds, One Stone

• Reflection point: usability, accessibility, and ethics in UX

• Why Truly Accessible Design Benefits Everyone

• Planning (and creating) accessible content

• 7 users share their struggles navigating the (sometimes inaccessible) digital world

• Making Design Accessible Everywhere — Getting Started

• Boosting Visual Accessibility by Auto Flipping Text Color

• Accessibility: 7 best practices to get you started

  • Get creative with user testing

  • See color through your users’ eyes

  • Always provide more than enough contrast

  • Guide with simple and thoughtful interactions

  • Speak plainly and conversationally

  • Create a digital map with logical layouts

  • Support multiple senses when using media

• The Accessibility Requirement You’re Probably Failing Right Now: Focus States

• Accessibility-first Design

• Dark UI themes are new and cool — but are they accessible?

  • There is nothing inherently wrong with either light mode or dark mode

  • More thought should be given to accessible color choices when designing using a dark theme

  • Two other UX things to think about when implementing a dark theme.

    • Make switching between dark themes and light themes obvious and easy to find.

    • Don’t make your users work. Save their preferred theme with their login rather than forcing them to switch themes every time they start up a new session.

• Tap to Dismiss: Designing accessible escape hatches for modals

  • Visual Design

  • Placement

  • Optimal Arrangement

• Make Your Web App Accessible With the Axe Accessibility Library

• The Hard Part of Web Accessibility

  • The hard part of Web Accessibility is empathy.

• Color

  • The Myths of Color Contrast Accessibility

    • Myth 1: The WCAG requirements are always optimal.

    • Myth 2: Text needs to meet the AAA requirement, or it’s inaccessible.

    • Myth 3: Interface components have the same contrast ratio standard as text.

    • Myth 4: Gray text and buttons are inaccessible and look disabled.

    • Myth 5: Color blind users can’t tell the difference between contrasting colors.

    • Myth 6: Using a color cue alone isn’t sufficient in conveying information.

  • A guide to color accessibility in product design

    • Ensuring your product is color-accessible

      • Add enough contrast

      • Don’t rely solely on color

    • Focus state contrast

      • Document and socialize color system

  • The UX of Among Us: The importance of colorblind-friendly design

  • A Ui color palette based on accessibility

  • From a colourblind designer to the world: please stop using red and green together

  • Don’t rely only on tools to pick an accessible color combination

  • You can learn a lot from a chicken: Color 202

• Web Accessibility and Its importance?

  • What is Web Accessibility?

  • What is Disability and the Challenges?

  • Why Web Accessibility is Important?

    • Primary beneficiaries

    • Secondary beneficiaries

    • Legal Compliance

  • The Benefits of Web Accessibility

    • Accessibility Enhances Responsiveness

    • People with Disabilities are a Significant Community

    • Being Accessible Wins Loyalty and Trust

• Accessibility: Web Links Should Be Links, and Web Buttons Should Be Buttons

• How to Make Accessible Sites with Semantic Markup

  • Using The Correct Elements & Tags

    • Buttons Should Be Buttons

    • Headers

      • Understanding the heading tag and why so many websites use it incorrectly

    • Links

    • List of Semantic Elements

• Accessibility in Agile Transformational Practices

• How to design: accessible search bars

  • Search Icon

  • Placeholder Text

  • Search box

• How to create an accessible app (and why you should)

  • The importance of Accessibility

  • Understanding Accessibility

    • Vision

    • Hearing

    • Mobility

    • Literacy

  • Best practices

    • Navigation

    • UI

    • Content

    • Testing

• User Experience is… accessible design

• Improve Accessibility & SEO in Your Website to Attract Bigger Crowds : Handy guide how to enhance rating in Google and stand out in search results.

• 3 accessibility basics you need to know as a designer

  • Code & Formatting guidelines

  • Annotating designs

  • Understand Color Contrast

• 5 Easy Ways to Make Your UI More Accessible

  • Adjust color and text size to create accessible combinations.

  • Use more than color to indicate a status change.

  • Use header tags in a logical order.

  • Write copy for links and buttons that can function without context.

  • Or, work with developers to make sure the code augments the design.

• How Accessibility Gets More and More Important in Web Development: How you can make your website accessible — including a checklist

  • Alt text for images

  • Contrast

  • Keyboard input

  • Transcripts for audio

  • WCAG

  • Want to Know Where Your Website Stands?

• 10 things that indicate designers have no clue about accessibility

  • Poor color contrast

  • Inaccessible tech stack

  • No (or only automated) close captioning

  • No accessibility statement

  • You hit tab button and a skip to content link doesn’t come up

  • Vertical text or other objects that can’t be reached by swiping or keyboard

  • Custom objects when the word “ARIA” doesn’t appear in their code anywhere

  • Floating nav bars

  • Lots of non-modal dialogs with poor focus management

  • Inaccessible third party partners

• 5 code improvements you can apply today to make your website more accessible

  • Fix general code semantics

  • Fix your title structure

  • Add hidden titles to the structure to mark site sections for screen readers

  • Fix your forms

  • Fix keyboard focus visibility and order

• 8 common questions about accessible UX

  • “Are we legally obligated to be accessible?”

  • “Accessibility is hard to do and expensive.”

  • “Do we even have users with disabilities?”

  • “Accessible designs are ugly and boring.”

  • “Is it too late for us to be accessible?”

  • “How can I tell how accessible my work is?”

  • “Can I just have one short checklist for accessible UX?”

  • “How can I build more accessible designs?”

• Accessibility user testing — here’s what we learned

• Getting started with web accessibility testing

• The business value of accessible design

• Why it’s time to design for accessibility — and not just “the average user”​

• How to talk to stakeholders about web accessibility: a presentation template

• Making a case for radical empathy in the digital world

• Stop Making Incomplete Inaccessible Forms!

  • No <label> tags.

  • <label> not properly wrapping form elements and/or lacking “for/id” relationships.

  • Using placeholder=”” to do <label>’s job

  • No <fieldset> around related radio/checkbox sets or around groups of user changeable form elements.

  • JavaScript being the only method by which the form is allowed to work.

• A11y: Visually Hidden Elements

• The Severity Gap in Accessibility

• Web Accessibility: Do’s and Don’ts

• Web Accessibility for Newbies

• Web Accessibility Made Easy

• The Basics of Web Accessibility

• Accessibility vs Design trends

• Giving a damn about accessibility

• Emojis and accessibility: How to use them properly

• How to document accessibility as a UX designer

• Shifting left: how introducing accessibility earlier helps the BBC’s design system

• HTML + Accessibility Basics For Web Developers : Use semantic HTML to make your web page easier to understand for users of your site who don’t look like you.

• How to make your website rank 100% on its Accessibility

• A 4-step process for testing the accessibility of your designs

  • Tab

  • Ctrl-Option- ← →

  • Ctrl-Option-Cmd-H

  • Ctrl–Option–Cmd–G

• Designing for cognitive disabilities

  • Language

  • Cognitive load

  • Layouts

  • Testing

• 5 Ideas on How to Incorporate Web Accessibility into your Dev Workflow

  • Add quantifiable accessibility goals into your roadmap

  • Add a11y linters to your codebase

  • Share resources widely to foster education

  • Create an accessibility working group

  • Change your development mindset to include a11y

• 10 Principles of Accessibility

• The Little Book of Accessibility

• 10 Accessibility Best Practices

• Accessibility checklist: Five things usually left out : Also, there’s no such thing as an accessibility checklist.

• How to hand off accessible designs to developers?

• Why debate non-text contrast of UI elements?

• Exploring an accessible switch component

• Designing For Accessibility And Inclusion

• A few other things for your accessibility checklist : 7 essential accessibility sticking points you might have overlooked in your applications.

• 6 challenging web accessibility issues I face every day

• Frontend accessibility. Doing it the right way.

• The accessibility no-win scenario: autocomplete and help text

• Accessibility: The Biggest Scam in UX

• Automate accessibility tests with Storybook

• Keyboard

  • Sexy and accessible focus state on keyboard navigation

  • How to design for people who navigate via keyboard

  • Keyboard support for accessible modals

• Progressive Enhancement on Accessibility **

  • Progressive Enhancement: Accessible Web Design On A Silver Platter : Part One: What it is, and starting with JUST the text!

  • Progressive Enhancement Part 2, Semantic Markup

  • Progressive Enhancement Part 3, Getting A Solid Baseline Before Layout.

  • Progressive Enhancement Part 4, Desktop Layout FIRST

Typography

• Accessible Fluid Typography

  • Replace all absolute units with rem units. (You could use em units but they are only relative to the parent’s font-size, which may not be relative to the browser’s text settings.)

  • Join all screen-relative units (vw, vh, vmin, vmax) with a rem unit to keep it relative to the browser’s text settings.

• 5 Keys to Accessible Web Typography

  • Set your base font size in relative units

  • Check the colour of your type and only then its contrast

  • Use highly legible fonts

  • Shape your paragraphs well

  • Correctly use the heading levels

WCAG

• WCAG 2.2: Redundant Entry - what it means and how to meet it

  • Therefore, it is likely that the Redundant Entry Success Criterion will be numbered as 3.3.9.

• WCAG 3.0: What you need to know about the future of accessibility standards

• A first look at Error Prevention — WCAG 3.0’s newest criterion

• Creating Color Contrast Guidelines to Meet WCAG 2.1 and Beyond

Inclusive design

• Inclusive design improves UX for everyone

• Inclusive design and the value of emerging tech in UX

• How to Create Interfaces that Benefit All: Accessibility Testing and Inclusive Design Principles

  • What’s the Difference between Accessible, Inclusive, and Universal Design?

  • Misconceptions about website accessibility and inclusivity

    • Myth №1: Inclusive design is targeting groups that have experienced discrimination

    • Myth №2: Inclusive design is expensive and not worth it

    • Myth №3: Inclusive design is unifying user experience

• Creating a More Inclusive World: How to Test Products for Accessibility and Usability

• 10 Ways to Design More Inclusive Products: Ways to make digital products more accessible, usable, and user friendly for everyone.

• An introduction to Inclusive Design (ch. 1)

• An accessible guide to inclusive design (ch. 2)

• The hidden value of inclusive design for business and innovation (ch. 3)

• Inclusive design as a profound cultural change (ch. 4)

• Inclusive Design: Build for all, By all

• How adopting inclusive design can improve your user experience

• What We’re Leaving Out of the Discussion Around Inclusive Design : To truly achieve inclusiveness, we need to first look at who we’re excluding.

• Gender-inclusive design is the only way

• Designing for the autistic community : Product design principles that will improve usability for everyone.

• User-centred vs human-centred design

  • User-centred methodologies, as indicated by the name, put users at the centre of the design process

  • Human-centred (aka universal design) methodologies aim to include all humans as possible users

• Building for ADHD will make your product better for everyone : Users with ADHD often suffer from an extreme lack of focus that can uncover hidden product issues.

Universal Design

• Genderless design is a myth : Genderfluidity as the future of design and culture.

Privacy

• Privacy UX: Common Concerns And Privacy In Web Forms

• Privacy UX: Better Cookie Consent Experiences

• Privacy UX: Better Notifications And Permission Requests

• Privacy UX: Privacy-Aware Design Framework

• Sensible Design: making ethically personalized digital products: How privacy is the next wave in product design.

• Better Privacy with Chromium’s Privacy Sandbox

  • Privacy Sandbox can change the way we surf the web without third-party cookies.

• The web 3.0 race can only be won by UX 2.0

  • Uber-Personalized User Experience (UX 2.0)

    • Personalized Content

    • User-Controlled Privacy

General Data Protection Regulation (GDPR)

• 資料隱私設計 Design for Data Privacy **

  • GDPR是啥毀？

  • Privacy by Design (PbD)

  • 設計考量

    • 用戶同意 (User Consent)

    • 個人可識別資訊(Personal Identifiable Information, aka PII)

    • 用戶隱私管理及刪除(User Right to Manage and Delete Data)

  • 將資料隱私納入設計流程

  • 避免使用黑暗模式(Dark Pattern)

• Understand the GDPR in 10 minutes

  • Requirement 1: Justify your need for personal data

  • Requirement 2: Give Users Control Over Their Data

  • Requirement 3: Keep Customer Data Secure

  • Requirement 4: Implement Data Governance and Documentation

• The Ultimate GDPR Guide for Marketers and Businesses **

• GDPR: EU Legislation Aims to Increase User Control, Calls for Changes in How Businesses Handle Their Data

  • Under the new regulations, the definition of “personal data” has been expanded to include identifiers such as: location data, online identifiers (IP addresses, possibly browser cookies).

• What does GDPR mean for UX? **

• UX Design and GDPR: Everything You Need to Know ** 有些設計範例可以參考

  • there are two main aspects that will affect the user experience most:

    • User consent

    • User rights to manage or delete their data

• 3 things to keep in mind before you design for GDPR

  • Consent and Personally Identifiable Information under GDPR.

  • Know your company’s stance on GDPR.

  • Give your customers a flexible solution.

• How to Comply with GDPR: Recommendations for the Travel Industry

  • Practical recommendations for travel companies to prepare for GDPR

    • Create the new format for obtaining user consent

    • Audit the data you store

    • Review existing contracts

    • Be ready to respond to user requests

    • Adapt your personalization processes

      • Appoint a Data Protection Officer

      • Enable data breach notifications

    • Give users access to the personal data you stored about them

      • Ensure portability of the data you store

• I’m a Developer and General Data Protection Regulation (GDPR) is no big deal. Or is it?

  • Develop a plan

  • Remove anything you don’t have to keep

  • Limit access, if you can

  • Get ready to answer a lot of questions

• Implement a Cookie Consent Notification Within Five Minutes

• GDPR: What Does it Mean for a Marketplace with its Own Token?

  • Based on advertising and marketing, repay.me will be able to pay its users up to 100% cashback for sharing their personal data

• BitNautic follows GDPR guidelines for data security & KYC/AML

  • KYC (Know Your Customer)/ AML(Anti-Money Laundering)

• Automating Data Protection at Scale, Part 1

• Automating Data Protection at Scale, Part 2

• It’s time we fix the unethical design of cookie consent windows

Dark patterns

• What are Dark Patterns in UX? Plus Examples! (3:59)

• How Dark Patterns Trick You Online (6:56)

• Dark patterns: Welcome to the dark side of a user-friendly industry

  • a dark pattern is a term used in user experience that presents the user a user interface carefully crafted to trick users into doing things they might not otherwise do

  • The difference between bad UX & dark UX

  • How dark patterns work

  • Some dark patterns you should never use in your digital products

    • Forced Continuity

    • Bait and Switch

    • Roach Motel

    • Privacy Zuckering

• UX Dark Patterns are real, but stop blaming designers: Some thoughts on aggressive and unethical tricks.

• How airline websites can use UX design to take your money

• Disrespectful design: let’s leave it behind in 2020

  • Intrusive ads

  • Business goals and user well-being

  • Disrespectful Design

    • Shame or exclusion

    • Anxiety

    • Coercion

    • Manipulation

• 10 Evil Types of Dark UX Patterns

  • Bait and Switch

  • Disguised Ad

  • Misdirection

  • Friend Spam

  • Hidden Costs

  • Trick Question

  • Confirmshaming

  • Roach Motel

  • FOMO (Fear of Missing Out)

  • Sneak into Basket

• 10 Types of A**hole Design Patterns

  • Shrinkflation

  • Planned Obsolescence

  • Lethal Enforcers

  • Loaded Question

  • Bait and Switch

  • Throttling

  • Guilt Tripping

  • Monopoly

  • Free Real Estate

  • Decoy

• Little UX crimes: a collection of Dark Patterns in design

• The Dark UX patterns targeting children

• How to balance user-centered design with business goals : Don’t give in to the pressure for using dark patterns

• Dark Patterns in Your Everyday Apps

  • Youtube Disguised Ads

  • Spotify Roach Motel

  • Reddit Bait and Switch

  • Instagram Roach Motel

  • Skillshare Forced Continuity

  • Wish Confirmshaming

  • AliExpress Price Comparison Prevention

  • Broadway.com Hidden Costs

• The New York Times Derides the Very Dark Patterns It Uses

• The dark UX patterns used by online gambling websites