3 Design Tips for Creating Effective Drag-and-Drop Activities

Drag-and-drops are a great way to add interactivity to your next e-learning project. From matching items to sequencing the steps in a process to placing objects where they belong on a slide, drag-and-drops are a surefire way to make your learners stop, think, and engage with the content.

Designing a clear and effective drag-and-drop requires some careful thought and consideration; with that in mind, here are three design tips to consider next time you develop this type of interactivity. Know that these tips may not apply to each project—it depends on the specifics of the interactivity you’re creating.

Consider Making Drag Items Appear One a Time

When designing e-learning courses, we have to work with the limited amount of space that’s available on a slide. This means that, depending on the amount of objects included in your drag-and-drop interactivity, you may not have space on your slide to make all of your drag items appear at once. If it’s a really tight squeeze, you might want to consider revealing your drag items one a time.

Here’s an example of a drag-and-drop that reveals the drag items one at a time:

View Example

This can be achieved with freeform drag-and-drops by adjusting the Drag & Drop options.

Select “Reveal drag items one at a time” to reveal drag items one by one

You’ll want to select the “Reveal drag items one at a time” option. Storyline even provides you with the option to select the order in which the drag items are revealed.

Keep in mind that in certain cases it’s not really fair to the learner to reveal drag items one at time; sometimes it’s better for the learner to know all the options before they start placing the drag items. There’s no hard-and-fast rule, though, so this depends on the specifics of your interactivity.

Provide Learners with Feedback

In certain cases, you’ll want to provide your learners with feedback on which drag items were placed correctly and which were placed incorrectly. This is easy to do using Storyline’s Drop Correct and Drop Incorrect states.

Here’s an example of a drag-and-drop interaction that uses Drop Correct and Drop Incorrect states:

View Example

Storyline even gives you the ability to decide if you want the states to appear immediately upon dropping the drag item on the target, or only once the learner has clicked the Submit button.

You can also create a “Drag Over” state. This is a state that appears when the drag item is dragged over a drop target. These options are available under the Drag & Drop options window. These are a great way to provide learners with feedback on how they did, versus leaving them guessing.

Use Dashed Strokes for Drag Item Shadows and Drop Targets

In terms of visual design, a fun trick I love to use is a dashed stroke. I like to use a dashed stroke around the drop target, and also as a “shadow” behind the drag items. I place a shadow behind the drag items so you can see where the drag items were placed before they were dragged, instead of leaving a big empty space.

Here’s an example of a drag-and-drop interaction that uses a stroked outline around the drop target and on the drag item shadows:

View Example

It adds a nice professional and visual design touch.

These are three simple tips you can keep in mind next time you design a drag-and-drop interaction. It’s important to remember that the options you choose for your interaction depend on the specific activity you’re creating: there’s no one right or wrong way! Do you have any visual or instructional design tips you like to use when you create drag-and-drops? If you do, please let me know in the comments.

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.