Organising content

When creating a visualisation, it's important to consider the layout of your content in order to guide the user through your visualisation. As a reminder: the ImpVis template is structured such that on the left of the page is a scrollable pane that will explain the content; the middle of the page (the 'mainstage') will be dedicated to the main graphic element of the visualisation. You can explore the template and its components in this demo visualisation.

Allocating content to the layout components

The mainstage

The mainstage is the focal point of the visualisation and should therefore house the graphical representation of the main concept 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 additional graphics in the 'hotspots' at the edge or corner of the page, which can be clicked and expanded when the user is ready to explore the visualisation. This way the user can actively increases the complexity of the main graphic by using interactive elements (e.g. toggles) to incorporate more information.

For an example, look at the Orbits visualisation: the mainstage interactive animation shows the orbit of a satellite around an object, with only easy-to-interpret buttons included to change the orbit shape.

Hotspots

Moving on from the mainstage, the other layout components should house additional information to help understand the visualisation in greater depth. This means it would be best if you didn't have graphs or models with complex interactions of their own within a side pane or togglable hotspot. For example, in the case of the Orbits visualisation, the user will gain a deeper understanding of the physics and maths underlying the gravitational orbit of the satellite by looking at a plot of the interactive potential. This second plot is an ideal candidate to put into a side pane or hotspot. It adds to the user's understanding of gravitational orbits, but is only needed when the user is ready to go into greater depth; further it doesn't have any extra complexity in terms of interactive elements: it responds to the same buttons as the mainstage component.

Suppose you find yourself requiring a visualisation with more interactive elements as an add on to highlight some scientific concept that is adjunct to what you are explaining in the main stage visualization. In that case, you likely need to make another visualisation page entirely.

The pane

A pane can sit on either the left or right hand side of the page. Any theory, derivations or instructions should go here. It is best to structure your text in short subsections, each with a clear heading, colour, and associated icon. This will make it easy for the user to navigate to the relevant text - remember that most users will not read the entire text from top to bottom, unless there is a specific reason for doing so (e.g. it is required in an associated problem sheet).

The pane also contains navigation buttons ('previous' and 'next') for the user to navigate to the other pages of the visualisation, if there are any. Once you create a Collection of your visualisation pages on the website, the navigation buttons will show up automatically if you included them in your code.

Remember that every visualisation page should be designed to be used as 'stand alone' - text should therefore not specifically refer to the other pages, though do ensure a logical flow between pages.

Default values

A note on default values and initial reaction to a visualisation. The concepts being displayed should be evident for the user to at least anticipate before reading the text. The changes that occur due to moving different sliders/buttons should easily be noticed right from the start. The key to this is picking sensible 'default' settings that the user sees upon launching the visualisation. A good way to determine if default settings are chosen sensibly is if the part of a visualisation that changes under some slider/parameter change is visually sensitive to changes near the default values, but not in an extreme limit of the behaviour seen in that part of the visualisation. This way, a user doesn't necessarily have to interact with the visualisation before they somewhat understand what is going on. For example, if you check out the Fourier series visualisation, one of the key points is how the number of terms changes an approximation to a function. Choosing an intermediate value of 3, which shows some wiggles, but not too many, is much better than choosing 0, where the user can't see much yet and has to interact to at least guess what's going on. Another example would be 100, where the approximation is almost perfect; the user might get confused upon seeing it as it isn't immediately obvious which is the approximation and which is the function to be approximated.