Deconstructing Design I: Dart Flights Comparison
Length: 898 words. Reading Time: ~4.5 minutes.
Deconstructing Design (DD) is a blog series dedicated to reviewing an instructional design microcosm, typically a single slide or interaction. Readers are encouraged to confirm, challenge, or improve on the logic presented.
Context
In the original eLearning Heroes Challenge, author David Anderson dares designers with the question “How would you show meaningful comparisons?” The simple question presents endless possibilities given Articulate Storyline’s powerful tools for building interactions.
Naturally, I opted to include one of my passions, darts, and compare dart flights. Yes, those little pieces of plastic (formerly feathers) at the end of a dart that allows it to fly smoothly through the air. Believe it or not, there’s a lot to compare.
You can see the full interaction here.Download the source file here.
Instructional Design
While the instructional design of an entire course can be extremely involved, for this individual interaction, I'll focus on one important component: learner control and autonomy.
Learner Control and Autonomy
If and how you give a learner control in an eLearning environment is an important instructional design consideration. Giving learners control, by allowing them to tailor the learning to their needs, creates stronger motivation and a more valuable learning experience. Not all learning is conducive to learner control, such as situations where learners cannot accurately assess their current skill level. As result, learner “control” often regresses to simple “personalizations” such as text entries (“What’s your name?”) and avatar selections. These types of interactions have value, particularly in gamification, but do little in the way of giving learners real control of the actual learning.
The Dart Flights Comparison interaction is well-suited for learner control and autonomy. In fact, without these elements, the interaction would be significantly less valuable for the learner. The first element of control occurs on the landing page, where the learner is prompted to select the style of flight they use.
This selection controls the information (flight silhouette and labeling) presented on the comparison grid of the content slide. These items are outlined in yellow on in the following screen capture. This information is triggered based on the real-world information the learner provided. Specifically, what flight they currently use.
The second element of control provides learners with autonomy. In the interaction, the learner can compare there flight to eight other flights. However, the learner may already be aware that the do not want to use a particular shape of flight because of how it flies for them or the increased probability of bounce outs. If the learner was forced to review all eight comparisons, it could be a waste of their time and result in disengagement. By giving the learner this control, they’re forced to engage with the content by making decisions about their learning.
Graphic Design
The visual treatment of an eLearning interaction impacts learner perception of its quality. While the instructional design may be solid, learners may be quick to judge the quality of a course by the quality of the visuals instead of the content or instructional design.
Learners may be quick to judge the quality of a course by the quality of the visuals instead of the content or instructional design.
Colours
The colours used in this interaction are inspired by a dart board. The red, green, and beige are all sampled from a photograph of a dart board. Black is another traditional dart board colour and was used for the background in the same way it outlines a dartboard. The comparison grid and drop zone are set in beige; however, leaving them at full colour drew too much attention to them, so they've been given a transparency. The beige on the conveyor belt was left at full strength to make it the brightest colour on the screen and draw the learners attention because it is the functional element of the interaction. The bright beige used for the conveyor belt also allows the vibrant colour so the flights to be noticeable.
Title and Footer
The title and footer elements were designed using a simple chevron shape. This shape provides a representation of the point (title) and flight (footer) of a dart. A gradient and different transparencies were used to create a sense of movement, also consistent with the theme. Together these shapes create a container for the content, which was required in the absence of the standard Articulate Storyline player.
A gradient and different transparencies were used to create a sense of movement... consistent with the theme.
User Experience
Scrolling Conveyor Belt
The most complicated element of this design to create was the continuous scrolling conveyor belt. It would have been easier to create an interaction where the up or down control arrows disappeared when the learner reached “the end” of the flights. However, this would force the user to scroll in the opposite direction creating a less seamless experience for the learner. The interrupted scrolling would be particularly problematic in a mobile environment where finger placement on the device may predict how the learner navigates. Changing the interface controls would also absorb capacity from the learner’s cognitive load unnecessarily.
Mobile
While there are many considerations for mobile design, the size of controls is of critical importance. For this interaction, the small arrows that cause the conveyor belt to scroll could be at issue. To avoid this problem, the areas above and below the conveyor belt are covered with a “hot spot” that will advance the conveyor belt when clicked. In this way, the user does not need to precisely click the arrows on a mobile device.
Conclusion
If the objective is for learners to "select the best flight for their dart throw," there are many possible solutions. This solution focused on giving the learner control, creating content that suits the learners specific needs, and using graphic design elements to present the information in a compelling way. Do you believe this is the right solution? How would you have done it differently?
NOTE: This interaction is not a complete lesson; therefore, we have to assume the learner has already explored content about how the elements of a flight (i.e. shape, height, width, surface area, angle of entry) affect the throw.
Follow Me on Twitter
Clint Clarkson is the VP of eLearning at Xpan Interactive, a digital-services firm that specializes in the delivery of custom eLearning solutions. He has 15+ years of evolution in Learning & Development as a facilitator, instructional designer, and leader. Connect with Clint on LinkedIn or follow him on Twitter.
If you liked this, you may also like: