In a recent post, I built a drag and drop video player where you can select and drag a video title to load a video tutorial. I got lots of questions about how I built the player. Most of the questions were about how I built the drag-and-drop player. So I put together some tutorials and made the file available for download.
- Tutorial 1: create the framework
- Tutorial 2: add layers and links
- Tutorial 3: create the drag and drop
- Tutorial 4: design tips
- Downloads: file and free font
One reason why the post generated so many questions is because of the novelty of dragging the choice button to load a tutorial video. This makes sense. In most cases this type of demo would have been a click and reveal interaction; but the drag and drop choice added some novel interactivity.
However, was using a drag and drop button the best way to do it? That’s what we’ll explore today.
Essentially you have three types of onscreen interactions: click, hover, and drag. We discussed that in the previous post on interactive building blocks.
Often the interactive elements are interchangeable. But that doesn’t mean that they work equally the same in your interaction design.
In the original interaction, the user reviewed a list of videos and then dragged the choice to a box. This loaded information about the video. Then the user clicked a play button. It was a novel way to play videos, but was it the best way?
In today’s post we’re going to revisit the drag and drop player to look at a few other options we had in the design.
Drag & Click: Novel Interaction Can Engage Users
One of the reasons the player generated so much interest is because it was a novel way to design a tutorial module.
Normally, this type of demo would be a simple “click the button” type tutorial. But instead the user could drag the choice to another location. And this novelty is kind of fun because it’s different.
Novelty is a great way to engage people and draw their interest. But, novelty wears off really fast. If there were only 2-3 choices, this type of novelty is probably fine. In the case of the demo, it’s probably a little too much because there are a lot of buttons to choose and the dragging interaction is tedious.
Click & Click: How Many Clicks Does It Take?
Click and reveal interactions tend to be the most frequently used. The most often we see them is when we click “next” buttons.
In the second example below, the user clicks the tutorial button to load the description of the videos. And then she can choose to click the play button to view the video.
This is a typical type of interaction. The value in clicking to load the information is that unlike the dragging, you don’t have to move the mouse. It’s a little more efficient and it locks the information on the screen until another user action.
The downside is that it requires a lot more clicking and since the play button is across the screen, it requires a lot more mouse movement. Again, if there were fewer buttons that would probably be OK. But in this case, it’s too many clicks and mouse movement.
Hover & Click: Efficient & Intuitive Movement is Key
Hover (or mouseover) interactions are nice because they allow access to additional information with very little mouse movement.
In the third example below, the user hovers the mouse over the tutorial button which exposes the video description. At that point, she can choose to click and watch the video or hover the mouse over a different button.
This is a much more efficient way to navigate because everything’s in one place with minimal movement. One negative though is that with the hover interaction you can quickly lose information. Unlike a click interaction which freezes the screen until another click, the hover loses it as soon as you move to something new.
As you can see there are pros and cons to each interactive building block and much of it is subjective. The main point is to make it as efficient and intuitive for your users as possible. If you have to spend a lot of time explaining what to do, you should revisit your design.
Also keep in mind that novelty is great to engage them, but it’s important to not exhaust and frustrate the users with excessive novelty.
I mentioned this before. If you’re building interactive elearning it’s important to learn more about usability and designing user experiences. Here’s a link to some resources and book recommendations.
I also just started reading Undercover User Experience Design. I like its practical approach to UX and the book’s not too long (a plus for me).
What are your thoughts? Feel free to share them by clicking on the comments link.
Upcoming Events (2015)
- April 15 & 16 (Chicago, IL). Updated! Register for one or both days.
Day 1: How to Build Interactive E-Learning
Day 2: Use Articulate Storyline to Build Interactive E-Learning
- May 17-20 (Orlando, FL). ATD International Conference & Expo. Swing by the Articulate booth to say “Hello.”
- June 3 & 4 (San Francisco, CA). Updated! Register for one or both days.
Day 1: Learn to Create Your Own E-Learning Assets
Day 2: Use Storyline to Build Interactive E-Learning
- June 12 (Austin, TX). Use Storyline to Build Interactive E-Learning. Registration page coming soon.
Elearning Heroes Roadshows
We’ll be hosting a series of two-day elearning workshops that focus on practical tips and tricks. You’ll be able to register for one day or two. Complete this form if you’re interested in presenting or want to submit an idea for a presentation. Registration pages coming soon.
- Toronto: June 17 & 18
- Seattle: August 4 & 5
- Vancouver: September 23 & 24
- Philadelphia: October 14 & 15
- Austin: November 4 & 5
- Atlanta: Details coming.
E-learning Community News
- Learn: Want to learn more about elearning? Check out these articles and free resources in the community.
- Get hired: Job board for elearning, instructional design, and training jobs (updated weekly)
- Participate: Weekly challenges to sharpen your skills and show off what you’ve done. Great way to learn and get feedback.
- Resources: Free PowerPoint templates, free elearning templates, and free e-books. Updated all the time.
- Inspiration: Cool elearning examples.