Top
Best Practices
  • 7 minutes to read
  • Print
  • Dark
    Light

Best Practices

  • Print
  • Dark
    Light

Common Best Practices

Always test content in your development environment

If you work on multiple environments, it’s a good practice to publish your content on your test environment before deploying it on production.

Test%20everything.png

Organize content using Tags

Adding relevant Tags is a great way to keep your guides accessible and easy to find for your users.

Tag%20content.png

Use contrasting colors for Whatfix widgets

Use contrasting colors for Whatfix widgets, to make them stand out/noticeable on the website. Make sure that your widgets are not lost on your interface.

Use the contrast checker available on this site to help you decide - https://webaim.org/resources/contrastchecker/.

Contrast%20color.png

Be clear and consise

Use words and simple sentences. Keep the description in your tip simple and to the point.

Description%20simple.png

Use Beacons to catch the attention of your users

Use Beacons to highlight new features and UI changes. Link walkthroughs to beacons in case there is an associated procedure.

Beacon%20new%20ui.png

Don't exceed maximum width in a tooltip or Pop-up

When inserting images in your content, ensure that they don't exceed the width of the tooltip or pop-up to avoid any distorted images.

distorted%20image.png

Monitor the content performance using Whatfix Analytics

Remember to configure Whatfix Analytics to find out how your content is faring. Are your users completing tasks? Which step are they getting stuck at? What search terms do not give any results? All such data can be tracked and used to improve the performance of your content.

common%20analytics.png

Use Control+Shift+V to copy and paste content while translating

When translating content in the UI, avoid copy pasting content. The formatting of the content could get copied and may generate sync issues. If you have to copy and paste, use the CTRL+SHIFT+V (Windows) or  COMMAND+SHIFT+V (Mac) to paste content. Using these shortcuts ensures that only the value is copied.

Copy%20paste.png

Walkthrough

Use Walkthroughs for Product tours and Tutorials

Use Walkthroughs for sequential actions. For example: Product tour, Tutorials, and UI guidance.

Use simple descriptive names for Walkthroughs

Name every walkthrough clearly for easy retrieval during search. Use simple descriptive words that your audience is likely to use. Keep the title short. Use gerunds.

Name%20clearly.png

Do not use special characters while naming Walkthroughs

Do not use special characters when naming a walkthrough. Special characters may cause issues when trying to download the walkthrough as a video.

do%20not%20use%20special%20char.png

Use brief descriptions in tooltips

Use easy to understand words and simple sentences. Keep the description in your tip simple and to the point. 

Description%20simple1.png

Create Walkthroughs on a stable environment

Create walkthrough on production/live website which is stable and is not constantly being updated by code changes. If the underlying code of your application is being changed, any walkthroughs that you may have created may be broken.

Stable%20site%201.png

Limit the number of steps to 15

Limit the number of steps in a Whatfix guide to not more than 15 steps. This helps your users understand the value proposition of your guides quickly and easily. 

Limit%20to%2015%20steps.png

Split Long Walkthroughs into two parts

In case you can't keep the number of steps under 15, then consider splitting the guide into two and interlinking them. This keeps your guide crisp and simplifies user tasks.

When interlinking content, ensure that the button on the end message that links to the remaining procedure is titled appropriately. Use a short, action oriented phrase.

Split%20into%20two.png

Interlink walkthrough using a clear phrase

When interlinking content, ensure that the button on the end message that links to the remaining procedure is titled appropriately. Use a short, action oriented phrase.

Interlink%20walkthrough%20using%20a%20clear%20phrase.gif.png

Make sure tooltips don't hide any UI elements on the page

Position the tooltips so that they don't hide any elements on your page. In certain cases, the tooltip could inadvertently hide certain important UI. 

Reposition%20tooltip.png

Remove sensitive information using the Blackout feature

Remove personal/sensitive information using the Blackout feature. While creating a guide, use the Blackout feature to avoid capturing sensitive information like email, phone number, username, etc.

blackout%20feature.png

Use the Spotlight feature to prevent distractions for user

Use the Spotlight feature to get the user’s complete focus on the element on which the tip is displayed. Users cannot interact with other elements when Spotlight tip is active. 

Spotlight%20feature.png

Don't exceed maximum image width in a tooltip

When inserting images in your content, ensure that they don't exceed the width of the tooltip. Exceeding 270 pixels introduces a scroll bar.

distorted%20image1.png

To create walkthroughs, see Walkthroughs.

Self help

Animate the Self Help tab to catch the user’s attention

Animating Self Help helps increases the chance to catch users' attention and help them find answers themselves.

Animate.png

Deliver specific contents to users using Tags

Segment guides using Tags so that users receive more relevant and focussed content.

segment%20guides%20self%20help.gif.png

Link your support articles

Add links to your support articles in the walkthroughs steps to deliver more information. Use this wisely.

     <div class= "borderthick">

use%20link%20wisely.gif.png

To configure Self Help, see Configuring Self Help.

Task Lists

Use task list for user training and onboarding

Use task lists for user training. Task lists can be used to ensure that your users can all perform certain basic tasks. For example, you can use a task list to design an onboarding list of tasks to be completed by someone who’s new to your application.

Training%20and%20onboarding.png

Avoid listing more than 6 topics

Avoid listing more than 6 topics in the task list. Having a large number of tasks overwhelms users.

Less%20than%206%20tasks.png

Enable sequential tasks so users cannot skip tasks

If the tasks have to be done sequentially, then enabling sequential tasks ensures that your users can complete each task only after the previous task is completed.

sequential%20tasks.png

Deliver specific contents to users using

Tags Segment guides using Tags so that specific content is delivered to specific users.

Introduce Self Help

The last task in the task list can also be used to introduce your users to self help so that learning becomes continuous.

     <div class= "borderthick">

intro%20self%20help.gif.png

Track task list performance using analytics

Task list analytics includes completion rates at user and org level, user learning progress, individual task level data, how users are interacting with your content etc. 

Task%20list%20analytics.png

To configure Tasklist, see Configuring Tasklist.

Smart Tips

Make sure tooltips don't hide any UI elements on the page

Position the tooltips so they don't hide any elements on your page. In certain cases, the tooltip could inadvertently hide certain important UI.

Do%20not%20hide%20elements.png

Avoid unnecessary tooltips

Avoid unnecessary tooltips
Avoid adding tool tips for fields that are self explanatory.

Unnecessary%20smart%20tip.png

Add videos for better user engagement

Add videos within tooltips for better user engagement. Adding a video to your tooltip is a great way to engage your newly signed up users or to explain a lengthy process. Videos can also within the onboarding pop-up. Add videos using the Rich Text Editor.

     <div class= "borderthick">

smart%20tip%20video%20embed%20gif.gif.png

To create Smart Tips, see Smart Tips.

Pop-ups

Use Smart Pop-ups to show important messages

Use Smart Pop-ups to present important messages that your user segment must see.

     <div class= "borderthick">

popup%20home%20%281%29.gif.png

Use Guided Pop-ups for product/feature tour

Use Guided Pop-ups to provide a guided product/feature tour to users.

     <div class= "borderthick">

Creating%20Guided%20product%20tours%20%281%29.gif.png

Introduce Self Help and Task List

Use the last steps of your Guided Pop-ups to introduce users to your other Whatfix widgets like Self help and Task list.

Intro%20self%20help%20task%20list%20-%201.png

To create pop-ups, see Whatfix Pop-ups.

Was this article helpful?