Transcript ITC: 21 – Exploring the Design and Layout Standards for an Online Course Review

Transcript ITC: 21 – Exploring the Design and Layout Standards for an Online Course Review

Click here to download the PDF version of the transcript.


Stan Skrabut: Hello and welcome back. Thanks for taking time to hang out with me as I’ve always noted. I really appreciate it. You could be doing a lot of other things, listening to other folks, but at this moment in time you’re hanging out with me. Today we are continuing our discussion on the OSCQR rubric. The OSCQR rubric is a quality rubric for online courses, basically looking at them through an instructional designer’s eye. It’s based on 50 standards.

So far we have looked at two other parts of this. One is overview and information and then it was technology and tools. Today we are going to be exploring design and layout. In this section, we’re going to be talking or going through the 13 standards that make up this particular section. I’m excited. Let’s get to it. As I noted, these are the things that will help you build better courses, that you’re going to be able to reach more students, you’re going to be able to find your content, you’re going to be able to focus on your content and because of that, that right away helps to make your course that much better.

We’re going to pick up on standard number 16. 16 basically, here’s what it has to say from the OSCQR rubric. “16, a logical, consistent and uncluttered layout is established. The courses easy to navigate. It’s consistent with color, scheme, icon layout, related content, organized together, self-evident titles.” You’re just trying to help folks find your specific content. That is really what it is, is you’re trying to create an easy navigation where you’re grouping things together, where content, for example, is grouped together, activities or assignments are grouped together, assessments are grouped together. You’re just trying to make it as easy as possible.

A lot of instructors use modules. That’s a great way to start and then package things together in modules. What you’re trying to prevent is a student coming into your course and for module, the module has no idea where something’s at. You have to remember with an online course students are often out on their own and any bit of frustration that you bring into their lives makes them convinced that, “Hey, this is probably not good for me. This is something I don’t want to do.” Then they get frustrated, but if you look at it across an institution, using something like a course template is really important because then there’s consistency across courses.

I recently got a note from a student who was extremely frustrated. They are an online student, but they said they’d go from course to course and every single course is different. That no layout is the same and it’s very frustrating for the students. Poor navigation, that contributes to learner confusion and a bad experience. It’s tough enough trying to do some of these classes on your own, but when you have an instructor working against you, that doesn’t make things easier.

One of the things that you want to try to do is consistency. That you want to have a consistent layout from module to module, to module. From course to course, to course, and those are things that you’re trying to do. Using instructive headings is also really important. Something that’s meaningful to the subject. “Click here” is a bad terminology to use, but if you said, “Writing rubrics” that would make sense depending naturally on your course.

One of the strategies that you can do is lay out your course and then have an instructional designer sit down with you and review your course and let them actually go through this whole OSCQR rubric and identify areas where you can strengthen your course. That’s a really great way to improve your course right away, is work as a part of a team. You don’t have to do this by yourself. Instructional designers are hanging out, waiting for you to engage them and they want to be able to do that.

Another thing that you may want to do is, have this rubric sitting with you or a design checklist so that way you can make sure that you are standardizing things from module to module throughout your course, and that’ll help a lot. That is the first one.

Moving on. Number 17, “Large blocks of information are divided into manageable sections with ample white space around in between blocks.” Because your course is very much online, do you have really large blocks of texts? It’s really hard to read online, so breaking those paragraphs up into smaller paragraphs is a great start for one, but also putting white space, an extra space between paragraphs.

If you look at a lot of online writing, they do that because it’s easier to read and if it’s easier to read, then odds are that it’s easier to also retain, but also with your content, you don’t want to create what’s called the scroll of death, that you want to break things into smaller chunks. Have these put into smaller pages where you’re focusing on one item at a time and you may have multiple pages, but you’re not overwhelming them with requirement to scroll through three or four screens. That you can kind of condense it.

Using white space. White space is your friend. Using bullets in order to break information down into even smaller chunks makes it more scannable, makes it easier to read that information, and that’s also important. Some idea that you may want to try. First of all, edit out unnecessary information. Not everything is important. Cut to the chase. Really hone into the essence of what you’re trying to teach. If you want to include all that background information, which I think you should because it really falls into this idea of universal design for learning.

We had talked about universal design for learning back in a previous episode. We talked about that in episode number eight, nine and 10, talking about universal design for learning, but having that additional area where you have that background information more to explore type things is really useful to students. That not all students are interested in every topic equally, but giving them a place where they can go learn more if they have time and interest, they will do exactly that.

Go through your own content, read through your own content. If you need a white space break, put a white space break in and then as I said, leave out unnecessary information, links or graphics that clutter the visual space. Not everything has to be there.

