Scaffolding concepts

Identifying the primary learning outcome

When creating or improving a visualisation, the most important thing is to clarify what the visualisation is trying to achieve. Please spend some time thinking about the key realisations you want your user to have, and how to place them in a well-ordered manner. The learning process should be as transparent as possible. Think about what the user already knows; what knowledge do you assume? Do they need refreshing on some of the key concepts that'll be used later?

The title of a visualisation is essential. Be clear on actually what the content of a visualisation is. So, for example, instead of having "Fourier series" as a title, something like "Deconstruction and reconstruction of functions through Fourier series" would be much better.

Secondary learning outcomes and learning steps (for collections of several pages)

When creating a visualisation, it’s important to think of the key learning steps you want the user to have. Think about how many steps you want to make. Each key step that could be explored in an independent learning session normally makes up a separate visualisation page in a collection (read more about Collections here). An example is the ImpVis template demo - it consists of 2 pages that are logically linked: the first explaining the layout of the ImpVis template and the second the individual components in our ImpVis library.

An excellent way to list the key learning steps and to decide how many to have is to write down subtitles that you think each page deserves, where this sub-title describes what that page’s learning step will be in just two or three words. This makes it more evident to the user the main result they need to take from that page and makes the visualisation more comfortable to navigate if they need to return to anything. It also helps you keep track of the structure of the learning journey when creating a visualisation.

Organising content

When creating a visualisation, it's important to consider the style of page uses. On the left of the page in the template is a scrollable pane that will explain the content, so any theory, derivations or instructions will go here. The middle of the page (the 'mainstage') will be dedicated to the main graphic element of the visualisation.

When the user first visits the visualisation, only the key graphic with perhaps some basic interactive elements should be visible. This is to ensure the user can immediately interpret what the visualisation is about. Too many visuals, buttons, sliders and toggles lead to what is known as 'cognitive overload' - the user cannot interpret all the information presented and extract the relevant part. This will lead to the user switching off and the visualisation achieving the opposite effect of what you had intended. Because of this, we 'hide' more complex interactive elements and graphics in 'hotspots' at the edge or corner of the page, which can be clicked and expanded when the user is ready to explore the visualisation.

Examples to explore

Khan Academy and Coursera are great places to look for well thought out learning journeys; check these out!