Formatting and Visual Cues

Visual cues are "variations in the appearance of a graphic display which are intended to assist the reader in using the display more efficiently". Research shows that the use of visual cues help readers to improve recall of key material. The structure and formatting of the your course page content can help to cue readers to understanding and to clarify the intentions about why specific content is set apart from the main content flow.

In some cases, you may want to place more emphasis the content, that way the formatting and layout actively draw the readers attention.

Selective/Active Emphasis

If you need to emphasis important information for students, using this formatting style is a great way to make it stand out on a content page. The shaded box serves to visually break up content on text heavy pages and actively draws the readers attention to its contents. Using this formatting consistently only for action items , or items students need to complete as part of their learning will allow students to quickly scan a page to be alerted about thing they need to do. 

 

The following is an example of how this could be used in a course:

Assignment X

After watching the ____ video above, and completing your readings, you can start on your Assignment X (add direct link to this assignment location). 

Complete Assignment X by the due date indicated.

 

In other cases you may want to just set some related ⁠— but not critical-to-learning information ⁠— apart for students.  More passive formatting style can provide visual cues about the nature of that information without detracting from the flow of the main content. This formatted box is an example of this.

Passive Emphasis

If you need to emphasize additional information or extra resources which are not directly aligned to the learning outcomes or assessments, using this formatting style is a good way to set it apart on a page. This formatting serves to visually break up content on text heavy pages. Used consistently it be helpful to cue students to quickly identify the type of content it contains. 


An example of this in use is:

Visit the ____ site for more information about the ______ organization referred to in your course reading. 


This formatting is  useful to present instructions related to the Canvas interface, or things such as assignment submission requirements, or information that is optional or additional and not tied to learning objectives or assessments . The following is an example of how this could be used in a course:

Note: You can add your images using the Attach link Links to an external site.in the discussion reply, or to make it easier for other students to see your images in your post you can embed the images in your discussion post. Links to an external site.

 

Copying Formatting 

Copy from here....

Tip

The formatted boxes on this page have been created using HTML/CSS coding. These are better for screen readers when compared to using tables for layout. You can replicate this using the table tool Links to an external site. in the Canvas text editor. If you would like to use these formatted boxes, rather than recreate them, you can copy them from this page.  Just select the "Copy from here..." text above this box to the end of "...to here, and remove this pasted text." Remember to delete the extra text instructions after you've pasted it into your Canvas content page.

...to here, and then remove this pasted text.

 

And again for the formatting style for action items:

Copy from here....

After students see this formatting style used consistently they can quickly scan course materials to identify action items. Students tend to spend more time online courses, and a well organized and consistently formatted course materials can really help reduce that time.

...to here, and then remove this pasted text.

Horizontal Lines

Another method to "chunk" content for learners is to break it up using a horizontal line. This can be added in the Rick Text Editor mode, by inserting an <hr> tag, or you can just copy and paste this example:

Optional Readings and Resources