Designing Drag and Drop Interactions

Drag and drop interactions are a good way to turn static content into an immersive and effective learning experience that transforms learners from passive observers to active participants.

Drag and Drop to Reveal

storyline template drag and drop to reveal interaction
Click on the image to view the demo

A drag and drop to reveal interaction is useful when there is a lot of related information that needs to be displayed on one screen. This type of interaction is effective as it enables learners to physically engage with the concepts, rather than just reading blocks of text.

In this demo, I wanted to allow learners to choose the order in which they viewed the information (giving learners the freedom to explore for themselves is another way to increase engagement and retention of information). The screen design for each character is meant to simulate an ID card, which can obviously be customised to include whatever information is relevant in the context of the learning.

You could take this design one step further and include links on the ID card screen to more information.

Let me know what you think!


One thought on “Designing Drag and Drop Interactions

Leave a Reply

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

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