top of page

Skeuomorphism in eLearning

Ron Katz

Apr 7, 2022

ELC 124 - Skeuophormism in eLearning

Skeuomorphism is a long and fancy word that basically means design that’s inspired by real-world objects. So if you’re creating an icon that represents a wastebasket, you might make it resemble a wastebasket, with a three-dimensional look and feel.


Skeuomorphism is a popular approach for e-learning, and not just because it looks cool. It’s also a great way to lend an authentic, realistic feel to interactions that will help learners get in the right mindset for applying their new knowledge to their jobs.


For my interaction I created a skeuomorphic jack-in-the-box.


I used PowerPoint to edit objects and Storyline 360 for the interaction.


The interaction uses a "dial" which is designed to rotate several times.




This dial (as you can see by the rotation) can spin 360 degrees ten times (3600). We set the initial value of the dial to 1 and each time it moves we add 1 to the variable representing the dial. The player moves it by dragging it around with their mouse while holding the button.


The rest of the interaction just looks at the variable representing the current value of the dial and does stuff (plays music, changes states of objects).







Once the value of the dial finally reaches 3600, the state of the lid changes from closed to open and a layer showing a jack-in-the-box is displayed.





The 'jack' layer shows an animation of a clown that has 3 different states. That are cycled through based on a timer.






Lessons Learned


One of the things I learned on this project was that a dial can be set to a larger number than 360 to allow it to be turned more than once.


I second thing I learned in this project is that you can time animation by using a moving block off screen on a motion path with a specific duration.


For this project I used an off screen block moving along a motion path with a duration of .25 seconds.


Each time the block completed its motion path, I had it do the same thing again and I incremented a counter (clownstate)




This method can be really helpful anytime you want things to happen in sequence at a specific speed.


Tags

ELC Challenge, Triggers, Animation, Dials

Tools Used

Storyline 360, Articulate 360, PowerPoint

Link to Demo

bottom of page