Like many e-learning developers, we’re always looking for ways to make our courses more engaging, effective, and relevant for learners. One easy way to make an immersive, interactive experience is by using the 360° image feature in Storyline 360. Whether you’re simply taking customers or new hires on a virtual tour of an office or workplace, or asking employees to identify issues in potential real-life scenarios, 360° image interactions are a quick way to create a realistic environment. So keep reading as we answer the “as heard in training” question: “What are some tips for working with 360° images?”
First Things First … You Need a 360° Image!
Even if you don’t have a 360° camera, getting started is easier than you may think! There are resources available online to help you find and create 360° images, like this helpful article from the Articulate E-Learning Heroes community. Once you have the right kind of image, you’re on your way!
We’ll step through a sample Storyline 360 course to demonstrate how to add a 360° image, as well as some tips and tricks for creating interactions. If you’d like to follow along, take a moment to download the exercise file now.
When you’re ready, scroll on to begin!
Adding and Editing a 360° Image
Once you have your 360° image, insert it into your course.
-
- On a slide, select Insert | 360° Image.
- Then choose the “Edit 360° Image” button in the middle of the slide. This will open the Interaction editor tab.
You can now add markers, hotspots, and even take your learners on a guided tour of the image.
Providing Instructions
Learners should be able to easily navigate the 360° image environment. Because this type of interaction may differ from the rest of the course, consider including an introduction slide that explains what the learner is supposed to do before they get to the 360° image slide.
For example:
- Will there be markers and hotspots in the image?
- Do the icons mean different things?
- Does the learner need to identify/view all of the objects in the space before moving on?
- Are there questions they’ll need to answer along the way?
All of these questions can be answered with a slide that contains some basic instructions.
Deciding on a Style
In our example, the course has a dark theme, and the text boxes and images are mostly rounded rectangles, so we designed the 360° image interaction to match. Wondering how we did that?
While editing the image, select the Interaction tab:
- Select Theme to choose a dark or light theme.
- Select Corners to choose whether the built-in marker and hotspot labels should have square or rounded corners.
Adding More with Slide Layers
If there’s not enough space in a marker or hotspot label, or you just need more screen real estate, consider creating a layer to reveal more information. Then add a trigger to your marker or hotspot that reveals that layer. And don’t forget to have a way to close the layer so the learner can keep exploring the image!
In our example, we wanted to provide more information about how the table should be set up in the conference room. So, the marker we used triggers a layer with a close-up picture of the table and more information about the table settings.
Creating Moments to Make Choices
Want to check in with your learners and test their understanding? You can add a quiz question slide to your Storyline 360 course and then trigger it using a marker or hotspot in your 360° image.
In our example, the marker on the reception desk has a trigger that jumps to the quiz question slide “2.1 What time is check-in?” when the user selects it.
Tip: If your interaction allows for free navigation, consider using a variable to only show the quiz question once.
Exploring More Images
If you have multiple images of different parts of a building or different views of a room, you can make your course even more interactive! Create an exploration of an entire space by using markers or hotspots to move from one 360° image to another.
Simply place a marker or hotspot on the image, and then add a trigger to that item that jumps to another slide with a different 360° image. In our example, the marker near the elevator has a trigger that jumps to slide “1.5 Hospitality Suite” when the user selects it.
Tip: Remember not to trap the learner. When switching between images, make sure to include a trigger somewhere on each image that takes learners to where you want them to go.
We hope this has sparked some ideas for how you might start using 360° images in Storyline 360! What other ideas do you have for creating these immersive interactions? Share them with us and the rest of the Instructional Design community!
Here Are Some Quick Links on This Topic!
For more on this topic, check out the following posts from Articulate and The Articulate Trainer blog:
How to Find and Create 360° Images for Your Storyline 360 Projects
Storyline 360: Adding and Editing 360° Images
Storyline 360: Adding Interactivity to 360° Images
Until next time!
~ Elizabeth
I have downloaded 360-degree images that were AI generated. The problem is the images look out of proportion when imported into Storyline. Is there a way to edit those images or change them so they appear in proportion? I used the AI Generator in Freepik for the images.
Hi Jeff and so great to hear from you! It looks like our IT Manager reached out to you directly about this one. Happy Articulating!