Organizations serving victims of trauma may have multiple touchpoints with clients. One of the first may be the agency’s website. When people come to your website, are you helping them feel empowered? Or are you aggravating the symptoms of trauma itself? Considering the overlapping principles of user experience (UX) and SAMHSA’s Six Key Principles of a Trauma-Informed Approach, NCCADV has examined what a trauma-informed website would look like. We will share about building trust, ensuring safety, and much more. Keeping in mind the neurological, social, and physiological effects of trauma and IPV, we will review what website features may be most user-friendly and what’s likely just frustrating. We’ll look at real world website examples, both positive and negative, from NCCADV and agencies throughout the country. Webinar participants will gain practical suggestions and free tools to make effective changes to improve their websites immediately.

1. Trauma-Informed?
Melissa Eggleston
UX & Content Strategy Consultant
melissa@melissaegg.com
Is Your Website

2. Agenda
• Background
• Overlap of trauma-informed + user experience (UX)
• Five user experience ideas
• Five survivor-sensitive features
• Practical tools to help
• Resources for more learning

3. Wait, trauma-informed websites?
• On the playground, not the golf course
• Elizabeth Johnson (NCCADV Board Member)
• Trauma-informed
• User experience (UX)
• Overlap of trauma-informed with UX
• Won Aquent Design for Good Grant

4. Caveats
• I’m not an expert on trauma-informed
websites, I’m learning too!
• This is complex.
• It’s easy to pick on other people’s websites
when you don’t understand their constraints
and context.

5. What is User Experience?
User experience (UX) is the way a person feels
about using a product, system or service.

6. UX the Discipline
“User experience is a discipline focused on designing
the end-to-end experience of a certain product.”
(or website, service, system, program, etc...)
- Rui Barroca, Product Designer

7. Trauma-Informed Approach
• Realizes the widespread impact of trauma and
understands potential paths for recovery;
• Recognizes the signs and symptoms of trauma in
clients, families, staff, and others involved with the
system;
• Responds by fully integrating knowledge about trauma
into policies, procedures, and practices; and
• Seeks to actively resist re-traumatization.
- From Substance Abuse and Mental Health
Services Administration (SAMHSA)

8. Short Definition
Being trauma-informed means adapting both to
better serve and to avoid further harm to people
who have experienced trauma.

9. What symptoms of trauma
might affect a website
visitor?

10. Trauma survivors may:
• Have a hard time making choices and/or a
limited attention span
• Have physical impairment
• Be emotionally vulnerable
• Fear for their safety or others’ safety
• Lack trust based on past experiences

11. 6
Trauma-Informed Principles

12. Trauma-Informed Principles
1. Safety
2. Trustworthiness and Transparency
3. Peer Support
4. Collaboration and Mutuality
5. Empowerment, Voice, and Choice
6. Cultural, Historical, and Gender Issues
- From Substance Abuse and Mental Health
Services Administration (SAMHSA)

13. Overlapping Principles with UX
1. Safety
2. Trustworthiness and Transparency
3. Peer Support
4. Collaboration and Mutuality
5. Empowerment, Voice, and Choice
6. Cultural, Historical, and Gender Issues

14. Other Guiding Principles
• We need “do-able,” not expensive, design
improvements.
• This concept of a trauma-informed website and
survivor-sensitive features is new and evolving.
• Let’s build on available research and resources.

15. “Every use of your website or mobile app is a
conversation started by your site visitor.”
- Ginny Redish, Author

16. What kind of greeting are you
giving your online visitors?

17. Have you heard someone say this?
• “That website was just too easy. How
unprofessional.”
• “I was hoping to have to dig around a little more.”
• “I wish it took a little longer to load.”
• “I was hoping for longer sentences and better
vocabulary words.”
• “Those stock photos really helped me.”

18. 5Important UX Ideas

19. 1. Make it obvious in 5 seconds
Empowerment, Trustworthiness, Transparency

24. “Oh it’s a ___________, where
I can _______________”

