Designing learning interactions that no one wants to use

Well, done that!

Multiple Sliders

I had a requirement to for an interaction for learners to rate up to six criteria for a given scenario. I thought of 3 different ways to do it: 1) that, 2) text entry and 3) drop down menus.

Text entry was the first idea. But that’s commonplace – can you call that an idea? I had a slider component that I’d coded for a project a year ago that was never used – so why not? The result, while interesting, fails miserably on many levels with visual clutter being the main one. I still think that it would work for up to 3 or 4 items, but it just doesn’t for this many.

So go back and do something more simple – with drop downs. I’d coded the slider to use the same basic properties as the native AS3 ones so, there wasn’t that much more effort to make this change. It’s much easier for the learner to use and saves a lot of space – so much that the scenario can be on the same screen as the question.


  1. Interesting… I didn’t think the slider design was difficult to use. Some visual clutter, sure. But, this could be improved through visual design without changing the interaction at all. Since the sliders are aligned vertically, perhaps the number labels only need to be shown in a header. Given “1” and “6” at the extremes, perhaps only tickmarks, and not labels, are needed to suggest 2—5. The background color of the rows could be consistent, horizontally (still alternating shades, but not darker on the right). The thickness and border around the slider’s track could be reduced to lessen the visual weight.

    In the drop downs example, you can’t see the possible answers ahead of time. Not much of a problem, if you are rating each criteria independently, but the slider design allows you to see a consistent scale across all criteria at a glance.

    (Inspiration: Edward Tufte. See “chartjunk” and “smallest effective difference”)


Leave a Reply