Instructional Video
|
One way to reduce student cognitive load (information overload) is to create tutorial videos. The less time students spend trying to figure out where and how to submit assignments online, the less cognitive strain on actual learning. An effective learning environment is engaging when students don't need to use their energy to learn the program. Rather they can just focus on the content.
In this video, I walk you through how I structured my travel course to display the effectiveness of instruction videos. You can find the full course under the ePortfolio tab under online course example. |
|
Spanish Audio and Text
Click on the audio below to hear the text displayed above in English and Spanish.
Graphic Interchange Format
|
GIFs create image files that support both animated and static images. Animated GIFs can be added to course covers, slideshows, presentations, and videos with or without music. You can also create these images by trimming existing videos found on YouTube and Vimeo. For example, you can place text over a series of fixed images or video clip. In this example, the the flashing images are placed over a fixed image to create this media. |
Snag-It GraphicsUsing Snag-It software, call to action buttons reduce cognitive load which can distract from the course content with simple straight forward buttons. For example, in the image to the right, the student knows exactly where to start in the course.
|
|
|
VischeckVischeck is a tool that simulates different levels of color blindness.
In this image, I was able to resize the image without a major adjustment in color. The left of the image shows normal color vision and the right shows deuteranope color blindness vision. Resized Image Dimensions: Optimized Image via Vischeck. Original size was 1588 x 925 (202.7KB). Resized image was reduced by 89% with size of 400 x 233 pixels 20.44KB. |
Alternative Tags (ALT)ALT Tags or ALT description is an HTML attribute applied to image tags to provide a text alternative for search engines. The ALT Tag helps optimize visibility in search engines and describes an image to someone who is visually impaired understand what the image is about.
In this picture, I inserted a description of the image under image settings within the Wix website builder. |
|
Stand Alone Audio
|
Audio can be created to flow within a presentation, but sometimes standalone audio clips are
appropriate, such as home page introductions or to help the visually impaired that cannot read text. |
Presentations For Web PublishingI loaded two versions of the presentation. The version to the right was created with Google Slides. It converts Power Point Slides into a html code for web publishing. The second is the PDF version listed below. Both are web accessible, however, the PDF document contains ALT Tags to meet ADA requirements.
Real Life Example: All the managers in the company create presentations using Microsoft PowerPoint for a conference. The company wants to publish them on their intranet to access after the conference is over. Google Slides will create a HTML code to embed on the website and keep all the media such as animations and video. However, ADA compliance requires the media to contain ALT Tags (text that describes the media) for every piece of media in used.
|
| ||
Simulations and Interactivity
|
Powered by  |
Online Learning can be enhanced through simulation and interactive instructional media where the student plays a part in their learning. Simulations allow the students to perform a task without risk. There are three components to simulations.
The example to the left is a quiz I created titled "Test Your Water Knowledge". The quiz was placed on the homepage of the website for students to self test their current knowledge and measure their learning through the end of the course. Test results are displayed at the end of the quiz. The student can achieve a total of 10 points. Point values can be customized. This type of media can also be used for course surveys, simulations, and many other uses to produce interactive media. |
Infographic
Visual presentation of information in the form of a chart, graph, or other image accompanied by minimal text,intended to give an easily understood
overview, often of a complex subject or to represent data.
overview, often of a complex subject or to represent data.
Articulate Storyline 360 Sample Course
No Audio- Click on the image below to preview.
Storyline
Adobe Illustrator
In the design process there are times when standard/stock images do not present a proper visual for the learner and I have to create my own illustrations. Vector and Raster images can be created easily in Adobe Illustrator. The example below is a fun informal image I created for Thanksgiving. All the shapes and objects were created by hand.
Artificial Intelligence (AI) / Machine Learning
|
AI platforms like ChatGPT, DALL·E, MidJourney, Stable Diffusion, RunwayML, Jasper AI, and other image generation tools can create high-quality images by leveraging advanced algorithms and vast datasets to produce detailed and visually appealing visuals. These AI tools can quickly generate artwork based on specific prompts, significantly speeding up the creative process. However, despite their capabilities, a designer must still perform a quality check to ensure the final output meets professional standards, accurately reflects the intended vision, and maintains consistency with branding, accessibility, and universal design principles. Instructional designers must navigate the AI machine, teaching it how and what to create by providing clear, imaginative prompts and refining outputs to align with project goals. While AI can handle many technical aspects of image creation, human imagination remains crucial for guiding the AI and ensuring that the creative vision is fully realized |