27. 2. Reduce total cognitive load
Empowerment, Trustworthiness, Historical Issues

29. “I’m tired just looking at it.”
• Is this clickable or not?
• What do they do?
• Where am I?
• What can I do here?
• Where should I start?
• Is this the navigation? Or is that the navigation?
• Where is _________?

30. “Within a fraction of time, people build a first visceral
‘gut feeling’ that helps them to decide whether they
are going to stay at this place or continue surfing to
other sites.”
- Google research study, 2012

31. “Within a fraction of time, people build a first visceral
‘gut feeling’ that helps them to decide whether they
are going to stay at this place or continue surfing to
other sites.”
- Google research study, 2012
Faster than the blink of an eye (!)

32. Reduce Cognitive Load
• Simplify
• Have less choices at a glance (progressive
disclosure of information)
• Use white space
• Keep navigation, search box, other items consistent

37. Lots of Choices

38. Less Choices

39. 3. Increase readability of text
Empowerment, Transparency, Cultural & Historical Issues

43. Constraint!

48. Ideal Text
• Less than 600 pixels wide
• Readable at Grade 9 or lower
• Inviting – not like a “wall of words”
• Avoids excessive capital letters
• Edited via the FREE Hemingway Editor tool

49. 4. Fix broken links, typos, errors

50. A broken link
is a broken promise.

54. Use Free Online Resources
• Broken Link Checker
https://validator.w3.org/checklink
• Spell Checker
http://tools.seochat.com/tools/free-spell-checker/
http://respelt.com/ (low cost)

55. 5. Be more inclusive
Empowerment, Trustworthiness, Cultural, History, & Gender Issues

56. Domestic Violence
Page “Before”

60. Accessibility
• Greatest number of users can view your content
• Checklist and information here from 18F
https://accessibility.18f.gov/index.html

61. Five UX Ideas
1. Make it obvious in five seconds
2. Reduce cognitive load
3. Increase readability of text
4. Fix broken links, typos, errors
5. Be more inclusive

62. 5
Survivor Sensitive Features

63. 1. Improve safety alerts + exits
!
Safety, Trustworthiness

70. Improve safety alerts and exits
1. Have impossible to miss safety information.
2. Ensure it’s easy to click on exit.
3. Make it harder to get back to the site.
– Open a new site.
– Open a new site and close the current tab.
– Open a new site and break the back link.

71. 2. Adjust “contact us”
Safety, Trustworthiness, Choice

73. Don’t ask
survivors to leave
an email trail on
their computers
without asking
them to think
about it first.

75. 3. Make “get help” links stand out
Empowerment, Trustworthiness, Safety

80. 4. Make it more mobile-friendly
Empowerment, Safety, Trustworthiness

81. Why is mobile important
for survivors?

82. What makes a website
mobile-friendly?

87. SPEED

89. Speed Test Tools
• https://developers.google.com/speed/pagespeed/insights/
• https://tools.pingdom.com/
• https://www.webpagetest.org/

90. 5. Upgrade Your Images
Empowerment, Trustworthiness, Cultural, Historical, & Gender Issues

96. No Triggering Images

97. Five Survivor-Sensitive Features
1. Improve safety alert and exit
2. Ensure “get help” button is prominent
3. Adjust “contact us” for safety
4. Make it more mobile-friendly
5. Upgrade your images

98. 10 Ideas to Apply to Your Website
1. Make it obvious in five
seconds
2. Reduce total cognitive load
3. Increase readability of text
4. Fix broken links, typos, errors
5. Be inclusive
1. Improve safety alert and exit
2. Ensure “get help” button is
prominent
3. Adjust “contact us” for safety
4. Make it more mobile-friendly
5. Upgrade your images
UX ideas Survivor-Sensi+ve Features
to Help You Be More Trauma-Informed

99. Want more UX?

100. Want to keep talking about trauma-
informed tech?
Send me an email, and let me know.
melissa@melissaegg.com

101. Let’s start the trend of
trauma-informed websites!