Presenting your content in Blackboard

The Business eLearning team want to help you improve the look & feel of your modules on Blackboard, here’s just a few tips that are easy to implement that can help you get your module looking sharp for the new term!

Design Principles

• Keep pages clean and uncluttered. Use plenty of white space to separate paragraphs, images, and other page elements to avoid overwhelming readers.
• Align text and headings on the left. Online readers’ eyes usually scan down the left side of the page. Centering headings will make your readers work harder to stay focused on the material.
• Use block-style paragraphs. Leave a space between each paragraph and do not indent the first line.
• Be consistent. Create predictability by using layouts that repeat design elements from page to page. Use the same fonts, colours, icons, and heading styles on each page to help students feel comfortable and find information faster.
• Use headings. Chunk information and make your page easier to scan. Choose your colour scheme carefully and use colours that maximize readability. When in doubt, use black on white.
• Use tables for presenting data. Do not use tables when creating your page layout. If you use tables to define the layout of your page, screen readers will have a more difficult time interpreting the information on the page.
• Use simple typography. Use no more than three font faces in your entire course. Be consistent with how you use them. For example, use Verdana for body copy text, and use Times New Roman for subheadings. Use fonts that are standard for everyone’s computers and easy to read, such as Arial, Times New Roman, Trebuchet, Georgia, and Verdana.

Benefits of Graphics

• Navigation. Users locate information more quickly through visual clues.
• Understanding. Increase retention and make difficult information easy to understand.
• Models. Depict a concept visually to save time and increase effectiveness.
• Relationships. Connections between ideas or concepts are more easily understood with images.

Tips for Adding Graphics to Your Course

• Use simple graphics. Clean and simple is often the most effective. You do not want design overtaking content, nor do you want to increase download time unnecessarily. Avoid lengthy text and lots of numbers within the graphic.
• Avoid background images. Use a white or pale solid background with dark text instead of adding background images. High contrast between text and background is easier to read.
• Watch the file size. Large and numerous images may look great on your page, but they will frustrate users who must wait for images to load.
• Use the right format. You must save your pictures in a web-ready format. In general, use the PNG format for simple graphics, such as logos, charts, and drawings. The JPG format is usually better for photos and images with subtle shadings or gradients. The JPG format also allows for better compression of a file—a 1500 KB file can reduce to 150 KB—but this may reduce some image quality. Select the best format for better image quality and smaller file size.
• Crop photos. Cut out nonessential areas of an image to maximise impact and decrease download time.
• Use animated images sparingly. They can cause the screen, or parts of it, to flicker and change rapidly. Animations can detract from the accessibility and usability of a page. Moving images also cause problems for students with cognitive impairments and may be hard to interpret by students who have low vision.
• Provide alternative text using the ALT attribute. For detailed images like graphs or maps, use the long description attribute to provide more information. Screen readers and other text-to-speech software read the image’s alternative text aloud to the user.

Key Colour Considerations

• Use a consistent colour scheme. Use no more than five colours in your palette. Different shades of the same hue with one or two extra colours as accents work well.
• Choose a light shade for the background colour. Dark text against a white background is the most readable combination. If you decide to use a non-white background, select a light colour to maximise contrast. Avoid dark pages or loud glaring colours, such as bright red, green, or yellow. These cause eye fatigue and are hard to read.
• Use colour discreetly and use strong colour sparingly. For example, black on yellow is a good colour combination because the contrast between the colours is strong. But for the entire page? Instead, use the black and yellow combination for drawing attention to a portion of your page, such as an information chart.
• Choose different colours for each of the three link statuses: visited, active, and static. Keep these consistent throughout the course. Link colours should be dark enough to be easily visible on a white background.
• Avoid placing red and green, and blue and brown together. These colour pairings are hard to tell apart by people with colour blindness.
• Do not rely on colour alone to relay key information. Make important text stand out by highlighting it in bold, using an asterisk (*) beside it, or using emphasis. If editing HTML use the ALT attribute on coloured images to help convey information that is colour dependent.

Have a look at this video that demonstrates how to improve the visual hierarchy of your modules.

Have a look at this slightly more advanced video that shows how you can control the width of your paragraph measure using a little bit of HTML.