Notes: "Tragic Design" by Jonathan Shariat and Cynthia Savard Saucier

This article originally appeared on my website.

I'm a fan of writing notes while reading design books. The book belongs to the author(s). The notes are a quick reference for myself and others if they need it.

---

Tragic Design: The Impact of Bad Design and How to Fix It

Jonathan Shariat and Cynthia Savard Saucier

To purchase or learn more about the book.

Introduction

Primum non nocere = First, do no harm

Blaming the last people involved in a process for making a costly mistake is not productive

Good visual design reduces the cognitive load required to complete a task

Badly designed products serve their creator or sponsor first and user second

Designers have responsibility to educate their clients, but often have to answer to clients

Failing to identify all of the hidden costs and impact of our designs on the world around us can lead to blindly and unintentionally causing harm to others

Designers are gatekeepers of technology

• It is up to us to ensure the gates are as wide open and accessible as possible

Usability Heuristics for Interface Design [Jakob Nielsen]

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. Helps users recognize, diagnose, and recover from errors
10. Help and documentation

---

Design Can Kill

Bad design can cause physical harm or death

Harm doesn't always comes from negligence but may come from bad processes and lack of usability standards or user testing

Metrics are the opposite end of spectrum from empathy

All software, even if extremely well designed, will behave in an unexpected way under certain conditions.

There is rarely a single solution to any problem

---

Design Can Anger

Polite Software

1. Ask for the user's permission to perform an action
2. Offer alternatives
3. Explain all of the options and settings
4. Anticipate the user's need when possible
5. Respect and remember the user's decision
6. Be mindful of words and tone
7. Fake politeness if necessary

Dark Patterns: UI carefully crafted to trick users into doing things they might not otherwise do

1. Bait and Switch
2. Fake Content
3. Forced Continuity
4. Friend spam
5. Misdirection
6. Roach motels
7. Trick question

---

Design Can Sadden

When creating a feature meant to celebrate, allow users to opt-out

Smileys, thumbs, likes, stars, and hearts carry a great load of emotion

To avoid causing sadness, implement a "Sad Sheriff"

---

Design Can Exclude

Making your service accessible

• Don't rely on color to convey information
• Pick high-contrast text colors
• Use alt text
• Avoid text embedded in images
• Provide context for hyperlinks
• Simplify your textual content
• Avoid automatic image sliders and carousels
• Design accessible forms
  • Keep labels visible when user is filling in fields
  • Don't use gray placeholders inside field (screws up screen readers)
  • Form can be filled using only keyboard and Tab key
  • Group all error messages at top of page and repeat them next to erroneous form control
  • Make sure there's textual explanation
• Consider accessibility outside of browser
• Treat internet access as a human right

Design is a bridge into technology

• If a group of people is excluded, they get left behind in many ways: socially, economically, and creatively

Injustice can occur when a rule is conveyed through confusing design and when information is not accessible to people in need

---

Tools & Techniques

Knowing that people hate your product is much better than living in blissful ignorance

Don't overwhelm teams with hard data if designers want to engage them on an emotional level and create empathy toward users

Universal Facial Emotions

1. Disgust
2. Anger
3. Fear
4. Sadness
5. Happiness
6. Surprise
7. Contempt

Macroexpressions: 1/2 - 4 seconds
Microexpressions: involuntary, less than 1/2 second

Describing emotional states with precision and granularity is a great advantage for designers

---

What Can We Do

• Vote
• Speak up
• Support others
• Share good examples
• Start your own company
• Practice empathy
• Everyone is a designer

What Designers Can Do

• Work where you're needed
• Learn to raise your voice
• Take a stand

Be a Great Designer

1. Be a world-class communicator
2. Use the user-centered design methodology
   • Understanding Your Users - Kathy Baxter and Catherine Courage
   • User-Centered Design Stories - Carol Righi and Janice James
3. Use data as ammunition
4. Keep a student's mindset
5. Teach and mentor others
6. Polish your process
   1. Understanding the problem (collecting user research, requirements from stakeholders, relevant data, etc.)
   2. Exploring concepts (sketching, making wireframes and prototypes, etc.)
   3. Building (UI, code, style guides, etc.)
   4. Validating and Analyzing (more user research, understanding data and iterating)
   5. The Design Process - Karl Aspelund
   6. Design with Intent - Dan Lockton
7. Take your time
8. Be engaged
9. Take a step back
10. Branch out
11. Contribute
12. Ask who is losing and who is winning

---

As written above, these are just my notes for this title. I encourage you to read a copy of your own for further insight into the text.