Number 18, “There’s enough contrast between the text and the background for the content to be easily viewed.” This is really important. If you have low contrast where the background and the text reading becomes very hard to read. This all frustrate learners. That ideally the background should be lighter and the text should be darker. That’s what you’re ideally trying to do. When you flip that and you put light texts on a dark background, it does make it more difficult to read.

Also, don’t just arbitrarily change the text or the color in your course because not all text is of the same contrast and you have to think about individuals who have difficulty seeing or they may be color blind and this will cause them issues by doing those kinds of things. One way to check for this is push it through an accessibility checker and it will look at the colors that you chose and possibly give you some recommendations.

Consistency, consistency, consistency. I think that’s what this whole topic really focuses on is being consistent. For the color of your headings, they should be consistent across your course. That the style of your headings should be consistent, the colors, everything should be consistent. Changing the link of colors for links, bad idea.

We have been trained over time that a blue link is a link that should be clicked on, and it’s underlined also. That’s why you really shouldn’t use underline in your text is because people confuse this with a link. Making sure that you stick to the normal colors for hyperlinks at your best bet. I know it drives graphical designers crazy, but as far as usability and instruction, that’s your best bet.

Number 19, “Instructions are provided and well-written.” I have gone through many, many courses in my life, and reviewed courses. I have to say that a lot of instructions are pretty ambiguous. The more detailed that you can provide your instructions, the better it’s going to be for your students. You have to remember that they’re out there by themselves and they rely on those instructions in order to be as successful as possible upfront, so when you look at your instructions, look at it from the perspective of a learner. Are the steps easy to follow?

Don’t go with, “This is what I know because I wrote the instructions”, but think of it as a learner or have somebody else look at them. Make sure that they’re clear and there’s no areas that need to be improved. When students come up to you and ask a question for clarification, take that feedback and weave it right back into your instructions to help make it more clear.

Things that you can do for your course to make it a little more useful or opportunity for student feedback is provide an open discussion forum where students can put a link to your instructions or make comments, guarding your instructions, or if you use, for example, Google Docs, and I use Google Docs all the time, that I can take my instructions and turn on the comments feature and by encouraging my students to make comments on where they are unclear about something, that’ll just help things out. Then you can just keep improving the instructions because it’s so that you’re going to use them over and over.

Try to keep the language consistent throughout the course, the instructions consistent. If you have a rule set for one discussion, ideally, you should probably have that same rule set for the rest of the discussions. Then also, how do these instructions tie back to the learning objectives? Remember that you’re really trying to focus on the learning objective.

Number 20, “Course is free of grammatical and spelling errors.” There are a lot of great tools out there. I use one tool called Grammarly that helps me pick up all kinds of points where I need to make improvement in my writing. This is a great tool, but typical word processors– Run your stuff through a word processor, install Grammarly, for example on your toolbar which will pick things up as you develop on the web. This will help reduce the number of errors that you have out there.

As I said, you can write stuff in a word processor and then copy it as plain text and put it into your learning management system. Those are ways that you can improve your writing and set the right example for the student.

21, this is a really important one. 21, “Text is formatted with titles, headings, and other styles to enhance readability and improve the structure of the document.” These styles are really critical. I know a lot of folks that when they format their page, they basically go and use the paragraph formatting and they increase the size and they turn it bold and italics, and all these things when they want to basically create a heading.

The more proper way is to actually use the heading tools. That there are paragraph styles already created that you can update that will let you have “heading one” and “heading two” and “heading three”, or a title. That’s really important. The reason that’s important is because, screen readers rely on that. Somebody who is visually impaired and requires a screen reader will need those headings in styles in order to better understand the document. This is absolutely a really essential stuff. The headings and styles help to identify the priorities of the page that you’ve laid out.

You want to make sure once again consistent use of heading styles, and that use the modules headings throughout your document. Keep things short for your headings. This is basically based on your outline. Read the first few words of every title or heading to make sure they stand on their own and provide enough guidance for learners to be able to scan through and be able to find the information that they need.

Number 22. “Flashing and blinking texts are avoided.” Yes, don’t. Just don’t. They’re a distractor to your learning. They take attention away from what you want them to focus on. Plus, for some students, this could be something that puts them into a seizure, and you don’t want that. There’s other ways that you can bring attention to something, the headings, and the different styles or fonts. That is a great way, or you can use graphical elements, a little stop sign or a question mark or something like that. That’s another great way to do it, but flashing and blinking text, just do not do it. Whoever thought of that initially, they were just wrong.

