3. Effective Pictures

 A picture is worth a thousand words.

Pictures as navigation guides

Pictures convey a lot more information much quicker than large blocks of text. In truly effective website design, images can also be strategically placed to subtly guide users to where you want them to go.

This course front page has a lot going on. There is:

  • a primary navigation menu
  • a secondary navigation menu
  • a section of module quick links

 

There are many navigation points on the example Front Page screenshot above.

To help guide first-time students, a large red arrow is placed above the "Module Quick Links" section. Next to the red arrow it reads, "Use the Start Here@ button above to being if this is your first time entering the course or use Module Quick Links below to continue where you left off" helps remind students who are first entering the course to select the "Start Here!" button in the secondary navigation menu.  

Use infographics

When possible, deliver information in different ways - try infographics! They are a great resource to effectively convey information while still grabbing students’ attention. The average student skims content rather than reading it in full detail. This is why infographics may be able to convey information more effectively than standard paragraphs.

 Infographic guidelines

  • Ensure there is enough color contrast between the text color and the background color - it must be readable and follow WCAG 2.1 Level AA standards. Black text against a very light background such as white is the easiest way to go. Note the infographic below has a good amount of color contrast - very easy to read. 
  • Less is more - can't say this enough.
    • Notice how there is a minimal amount of images or icons. 
    • Check out the "white space" or "negative space" around the various sections to help draw the eyes in specific elements.
    • The heading style is consistent to help readers determine the various sections. The heading style uses a blue background and white text.  
    • Capitalization is difficult to read in sentences and paragraphs. Plus it looks like you're screaming. 

 Remember to create an accessible version, for example: 

Why You Should Use Infographics Outline 

 Scaling infographics

If you curate or create an infographic, when you place the image into your Canvas content page, try to match the paragraph text size to Canvas' default size. This helps your infographic blend with the rest of the content on your page. 

Quality is the key - help students connect to your content and provide meaningful images

Let's pretend you are a Child Development instructor. In your hybrid course, you want to introduce the topic of how students will encounter children who are around five-years-old in the on-ground portion of your course. 

Which of the two images would be more impactful to your students? 

  1. Clip art children 
    90's clip art cartoon children
  2. Real children
    photograph of children about five years old

When choosing images for your course, keep in mind that quality is key! All images should be high resolution and should fit the overall style of your course.

It’s also a good idea to incorporate images of people as our eyes are naturally inclined to recognize faces. If you’re using stock photos, be careful not to choose ones that look too staged. This can come off as cheesy and unrelatable.