Think back on your third-grade field trip to the science museum. You and your friends probably walked past 75% of the exhibits—the ones that were mostly static pictures with some explanatory text. But then there were one or two exhibits the entire class clamored to see. Why? Because they were interactive, and everyone wanted their turn pushing buttons and pulling levers.
Studies show that interactivity increases engagement, which increases the retention of information by learners. In previous blogs we’ve explained the importance of keeping your content visual, and we still mean it! Why not take it one step further and make your content interactive as well? With two simple Lucidchart features—hotspots and layers—visual and interactive content is just a few clicks away.
Layers
Lucidchart layers allow you to overlay multiple elements of a diagram and control which ones are seen at any given time. To add a layer to your diagram, select the layers icon from the right toolbar, and then select “+ Layer.”
To edit a layer, double-click on the name of the layer in the right toolbar or double-click on a shape that is part of the layer you want to edit. You can hide a layer by selecting the eye icon next to the name of the layer.
See our layers tutorial in our Help Center to learn more about using the layers feature in Lucidchart.
Hotspots
Use hotspots to make static elements interactive. With a hotspot, you can toggle between layers, link to external content, or hop from one page of a document to another. To add a hotspot, drag and drop the green square with a lightning strike icon at the top of the shape library. Alternatively, select any shape, right-click, and choose “Add hotspot.”
To add an action to a hotspot, select the hotspot and then choose from the options in the drop-down menu. If the menu doesn’t appear, select the gear icon to turn the menu on and off.
Become a hotspot wizard with our hotspots tutorial online.
Making interactive diagrams
There is no limit to the number of ways you can combine hotspots, layers, and other Lucidchart features to make your diagrams interactive. But to get you started, here are a few ideas.
1. Make an interactive wireframe or mockup
Use Lucidchart to make wireframes and mockups online that not only look but also act like real websites and mobile applications. For example, create multiple pages in your document to mock up different pages of a website. Then, use hotspots to make buttons that will actually navigate from one page to the next. To do this, select the “Link to Page” option in the hotspot menu.
With a combination of layers and hotspots, you can create a pop-up that actually works. First, add a new layer and design your pop-up. Then, on your main wireframe, add a hotspot with the functionality “Show Layers.” This hotspot will allow you to open the pop-up. Now, add a way to close the pop-up by including a hotspot with the functionality “Hide Layers.”
2. Compare current and future states of a new workflow or feature
You can use hotspots and layers to propose or compare current and future states of an existing diagram. For instance, a software developer could present their idea for a new development project. To do so, they would find existing documentation of a network or application and then use layers to show how their new piece of hardware or code would fit into the existing system.
A process analyst might introduce changes to a process in a similar way. They would diagram the as-is process and then use a layer and a hotspot to switch between the current state and the to-be diagrams for emphasis.
3. Divide large diagrams into smaller pieces
Sometimes, diagrams get so large that they become difficult to see and understand. For example, comprehensive org charts at large companies can quickly get out of hand. Break large diagrams into more manageable pieces using multiple document pages. Then, link the pages together using hotspots. This org chart shows company leaders and then navigates to separate org charts for each department.
4. Link to documents and resources
Use hotspots to link to documents and resources that are stored external to Lucidchart. For example, diagram an email flow in Lucidchart then use a hotspot to link to the actual text of each email in Google Docs, DropBox, or elsewhere. Doing so allows you to take advantage of visual thinking while staying connected to all of your resources.
Our friends at Mozilla have discovered the benefits of interactive diagrams. They used Lucidchart and our integration with Dropbox to build an interactive UX flowchart. Not only does the diagram explain how users navigate through a system, but it also links directly to the graphic assets used to build the actual system online. You can see how Mozilla used Lucidchart and this diagram on their website.
Using layers and hotspots in any diagram can offer added context amongst collaborators, help you plan and track changes, and even make your diagrams central repositories for projects.