Mental Health Cards
These design pattern cards provide guidance for using specific design patterns in your designs.
Introduction
Every situation we encounter requires us to tap into our abilities, motivations, and emotions. By being mindful of the impact one’s emotional state has on cognition and motivation, we can prioritize mental health and reduce experiences of exclusion.
Through co-creation sessions and thorough research, we’ve identified common stressors and solutions that can support mental health in product experiences.
- The following guidance is meant to accompany, not replace, the inclusive design steps laid out in the Inclusive Design for Mental Health Guidebook.
- To access this guidance right where you work, and use it to help advocate for inclusive designs, check out our Inclusive Design for Mental Health & Cognition Figma plugin.
AI Assistants
AI can help people initiate tasks and solve problems independently, improving self-esteem. AI comes with the risk of inaccuracy or bias, which can trigger anxiety.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Reduce information overload by facilitating summary or simplification. For example, surface a suggested prompt to “simplify” or “rewrite as a list”.
- Reduce the barrier to entry by providing suggestions, examples, or a “mad libs style” format for prompts.
- Reduce anxiety about privacy, security, and bias by explaining what considerations were included in the development of the AI.
- Preserve trust by keeping individuals in control. AI tools should provide education and guidance but never override the customer.
- Mobilize inclusive language to preserve focus and attention. Cognitive capacity quickly deteriorates when people experience a lack of psychological safety.
- Maintain motivation by including positive feedback, not just ways to improve.
Direct
- Embed easily visible, clickable references in responses so that people can fact check.
- Avoid feedback loops by including prompts that help people close a task and move forward. For example, in addition to suggesting“make the email more brief” suggest “finish and send”.
- Place AI tools in a predictable, accessible place and allow people to minimize. Suggest use in a potential moment of frustration recognized through contextual awareness.
Customize
- Empower your audience by allowing them to tell the AI assistant their goals or what they’re struggling with and connect them to tools or settings that could provide support.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- [On summarization] “When it works well, it reduces the amount of stress I have because it feels like a flood of information and now I can devote my energy to where it needs to be devoted.”
- [On coaching] “Sometimes the tonality is a bit matter of fact and it feels like it’s only telling me what I did wrong or can do more of. It would be nice to hear what I did right.”
Collections
Sifting through large sets of information contributes to cognitive load. People need support to organize and prioritize information.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Utilize expandable sections to help people see only the information they need.
- Reduce cognitive load and facilitate task completion by providing filters, sorting mechanisms, or search functionality.
Direct
- Nest information and use headers to create clear categories to minimize information overload.
- Highlight searched keywords help people find what they’re looking for.
Customize
- Reduce memory and decision-making demands by allowing people to save frequent queries or filtering preferences.
- Allow people to enable text narration and adjust the text size, contrast, and color.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “I have the hardest time with long written documents and data. I need collapsible sections, filtering, sorting, searching and highlighting what is the most important information.”
- “Chunking or grouping the information in meaningful components is most helpful and lessens my cognitive overload.”
Color
Color can evoke emotions and contribute to cognitive load, be intentional to avoid triggering visual sensitivities or negative feelings.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Limit use of red-ish colors to errors and urgent alerts. Evidence suggests red notifications are addictive and can easily pull people out of flow.
- Limit bright and highly contrasting colors to reduce overwhelm.
- Strive for a balanced palette that evokes the intended emotional experience without being overwhelming. Cool and muted colors tend to create a soothing environment.
Direct
- Use color to establish visual hierarchy and guide attention. For example, support ease of navigation by using color to consistently indicate the primary action.
Customize
- Provide options to adjust colors according to personal preferences and sensitivities. Ensure dark mode and accessible contrast settings are available.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “I have a whiteboard and look at my to-do’s for the day. I need to use bright colors for what has to get done [otherwise I’ll miss it]. Tagging is super helpful.”
- “The red badge draws too much attention. It almost becomes too distracting, especially when I’m trying to complete a task.”
Confirmation & error states
Immediate feedback can keep people in flow by providing a clear next step. Confirming the result of an action can build a sense of accomplishment.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Keep people in flow by reassuring them when important actions are completed, helping reduce the urge to double and triple check.
- Reduce cognitive demand by using patterns and colors consistently.
- Maintain motivation by celebrating completed tasks or new accomplishments.
Direct
- Test the alternative and unexpected paths in your flow. Design for any edge cases to prevent dead ends.
- Put the solution first if it’s a simple step. Ensure that error messages always provide a best next step.
- Facilitate decision-making by writing button text that responds directly to the suggested action. Use active language that reflects what will happen next.
- Never blame an individual for an error.
Customize
- Match message content to an individual’s frame of mind. A “We’re sorry to see you go” message should have a. different tone than a. “task completed” message.
- If data is available, use it to make messages as specific as possible.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “I need a final confirmation like ‘submitted’ to know when I’m successful in a task.”
- “I feel like I’m lost in a flow and confused when it’s not clear how many steps are left or if I got it right.”
Content
Content done well helps people feel in control, supports learning and executive functioning, and moves them towards their goal.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Test with potential customers to see how content is perceived, address confusion, and align to their mental models.
- Consider individual’s frame of mind for each interaction. Are they frustrated? Worried something has gone wrong? Confused by which option is the best fit? Adjust the content shown and tone used accordingly.
- Help people maintain motivation by using inclusive language.
Direct
- Make text more scannable by breaking chunks of text into manageable sections using headings, bullet points, or categories.
- Always consider what an individual is trying to do and provide a clear next step for every interaction.
- Remove any details that are not essential. Be as concise as possible.
Customize
- Allow people to enable voice narration and adjust text size, contrast, and color.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “Titles help me scan for what I need.”
- “Looking at paragraphs of text is like staring at a wall!”
Feedback
Customer feedback is key to aligning our products to our audience’s goals. Iterating to match identified needs and create a positive experience is a requirement of inclusive design.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Help people feel heard by providing opportunities to share their feedback and suggestions.
- Maintain motivation over time by applying learnings from feedback.
- Make people feel safe by allowing them to choose how much personal information is shared with their feedback.
Direct
- Provide feedback opportunities immediately on the feature or element you are testing.
- Include a feedback mechanism for the overall product in a predictable location.
Customize
- If data is available, use it to scope survey questions to a specific audience. Reduce cognitive demand and help people get back to their flow by asking them only questions relevant to their usage.
- Allow for open-ended responses. Ask about how the product makes people feel, not just about the functionality.
- Put customer feedback to use by creating additional customization options across the experience.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “It’s extremely jarring when all of a sudden there’s changes. I appreciate it when it asks me if I like the change. And if I don’t [like the change], I’m able to revert it back right there.”
- “This is a digital minefield... It’s an intense cognitive stress/load and I don’t know how to control it.”
Loading states
Waiting for an experience demands focus and memory, and can trigger anxiety and frustration.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Show an estimated wait time to set expectations and maintain motivation.
- Consider the variety of internet bandwidths available. Push for efficient coding to minimize wait times across bandwidths.
- Reduce cognitive demand by using patterns and colors consistently.
Direct
- Provide text to orient people while they wait or help them prepare for the next step.
Customize
- Allow people to pause or turn off animations.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “Not knowing how long I need to wait, what I’m waiting for, and whether the system is even working really triggers my stress and anxiety.”
- “It’s helpful when it tells me what’s loading and why it’s taking so long instead of seeing the dreadful spinner.”
Motion & noise
Motion and noise can dramatically grab attention, removing people from their flow or contributing to sensory overload.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Use animations sparingly. Preserve attention by removing them wherever they might interrupt flow.
Direct
- Consider the purpose of animations before implementing. Do they enhance clarity or add complexity?
- Provide a way to pause or hide motion or sound directly on the element.
Customize
- Apply an individual’s preferences for motion and sound across the entire product or operating system. Allow them to opt out of auto-playing elements like videos or gifs.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “Seeing the bouncing dot when someone is typing is so distracting, I can’t even focus in a meeting. I wish there was a way to turn off motion across all of my apps.”
- “When interacting with a new feature, animations or video can be really helpful to explain how to use it.”
New concepts
Learning new things and adapting to change both require cognitive energy. Help people feel capable and in control by supporting task initiation and completion.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Keep top level information brief to preserve attention. When concepts might be difficult to grasp, provide additional details in info bubbles.
- Support learning with visual aids for new or complex concepts.
Direct
- If there are many steps, create a first run experience or wizard to help people onboard.
Customize
- Allow people to skip first run experiences and onboarding resources based on their learning preferences. Some folks prefer to explore!
- Accommodate the potential need to repeat onboarding information by providing a re-entry point in a predictable location.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- [On FREs] “I get anxious wondering if I'll be able to revisit the information if I close it. I need to know that I can go back to process the information in my own time.”
- “I love that the new feature is brought to the focal point with more information after I interact with it.”
Pop-ups
Pop-ups often interrupt an individual;s intended action; the resulting distraction and cognitive overload can trigger stress and anxiety.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- When possible, use an individual's behavior to inform the timing of pop-ups. For example, allow a pop-up to help initiate a task after a period of inactivity.
- Be intentional in surfacing pop-ups only when the information is relevant and actionable.
Direct
- Facilitate control by allowing people to temporarily disable pop-ups.
- Reduce memory demands by providing available actions or suggested next steps directly within the pop-up.
Customize
- Differentiate pop-ups by urgency and importance, allowing individuals to decide if time-sensitive notifications should override their other pop-up settings.
- Help people maintain a flow state with settings to control which pop-ups are allowed, how often, and when.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “If you’re gonna make a request of someone, indicate the urgency of the request. I always feel like I have to address it right away.”
- “A single pop up could be a crash to my whole flow or my whole day.”
Settings
Thoughtful customization options allow people to adapt their tools to accommodate sensitivities, meet ever-changing needs, and align to their preferences.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Reduce cognitive demand by preserving individual’s selected preferences across the experience. Apply preferences globally whenever possible.
- Allow people to control the timing and frequency of distractions.
Direct
- Anticipate potential frustration and facilitate control by providing entry points to settings where contextually relevant.
- Carefully construct explanations for each setting to ensure understanding.
- Align information architecture to the audience’s mental model to ensure settings are easy to find and manage. We recommend card sorting activities with co-creators.
Customize
- Create an environment of psychological safety by giving people control over privacy settings and data collected.
- Facilitate engagement with the available customization options by providing an onboarding wizard.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “In my dream world, AI could help me customize my experience. What if I could tell AI that I struggle with these things and then it could recommend settings?”
- “Settings don’t explain what they do and there’s no way of knowing other than seeing what the difference is.”
Suggestions
Suggestions can interrupt individual's flow and can be a source of cognitive overload or overwhelm.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Offer suggestions only when there is high confidence that an individual needs them or would find them valuable.
- Provide feedback mechanisms and adapt to suggestions accordingly.
- Anticipate the variety of emotional states a person might be experiencing when a suggestion is surfaced and adapt language and frequency to preserve motivation.
Direct
- Include a description of the suggestion without requiring additional clickthrough. This allows people to decide if exploring the suggestion is a good use of their time without pulling them entirely from their current task.
- Make suggestions immediately actionable.
Customize
- •Allow people to turn off suggestions or set limits on when and how often they occur.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “The best example is when AI shows up after expressing an intent. For example, if I take the day off then it makes sense that it asks to cancel my meetings, and set an away message.”
- “If I'm unable to do what it suggests, I think I'm doing it wrong or not taking advantage of a feature that’s clearly designed to help me.”
Timers
Timers can support people by providing structure and setting clear expectations but may also contribute to anxiety or be too inflexible for people with various learning needs.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Provide affordances to help people extend their time or save and continue later.
- Support attention with visible but non-intrusive timers. Use color carefully to minimize anxious responses.
- Consider using timers that count up to a set time rather than counting down to zero to minimize stress.
Direct
- Include a pause button.
Customize
- Provide options for the visualization of timers. Metaphors, like a growing tree, tend to contribute less to anxious feelings.
- Allow people to show or hide timers based on their preference.
- Provide time-constraint free options whenever possible.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “I like seeing timers to know how long I have before I need to move on to another task or activity. I need to be able to pause sessions due to interruptions for urgent matters or if I need more time.”
- “Red can trigger even more stress, which is what you often see near the end of a timer.”
Wayfinding
When people don't know what is expected of them, it can trigger negativity towards the product and themselves.
Guidance
Key tips we developed through co-creation and informed by published research.
Preserve
- Align the hierarchy of design elements to your audience's motivation. Direct attention to the actions that can accomplish their goals.
- Reduce cognitive overload by streamlining the experience. Align to the individual's intent at a given moment and cut any unnecessary elements.
- When there are multiple steps, provide a way for people to track their progress and know how many steps remain.
- Help people feel in control by providing back and undo actions wherever relevant.
- Support memory by helping people visualize the path they took and facilitate returning to previous steps using breadcrumbs.
Direct
- Ensure people always knows what their options are. In a flow, always indicate the best next step with a single primary button.
- Form a consistent framework of navigational elements and core actions to reduce disorientation.
- Break long processes into steps to orient people and help them feel confident.
Customize
- Prevent information overload with options to hide or reveal features outside the core functionality.
Customer voice
Quotes gathered by Microsoft during mental health and neurodiverse focus groups.
- “I need to know where I am in a flow and be able to go back if I mess up, because I usually mess up.”
- “I get anxiety knowing if I close something, I may need an FRE later on and I can't get back to it.”
Acknowledgements
We want to hear how you're using Microsoft's Mental Health and Cognition Guidance. Share your stories with inclusivedesign@microsoft.com
Created by Ali Benter, Alice Lee, Amanda Poh, Amanda Yang, Andrew Wu, Chelly Jin, Christa Keizer, Christina Mallon, Hernan Maestre, Karina Dion, Kelly Gorr, Kristen Sunny, Tany Holzworth, and Will Brennan.