Most interactive designers already know and love labeled graphics. Labeled graphics let learners interact with and explore different aspects of an image through labeled hotspots that denote points of interest.

Although hotspots are often organically placed within labeled graphics, we’ve found that in many situations, a structured placement of hotspots better suits the content—like spacing the hotspots at an equal distance, in a straight line, or on a grid. You might opt for a structured approach when you’re dealing with content such as flow charts, organizational diagrams, or equation call-outs. But how exactly do you position hotspots in a precise and structured manner in Articulate Rise?

It’s not as complicated as you might think, and we have a tutorial to walk you through the exact steps to get it right.

Learn how to precisely place hotspots in Articulate Rise

Watch the process we use when creating a Rise 360 labeled graphic where we want the hotspots to be positioned in a precise and structured manner. Usually, this means placing them in a straight line or on a grid, as well as controlling the spacing between each of the hotspots or between the hotspots and a graphic element.

I’ll show you the entire process, including a couple of tricks in Adobe Illustrator to make structured placement much simpler (this is the secret sauce!). Learn more by watching the demo or reading the transcript.

Access the video transcript.

Learning works best when beautifully designed

As you’ve now learned, it only takes a bit of extra effort to achieve precisely placed hotspots. We believe that extra effort is always worth it, especially when it means designing the best possible experience for learners.

We sweat the details because usability, intuitiveness, and beautiful design contribute to the overall effectiveness of the learning experience. If you share our belief that well-designed experiences resonate better, share this tutorial with a learning designer in your life and keep the great learning going.