VISUAL ELEMENTS

Visuals such as images, icons, and graphics boost learners’ engagement and make our courses more dynamic and interesting. One rule of thumb is they must add value and not detract from the learning content. Always use high-quality, high resolution images that relate directly to the content – images that aren’t clear or aren’t relevant will only be confusing as they don’t connect to learning objectives. the real purpose behind your graphics selection should be to help your learners with their eLearning experience. This is why you need to focus on the learning value of your visuals, whether they are flowcharts, mnemonic graphs, infographics, detailed images that illustrate a process, and so on, and keep strictly decorative elements to a minimum.

Photography

Imagery should support and expand on the content, not used to double-down on what is already understood. Our photography adds depth and dimension. We should use imagery purposefully, to expand ideas. Avoid cliché images that attempt to loosely represent a concept while not portraying the real world at work

• Avoid using generic stock photography, such as staged, cliche, or overused. 

• A photo can balance out a huge block of text and be a more decorative element. 

Data Visualization

These can be made in InDesign or Illustrator. 

Best practices:

• Understanding what the audience needs to gain from the information

• Colors

  • Contrast between colors

  • Not relying on colors to portray information

  • Do not use too many colors, it can be overwhelming

• Patterns

  • Use patterns to help distinguish information (ex: bar charts)

  • However, do not use too many that it can get complicated or distracting

• Use different shapes to help distinguish elements

• Hierarchy of information 

  • Are certain sections of content more important? 

• Important labels (for bar charts, graphs etc.)

  • Do all the labels need to be there? 

• ....

Charts/Graphs/Diagrams

These can be made in InDesign or Illustrator. When possible, try to limit the amount of colors from different colorways. Charts and graphs should preferably be monochromatic and use colors like red to draw attention to a particular point. 

• Bar graphs should be accessible using labels and patterns and not just fill color

• Pie charts should have enough contrast between the different sections

• Do not rely on color to convey information, also use labels

Infographics

Infographics are visual images (like a chart or a diagram) that is used to represent information or data. These can be made in InDesign or Illustrator. 

Flow Charts

Flowcharts are a diagram that shows a sequence of actions involved in a complex system or activity. They demonstrate visually how a process moves. These can be made in InDesign or Illustrator. Please keep in mind best accessibility practices (color contrast, hierarchy etc.). 

Decorative Elements

Mainly used to visually separate content, bring attention to headers, used for call-outs 

Accessibility in imagery

Web Content Accessibility (WCAG) standards ensure that content is accessible by everyone, regardless of any disability or user device. To learn more, refer to the www.section508.gov. 

• Check contrast of text and graphics using https://webaim.org/resources/contrastchecker/

  • WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). If text and background colors are swapped, the contrast ratio remains the same.

• Use solid color backgrounds with text.

  • Reading text on busy backgrounds, overlays, or gradients is difficult, especially if it does not have enough contrast.