All right, for 23, “A Sans-serif font with a standard size of at least 12 points is used.” A lot of research has been done on readability for digital devices. The Sans-serif font is certainly a winner. There’s lots of different Sans-serif fonts, but basically, a Sans-serif font is– They don’t have the little feet on the individual characters. What I mean by that, if you compare Arial font to Times New Roman, Arial is a Sans-serif font whereas Times New Roman is a Serif font. A Serif font is easier to read in print because it kind of pulls your eye along, but on a digital device, it becomes muddy and it makes it harder to read. A Sans-serif font helps you read a little better.

Also, you don’t want to go below 12 points. That’s just kind of a rule. Just don’t go below 12 points and you’ll help make your material easier to read. Check these things out. Look at your course content from different devices. Look at it from an iPhone or Android phone. Look at it on your computer, look at it when it’s printed out and it will give you a good idea if you’re using the right type of font.

Number 24, “When possible, information is displayed in a linear format instead of as a table.” Tables are absolutely important tools for displaying data, but to organize how your information is laid out on the screen, it should not be used. It makes it hard once again for screen readers. If you’ve never tried this, there are screen readers like JAWS that you can listen to how your page sounds when it’s being read back to you. Immediately, you’ll start to understand why you should not use tables to lay out your text.

Number 25, “Tables are accompanied by a title and summary description.” If you have tabular data that you need to display, you will need to provide a title to it and a summary description. That way you can help individuals who rely on a screen reader to access the actual data in the table. The title appears first, the description second, and then the table last.

The description should include the word table so that learners using screen readers will know that a data table will be coming up next in the page-sequence. Write it out. Write out a narrative description of the table, include a link to the download version of the table. That’s one idea that you can use. Also, listen to how your table appears in a screen reader. A program called JAWS, that is a good screen reader to test this all out.

Number 26, “Table header rows and columns are assigned.” You need to make sure that when you layout your table with your data that you also include the row headers and the column headings to make sure that somebody who is navigating this with a screen reader will be able to understand the information that you’re providing.

Number 27. We’re moving into slideshows. “Slideshows use a predefined slide layout and include unique slide titles.” You have to basically use the tools of the slide. Using a consistent layout, this helps with that consistency and that continuity in your course. If presenting slides, keep the slides simple. This goes into that multimedia design. That putting a lot of words on a slide is not helping your learning. Get rid of the words, put up imagery. That will help a lot more.

Use section headers to separate topics within the slideshow. Create a session agenda or outline that matches the title and slides. Create something extra separate that will help your audience understand what’s going on in the slide presentation. Simplify your slides as much as possible. Use the notes feature for all that extra stuff that you really want them to get to.

Lastly, number 28, “For all slideshows, there are simple, non-automatic transitions between slides.” Basically what they’re saying is folks want to add all these fancy boiling slides as part of transitions. That is not helping learning. Use straight cuts. Just go from one slide to the other, but also leave it in the hands of your learners. Allow them to switch between slides as opposed to having an automatic slide.

Here’s idea on some research on this. Researchers conducted a study where learners were split into two groups. One group was shown a presentation with the animated automatic transitions on slides. The other group was shown an identical presentation with no transition. When learners were tested on recall and understanding, the group that watched the presentation with no transitions scored higher. It’s a matter of keeping it simple. Keeping it in the hands of your learners.

Build your slide decks, try putting them together with no special transitions. If you happen to have bulleted slides, which I’m not a fan of I don’t do it, but if you happen to have bulleted slides, just present all the bullets at once. Then you can talk about each one independently. Don’t transition those in, don’t have them coming in from the side. It’s not going to help the learning. I know it’s like, “Well, everybody’s been doing this.” Everyone’s not been doing it necessarily correct.

Those are the 13. Let’s recap what they are. Number 16, a logical, consistent, and uncluttered layout is established. The course is easy to navigate, consistent color theme, icon layout, related content organized together, self-evident titles. Number 17, large blocks of information are divided into manageable sections with ample white space around and between the blocks. Number 18, there is enough contrast between text and background for the content to be easily viewed. Number 19, instructions are provided and well-written.

Number 20, course is free of grammatical and spelling errors. 21, text is formatted with titles, headings, and other styles to enhance readability and improve the structure of the document. Number 22, flashing and blinking text are avoided. Number 23, Sans-serif font with a standard size of at least 12 point is used. 24, when possible information is displayed in a linear format instead of as a table.

25, tables are accompanied by a title and summary description. 26, table header rows and columns are assigned. 27, slideshows use a predefined slide layout and include unique slide titles. 28, for all slide shows, there are simple non-automatic transition between slides. There you have it folks, a lot of information in this. It really there to help create the best opportunity, best environment for the students. That you want to make the learning management system and how you’re laying things out as transparent as possible so the students can focus on the content. That’s really where the key is. With that, I’m going to put in a little plug for my book, Read to Succeed.