It is always a challenge to communicate the features of technical products in an online-demo. In our work with simulation-based e-Learning, we experimented with groups of professionals, students and vocational learners.
One major lesson learnt is:
People learn better when you map abstract information (e.g., descriptive text, mathematical equiations) and visual information (e.g., animation). Ideally you position redundant information horizontally next to each-other, on one side the abstract, and next to it the visual representation.
In the past we tried to explain this phenomenon with the hemisphere model of the brain, where one half is more visual and the other one more abstract. Today, neuroscience has abandoned this model, and in fact, the explanation is much simpler.
This article summarizes in a structured way the tricks and mechanisms originating from neuroscience, which help improving the success of technical online demos.
Our eyes are arranged horizontally, so you can provide redundant graphical and visual information horizontally and concurrently. It does in fact not make any (statistically proven) difference, on which side you place the abstract, and on which the graphical information. The brain gets a two-channel input and it appears that different, concurrent but redundant inputs lead to a more substantial memory effect.
Linking abstract and visual information, give particular support in this memorizing process. But there are more means which you can use to amplify cognition, like movements, focus, colors etc.
Graphically Encoding Information
In principle, there are 4 ways of graphically encoding information. Jacques Bertin suggested a vocabulary describing the techniques to graphically encode information:
-
Marks:
points, lines, areas -
Positional techniques:
a) one-dimensional representation, b) two-dimensional representation, c) three-dimensional representation -
Temporal technique:
a) static information such as text, graphics or images; b) dynamic information such as video, animation, audio -
Retinal techniques:
a) color, b) shape, c) size, d) saturation, e) texture
Amplifying Cognition
The researchers S.K. Card, J.D. Mackinlay and B. Shneidermancategorized six axes of cognition amplification, which are easy to implement and help to optimize the graphical representation in your online demo:
-
Increasing the user’s memory and processing
-
Reducing time spent looking for information,
-
Enhancing the recognition of patterns,
-
Enabling perceptual inference operations,
-
Using perceptual attention mechanisms for monitoring tasks,
-
Encoding information in an actionable medium
1. Increasing the user’s memory and processing
From a psychological perspective, visualization techniques can help exceed the user’s normal intake capacity when building on the brain’s capacity of parallel perceptual processing of visual attributes, strengthened by a subsequent offloading / transfer from the cognitive to the perceptual system.
With this description, S.K. Card and his colleagues substantiate what we described in the introduction, when suggesting to place graphical and abstract information horizontally next to each other.
2. Reduction of search effort for information
Try to produce the right information in the right moment, for example through a context specific representation of symbols or by blinding out or deactivating unnecessary properties or informtion. In consequence, the user receives focused information for each a specific context. Grouping and visually relating information in graphical blocks further reduces search effort.
3. Enhanced detectability of patterns
Simplified visualization and selective omission of data allow creating an enhanced overview perspective about a complex situation. This is not always easy. It took Albert Einstein years, to reduce a very complex context to the easy formula: E = m*c2 .
4. Enablement of perceptual inference operations
Use perceptual inference, that is the human’s capability to infer (meaning to draw conclusions) based on a visual stimulus. For example
-
Use obvious graphical elements related to a task, e.g., indicate with a knob or a slider that a person can change settings
-
Use symbols e.g., the infinity symbol to visualize scalability
-
Work with line types (continuous or dotted line), line widths and degrees of color (black, levels of grey) to reflect an order of importance.
5. Perceptual attention mechanisms for monitoring tasks
The human brain reacts on changes in graphical representation (movements, changes in size or spacial position, etc.). You can use this to steer his attention. In consequence you can omit additional guidance and reduce information density.
6. Encoding information in an actionable medium
Allow the user to actively explore the medium, but position interactivity in a targeted, selective and guiding way. Make only these parts actionable, which are needed in the very moment.
CONCLUSION
All the given mechanisms allow for one thing: to reduce information and to make the remaining information for powerful, adapting it on the human brain’s way of processing information.
Images: Courtesy of DigitalRalph, Flickr. Licence: CC BY 2.0 & stutteringmedia; Licence: CC BY-SA 2.0