WalkMe UI Toolkit Guidelines
Foundations / Writing and Wording / WalkMe / Toolkit Guidelines
Intro
This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.
- Note: When the WCAP Design team releases new WalkMe components to the WalkMe Gallery, we will add them to this guide.
- Note: General writing guidelines (grammar, tone, voice, etc.) are provided in the WalkMe Content Guidelines.
General WalkMe Building Notes
When building WalkMe launchers, Show Me tours (product/feature overviews), and Guide Me tours (task-based walkthroughs), keep these general guidelines in mind:
- Welcome modals: Used only when a first-time user accesses the product. They “say hi” and explain the value of the product. It offers the choice to launch a Show Me tour or see a list of available tours. Optionally, you can launch a secondary tour.
- Entry modals for Show Me or Guide Me tours: Sets context for the user and explains what they will learn or what task they will complete…and why it’s important.
Example:
For Show Me tours, use step titles.
Examples:
For Guide Me tours, you don’t need to use titles, as they are usually redundant and just repeat the body text or what the step balloon is pointing to.
Find out more about the difference between Show Me and Guide Me tours.
- Tour titles: Tour titles appear in both the WM Panel and the tour entry modal. In general, they should match.
In special circumstances, usually due to space, it’s ok to shorten the title in the tour entry modal, if the meaning and context are clear. For example, it’s ok to have the WM Panel title be “View related documents for a journal entry” and the tour entry modal title be “View related documents.”
-
Automated steps: WalkMe can automate steps in a workflow to speed up task completion. Be mindful when using this feature, as it can impair product learnability. We don’t want users to learn how to do only part of a flow and need to use the WalkMe flow as a crutch.
Scenarios when using automated steps makes sense:- General navigation through menus for important steps/actions.
- Opening drop-down menus when another selection action is required.
Example: Instead of saying “Select Create” (which opens a menu) and then saying, “Select New Purchase Order”, you can have WalkMe open the Create menu and have the single step “Create a new purchase order”. - Filling in long search terms in a search bar/field, so the user only needs to initiate the search and not have to type the search string themselves.
When auto-filling a search field and having the user initiate the search, use this format and punctuation:
Search for “Company System and Logo Settings”.
-
Avoid links to external content mid-flow: In the middle of a tour, do not include links to external content to “learn more”. In general, we do not want to take the user out of the tour experience to read more content. Prioritize providing the needed content/context in the tour. Providing a link to more documentation at the end of a tour is ok if you think it will add value to their learning experience and is a logical next step in their learning journey.
Sometimes, the user might not be able to complete a tour (for example, due to a permission issue or the action is not supported on the selected item). This is also a scenario where you might include a link to external documentation. For example:
Important: You must confirm that external links are available for all users.
Make help documentation links as predictive as possible. For example, “Learn about reversing journal entries”.
For links to external content, use this pattern:
Find out more about
link to the content
- Avoid extraneous pats on the back. Overuse of phrases like “Congratulations!” and “You’re doing great” can come across as patronizing and insincere.
- Avoid using the word “Please”: Excessive use of “please” is unneeded. You don’t need to say, “Please complete the form”; just say “Complete the form.”
- Avoid exclamation points. Most of the time, exclamation points come across as shouting or as condescending. (“Welcome to the product!”, “Bravo!”)
- Avoid greetings that are too casual or cheeky. Phrases like “Nice to see you again”, and “Welcome back esteemed learner” often don’t add value or don’t land well.
Field-level Step Guidance
In Guide Me tours, you often need to instruct the user to fill in multiple fields on a form or page. In the spirit of keeping tours as short as possible, it’s ok (and often advised) to combine multiple field-completion steps into a single step balloon.
For example:
- When there are several required fields to complete, instruct the user to “Complete the required fields”.
- When there are a couple of “obvious” fields to fill out that are near each other, combine them into one step. Instruct the user to “Enter a date and select a reason” as one step rather than “Enter the date” and “Enter a reason” as two separate steps. We want to avoid the user from getting click fatigue or feeling the guidance is just “enter this, click that”.
You’ll need to work with your WalkMe builder to ensure that we can attach and position the step balloon in a way to ensure the user knows how to complete the fields needed to continue.
Side Quests
Side quests are tasks or information related to the main task but not required. Avoid them. As Gold 5 says during the Death Star attack… “Stay on target.” Remain focused on the learning point or primary task you are teaching.
That said, sometimes you need to interject a side quest when information is missing and required to complete the main flow. In these cases, a side quest might be the proper solution, if short enough to insert.
- Good Side Quest: Inviting a specific contact to an event. The main task is to find the right contact for a supplier and invite that person to an event. In the happy flow, the supplier and contact already exist in the system. However, in some cases, the contact might not exist. Adding missing contacts is a required component to complete this task. Rather than telling the user to exit the tour, do another tour, and come back later, we can introduce a short task (side quest) to complete this task.
- Bad Side Quest: Inviting a supplier to an event. The main task is to find the right contact for a supplier and invite that person to an event. In the happy flow, the supplier and contact already exist in the system. However, in some cases, the supplier might not exist. Adding the missing supplier is not a long side quest, but a newly added supplier must be approved, which could take hours, days, or weeks. The user can’t continue the tour until the supplier is approved. In this case, provide a graceful exit to the tour and instruct the user to come back after the new supplier is approved.
Show Me vs Guide Me Tours
Show Me tours show people around a product or feature, but don’t interact with the product UI. Guide Me tours do interact with the product and help people complete actual tasks while they learn.
There are some subtle differences in the language and phrasing we use for each tour type.
Show Me Tours
- Avoid telling the user to interact with the product UI. Don’t instruct users to click, select, or choose a UI element.
- Navigation is achieved using balloon Next | Back buttons.
- When telling the user about something they can do in a step, phrase it conditionally “You can do ...” or “You can get more details...”. Phrase it as a possibility, so the user doesn’t think they need to do it now and accidentally deviate from the tour experience.
Examples of Show Me tours:
- Get to know your Public Profile
- Welcome to SuccessFactors
- Explore your home page
Guide Me Tours
- Always tell the user what to do and how to interact with a UI to complete each step.
- Navigation is achieved by instructing the user to interact (click, choose, select, enter) with UI elements to complete a real task.
Note: In the rare situations where WalkMe cannot trigger the next step via a UI action, you can use the Next navigation button as a workaround.
-
Be clear on the action the user should do. For example:
- Save your changes.
- Go to the My Items page.
- Select the checkbox for the journal entry you want to reverse.
Examples of Guide Me tours:
- Reverse a journal entry
- Book a flight
- Create a sales order
WalkMe Component Examples
Welcome Modal
Welcome Modals are used only for the first time a user signs into a product and gives the user the option to launch a Show Me tour, start a Guide Me tour, or show them the full list of available tours.
All other tours use smaller tour entry modals or hot spots.
Welcome Modal Writing Guidelines
When writing text for the Welcome modals:
-
Keep titles to 5 words max
Examples:- Welcome to SuccessFactors
- Welcome to Concur
-
Description text should be 30 to 40 words (50 max)
Example:
-
- SuccessFactors puts your people at the center of everything. Learn more about how SuccessFactors supports your employees with global solutions for core human resources, payroll, time tracking, benefits, and much more.
Welcome Modal Content Template
Title: Welcome to [Product Name]
Description: Introduce the product briefly. Write a concise, user-centric value statement for the product.
- [Product Name] is your… -- OR -- provides your employees with … (primary value/purpose sentence). In this tour, we’ll show you… -- OR -- Learn more about how …
Tour Entry Modal Writing Guidelines
When writing text for the Tour Entry modals:
-
Keep titles to 5 words max
Examples:- Explore your Full Profile
- Get to know your home page
-
Description text should be 25-30 words (40 max)
Example:
- The Full Profile is your one-stop shop to view your employee information. In this tour, we’ll show you the different parts of your profile, use shortcuts to jump to common tasks, and access your Public Profile.
Tour Entry Modal Content Template
Title: Explore ...
Description: The Full Profile is your one-stop shop to view your employee information. In this tour, we'll show you the different parts of your profile, use shortcuts to jump to common tasks, and access your Public Profile.
- [Feature Name] is your… -- OR -- provides your employees with … (primary value/purpose sentence). In this tour, we'll show you how to… -- OR -- Learn more about how …
Tour Entry Points
The WalkMe toolkit includes a variety of tour-entry solutions for different use cases. By separating the entry modal from the tour, you can mix and match as needed and minimize more complex WalkMe builds.
Error messages and graceful exits
Sometimes, a user cannot complete a tour due to insufficient permissions or a selected object not meeting the criteria to perform the needed action on it.
Examples:
- User has permission to terminate the employment of some people but not everyone. So, the user has the permissions required to start and complete the task, but only for specific people. WalkMe cannot predict which person the user will choose when they start the tour, and if the product UI doesn’t filter these people out, the user could choose a person they cannot take this action on.
- User wants to reverse a journal entry, but the journal entry that the user selects from the list cannot be reversed.
Keep these scenarios in mind when building tours.
When writing text for an error state, follow this format:
Problem → Cause → Action
Insufficient user permissions
When the user doesn’t have permission to complete the task, you need to provide a graceful exit (offramp) from the tour.
Example 1: Can’t request feedback on a specific person
TITLE (option 1): You don’t have permission
TITLE (option 2): Insufficient permissions
BODY: You cannot request feedback on this employee. You can choose a different employee or contact your admin for help.
CTAs: Continue | Close
Example 2: Can’t terminate the employment of a specific person
TITLE: Permission required
BODY: You don't have permission to terminate this person's employment. Confirm that you have the correct person or contact your admin for help.
CTAs: Continue | Close
An alternative approach, which might be better in some cases, is to not provide a CTA to “go back” to the previous step. In this scenario, you would provide only the Close CTA.
Selected object doesn’t meet criterion
When the object the user has selected in a step of a tour doesn’t satisfy the conditions needed to proceed to the next step.
Example: Unable to reverse the selected journal entry
Typically, you will use a tour step balloon for this content.
BODY: You cannot reverse this journal entry. Select a different one to continue.
CTA: Close | Next
Done vs Close
- Done: Done indicates that you’ve completed the flow as intended.
- Close: Close indicates that you cannot continue the flow (be permissions or available items to select). This mimics the behavior of the x in the top-right corner of the WalkMe balloon.
Note: We are working with WalkMe to understand how these CTAs are recorded WalkMe analytics. We want to be sure to properly report users who “abandoned the tour”, “left the tour because they could not complete the happy path”, and “completed the entire tour”. Stay tuned for updates on this issue.
Reminders
Reminders are a great way to engage users and help them be more successful. When considering adding WalkMe reminders, be mindful of the reminders that the native system already has. You don’t want to create redundant reminders and annoy the user.
WalkMe-powered reminders should be used selectively and as part of the continuous onboarding experience. For example, to remind the user:
- Of a time-sensitive action they need to take
- Of important updates after being away from the product for an extended period
- When a task can be automated for them
New Feature Carousel
For large, new feature announcements, you can use the New Feature Carousel to highlight up to 3 new features. From each feature page, you can optionally launch a Show Me or Guide Me tour for that feature.
First Page Content Template
For Guide Me tours, set the purpose/outcome of the walkthrough.
Titles
- Book a flight
- Create a purchase order
- Submit an expense report
Descriptions
Approach A
- We’ll walk you through booking a flight and make sure you check all the boxes.
- Learn how to create a purchase order right the first time.
- Learn how to submit your expense report so you get reimbursed as fast as possible.
Approach B
- Find a sales order
You can locate existing sales orders to verify, edit, or complete its details. - Create a sales order
You can create a new sales order to record the delivery and price details for a specific sale.
Guide Me tour success message
The end of a Guide Me tour should act as a success message / recap of the task. When appropriate, it should suggest the next task to do, if this task is part of a larger process.
Guide Me tour success message, no nudge
Examples:
- End of Guide Me tour: You successfully booked your flight. Visit your Flights page to review or make changes later.
- End of Guide Me tour: You successfully created a [THING]. Remember, that you must [NEXT THING TO DO] to finish …
Announcements
Announcements are quick, in-product messages that help users stay informed at the right moment in their usage journey. Announcements offer a light-weight way to educate users about new features, drive adoption of underused features, and alert users about the depreciation of existing features.
You can use the WalkMe Shoutout component to serve this content.
Notes:
- Announcements must be segmented by role and version.
- Announcements trigger automatically when the relevant page is loaded. It is never accessed via the panel. After the user interacts with the CTA, the announcement is dismissed and never appears again unless a Remind Me Later CTA is used.
Managing Announcement Updates
The LOB and Builder are responsible for deciding when an announcement should be turned on/off. Managing announcements includes these tasks:
- Notify WalkMe team when changes occur: Inform the WalkMe team as soon as a feature is released, updated, or deprecated.
- Request update or removal: Specify whether the ShoutOut needs to be edited, replaced, or removed entirely.
- Confirm changes: Once updated, validate that the ShoutOut displays correctly in the product.
Announcement Types
- Minor feature updates
Alerts users about a new feature. Content should briefly describe its benefits and could suggest that the user check it out.
CTA options:
-
- Learn more: links to a SAP Help Portal doc.
- Take me there (Go to settings): takes the user to application page where they can enable this setting/make the needed change.
- Do it for me (Turn it on): Automatically turns the setting/feature on for the user.
- Show me: If the feature has been automatically rolled out, you could link to a Show Me tour to highlight the new feature area. (rare)
Note: Use this solution for smaller features. Bigger features should be highlighted in the New Feature modal/carousel. You can also opt to use a hot-spot tooltip, if you want a more subtle experience on the product page where the feature has been implemented.
Example scenarios: Changes to legacy features, policy changes
-
Feature action prompts
Tells users about an existing feature a user isn’t taking advantage of and prompts them to use it.- Take me there (Go to …): takes the user to application page where they can enable this setting/try out the feature.
- Do it for me (Turn it on): Automatically turns the setting/feature on for the user.
- Learn more: links to an SAP Help Portal doc; used when opting into this feature might require more discovery/impact analysis before turning it on.
-
Feature deprecations (important reminders): Alerts users that a feature is being phased out and/or replaced with a newer version at some future date. Content should briefly describe its benefits and impact. When possible, include the deadline (deprecation date) by when the user must take action.
CTAs:- Learn more: links to a SAP Help Portal doc; used to educate users on the impact of the deprecation/transition and steps they need to do to prepare. Could include deadlines.
- Take me there (Go to settings): takes the user to application page where they can enable this setting/try out the feature
- Do it for me (Turn it on): Automatically turns the setting/feature on for the use
- Remind me later: sets a timer to remind the user about this deprecation. Use thoughtfully and consider how this scenario should work (when to remind, how often, not to remind user if action was taken, etc.)
Note: You will need to work with WalkMe and your LOB product team to hook into reminder logic to create the experience you want.
Specs
Feature update
- Title: <Feature description> (5 words max)
- Body: Description of feature’s benefit (4 lines max)
- CTA: No more than two per announcement
Note: Localization can make text longer, keep titles and copy as brief as possible.
Feature action prompt
- Title: <Action description> (5 words max)
- Body: Description of action’s benefit (4 lines max)
- CTA: Take me there, Go to settings, or See it (varies based on use case)
- Secondary CTA: Do it for me
- Note: Localization can make text longer, keep titles and copy as brief as possible.
Deprecations / Important Reminders
- Title: <Action description> (5 words max)
- Body: Description of action’s impact and what, if any action needs to be taken (4 lines max)
- CTA: Close or Acknowledge, Got it, Remind me later, Learn more
How to adjust a Reminder component for an announcement
Refer to the Builder Notes.
Launching external videos
If you have a repository of externally hosted videos that you want to make available via the Help panel, you can use the full-screen video component. Learn more about using this component in the Builder Notes.
Collecting user feedback
The WalkMe UI toolkit includes components to gather feedback from users about their experience.
You can create two types of feedback surveys:
-
WalkMe Satisfaction Survey: Used to collect feedback on WalkMe and the onboarding experience and collect suggestions.
-
Feedback Survey: Used to collect user feedback on a specific action or behavior.