Choosing interactive parameters

Interaction is key to creating effective visualisations for education: they allow the learner to actively explore the concept. Think carefully about which parameters you want to make interactive: it is tempting to put every single parameter in a model as user input (e.g. input boxes or sliders) but the user would be overwhelmed by the choices and the key points of your visualisation will be drowned out.

Decide interactive parameters based on learning outcomes

The key consideration for deciding your interactive parameters is what the user is supposed to learn from your visualisation. Consult your visualisation's learning outcomes. Which are the important relationships the learners should gain an understanding of? It is these relationships that the user should be able to explore, so these supply the interaction parameters.

If your learning outcomes do not specify the key relationships clearly, they are written too 'high-level', i.e. they state the overarching concepts but not the specific learning steps. Go back, discuss with your project partners and write out each specific learning step that the learner should take in their learning journey (see Scaffolding concepts).

Interaction types

There are many different types of interaction, such as clicking and dragging, slider input, textbox input, toggles, buttons, etc. The ImpVis component library include many of these, but do think creatively in your design and do not be limited by our existing component library! Each type of interaction suits different learning goals - buttons and toggles are simple interactions, normally used to choose between limited options or increase the complexity of the graphic. Sliders allow for a wider range of exploration, between suitably chosen limits, whereas open text boxes are an entirely unguided way of inputting values, therefore offering most freedom but also the highest level of difficulty for a user to engage with ('which value to choose...?').

The main categories of graphical elements we use in our visualisations are simulations and data plots.

Simulations

In simulations, we often think about elements moving around, like two-body collisions, electromagnetic waves in plasma, or an oscillating spring. Commonly they are cursor-reactive or button/slider-reactive, or a combination of both. An example is the Gauss’ Law visualisation. The user can use their cursor to drag and drop charges or draw an integral loop and control the charges' magnitude and polarity using a slider.

Data plots

There are many different data plots, ranging from line plots, charts, maps, and networks. Here is a website that may help you decide the best way to visualise your data: https://www.data-to-viz.com/. Data plots are usually button/slider-reactive, but cursor-reactive is possible and useful in the case of input graphs, e.g., cursor adjustable graphs.

Further reading

When you are ready to implement your interaction design into code, read the JavaScript packages for graphics page for guidance on which JS package would best suit your needs.