Maximize User Success with Accessible In-App Guides: Here’s How

For SaaS companies, accessibility isn't just a nice-to-have feature anymore. It's essential for designing a seamless user experience for all users. 

While product teams are increasingly embracing accessibility principles, they tend to overlook the fact that accessibility goes deeper than product design. To help users navigate your product effortlessly and experience its actual value, you need to ensure that all aspects of your product are accessible to everyone, including your in-app guidance resources. 

This article will give you an overview of the eight most crucial accessibility principles to remember and the proven tactics you can use to design accessible in-app guides.

Until a few years ago, accessibility was merely part of the compliance checklist for many SaaS companies. Today, it’s a must-have principle that enables you to build a more inclusive product experience for people of all abilities. 

The global legal framework mandating accessible digital experience is another key reason why accessibility matters for SaaS companies:

• The Americans with Disabilities Act (ADA) is the most widely accepted law in the US defining the terms for web accessibility

• The European Accessibility Act also lays down the rules for functional products and services available online 

Besides these two disability laws, governments in several countries across Europe, Australia, Canada, and other regions require product companies to deliver equal access to all users, regardless of their abilities.

The most important guiding principles in this field are included in the Web Content Accessibility Guidelines (WCAG) which outline guidelines and best practices for creating accessible digital experiences.

Beyond these compliance requirements, you also need to factor in the competitive benefits of creating accessible digital experiences. When 98% of websites don’t meet accessibility principles, you can stand out by giving users a unique experience.

(Source)

In other words, you can serve a bigger market by designing with accessibility in mind. A more accessible product encourages new users and, ultimately, increased revenue.

Incorporating accessibility into your product experience requires consistent thought and effort from the beginning of your product roadmap. 

In-app guidance enables users to explore your product and quickly understand different features. However, these in-app resources must be accessible to all your users. 

Let's break down eight fundamental accessibility principles and how you can incorporate these in your in-app messages.

Readability: Make your messages conversational and easy to understand. Write short sentences, avoid technical jargon, and focus on active voice to ensure your guides are easily readable. Besides plain language, the design also plays a role in making these guides accessible. For example, use a high color contrast ratio to separate the text from the background.

Conciseness: Be mindful of users’ cognitive load and keep your instructions brief. For example, users can feel overwhelmed if you provide too much information in a single product tour. Instead, keep your instructions short and break them down into multiple messages. Aim to write as clearly as possible with no room for ambiguity or confusion. 

Simplicity: Create a simple and user-friendly design for your in-app help documents. Some people with disabilities can struggle with too many elements on the page or excessive motion. Break down your guides into a structure that follows a logical order and that users can decode quickly. 

Universality: Choose universally accepted words to write your help documents. Idioms and hard-to-translate phrases can make the guides difficult to understand. Write your contextual support docs using a global vocabulary to help users focus on your product’s value and try new features.

Consistency: Use the same patterns and elements to make consistent designs for your in-app guides. Create mental models–explaining how something works–when designing your guides—inspired by similar product guides—to help users understand the information quickly. They'll be more used to the patterns and can decode all guides effortlessly. 

User-centricity: Keep your users’ needs at the core of your in-app guides and design for usability. Ask yourself: Will users meet their goals using these guides? Seek user feedback to answer this question and make improvements to your product guidance. 

Holisticness: Focus on building an all-around solution for visually impaired users with a combination of text and graphics. Add a text-to-speech option, alt text for images, captions in your videos, and keyboard navigation to help users understand the message in all possible ways.

Structuredness: Structure all your user guides in a seamless, clear hierarchy. With each guide, modal, or tooltip, tell users the clear next steps they need to take. Ensure that the most critical information and action stand out for users to focus more on that part. 

Now that you know the main principles, let’s discuss the three key aspects of designing accessible in-app guides.

Here are some of the aspects to consider when making your in-app guides accessible to all users.

Your brand voice and the contextual tone of voice determine how you communicate to your users in different situations and different channels. This can take many forms—formal, inspirational, funny, quirky, or anything else that fits your brand style. 

The voice and tone also impact the vocabulary you use for in-app messages. For the purpose of accessibility, make sure your voice and tone are:

• Empathetic: Creating relatable content that matches your users’ sentiments and gives them action-based information to explore your tool

• On-brand: Stick to your brand voice and brand style guidelines to create consistency in design, terminology, phrasing, and other aspects

• Consistent: Use a tone of voice that matches your brand personality and make the design consistent across different devices 

• Compassionate: Reflect some compassion toward your end-users to simplify complex issues with in-app notifications

• Friendly: Keep the tone friendly yet respectful, making the guides positive, solution-oriented, and actionable 

• Supportive: Take an encouraging tone when guiding users to a knowledge base or asking them to contact your support team 

• Reliable: Write like an expert and build credibility with an authoritative tone that shows you know what you’re talking about 

Your in-app guides educate users about your product, making them more invested in using the app for all possible jobs to be done. With the right tone, voice, and vocabulary, you can engage users more quickly and help them unlock more product features. It’s all in the way you communicate the details.

