Why Isn’t My Icon Button Working?

In Articulate Storyline 360, triggers make it easy to turn almost any object on a slide into a button. You can create buttons out of shapes, pictures, Content Library characters, and of course, our all-time favorite – icons! Icons are popular in modern design, as it makes it easy for learners to quickly recognize and understand visual references (also known as “low fidelity” imagery).

When playing with icons as buttons, we often receive questions when an icon button isn’t functioning as intended. So, let’s explore this “as heard in training” question: “Why isn’t my icon button working?”

Why Isn't My Icon Button Working with The Articulate Trainer

To begin, let’s start with the steps for creating a button with an icon.

First, add an icon from the Storyline 360 Content Library onto the slide.
Then, use the Trigger Wizard to add a new trigger so that when the user selects the icon, Storyline 360 displays a layer.

Screenshot of the Trigger Wizard menu in Storyline 360. The trigger is set to show Layer named "Tip 1" when the user clicks the object named "Tip 1 Button."

Tip: As you build, be sure to give clear and distinct names to objects and layers on the slide. This makes configuring the triggers so much easier!

Next, test your interaction in Preview mode.

This is where you might notice the issue. Did you notice that the button does not always work, and that selecting the icon does not always reveal the layer? Well, it works in some areas of the icon but not in others. Let’s find out what might cause this to happen!

First, Let’s Learn More About Icons

Line drawing with transparent sections.

The first thing to keep in mind is that icons are essentially line drawings or a collection of grouped shapes. So, any transparent portion of an icon is not selectable.

Imagine the icon as a cookie that’s been cut out with a cookie cutter. When you press down on the cutter frame, the dough is cut out and takes on the shape of the cutter. To make a trigger work on your cookie, a learner would need to select directly on the dough cutout. (Otherwise, they’ll end up selecting through it.)

So, if a learner is unaware that transparent parts of an icon button aren’t selectable, they may simply select any spot on the icon and nothing will happen. But, this doesn’t mean we can’t use icons as buttons! It simply means that, as developers, we must be aware of and plan for this. So, let’s explore two possible solutions!

Choose Icons Made Up of Solid Shapes

Two icons labeled "A" and "B." Icons are described in the paragraph below.

One solution is to only choose icons or graphics that are made up of solid shapes, similar to icon A. Icon A consists of solid speech bubble shapes with a transparent question mark in the center, whereas icon B is a line drawing of two speech bubbles with a solid question mark in the middle.

However, this solution is not completely foolproof, as icon A still contains some transparent elements that a learner could select. Also, being limited to a single style of icon isn’t ideal, as we’d rather have the freedom to choose graphics in a more creative way, right? So, let’s consider a better approach!

Add Icons to Transparent Shapes

Another way to make the entire icon selectable is to place it on top of a transparent shape. Let’s go through how to do that.

Add a shape to the slide. (We added a square shape in our example.)

Go to the States panel and edit the Normal state.
Add the icon you want to use on top of the shape.
Align and format the icon as desired, and then select Done on the States panel to end your editing of the state.

Tip: Rely on the drawing guides and alignment tools to center the icon on the shape.

Select the background shape, then use the right-click menu and select Format Shape to open the Format Shape dialog box (or go to the Drawing Tools Format tab and press Ctrl+ Enter).
Adjust the transparency of the shape to 100% and remove the border.

Note: It’s important to adjust the transparency or the “fill.” Do not remove the fill altogether, or it won’t work!

Close the Shape Format dialog box and go back to the Timeline tab.
Rename the shape on the timeline (e.g., “Tip 1 button”).

Now you can assign a trigger to the shape. Since the shape covers more area than the icon (even with transparency applied), selecting it anywhere activates the trigger. In the end, we’re making it appear like the icon can be selected, when it’s actually just the transparent shape around it. If you want to explore the examples we used in this post, go ahead and download the exercise file.

Note: Some developers might opt to insert a hotspots over the icon and assign the trigger to it. While this will work, keep in mind that states cannot be added to hotspots. Our method allows you to create additional button states (such as hover and visited) that are more consistent with best practices for designing interactivity.

We use this technique quite often, and hope that you find it useful too! Do you use any other methods to turn icons into interactive buttons? If so, please share them with us! We’d love to hear from you!