Flashcard Interactions

Click on the image to view the interactive demo.

The Challenge

Studies have shown that active recall is better than reading, better than highlighting, crushes just listening and is better than watching. In fact, in contrast to passive methods of reviewing information, it is claimed that active recall can increase retention by more than 100%.

Active recall is a principle of efficient learning which claims the need to actively stimulate memory during the learning process.


In the context of e-Learning, incorporating interactive elements is an essential (but often overlooked) ingredient of any successful e-Learning course.

An interactive elements is anything that a user can interact with.

Combine active recall methods with interactive elements in the context of e-Learning, and you may just be on the way to developing an engaging learning experience where the learner is not only motivated to learn, but retains the information at a higher rate.

Additional things you may want to consider include:

  • keeping the content relevant and on-topic – avoid general and non-specific information that won’t bring any added value to the course
  • integrating interactive components and allow the learner to explore the content freely
  • including reality-based scenarios using real life examples and problems
  • integrating quizzes or assessments that offer learners the opportunity to gauge their progress
  • tapping into the learners’ emotions – include relatable videos or images or human interest pieces
  • making your course aesthetically appealing – incorporate a variety of different multimedia elements

In this digital age, simulating learning environments and tools can be a fun way to explore ways to create more engaging e-Learning.

This demo was inspired by the Articulate e-Learning Heroes community weekly challenge #270 – Flashcard Interaction in e-Learning which challenged designers to ‘share creative ideas for using flashcard interactions in e-Learning’.

The Design

I use flip cards extensively in my course and templates designs. I believe that flip cards and flashcards are interchangeable, but for this design, I chose to work with the cards a little differently. With the flash card remaining static, the back of the card, or the information part, is the part I chose to add some animation to.

One thing I’m particular about with interactive screens is that the navigation is intuitive so that the screen remains uncluttered. I always include hover states over interactive elements, although in this case with the demo the ‘wipe’ hover state I used is a little glitchy – I’m still investigating why this is…

The Result

Intuitive navigation, aesthetically pleasing design, on-topic content, interactive components, relatable images that tap into learners’ emotions – I’ll let you be the judge.

Click on the image at the top of the screen to view the interactive version.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s