Difference between revisions of "ImpVis template description"

From ImpVis Wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Structure ==
The ImpVis visualisation template layout consists of a number of main components, each layering on top of the other. At the back of the whole visualisation lies the "vis" component. This houses all components built up on top of one another, other than the title bar and the guidance system. You can explore the template and its components in [https://impvis.co.uk/launch/impvis-layouts-v2/page1.html?collection=39 this demo visualisation].
The ImpVis visualisation template layout consists of a number of main components, each layering on top of the other. At the back of the whole visualisation lies the "vis" component. This houses all components built up on top of one another, other than the title bar and the guidance system.
 
=== "vis", "pane" and "mainstage" ===
In order of increasing height, we have “vis,” which houses everything. On top of this, “pane” and “mainstage” are used. Panes are designed to accommodate the bulk of text content, while the mainstage houses interactive content. The layout of visualisations is designed such that explanatory text is positioned to the side of main visualisations in a pane; the pane may be overlaid onto the main interactive part of the visualisation itself or push the visualisation into a more narrow window. Multiple panes can be used on any side of the mainstage. Still, most of our visualisations so far have chosen to have a single pane to the left of the mainstage. The panes are at the same height as the mainstage.


== "vis", "pane" and "mainstage" ==
In order of increasing height, we have “[[Visualisation|vis]]”, which houses everything. On top of this, “[[pane]]” and “mainstage” are used. Panes are designed to accommodate the bulk of text content, while the mainstage houses interactive content. The layout of visualisations is designed such that explanatory text is positioned to the side of main visualisations in a pane; the pane may be overlaid onto the main interactive part of the visualisation itself or push the visualisation into a more narrow window. Multiple panes can be used on any side of the mainstage. Still, most of our visualisations so far have chosen to have a single pane to the left of the mainstage. The panes are at the same height as the mainstage.
[[File:Template drawing.png|alt=Layout components of the ImpVis template: vis at the back, mainstage on top of that, pane over the top on the side, hotspots in 8 locations at the top layers.|thumb|Illustration of the layout components used in the ImpVis template. Note that for clarity the pane is drawn on the left-hand side - in reality it can be on either or both sides.]]
Inside the pane can go any of the other components, emphasizing usage for text; for example, text dropdowns. The pane is toggleable and draggable, in that it can be dragged wider/thinner to show more/fewer words per line, and that there is a click to open/close button which moves it on/off the screen.
Inside the pane can go any of the other components, emphasizing usage for text; for example, text dropdowns. The pane is toggleable and draggable, in that it can be dragged wider/thinner to show more/fewer words per line, and that there is a click to open/close button which moves it on/off the screen.


The mainstage can also house any of the other components (apart from panes), focusing on interaction. In particular, these house the "hotspots" - used to keep the layering system well organised and clean. They act as anchors within the mainstage on which components appear on top of the mainstage land.
The mainstage can also house any of the other components (apart from panes), focusing on interaction. In particular, these house the "hotspots" - used to keep the layering system well organised and clean. They act as anchors within the mainstage on which components appear on top of the mainstage land.#


=== "hotspots" ===
== "hotspots" ==
There are currently three different types of hotspots: togglable, draggable and fixed. Fixed hotspots can be used to contain elements that need to be seen at all times but are distinct from the main stage visualisation. Togglable hotspots act as a small dockable component; they are meant to contain essential components to the visualisation but don't need to be seen at all times. This might include buttons, sliders, checkboxes, and small graphs, etc. Draggable hotspots are similar to togglable hotspots, but can appear at the top left of the vis when clicked and can then be dragged by the user to any location.  
There are currently three different types of hotspots: [[Toggle Hotspot|togglable]], [[Draggable Hotspot|draggable]] and [[Fixed Hotspot|fixed]]. Fixed hotspots can be used to contain elements that need to be seen at all times but are distinct from the main stage visualisation. Togglable hotspots act as a small dockable component; they are meant to contain essential components to the visualisation but don't need to be seen at all times. This might include buttons, sliders, checkboxes, and small graphs, etc. Draggable hotspots are similar to togglable hotspots, but can appear at the top left of the vis when clicked and can then be dragged by the user to any location.  


There are four corner hotspots and then four edge hotspots that lie in between. These edge hotspot areas can contain multiple sub hotspots, unlike the corners. Within a single hotspot, you can stack several block elements such as a sliderBlock, which have been pre-made to be easy to set up - think IKEA. Note, if you have panes either side of the visualisation, (e.g. a pane on the left-hand side), then it's advisable not to use components in hotspots on the same side as panes (i.e., on the left-hand side in this case). This is because the pane may cover the component in the hotspot if dragged.
There are four corner hotspots and then four edge hotspots that lie in between. These edge hotspot areas can contain multiple sub hotspots, unlike the corners. Within a single hotspot, you can stack several block elements such as [[Slider|sliders]], [[:Category:Toggles|toggles]], [[:Category:Buttons|buttons]] or [[Tickbox|tickboxes]], which have been pre-made to be easy to set up - think IKEA. Note, if you have panes either side of the visualisation, (e.g. a pane on the left-hand side), then it's advisable not to use components in hotspots on the same side as panes (i.e., on the left-hand side in this case). This is because the pane may cover the component in the hotspot if dragged.


== Design implications ==
== Further reading ==
The visualisation page's complexity should decrease the further the user gets from the main visualisation stage/canvas. Practically speaking, this meant that you shouldn't have text in the main stage of the visualisation. Alternatively, it would be best if you didn't have complex graphs or models within a side pane or togglable hotspot. Suppose you find yourself requiring a more complex visualization 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. So, for example, if I have an interactive quiver plot visualisation showing the electromagnetic field around a bar magnet within the mainstage, you might also want to include a graph of the integral of the magnetic field around a path. This second plot would be an ideal candidate to put into a side pane or hotspot. It adds to the user's understanding of EM but is distinctly less complicated that the main vis. <span style="color:red">(Perhaps a less jargon heavy example could be used here, either that or we could make an actual exampe showing what is meant)</span>


A note on default values and initial reaction to a visualization: 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 reaching this suite's visualization. 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 suite, 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.
* Read about how to [[Organising content|organise your content]] within the ImpVis template
* [[Basic Component Tutorial|Basic tutorial]] on how to include the layout components in your code.  
* [[Vue Components|Technical guidance]] on all the components of the ImpVis template
[[Category:ImpVis Template]]
[[Category:ImpVis Template]]

Latest revision as of 14:57, 30 September 2021

The ImpVis visualisation template layout consists of a number of main components, each layering on top of the other. At the back of the whole visualisation lies the "vis" component. This houses all components built up on top of one another, other than the title bar and the guidance system. You can explore the template and its components in this demo visualisation.

"vis", "pane" and "mainstage"

In order of increasing height, we have “vis”, which houses everything. On top of this, “pane” and “mainstage” are used. Panes are designed to accommodate the bulk of text content, while the mainstage houses interactive content. The layout of visualisations is designed such that explanatory text is positioned to the side of main visualisations in a pane; the pane may be overlaid onto the main interactive part of the visualisation itself or push the visualisation into a more narrow window. Multiple panes can be used on any side of the mainstage. Still, most of our visualisations so far have chosen to have a single pane to the left of the mainstage. The panes are at the same height as the mainstage.

Layout components of the ImpVis template: vis at the back, mainstage on top of that, pane over the top on the side, hotspots in 8 locations at the top layers.
Illustration of the layout components used in the ImpVis template. Note that for clarity the pane is drawn on the left-hand side - in reality it can be on either or both sides.

Inside the pane can go any of the other components, emphasizing usage for text; for example, text dropdowns. The pane is toggleable and draggable, in that it can be dragged wider/thinner to show more/fewer words per line, and that there is a click to open/close button which moves it on/off the screen.

The mainstage can also house any of the other components (apart from panes), focusing on interaction. In particular, these house the "hotspots" - used to keep the layering system well organised and clean. They act as anchors within the mainstage on which components appear on top of the mainstage land.#

"hotspots"

There are currently three different types of hotspots: togglable, draggable and fixed. Fixed hotspots can be used to contain elements that need to be seen at all times but are distinct from the main stage visualisation. Togglable hotspots act as a small dockable component; they are meant to contain essential components to the visualisation but don't need to be seen at all times. This might include buttons, sliders, checkboxes, and small graphs, etc. Draggable hotspots are similar to togglable hotspots, but can appear at the top left of the vis when clicked and can then be dragged by the user to any location.

There are four corner hotspots and then four edge hotspots that lie in between. These edge hotspot areas can contain multiple sub hotspots, unlike the corners. Within a single hotspot, you can stack several block elements such as sliders, toggles, buttons or tickboxes, which have been pre-made to be easy to set up - think IKEA. Note, if you have panes either side of the visualisation, (e.g. a pane on the left-hand side), then it's advisable not to use components in hotspots on the same side as panes (i.e., on the left-hand side in this case). This is because the pane may cover the component in the hotspot if dragged.

Further reading

Retrieved from ‘https://wiki.impvis.co.uk/index.php?title=ImpVis_template_description&oldid=928’