Tables, Call-outs, and Tabs

Formatting and Visual Clarity

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 helps readers to improve recall of key material. The structure and formatting of 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 on the content, that way the formatting and layout actively draw the reader's attention.

Active Emphasis

If you need to emphasize 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 reader's attention to its contents. 

 

Some tips for formatting include:

  • The consistent use of formatting styles helps to reduce cognitive load with the visual-cuing it provides
  • Formatting content based on its semantic meaning is more helpful than formatting on aesthetic appeal alone

 

Another example of this in use is:

 Complete Assignment 1: Weekly Discussions [LINKED] 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. The bordered box is an example of this.

 

Selective 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. The outlined text box serves to visually break up content on text-heavy pages. Though this style does not draw as much attention as the shaded boxes, used consistently it be helpful to cue students to quickly identify the type of content it contains. 

 

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

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

This space can also be used to provide interface instructions to students.

 

If you want to use this style on a Canvas course page, follow these steps:

  1. copy this shaded box from the edit mode
  2. select and copy this box and text
  3. paste into the Canvas page where you want to use it
  4. then type over this content

 

Tables

Using tables in Canvas also you to present information in a clean and structured manner. 

Bears Not Real Bears
Panda Koalas
Sun Bear Gummies

 

Assessment

Weighting

Participation (Discussions, Peer Review)

20% 

2 Module Quizzes

10% (5% each)

3 Formative Assignments 

45% 

1 Summative Assignment:

Prospectus

Digital Essay

25% 

10%

15%

 

This style is good for larger tables. The scroll over background color helps to make this more readable.

Your Column1 Header Your Column 2 Header Your Column 3 Header Your Column 4 Header
  Your Text Here   Your Text Here   Your Text Here   Your Text Here
  Your Text Here   Your Text Here   Your Text Here   Your Text Here
  Your Text Here   Your Text Here   Your Text Here   Your Text Here

 

Block Quotes & Pull Quotes

Blockquotes highlight key points from the main flow of text and add visual interest to a page. 

Pull quotes, are typically centered or aligned right, and are positioned near related content in the main content area. They are often used in print magazines to gain a reader's attention and to emphasize key points. In online courses, you can use pull quotes to:

  • highlight a quote from a reading in order to entice learners to read the accompanying course materials
  • highlight a quote that supports the learning objectives concisely, and re-enforces a key point

It is important to understand that pull quotes can break the reader's content flow which may make it harder for the readers to actually follow complex explanations or arguments when too many are used. Consider the information and use them selectively. Carefully selected pull quotes can be helpful when simplifying for understanding. For example, highlighting a particularly engaging or concise excerpt from a course reading is a good way to grab the student's attention to help to engage with that reading. 

Copy and then paste the HTML code in the box below if you would like to insert a block quote into your page in Canvas. Use the HTML editor in the Rich Text Editor, insert this code on the page where you want the blockquote to appear, then edit the text within the block. 

<blockquote>
    <p>
        <span style="color: #000000;">This could also be one of the ways to draw attention to some important information about the topic under discussion. It uses the block-quote html attribute. The default text colour for this formatting is slightly lighter.&nbsp; If you would like more contrast just select the text and make it a darker colour.</span>
    </p>
</blockquote>

 

Horizontal Lines

Another method to "chunk" content for learners is to break it up using a horizontal line. As shown in the image below, this text feature can be added in the rich text editor mode, by inserting a horizontal line.

Horizontal line-1.png  

 

Tabs

  • You can list the topic-related materials on tabs that appear like individual 'pages' within a page in Canvas
  • It's a good way to separate content and meaningfully create categories with your content

Begin by adding a Heading 2 or 3 

Add some content text to frame the reading experience. Then add one line of explicit directional text so students know what to do when they see the tabs.

Click on the tabs below to view <describe>. 

Tab 1 Title

Text under Tab 1 add here....

 

 

 

Optional Resources