Designing for Engagement

2017-05-26_17-04-21
Click on the image to view the demo

What appeals to me as far as animations and interactions in e-Learning course development is probably at the bottom end of what others would be impressed by. I’m not really into all the bells and whistles that detract from engagement rather than add to it. If I’m working through a demo someone has shared and I’m distracted and/or confused by what’s going on or how I navigate around the design, I lose interest pretty quickly. So, I prefer to develop designs that are seemingly simple, but effective.

I was recently looking for inspiration for designing interactive virtual flip cards or flash cards for an e-Learning template I’m developing when I came across this page with some interesting examples (although I’m not sure that some of these actually meet the criteria of a flip card).

If anyone is into CSS code – this may just be a jackpot find for you.  Me, well I’m not one to dabble with CSS particularly, but I like to think outside the box when looking for design inspiration and thought it might be a worthwhile exercise to try to recreate one of these examples using Articulate Storyline.

The Design

This “Movie Card” design was one that stood out as being simple enough, yet an effective use of interaction and animation to display a number images from one slide – what I guess I would call an “image carousel”, although technically in the finished design the images do not rotate like a carousel.

What I found engaging about this design was its simplicity. When you hover over the first image, it moves aside and reveals a series of small dots that you then use to navigate through the other images.

The Process

This appeared to be easy enough to replicate in Storyline – although the final step took a little bit more troubleshooting to achieve.

The changing of the images was the easy part – it’s just one image, with several states each with a different image, with triggers to change the state when an object (the small circles) is clicked on.

2017-05-26_16-38-04

I then set up a hover state and a motion path on the image, with triggers to move the image along the motion path on hover (not mobile compatible – sorry!!) – I needed to untick the option “restore on mouse leave” otherwise the image would return to its starting position and the circle objects that are triggered to change the state of the image when clicked couldn’t be accessed.

All good so far – except that I discovered that when I hovered over the image again, it snapped back to it’s starting point and moved along the motion path again, which wasn’t the effect I was after. I wanted to fully replicate the effect where the image that’s displayed moves back in reverse along the same motion path if you hover over it again.

This took a little bit more thinking about – I knew it involved adding a second motion path and reversing this, but it also involved adding a true/false variable with relevant triggers to toggle this feature.

2017-05-26_16-36-38

The Result

For whatever reason, this interactive design appealed to me when I saw it, and as an exercise in working out how to replicate an interaction it was time well spent and I’m pleased with how the final design turned out.

As far as using this in e-Learning course design, I think this is a little more engaging than a static image changing on clicking – and often times it’s those simple things that make the difference to the level of engagement, so I’m definitely going to use this!

Click on the image at the top of the page to view the interactive demo. If you want to download the Articulate Storyline file for free, I’ve released this as the week 17 submission to the Articulate e-Learning Heroes #53Freebies challenge instigated by Paul Alders – here’s the link to the file for download.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s