Skip to content

Documentation with interactive images using Draw Attention

Share:

Move your mouse here, move your mouse there, hover here, click there, it’s the blue button, it’s the dropdown, did you follow the documentation? Does any of this sound familiar when you are talking to your customers, friend or family member that you are trying to help use a technical product online be it Facebook or online banking?

If you answered yes, then there is a tool that can help make those conversations a whole lot easier for you. That tool is called Draw Attention and it is available for free at https://wordpress.org/plugins/draw-attention/. It was created by created by Nathan Tyler of Tyler Digital.

Documentation with interactive images using Draw Attention

As seen in the image below – Figure 1 – Draw attention is helpful for illustrating where to click in a software interface.

 

 

documentation draw attention

Figure 1

 

How to use Draw Attention

Draw attention allows you to select a screenshot and annotate it. This could be a screenshot from your app or plugin. This could also be a screenshot from another product or service like Facebook or Twitter.

After you’ve capture your screenshot, upload it using the WordPress media uploader.Annotate that image to point out specific places where you would like to draw your end users attention. Draw Attention uses a point and click method to create any shape that you like to cover the area with an overlay. When this overlay is clicked, a message – which be configured to redirect the user to another url – is displayed.

After you have designated an area, you can add specific instructions for that area. For example, in Figure 1, we highlighted the “inbox”. We gave it a title of “Starting point” and a description equal to “This is your first click.”

 

documentation draw attention

Figure 1

There is also a video that was created by the folks over at Draw Attention, which further illustrates what it can do.

So if you need a tool that create interactive images which is very useful for documenting your software products features and usage instructions, then you may want to give Draw Attention a shot. There is also a Draw Attention Pro version which offers the following features:

Have Multiple Interactive Images (Pro only)
Need more than one interactive image on your site? The Pro version allows unlimited highlightable areas on unlimited interactive images

Layout Options (Pro only)
Show more info about highlighted map areas in a variety of different layouts, including lightbox and tooltip.

20 Pre-Defined Color Palettes (Pro only)
Choose from one of 20 pre-defined color palettes or use your own custom color scheme

Share: