Learners will… define “visual thinking” and “visual cognition” describe some dimensions of visuals in online learning describe some ways to create visuals in online learning consider some uses of visuals in online learning explore legal considerations related to online learning visuals consider going open-source for visuals think about signatures and styles in terms of online visuals (and sharing broadly) contemplate common errors in visualizations for online learning review ways to think visually

1. Diagramming, Figures,
and Imagery (2D):
Think Visual in Online Learning
EVENT: BASIC ONLINE TEACHING
AUG. 9 – 10, 2017, CALVIN 306
GLOBAL CAMPUS
KANSAS STATE UNIVERSITY

2. Starting with a Doodle
Any participants to this session may “doodle” along during this session with drawings of ideas they may have for adding
visualizations to their online courses.
2
This pencil doodle was created
by Elionas via Pixabay. This is
released with a CC0 Public
Domain license.

3. Learning objectives
Learners will…
◦ define “visual thinking” and “visual cognition”
◦ describe some dimensions of visuals in online learning
◦ describe some ways to create visuals in online learning
◦ consider some uses of visuals in online learning
◦ explore legal considerations related to online learning visuals
◦ consider going open-source for visuals
◦ think about signatures and styles in terms of online visuals (and sharing broadly)
◦ contemplate common errors in visualizations for online learning
◦ review ways to think visually
3

4. Overview
1. “Visual thinking” and “visual cognition”
◦ The visual channel in the brain
◦ Types of information conveyed visually
2. Visuals in online learning
◦ 1D, 2D, 3D, 4D
◦ 1D: points, glyphs, and others
◦ 2D: timelines, screen grabs, screenshots, Venn diagrams, Euler diagrams, photos, maps, data charts, data tables, and many others
◦ 3D: charts, bubble diagrams, and others
◦ 4D: immersive virtual worlds, simulations, depictions, humanoid avatars
◦ Sources: concepts, models, frameworks, and data, and various mixes
◦ Static and dynamic
4

5. Overview(cont.)
3. Ways to create visuals in online learning
◦ Quality standards for learning-based visuals
◦ General diagramming conventions for figures
◦ Imagery and photos
◦ Common drawing technologies
◦ Online image handling
4. Uses of visuals in online learning
◦ Description - comparison and contrast - explanation - theorizing - creating - designing - proposing -
hypothesizing - expression and commentary - branding - assignment prompt - and others
◦ Some visual assignment ideas
5

6. Overview(cont.)
5. Legal considerations related to online learning visuals
◦ Media releases and people’s “likenesses” (and applied uses)
◦ Intellectual property basics
◦ Accessibility
6. Going open-source for visuals
◦ Creative Commons Search
7. Signatures and styles in terms of online visuals
◦ Creating the go-to visuals for the domain or issue on the web and internet
8. Common errors in visualizations for online learning
9. Thinking visually
6

7. 1. “Visual thinking” and
“visual cognition”
THE VISUAL CHANNEL IN THE BRAIN
TYPES OF INFORMATION CONVEYED VISUALLY
7

8. “Visual thinking” and “visual cognition”
VISUAL THINKING
Rudolf Arnheim, a German-born psychologist,
coined “visual thinking” in 1969; he
conceptualized this as a sensory perception
way to engage the world (as a valid method vs.
a language-based verbal-based thinking
approach).
◦ Visual thinking highlights the human ability to
use visual signals for understanding, reasoning,
analysis, design, and other applications.
◦ Visual thinking points to the power of the
human imagination as part of perception and
cognition.
VISUAL COGNITION
“Visual cognition” refers to how people
process visual data for understanding and
decision-making.
Visual cognition addresses issues such as
visual perception, mental transforms based on
visuals (such as to understand processes), and
other issues.
Memory of the learning may be enhanced
through visual cognition.
8

9. Biological hard-wiring for visual thinking /
cognition
Research suggests hard-wired biological-based ways for visual information to be captured and
cognitively processed and understood.
◦ Abigail Housen’s Visual Thinking Strategies (VTS) study of how people analyze artworks, with its five-
stage analytical approach, is highly suggestive of such wiring since these were found across cultural and
socioeconomic contexts. Hers is considered a seminal work, with related findings applied to teaching
and learning.
9

10. Some applications
Today, visual thinking and visual cognition are used to …
◦ Explore the “invisible world” of very small, very large, or wholly invisible objects and phenomena (esp.
in physics, math, biology, and other fields)
◦ By “invisible,” this means not seeable to the naked eye or through augmentary sensors and equipment
◦ Instantiate abstractions (based on facts, based on imagination)
◦ Acquire knowledge
◦ Problem-solve
◦ Understand big data
◦ Imagine and convey possibilities
◦ Articulate, convey, and externalize internal concepts from the imagination
◦ Design and explore novel concepts, practices, objects, and other possibilities
10

11. 2. Visuals in online
learning
1D, 2D, 3D, 4D
SOURCES: CONCEPTS, MODELS, FRAMEWORKS, AND DATA, AND VARIOUS MIXES
STATIC AND DYNAMIC
11

12. A dearth of visuals in online learning
ACADEMIA AND TEXT
Academics has a long tradition of text-based
learning. There are some text-only
experiences in some textbooks, including in
electronic books (which can easily integrate
imagery and multimedia at reasonable cost).
Concepts that may be better conveyed visually
may be conveyed with text.
ACQUIRING VISUALS
Adding visuals opens channels for new ways of
acquiring knowledge and skills.
Visuals make learning more accessible to a
wider group of learners.
12

13. Dimensionality
1D: points, glyphs, and others
2D: timelines, screen grabs, screenshots, Venn diagrams, Euler diagrams, photos, maps, data
charts, data tables, and many others
3D: charts, bubble diagrams, and others
4D: immersive virtual worlds, simulations, depictions, humanoid avatars
General descriptions:
◦ One dimension is a point
◦ Two dimensions is a line or expression on a two-dimensional plane (on the x and y axes)
◦ Three dimensions involves three axes, the x, y, and z axis
◦ Four dimensions involves change over time (with any of the three dimensions)
13

14. 14
(“Hypercube Construction 4D”
by Spiritia, Oct. 26, 2008,
Wikimedia Commons)

15. Data sources
IMAGINATION
Concepts
Models
Frameworks
EMPIRICS, OBSERVED DATA
Data
Observations (recorded)
15
and Combinations from the Imagination and
Observations

16. Static and dynamic visuals
STATIC
Unchanging diagrams, figures, and imagery:
◦ Screenshots
◦ Screengrabs
◦ Timelines
◦ Diagrams
◦ Figures
◦ Photos
◦ Illustrations, and others
DYNAMIC
Changing diagrams, figures, and imagery:
◦ GIFs
◦ Data dashboards
◦ Interactive models
◦ Screencasts
◦ Games
◦ Videos
◦ Simulations
◦ Immersive virtual worlds, and others
16

17. 3. Ways to create
visuals in online learning
QUALITY STANDARDS FOR LEARNING-BASED VISUALS
General diagramming conventions for figures
Imagery and photos
Common drawing technologies
Online image handling
17

18. Quality standards for learning-based
visuals
Informational accuracy: Learning-based visuals should convey the underlying information as
accurately as possible; these should be designed against misunderstanding. Visuals include lead-
up and lead-away text, call-outs, data labels, legends, and other textual elements, to ensure
informational clarity.
◦ Data visualizations should encourage users to linger and not just breeze past the visual. The speed of
interpreting data visualizations can lead to misunderstandings. (Statistical misunderstandings can also
lead to misunderstandings of data visualizations.)
◦ The parts of the visualization should be clearly and accurately labeled. All measures should be clear. All
referenced times should be clear.
◦ The language used should be simple, clear, and accurate.
Parsimony: The visuals should be streamlined to the point of irreducible complexity.
Originality: Visuals designed for education should be unique and non-derivative. If there is a
better visualization for the issue in the world and that visualization is open-source or otherwise
linkable, then the other image should be used.
18

19. Quality standards for learning-based
visuals(cont.)
Visual Conventions: All visual conventions for the visual form should be followed accurately.
Accessibility: These visuals should be accessible to as many learners as possible, even those
with vision challenges. Alt-text should be included to ensure informational equivalency for those
consuming the visuals through descriptive / explanatory text alone.
Aesthetics: The visual should be aesthetically pleasing to engage learners, but it should be non-
decorative. Every element in the visualization should contain informational value.
Global Usage: The visualization should not cause offense across peoples and cultures. (All
visuals should be assumed to be consumed in a global way.)
Rights Acquisition: If people are included in an image and are identified by name, their legal
sign-off should have already been acquired through a media release.
Intellectual Property: If any part of the visuals are copyrighted, the sharer of the visualization
should have acquired proper rights releases to use the copyrighted part.
19

20. Getting quality right before integration
Oftentimes, composite digital learning objects (like slideshows, like digital posters, like videos,
like screen-captured lectures, and others) require many raw pieces of text, imagery, screenshots,
audio, video, and other elements.
To save time, these support elements should be cleanly acquired and correctly designed before
any move towards development of the more finalized and refined objects occurs. If mistakes are
in the original files, the cost to re-record or correct or retrofit a digital learning object will be
high.
Plan for quality early on, define the plan in a stylebook, and stick to the standards during the
design and development process.
Also, please keep accurate records. A huge part of “staying legal” is having the documentation
right, so you can prove legality.
20

21. General diagramming conventions for
figures
For 2D visuals, diagrams generally consist of combinations of the following: lines, arrows,
shapes, labels, callouts, colors, and other elements. Diagrams and figures usually have titles.
They usually have captions. There is usually lead-up text and lead-away text.
Most diagrams and figures are read from top-to-bottom and left-to-right.
◦ This is culturally determined and not universal. This is not biologically determined.
Imagery involves more freeform eye movements based on the contents depicted.
21

22. Directionality in
visuals (cont.)
Diptych
Side-by-side
Left-right
Before-after
Pre-post
Comparison
Contrast
22

23. Directionality in
visuals (cont.)
Top-bottom
Chronology or short sequence
23

24. Directionality in visuals(cont.)
24
Triptych
Tri-fold

25. Directionality in visuals (cont.)
25
Nine-cell Grid

26. General diagramming conventions for
figures (cont.)
The larger the text, the more important the feature of the diagram or figure. The thicker the
lines, the more important the relationship.
In a panel sequence, time moves from the earliest panels to the later panels from top-to-
bottom, left-to-right. Most time order is chronological but some may be reverse-chronological.
Images are labeled in the order of their appearance and should be reference-able either by
name or page or figure number.
All diagrams and figures should be citable using typical citation conventions. There should be
clear “authorship,” title, date, publisher, pagination, and other relevant information.
◦ All diagrams should also have clear provenance if the diagrams are derived from and dependent on
prior works, models, theories, visualizations, etc.
26

27. Imagery and photos
For web delivery, digital imagery and photos should be at 100 ppi (pixels per inch) but at higher
resolution if the image has fine-grained details and may be zoomed-into for clearer viewing and
analysis.
◦ If the image is one captured by a macro with a macro lens, say, of an insect, the resolution should be
very much higher to enable deep magnification from a web-delivered image.
◦ For publishing, digital imagery should be at 350 – 450 dpi (dots per inch).
The color in online photos should be RGB (red green blue). [In publication applications, the
color should be CMYK (cyan magenta yellow black), based on ink combinations.]
Always keep a raw copy of the image because that is the least lossy and most visually detailed
version of the image you have. Protect a raw set of all files, so that if there are mistakes in
image editing or compression, one can always return to the raw set, grab a copy, and start fresh.
(Don’t edit your raw files. Keep this set pristine.)
27

28. Imagery and photos(cont.)
To simplify, image format types vary based on usage:
Website:
◦ .png should be used if there is an alpha channel (for transparency)
◦ .jpg for wide range of colors
◦ .gif if there is some animation or motion
◦ .pdf if the image has text which has to be machine readable (accessible)
Publishing:
◦ .tiff for publishing
Side Note: There are other nuances to conversions between file types. For example, to upload a .pdf
file into a slideshow sharing site, all images have to be locked down, so they will be handled properly
and not accidentally flipped in the upload. In this case, if the PDF file is still allowing the uploading
agent to flip images, reprint the PDF file as a PDF to ensure every element is fixed…and the upload
goes up without a hitch.
(There are other complexities and nuances, but this will suffice for this overview.)
28

29. Imagery and photos(cont.)
All imagery and photos should be properly labeled with titles. There should be image- and
photo- credits, for crediting and citations.
If there is picture-in-picture depictions or other types of composite imagery, the provenance of
every aspect of the composite image should be credited. (Imagery and photos can only be used
with copyright release…or with the digital object in the public domain.)
29

30. Common drawing technologies
There are various technologies that may be used to build visualizations.
Many drawing and image-depiction features are in common office technologies: Office 365’s
Word, PowerPoint, and Excel have savvy built-in image-making features.
Microsoft Visio has a number of rich templates for various types of diagramming.
Adobe Photoshop has powerful image-editing capabilities.
There are a number of screen capture technologies that offer fairly high resolution captures.
* Remember to keep all raw files and the proprietary development files, not just the
compressed image exports. You need to be able to update and revise your imagery from the
least-lossy and best image possible. Keep all major file versions from the development pipeline
in case you need those as well. Maintain clean and comprehensive records. Use smart naming
protocols, so you know what a digital file contains without opening it. Yadda yadda yadda. :)
30

31. Online image handling
SOME BASICS
Images on the Web and Internet are handled
differently depending on the hosting platform.
Some platforms enable images to be expanded
and enlarged, for example. All images hosted
online can be downloaded (or captured via the
screen using a screen capture software).
Images on the Web may be downloaded in
large collections using Web browser add-ons.
SOME IMPLICATIONS
Images may be separated from their original
website, video, e-book, social media platform,
slideshow, or other context, and so should be
able to stand alone and still contain its
informational meaning.
While some label information (like alt-texting)
may ride with an image, sometimes, that image
is actually held on an online platform or the
slideshow containing the image. It is important
to know where information related to a digital
image actually resides. (Also: Photos from a
digital camera often will carry “hidden” metadata
that is extractable.)
31

32. 4. Uses of visuals in
online learning
DESCRIPTION - COMPARISON AND CONTRAST - EXPLANATION - THEORIZING -
CREATING - DESIGNING - PROPOSING - HYPOTHESIZING - EXPRESSION AND
COMMENTARY – BRANDING, ASSIGNMENT PROMPT - AND OTHERS
SOME VISUAL ASSIGNMENT IDEAS
32

33. In a learning management system
In online learning, visual methods are an inherent part of the technological systems (including
the learning management system or social media platforms used for online learning).
◦ The user interface includes the uses of glyphs and icons, for example.
◦ Visuals convey something of the personhood of the course members.
◦ Data dashboards convey information about course activity levels.
◦ Embedded videos and learning objects enable interactions with visual objects.
Then, too, there are a number of applied uses (and combination of uses) of visuals in online
learning: description, comparison and contrast, explanation, theorizing, creating, designing,
proposing, hypothesizing, expression and commentary, branding, assignment prompt, and
others
33

34. Some visual assignment ideas
Show learners how to use a particular drawing tool, and have them create a simple visual by
emulation.
Use visuals as prompts for discussion and analysis.
Offer partially created visuals (~ to incomplete notes), and have learners complete the
visualization and then explain why they took the particular path that they did.
Offer a branching logic diagram, and have learners talk through each path to identify planted
errors.
Offer a draft visualization, and have learners identify strengths and weaknesses.
Open up an image in Adobe Photoshop, and use various filters to highlight particular aspects of
the image for analysis.
34

35. Some visual assignment ideas(cont.)
Offer a concept or a model or an abstraction, and have learners illustrate these ideas.
Open up a freeform whiteboard, and have learners co-create a visualization in real time and
explicate their approaches.
Use a free third-party comic creation tool, and encourage learners to express particular ideas in
comic panels.
Harness social media platforms by having learners locate social imagery on a particular topic and
conduct content analysis on some of the images or the image set
◦ Or run this as a jigsaw assignment, with different individuals or small teams focusing on particular
aspects of the imagery (content, locations, people, symbols, etc.)
Have learners break down a video into its constituent parts for interpretation and analysis, and
others
35

36. Some visual assignment ideas(cont.)
Encourage learners to create videos on virtual immersive worlds as machine + cinema
(machinima).
◦ Immersive virtual worlds have built-in cameras and tools for machine cinema as well as for the capture
of screenshots.
Encourage learners to create or co-create videos in the real world, with the support of campus
studios and check-out equipment.
36

37. 5. Legal considerations
related to online
learning visuals
MEDIA RELEASES AND PEOPLE’S “LIKENESSES” (AND APPLIED USES)
INTELLECTUAL PROPERTY BASICS
ACCESSIBILITY
37

38. Media releases and the people’s
“likenesses” (and applied uses)
If a person’s likeness is captured / recorded, such as their appearance and voice on video or their
image in a photograph, that person should be of legal age and should have signed a media
consent form to enable their being recorded…if the recording will be used in an online course.
Even if a person is not directly identified, given the state of facial recognition software deployed
on social networking sites, and in other ways, assume that every person is identifiable and likely
identified by anyone who may have an interest.
Remember that distributing a digital learning object even in a password-protected LMS is a form
of publishing. The “password protection” is not a pass on legal responsibilities.
◦ The portability of a digital object means that it can be downloaded or re-recorded and distributed
anywhere and to anyone.
No private information should be shared in an online course. (FERPA applies.)
Generally, no personally identifiable information (PII) should be shared either.
38

39. Intellectual property basics
If a person is creating a learning object involving visuals, everything that they use can only be
the following:
◦ Original photos (with media releases of people depicted)
◦ Original and non-derivative diagrams
◦ Images and diagrams that are in the public domain
◦ Images and diagrams that were legally released by the actual owners / creators through licensing (such
as Creative Commons)
◦ Original data visualizations (with legal acquisition of the underlying data), and so on
Remember that online reverse image search engines on the Web and Internet can locate online
images by machine vision (and searching through tens of billions of images hosted on the Web).
Do not assume non-findability.
◦ Universities are hit by lawsuits by content owners all the time.
39

40. Accessibility
Another legal requirement related to images in online
learning is that there must be an informationally equivalent
textual version of the image available to learners.
◦ For example, if a map is shared, the learner should have access to
a text-based equivalency of the informational value of the map—
so all people (even those with visual acuity issues) have equal
access to the learning and the learning contents.
◦ Alt-texting should be done by the subject matter expert (SME). If
these were done by students, they should be double-checked by
the SME.
◦ Some suggest alt-texts should be in phrases. Others prefer whole sentences.
40

41. 6. Going open-source
for visuals
CREATIVE COMMONS SEARCH
41

42. “Open-source” visuals
“Open-source” is a term generally applied to software source code, which is made available for
review, use, sharing, and modification (based on various types of licensure)
Similarly, visuals may be created by individuals and released for public use based on total release
to the public domain or other licensure requiring particular actions of the user and / or
constraints on usage (such as for non-commercial usage only, or without ability to edit/revise
the original image, or requiring attribution, or requiring share-alike).
For particular images, democratic government sources may be optimal based in part on both
access and on the release of such visuals to the public domain. (As always, it is important to
read the fine print to ensure that the images are truly in the public domain. Some government
sites have contents created by third-party companies and organizations which may have
different copyright policies over their images. If there are any questions about visual or image
licensure, assume that the visual is copyrighted.)
42

43. “Open-source” visuals (cont.)
When capturing the images, open the online images to their largest size online, and then save
the file using the original name. You do not want to go with thumbnails because thumbnails are
very small images, and they will pixelate in use.
The file can be re-named later based on the naming protocols of the project.
If the photographer has embedded his / her name in the image, and it pops up when uploaded
to a site, just take a screenshot of the image and use that image. Credit the photographer
elsewhere. (This is if the photo credit is otherwise distracting.)
43

44. Documentation
Maintain a README file of the open-source images that you’re using.
Generally, this file contains the following:
◦ A thumbnail of the image
◦ A URL where it was obtained from
◦ The handle or name of the photographer
◦ A text description of the image
◦ The copyright release for the image (with legal terms of use)
◦ Or the name of the digital / digitized contract file related to the release
◦ Any other relevant information re: the image
The README file is part of the work documentation and supports the legality of the design and
development work.
44

45. Creative
Commons
Search
Creative Commons Search (CC Search):
https://search.creativecommons.org/
◦ Google Images and Wikimedia Commons are effective sources for
visuals
◦ Note that there are also open-source media, music, video, and
other types of digital contents
CC Search
Creative Commons “About the
Licenses”
45

46. 7. Signatures and styles
in terms of online
visuals
CREATING THE GO-TO VISUALS FOR THE DOMAIN OR ISSUE ON THE WEB AND
INTERNET
46

47. Signatures and styles
SIGNATURES AND STYLES
A “signature” is a unique and distinctive
indicator of an author or illustrator hand in an
object. This is often specific and
individualistic.
A “style” refers to a particular way of doing
something, and may be indicative of an author
or illustrator “hand”.
◦ Style may be consciously cultivated, or it may be
partially unconsciously an element of the
person’s culture and local practices.
OBJECTIVE AND GENERIC TENDENCIES IN
ACADEMIA
In academia, broadly speaking, the focus is on
the objective and the generic.
Those who create visuals for learning balance
their own individuality with the needs of the
context.
47

48. Creating “destination” visuals
Subject matter experts (SMEs) are uniquely positioned to be able to create visuals that they may
want to share on the WWW and Internet.
The mapping of the Web and Internet and the power of browser search engines enable works to
be found from any region of the world. This is not only by text means now but also by
computer-enabled visual search.
If a work is of sufficient quality, often based on the underlying information and the clarify of
visual communications, it will become a “destination” visual.
◦ If it is released through open licensure, it may even be used in many applications.
The popularity of digital objects on the Web fall under a power law, with a few objects garnering
the majority of usage, and then a “long tail” of other objects not used at all (or very rarely).
SMEs who want to dominate need to acquire first-mover (or early) advantage and to offer high
quality data and clear and original visuals. (If they can code their image, all the better.)
48

49. Some benefits to sharing visuals openly
Those in academia may enjoy participating in the digital learning object “sharing” economy by
giving and taking. The idea is that “indirect reciprocity” will benefit everyone in the long run.
People may develop some appreciative followers on the Social Web if they share contents.
There will be skills acquisition along the way.
49

50. Some possible downsides to sharing
There are costs to creating imagery and sharing those broadly.
If done incorrectly (and sometimes even if done correctly), there may be legal risks in sharing
something in a broadly public way.
◦ If the image contains private image information, they may be opening themselves up to legal risk.
◦ If the image contains proprietary or protected information, they are compromising themselves and / or
giving away competitive advantage.
The creator of the image loses control over how that image may be used or mis-used. They will
not have control over edits to that image (unless they want to bring in lawyers into the mix).
◦ Online, there be trolls.
50

51. Some possible downsides to sharing (cont.)
Once an image has been released to the public via open licensure, publishers will generally not
use it in a published work. Publishers prefer to acquire all rights, which makes the work of their
legal counsel somewhat easier. (Their contracts usually mention their rejection of prior-released
images out in the public.)
All to say, this is not something you want to walk into blind. Rather, know your stuff before
making an informed choice.
51

52. 8. Common errors in
visualizations for online
learning
52

53. Common errors
The visual…
◦ conveys mistaken information;
◦ may be easily misinterpreted;
◦ is not visually literate and breaks visual conventions of the form (or applies the conventions
inconsistently);
◦ is incoherent and even contradictory;
◦ is unlabeled (such as graphs on the x and y axes, or legends on maps);
◦ is insufficiently accessible (such as with low contrast or as with using colors only to convey information);
◦ is unnecessarily complex (no parsimony, no simplicity);
◦ is unnecessarily ornate;
◦ is irrelevant to the particular learning;
◦ is forgettable;
53

54. Common errors (cont.)
The visual… (cont.)
◦ includes copyrighted materials (or derivations of) without permission;
◦ confuses 3D elements with 2D elements in the same visual;
◦ is sloppy (such as lines crossing over shapes, shapes laid out in non-uniform ways, mixed fonts and font
sizes, has text falling outside of a shape, and others);
◦ is hard to cite or reference (such as because of a lack of a label or because of unclear provenance);
◦ does not maintain consistency of visual grammar across a related series;
◦ uses the wrong visual symbols and glyphs (and / or uses symbols that are offensive to some learners);
◦ does not have a coherent color palette;
◦ does not consider multi-versioning for different contexts (such as visuals for inclusion in a video vs. for
use in a print book or use in a conference poster);
◦ does not consider representational spatiality on timelines;
54

55. Common errors (cont.)
The visual… (cont.)
◦ does not consider complexity and nuance (such as changes over time, the visual communications of
uncertainty, controversy, mood, degree, theorizing, historical vs. contemporaneous elements, or
others);
◦ and others…
So don’t be that person who…
55

56. Clean designing and reviewing for pre-
made visualization
1. Understand the conventions for the diagram or figure that you’re creating. Note the
nuances.
2. Doodle and brainstorm. Draft the visual. Iterate the visual over time.
◦ Use the features of the diagramming and image editing tools to get the visualization right.
◦ Use a background grid for item placement.
◦ Use alignment tools to align objects.
◦ When making objects of the same size, copy the shape, and use the copy, to ensure correct sizing.
◦ When making changes to lines, highlight all, to make sure that the changes apply to everything.
About Automated Diagrams
◦ If using automated connectivity among shapes in a diagram, ensure that the scripting is correct.
◦ If the visualization is aligned with underlying data, make sure that the data is correct. If corrections are
made to the data, make sure that the changes flowed accurately to the visualization.
56

57. Clean designing and reviewing for pre-
made visualization(cont.)
3. Take time to review the visualization at the micro level to see what is being communicated
for each part. Zoom in to analyze each part and also to make sure that the visualization does
not pixelate or blur or fuzz.
4. Study each of the paths that the eyes will take, and make sure that the visual logic and visual
grammar are accurate.
5. Review the visualization at the macro level to ensure that the pieces and parts are properly
placed and aligned.
6. Share the visualization with others, and acquire constructive feedback to improve the
visualization.
57

58. Clean designing for dynamic on-the-fly
drawing
1. Think ahead about the visualization that you’ll be creating on the whiteboard.
2. Use a comfortable drawing device for control (a stylus or pen, not a mouse).
3. Practice.
4. Use some roughs as a basis for the drawing.
5. Be ready to improvise as the discussion or planning session or presentation advances. (If
possible, anticipate some of the possible paths and directions, and be ready.)
6. Also, be open to inspiration and serendipity.
7. Be open to handing over the drawing duties to others.
58

59. 9. Thinking visually
59

60. Staying visually limber
DECODING
View as many visuals in the domain and
related domains as possible.
ENCODING
Keep a journal of visual innovations and features
that you see that are helpful to thinking and
learning. Develop a strong visual literacy in your
field…and across as many types of visualizations
as possible.
Keep a pen-and-tablet (or pencil and
paper)…nearby at the desk…or order to capture
inspirations and ideas. Likewise, have various
software tools at hand for notetaking, jotting,
doodling, diagramming, mind-mapping, and
others. Also, have various data visualization tools
(like Excel, R, Python) nearby.
60

61. Accurate expectations
It takes some time to get better at creating education-based visuals.
Diagrams can take between 2-4 hours to make, and more complex works may take much longer.
It’s a good idea to iterate a visual over time, so it can be checked for implications and meanings.
It helps to have colleagues look over the work for their feedback. Make sure that the visual
grammar is accurately done and consistent.
Always spell check visualizations.
61

62. Some conceptualization challenges
How would you illustrate…
◦ A concept?
◦ Time?
◦ Processes?
◦ Interactions?
◦ Dynamics?
◦ Relationships? Interrelationships? (directionality? Intensity?)
◦ Connections? Disconnections?
◦ Uncertainty / broken lines / example at the micro level
◦ One image with focuses on parts?
62

63. Subjects -> Types of imagery
Subjects Types of imagery
Individuals Photos, drawings, selfies
Events Videos, photos, timelines, diagrams
Sequences, processes Timelines, flowcharts, simulations, cause and effect diagrams, workflow
diagrams, cross-functional flowcharts
Models, theories,
schemas, systems
Venn diagrams, Euler diagrams, flowcharts, block diagrams
Artifacts Photos, drawings, diagrams
Designs Diagrams, floor plans, maps
Geographical locations Maps (various types), drawings
Building designs Floor plans, electrical plans, telecom plans, space plan, HVAC plan, security
and access plan, planning and piping plan
63

64. Subjects -> Types of imagery(cont.)
Subjects Types of imagery
Social relationships,
groups, communities
Social network graphs, org charts
Machine learning insights Data tables, decision trees, line graphs, survival analysis charts, frequency
diagrams, intensity matrices
Brainstorming Brainstorming diagrams, mind maps, bubble diagrams, freehand doodles
Project documents Calendars, Gantt charts
Information technology Network diagrams, data flow diagrams, wireframe diagrams, rack diagrams,
web site maps, program structure diagrams
Manufacturing IDEFO (Icam DEFinition for Function Modeling) diagrams
Accounting Audit diagrams, open high low close chart (OHLC)
Math Geometric shapes, fractals, plane curves, space curves
64

65. Subjects -> Types of imagery(cont.)
Subjects Types of imagery
Data (and “big data) Data tables, graphs, charts, line graphs, bubble diagrams, scatter plots, radar /
spider charts, treemaps, sunbursts, histograms, box & whiskers, stacked area
charts, network diagrams, matrices, dendrograms, word trees, combined
visualizations (like dashboards), word clouds, and others
Time-series data Line graphs, timelines, bar charts, survival analysis line graphs, streamgraphs,
and others
and many others…
65
Note: Many of the above can be expressed in 2D, 3D, and 4D.

66. Your Doodles?
Your Ideas?
Visuals in your Domain?
Questions?
66

67. Additional related resources by presenter
Creating Effective Data Visualizations in Excel 2016: Some Basics:
https://www.slideshare.net/ShalinHaiJew/creating-effective-data-visualizations-in-excel-2016-
some-basics
Creating Effective Data Visualizations for Online Learning:
https://www.slideshare.net/ShalinHaiJew/creating-effective-data-visualizations-for-online-
learning
67

68. Conclusion and contact
Dr. Shalin Hai-Jew
◦ Instructional Designer
◦ iTAC, Kansas State University
◦ 212 Hale / Farrell Library
◦ 785-532-5262
◦ shalin@k-state.edu
Sources: Sources were cited within the text of the slideshow, with URL links to some of them.
Images: Images used were released through Creative Commons licensure.
Disclaimer: This work is informational only, not any advisement. Users use this at their own
risk. The presenter has no tie to any of the software companies whose products are mentioned
here.
68