Embedded User Assistance
In this example of embedded user assistance, there is text within a list of instructions that can be clicked with the mouse to reveal additional, more detailed instructions. Clicking again with the mouse will hide the details. This interactive feature behaves like the dropdown menus seen commonly on websites.
​
Shown below are two images with the detailed, dropdown instructions hidden in one and revealed in the other. The clickable text that toggles the detailed instructions is in dark pink, bold text.
Figure 1. Dropdown instructions hidden
Figure 2. Dropdown instructions revealed
Method:
​
Hiding and revealing the detailed instructions is accomplished using the concept of collapsible strips. The idea is that steps 1 through 3 of the instructions reside on a strip, which is a space on the website page that stretches from the left margin of the page to the right margin, and can contain text, images, or other elements. Steps 4 and 5 reside on a separate strip, and in between these two strips is a collapsible strip that contains the detailed instructions. The collapsible strip is programmed to expand or collapse when the clickable text is clicked with the mouse. Shown below is an image showing the collapsible strip as it appears in the website editor.
Figure 3. Collapsible strip in website editor
In Figure 3, above, the collapsible strip has been selected, so it is outlined in blue, and the name of the collapsible strip appears on a tab at the top of the strip. You can see the name of the collapsible strip is #isActivateCollapsibleStrip. The clickable text that toggles the collapsible strip to expand and collapse is a button and is called #isActivateButton. It can be seen in Figure 4, below. Notice that the collapsible strip appears with a hashmarked background when it is not selected in the editor. This indicates it is collapsible.
Figure 4. Clickable button shown in the website editor with its name
Code:
​
To get the collapsible strip to expand and collapse with the click of the mouse, I had to write a little bit of JavaScript code. I wrote a function, called toggleStrip, and some code that calls that function to invoke the interaction. Shown below is the code that calls the function, followed by the function code.
Figure 5. The code that calls the ToggleStrip function to expand and collapse the collapsible strip
Figure 6. Code for the toggleStrip function
Notice in the images above the function toggleStrip has one parameter called boxElement. This represents the name of the collapsible strip and tells the function which collapsible strip to act on. There is more than one collapsible strip on this page. In the code that calls the toggleStrip function, this parameter is #isActivateCollapsibleStrip. Notice also that the code calling toggleStrip checks the button #isActivateButton to see if it has been clicked. If it has, the toggleStrip function is called. Within the toggleStrip function is a check to see if the collapsible strip is expanded already, in which case toggleStrip collapses it, or if it is collapsed, in which case toggleStrip opens it.
​
Shown below is a table with descriptions for the elements associated with this code.
#isActivateButton | clickable text that toggles the dropdown instructions |
#isActivateCollapsibleStrip | block of text containing the detailed instructions |
Table of elements used in the code