Step by Step Guide How to Create Context-Sensitive Help

Step by Step Guide: How to Create Context-Sensitive Help

We design all sorts of online tools and apps in order to achieve better workflow optimization, and these tools are constantly improving and evolving, thereby becoming more and more reliable. However, what really sells these products is actually their usability.

To be more precise, the products need to be user-friendly in order to be useful in the first place, and users and developers tend to have widely different mind-sets and understandings. In other words, you either need to create an interface that is incredibly intuitive, or a good tutorial and context-sensitive help, so that users can easily master your software.

Even though users love an intuitive design, you can very often sacrifice the depth and brilliance of your tool just so that you can cater to the needs of your users, which is why context-sensitive help is, in a way, a more useful solution. The following article is here to help developers create context-sensitive help for their software that allows casual users to easily navigate the interface of a particular online tool.

Does your application need context-sensitive help?

Context-sensitive help is documentation that is embedded in the application itself and is smart enough to deliver the corresponding content at the right time. The best type of contextual help tools are those that can monitor user behavior and respond with content adequately.

For example, when users start doing something, contextual help software can display a popup with additional information that can explain how to complete what they’ve started. Also, if an application is configured incorrectly, the software can provide an explanation on how to configure the app more accurately, to achieve better performance.

Since these are the primary purposes of context-sensitive help tools, almost every application needs them. Basically, if you create something that requires users to go over an instruction manual in order to use it adequately, then you need context-sensitive help to go along with it. Your goal is to help users understand your product without switching to a different screen, and if you manage to do that, then you have created a quality application.

Step number one: Ask the developers to go an extra mile

The first thing you can do is ask your developers to write tips while they develop their user interface. If they embed the tips inside the app immediately, then all of your problems are solved, right?  Well, not exactly. There’s nothing wrong with the solution though; the problem can be something different in this case.

As mentioned, the knowledge of developers and the knowledge of users are widely different, so the tips written in technical fashion could be hard to comprehend. Even though the tips are there, users will still be confused.

Step number two: Test your application

You won’t know how good your context-sensitive help actually is until people start to use it. However, before you release your product, it would be good to get some feedback from the real judge of your software, and that is user experience.

If the average user has no trouble understanding popup instructions, then your product is good to go; if not, then the instructions need to be rewritten. These new instructions should be written in collaboration with developers and adjusted so that they meet customer demands, written in a manner they can understand.

Step number three: Creating a popup, lightbox or a tooltip

When using context sensitive help tools, you can help your users by creating either a lightbox, a popup or tooltip.

A lightbox is an overlay on the top of a particular page, and you might have noticed how sites like Facebook and Amazon make great use of this element. A popup is a small window that will suddenly appear to provide users with some relevant and helpful information. A tooltip appears when a user hovers over the link and it’s commonly used to provide them with hints and tips whenever they are dealing with an unclear input.

A Popup and Lightbox can be easily added to any page, since the software you are using has a toolbar that says popup and lightbox, and all you need to do is click on it. Then, you select whether you want to add a popup or a lightbox. You can immediately enter the height and width of the window and you can also check in the “https” box, if your site runs on https. Then, all you need to do is copy your code snippet and save.


For light box the procedure is very similar, all you need to do is select “Lightbox” and you have a feature “Background Overlay” that you can adjust, if you want your window to be either more or less transparent. Code will use page’s URL and if you check it, but if you change the URL the light box won’t work anymore. So, if you plan on changing page’s URL make sure you check the box PAGE ID, since page ID will never change, thereby your lightbox will still work even if you change page’s URL.

IMG_257 IMG_258

When creating a tooltip, you need to select the new tooltip option in the toolbar. Then, a window will appear where you will enter all the relevant and helpful information. You’ll give your tooltip a name and enter the text that will be displayed when the tooltip appears. So, you’ll need to fill in the following fields.

  • Name;
  • Description –  Describe the content (end users will not see this entry);
  • Custom ID – The tooltip is going to use a system generated ID, but you can also use your own ID, in order to summon the tooltip;
  • Width;
  • Height;
  • Offset;
  • Auto-Close – Uncheck this box if you do not want your tooltip to close on its own automatically.

IMG_259 IMG_260

Here’s an image that demonstrates how to create context-sensitive popup help.


This way, your users will be able to find specific information related to a certain user interface element. Furthermore, the popup help will be displayed in a pop up window, not in a help viewer.

Once the users are able to navigate through your app without any external help from the instruction manual or another website, they will be satisfied with the product. The most important thing here is to effectively mediate between developers and users, which can sometimes be a tough bridge to build. Remember to form a group of beta testers to help you tweak out all the details and point out where future improvements are needed.