Microinteractions in E-Learning

Using tooltips in e-learning is a fantastic way to design microinteraction that can enhance the learner’s overall experience. In this example, I share some common ways to use tooltips with images, text, audio, and video.

Tooltips in E-Learning Challenge #265

In this week’s e-learning challenge #265, designers were asked to share examples of microinteractions in e-learning. In my example, I shared a few common types of tooltips and how they can be used with multimedia.

Tooltips in e-learning example

View the interaction | Download the Storyline source file

Using Animation Effects as Progress Bars

I tried something a little different for the audio tooltip effect. Since Storyline doesn’t have a built-in audio controller, I needed a way to simulate the playback progress of the audio clip in the tooltip.

Animated tooltip in e-learning using wipe animations

Using Storyline’s default entrance animations, I simulated the progress bar by wiping one rectangle over another.

The trick is to set the entrance animation to the same duration as the media you’re playing.

Entrance animations in Storyline 360

What’s Going on Here?

Using a wipe entrance animation, we can show visual progress in our e-learning tooltip effect. Set the progress bar with animation to hidden when the slide layer first loads. Change the progress bar to normal when the learner clicks the tooltip’s play button.

Hiding the progress rectangle ensures the wipe entrance animation doesn’t begin playing when the slide layer is first loaded. We want to wait for the learner to click the play button to initiate the audio and progress bar.

Teardown of the e-learning tooltip animation

I shared the Storyline 360 template in the Articulate E-Learning Heroes community. If you have any questions about the project, please let me know, and I’ll be happy to help you out.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like
E-Learning Quiz Template

E-Learning Quiz Template for Storyline 360

Simple and clean e-learning quiz template designed with Articulate Storyline 360. The quiz features editable button graphics, custom results slide, and a color theme that you can update for your own projects.