This project was inspired by the E-Learning Heroes weekly challenge #103 – Create an Infographic: What Do You Love and Hate About E-Learning. Resources for this challenge included the blog post What Do You Love & Hate About E-Learning? by Tom Kuhlmann on The Rapid E-Learning blog, the How Can Infographics Produce Better E-Learning Courses? blog post by Tom Kuhlmann and the article on How to Create PowerPoint Infographic Elements on the E-Learning Heroes community website by David Anderson, Community Manager.
The challenge was to “Create an interactive graphic using the data from the What People Love & Hate About E-Learning Infographic.”
I initially started recreating the graphics from this Infographic, thinking that I would just add some animations and interactivity. I then reviewed the information provided for the challenge which was that we only needed to “use the data” from the Infographic, so I changed my design completely and went with photographic images.
I found an interesting article by Wibke Weber on “What is an Interactive Infographic?” in which he explains the theoretical framework of the different types of interactive information graphics. These are the main take-aways I got from this article:
- Infographics have been emerging in the context of data visualisation (or information visualisation) which according to Michael Friendly is “The science of visual representation of data.” and belong to the semiotic (“The study of signs and symbols and their use or interpretation” ~ Oxford Dictionary) system of images, with many Infographics influenced by the three semiotic systems image, language and number.
- Interactivity is a key feature, with the definition of interactivity having different levels – every click by the learner should provide access to new information or the next information sequence for this to be considered as interactivity. At the highest level of interactivity, learners are able to navigate freely through the information graphic, influencing or modifying the content as they choose their own path.
- Interactivity can be linear or non-linear in structure. With the linear structure learners move through a narrative frame pre-defined by the author and with the non-linear structure learners explore the data by themselves.
- Information graphics integrate different modes, with design, layout and colour being crucial elements in a multi-modality approach to considering an information graphic as an holistic entity. (“Multimodality”~ Gunther Kress)
- Interactive graphics have two functions – to show something that is hard to explain verbally in a visual way, and to inform (through narration, explanation and description).
The simplified definition of an interactive information graphic given in this article is:
“A visual representation of information that integrates different modes into a coherent whole and offers at least one navigation option to control the graphic; its communicative function is to inform .”
I sourced the images for my design from Pixabay, choosing relevant images to the subject of people, learners, learning, computers and mobile devices.
With the above information and definition of an interactive Infographic in mind, I chose to redesign these sections of the original Infographic.
Each section was designed on a new slide and I chose different designs for each of these sections. Common elements across the slide designs included animations, hover states and click-to-reveal information.