Clickable screenshots for better User Guides
Any User Guide implies that at some point, a User needs to fill in an input form with several parameters. It can be a Registration form on a website, a Create New Invoice form in a financial software, or some other type of form in a company’s internal tool.
In most cases, input forms are intuitive and do not require User Guides to help Users (any ambiguity or unclarity can be covered with a tooltip).
If parameters on a form are tricky and require detailed explanations with examples and, sometimes, use cases, we can provide a User Guide with those explanations in the format of Table + Screenshot:
However, if there are more than 10 tricky parameters, an explanatory table for 3+ scrolls and several screenshots will most likely avert Users from reading the instructions and filling in the form.
A simple and most obvious solution to this problem is to divide one large input form into several parts and provide Table + Screenshot for each of them.
But I would like to suggest another option — clickable screenshots, when the whole form with all the parameters and explanations for each parameter fits into half a page of a Guide:
Instruments
To create clickable screenshots, we need:
- an instrument for taking screenshots
(I will use Snagit) - a software for creating diagrams with the following featurs:
— layers
— programmability (so you can hide/show elements when clicking or hovering on them)
(I will use draw.io) - a knowledge management system (KMS) that allows inserting html code directly to the code of pages or as a macro
(I will use Confluence)
Creating a clickable screenshot
In the following step-by-step guide, I will refer to the instruments mentioned in the previous section.
- Take a screenshot of a form that you want to create a clickable screenshot for.
- Open draw.io, create a new empty diagram, and enable the Layers feature by clicking on View -> Layers:
❗ I have a draw.io macro for Confluence, so I open it from a Confluence page. Another option, is using diagrams.net
3. In the Background layer, paste the screenshot you’ve taken in step 1. To the right of the screenshot, paste an empty panel (for example, a Rounded Rectangle from General elements):
Recommendations:
- fit the screenshot and the empty panel to 2 draw.io pages (in this way, your clickable screenshot will be readable on a page in the KMS)
- if the screenshot is wide but it has a lot of blank white space, cut out the excessive white space using the Cut Out feature in Snagit
4. In the screenshot, distinguish every field of the form that Users need to fill in. You can use a Rounded Rectangle from General elements with the Fill: none property:
5. Add a new layer to the diagram. Give the layer the same ID and name as the name of the first filed you want to explain:
6. Switch focus to the newly created layer (id):
— lock the Background layer (by clicking on the lock sign and making it dark-grey) so that new elements won’t appear where they don’t belong;
—unlock the created layer (make sure it’s light grey)
— click on the created layer so that it is highlighted in blue
7. In the created layer create 2 elements:
— a title with the name of the field you want to explain
— a text panel with the description of the field
Place the elements inside the empty panel in the Background layer like that:
8. Repeat steps 5–7 for all the fields of the form you distinguished in step 4.
In step 6, make sure you
— lock all the layers except for the one you’re working on now
— hide all the layers except for the one you’re working on now and the Background
After you created titles and descriptions for all fields in the form, it’s time to add some interactivity so that Users could click on a specific field and see information about it.
9. Switch focus to the Background layer:
— lock all the layers except for the Background one;
— hide all the layers except for the Background one;
— click on the Background layer so that it is highlighted in blue
10. Right-click on the rectangle that distinguishes the ID field and select Edit Link… in the popup menu
11. In the first text area, paste the following code:
data:action/json,{“actions”:[{“toggle”: {“cells”: [“layer_ID_toShow”]}},{“hide”: {“cells”: [“layer_ID_toHide1”, “layer_ID_toHide2”, ... "layer_ID_toHideN"]}}]}layer_ID_toShowis the ID of the layer with information about the field ID (id);layer_ID_toHide1is the ID of the layer with information about the field TITLE (title);layer_ID_toHide2is the ID of the layer with information about the field CATEGORY (category);- …
layer_ID_toHideNis the ID of the layer with information about the last field in the form (description)
So, when a User clicks on a field in the screenshot, they will see the background and the field description in the panel. When they click on a different field, the description of the selected field will apear in the panel.
❗ To ensure the interaction works properly, manually replace all double quotes with double quotes on English layout.
12. Click on the button Apply:
13. Repeat steps 10–12 to add interactivity to all the fields on the form.
Remember to put the correct IDs instead layer_ID_toShow and layer_ID_toHide for every other field.
For example, for the field CATEGORY, the code will be:
data:action/json,{“actions”:[{“toggle”: {“cells”: [“category”]}},{“hide”: {“cells”: [“id”, “title”, ... "description"]}}]}After saving and publishing the diagram, the clickable screenshot looks like this:
❗ If you don’t have the draw.io macro for Confluence, then you will need to export the diagram in HTML format and paste the code to a page in your Knowledge Management System.
A clickable screenshot for long scrollable forms
What if the initial input form is too long to fit into half a page of a Guide?
In this case, we can divide the form into parts and work with each part as a separate form on a separate page of a diagram. To connect the parts with each other, we can add navigation elements to every page of the diagram.
The following instruction explains how to deal with a three-part form:
- Divide your form into several logical parts (3, in our case) and take screenshots for every part:
2. In draw.io create an empty diagram and in the diagram, add as many pages as there are parts of the form (3).
Pages can be added in the bottom menu of the diagram:
3. In every page, create a clickable screenshot for the corresponding part of the form as described in the previous chapter (Creating a clickable screenshot).
4. When all the pages are ready, add navigation arrows to each page.
Insert navigation arrows in the Background layer of a page:
5. Right-click on the arrow and select Edit Link… in the popup menu.
6. In the popup window, select the page where you want to transfer a User when they click on the arrow and click on the Apply button:
7. Repeat steps 4–6 on every page of the diagram.
Remember that there can be arrows that lead both up and down the form😉
At the end, you may end up with something like that:
Limitations and drawbacks
- When description of a field is inside a clickable screenshot, Users won’t be able to search for specific words if they need to quickly find a particular information.
- If the initial form changes, it will take more time to update the corresponding clickable screenshot.