User onboarding is one of the most important use cases for in-app guides. New users need a hand learning how to navigate your product. Delivering in-app guidance through product tours, tooltips, walkthroughs, and other resources can make onboarding more personal and productive for them. 

You can make your in-app guides more accessible for first-time users by following these best practices.

Value-oriented guides: Showcase your product's core value propositions in your onboarding flows. Create a product walkthrough, add tooltips for specific product features, and design interactive guides highlighting a potential use case. Remember to lead with value in all these guides.

Focus on users: Focus your content on resolving users' pain points. Emphasize benefits over features with intuitive design. Make it easy for all users to understand your guides' design and content without getting wrapped up in technical jargon or complicated design. 

Present cohesive information: Use onboarding checklists to tell users all the basic product functionality. These checklists ensure you're conveying information in order of priority, starting with the most critical actions and knowledge to understand the product's benefits. 

Explain essential details: Include meaningful tasks to help first-time users get the hang of your product. Double-check whether the text and design explicitly convey these steps for users to complete the given tasks. 

Make the guides reassuring: Reassure your new users that you'll help them solve their challenges. Make your guides easily understandable and deliver proactive support to ensure users are able to reach their expected goals through your product. 

Keep it respectful: Before asking for access to users’ data or requesting them to grant permissions to any account, explain the reasons for making such requests. Use a respectful and positive tone to inform users of all the reasons behind such data exchange and explain the benefits of doing so. 

Use visuals for distinction: Add visual elements to complement your textual messages and make your in-app guides stand out. Use distinct colors to emphasize important information or buttons. Add microcopy to indicate what happens when users click on a button. 

Create inclusive designs: Use assistive technology, like screen magnifiers, text-to-speech tools, and toggle buttons to remove all motion to make your guides more inclusive. Add interactive elements wherever possible to explain your help docs and answer user questions.

To create an accessible onboarding experience, you need to constantly review user journeys and design in-app guidance that eliminates any confusion. These best practices will help you deliver maximum value with your guides.

Besides creating deep-dive guides to help users navigate your product, you can use in-app notifications to deliver quick tips when users are trying a new feature for the first time. Use short messages, like tooltips, and in-line help to make this work. 

Here are a few accessibility guidelines to cater to all types of users with instructional in-app messages:

• Informative: Pack these messages with essential information to guide users about the next steps when they're figuring out your product

• Contextual: Offer enough context about a multi-step task to show users what will happen once they use that feature or take a critical action 

• Reassuring: Give users complete clarification for complex decision points, like personal data sharing, and guide them through the steps

• Generous: Add an option to learn more about a feature or an additional action like directly booking a call with a CSM to help users if they make a mistake or want to explore more possibilities 

• Supportive: Create a learning path for interested users to dive deeper into a product function and learn more about your app. You can do this by adding links to relevant help docs, live product workshops, advanced tutorials, and more. 

Short in-app messages give users a heads-up about a new feature or share a quick tip to help unblock them. They play a vital role in engaging users early on and nudging them towards activation.

If you’re building in-app guides in-house with the help of your engineers, following the principles and steps we outlined above will help you create inclusive in-product experiences for your users.

If you’re looking to save time and resources, you could use a Digital Adoption Platform (DAP), like Chameleon, to quickly build and deploy in-app guides for user onboarding, product updates, feature announcements, interface redesign, upsell and cross-sell prompts, or anything else you need. 

At Chameleon, we are striving to make every product accessible to everyone regardless of viewing possibilities. Whether you are creating Tours, Tooltips, Launchers, or Microsurveys, these will be in line with the WCAG standards by default. 

What does it look like in practice? Here are some of the accessibility rules that are incorporated into Chameleon-built Experiences:

• When an in-product Experience built with Chameleon is displayed, it automatically takes the focus which means that a screen reader will focus on it or a user can start navigating through it with a keyboard

• When an Experience is no longer showing, then the focus is reset on the page, moving back to the top of the page, or to the first element on the page

• Once a user or a screen reader has tabbed through all clickable components, the focus then moves back to the first clickable component on the Experience

• If an Experience is attached to any element on the page, this element is then part of the "tab path", based on interactivity

• The ESC key is used to hide/close the Experience based on context and the Experience settings

• The Dismiss component is clearly labeled in the HTML, either as "close" when the cross is used or the string when the text is used

• Images are labeled with the “Alt text” component in the HTML, and you can easily set this in the Chamalelon Builder when you select Media as shown in the example below

Accessibility isn’t a nice-to-have feature, but a necessity. If you truly want to build with purpose and design an inclusive product, you need to keep accessibility at the forefront of your development process. 

Beyond product development, accessibility plays an important role in helping users navigate your product with ease, helping them to get to the value quickly without any obstacles on their way. 

In other words, designing in-app guides that follow accessibility principles is a surefire way to engage all users, drive product adoption, and create a strong differentiator for your brand.