The word design comes from the Latin de signare, meaning to mark or sign, to give something significance and thereby designate its relation to other things. Design, by very definition, is a way of making sense of the world by giving order to things and making them “understandable and meaningful” to the viewer or user.
It follows logically, then, that design should play a fundamental role in education, itself driven by the need to foster greater understanding and enlightenment. Design is a central, though perhaps often overlooked, element in student performance. When done well, it creates a fruitful environment in which to learn. When done poorly, it can confuse and obscure, making it much more difficult for students to gain access to information, focus on learning and ultimately be successful.
In the online sphere, design becomes even more important. Technology is not a neutral element in an online course—it has a direct impact on how much and how well students learn—and with all instruction occurring within this digital environment, it’s critical that the technical elements of the course serve to support instead of impede educational goals.
It’s tempting to ignore the look and layout of your course in favor of focusing on content and instructional design but the reality is that the two are inextricably linked. If you ignore one, you harm the other. How do you fix this? While your LMS may limit the amount of range you have in really getting into the nitty gritty of designing things, nearly all systems allow you to customize many elements key to the structure and appearance of your course. Even better, instructors don’t need to become expert web programmers or graphic designers in order to embrace good design. Focusing on several fundamental elements of attractive and intuitive websites can help you to create a course page that’s far more usable and ultimately more effective for students.
Here are 6 things to focus on as you learn how to improve your course design and your online teaching effectiveness.
Contrast
Contrast is the difference between two or more elements. While the term is often is used in reference to color, it isn’t limited to that—there can also be contrast in size and alignment. Contrast allows designers to create visual interest and direct the attention of a viewer, as a web page with no contrast would simply be a sea of visually unintelligible content.
How It Helps Students to Learn
Contrast makes it easy to see what is important, even if you’re just skimming a page. When deployed effectively, it allows students to know where to focus their attention and how to find the content and tools they need to complete their coursework. It makes it very clear what the primary and secondary elements on the page are, even if a viewer is just skimming.
Readability is also an issue related to contrast. Studies have shown that simple is best when it comes to choosing text and background colors: black text on a white background is incredibly readable, as is black on grey, and light blue on dark blue. In fact, there’s some evidence to suggest that slightly lower contrast combinations such as the latter may even be superior, enhancing readability and retention.
How to Use It
Let’s address how to use each of the elements of contrast:
- Color: Be careful when creating color contrasts; you do not want to create something that is hard on the eyes or hard to read. Instead, use color to highlight things judiciously, like important passages, small text boxes, or to create clearly defined areas of interest. Focus on a limited and unified color palette to avoid making things look too busy.
- Size: Using bigger or bolded text is one way to help call out the items in your course that are most important. It’s simple, but it’s an incredibly effective way to make it clear where you want students to focus and to establish a hierarchy within your content.
- Alignment: Alignment is essentially how you’re choosing to place the elements on your page, and it’s not essential that everything have the same alignment. Altering this can help subtly draw attention to important elements, like a title, or to ensure that a body of text is readable (large blocks of text should never be center aligned—it makes them VERY hard to read).
Spacing
Spacing is just what it sounds like–the distance between the objects on a page. While the definition may be simple, the impact of spacing can be quite complex. It can influence not only how easy a page is to read, but also how it makes the viewer feel and think. In fact, white space, or lack of it, is one of the most impactful elements of web design on learning outcomes.
How It Helps Students to Learn
A 2004 study found that using a judicious amount of white space between paragraphs in the left and right margins emphasized key concepts, reduced cognitive overload, and to even improved comprehension by up to 20%. But don’t go overboard—another study by Coursaris and Kripintris in 2012 discovered that while leaving white space to separate sections of content was beneficial, it only helped to a point. If more than 50% of a page was dedicated to white space, users felt it was less attractive and, perhaps more damning, less usable.
How to Use It
The biggest concern you should have in spacing on your page is crowding content. If there’s too much information, big blocks of text, or things are too close together, it becomes both difficult to read and difficult to tell what’s important to focus on. Leave space open between columns, text, images, and margins so that your students have some visual relief.
Also, remember that’s it’s not always how much space you leave, but where you leave it. Use your white space efficiently. Space should be balanced and symmetrical. This not only looks better, but also has a positive impact on how it makes students feel when they see it. Space that is open, consistent, organized and symmetrical in contrast elicits positive emotions, while that that is tight, poorly aligned, overlapping, disorganized, or that is broken up poorly elicits negative ones. If your course page makes students angry or confused, they’ll be less likely to check in.
Consistency
Consistency is the repetition of information in similar ways. Consistency establishes expectations. If information is presented in the same way unit after unit and page after page, students don’t have to search for what they need; they know where it will be and how to access it. Consistency is key to an effective course design, as it lets students focus on learning, not on where and how to get to the course materials.
How It Helps Students to Learn
Students not only prefer consistency, it can have a marked effect on their success in your course. A recent study found that when instructors used templates for their online courses that student achievement improved in 37% of the courses participating.
Other studies have found that when material is presented in an inconsistent format online, it can even hamper the success of your most computer-savvy students. Not only did it cause students to make more errors, it also had a bigger impact on lowering their learning satisfaction. Consistently designed pages helped to close the achievement gap between students who are tech-savvy and those who are not, as students could focus more on content and less on where to find it.
How to Use It
Consistency is critical for your online courses. Decide on a method for titling, labeling, organizing, and placing information and stick to it as it is confusing for students if you call an assignment or a piece of content one thing in one place and something else in another section. In addition to being confusing, it wastes time, as students will be searching for information, emailing you with questions, and you’ll need to respond. It’s much more efficient to put in the effort to have everything be consistent from the start.
Don’t forget to standardize heading sizes, fonts, color schemes, button styles and spacing, too. Every page of your course should be in harmony and should not distract your students from the content.
Color
Don’t know much about Color Theory? You don’t need to be an expert but it helps to be familiar with the basics. Color Theory is the interaction of colors in a design through complementation, contrast and vibrancy. It explains how colors work together with each other to create harmony or discord and to elicit emotions from the viewer.
How It Helps Students to Learn
Color can be a very important grouping clue for students, helping improve the readability and comprehension of your course. But, as with many other elements of design, color is best when used in moderation. According multiple studies, the degree of visual complexity on a webpage, in part determined by the interplay of the text color and background color, can degrade screen readability by increasing cognitive load and acting as an obstacle to learning retention.
One of the best ways to use color to improve learning outcomes is by providing consistent color cues (for example, questions students need to answer could be highlighted in yellow). Cueing shortens the learner’s response time and allows them to more quickly focus on key information, which studies have shown helps produce higher achievement scores.
Color can have some unexpected effects, too. Using contrasting colors, provided they are not too bright and jarring to viewers, actually increases the precision and rapidity with which information can be perceived and memorized. By how much? Some studies suggest up to 40-50 percent when compared to standard black on white contrasts.
How to Use It
You don’t want to go overboard with color on your page. Select a unified color scheme choosing no more than five different colors. These colors should complement one another, either because they equally vibrant, have visually appealing contrast, or are from the same color family. Color can also be a great way to highlight important content or to separate content areas from one another. Just keep in mind that it should always be of service to students and not a distraction from being able to read your content.
Simplicity
Simplicity is the quality or condition of being easy to understand or do. Since you want to ensure that accessing course material is indeed easy to do, embracing simplicity in your design is a natural next step. Take the advice of designer Dieter Rams who said, “Good design is as little design as possible.” You want your course pages to be effective at communicating, and they can only do that when they are not interfering with the message you are trying to get across.
How It Helps Students to Learn
The same principles hold true for the online classroom as off: clutter, chaos, and random stuff distract students from focusing on their work. When things are clean, simple, and clear, there is nothing in the way of the learning process.
Failing to create a simple webpage can result in information overload, which isn’t good for you or your students. Princeton researchers found that physical clutter in your environment competes for your attention and results in decreased performance and increased stress. The same holds true for the online sphere. A simple, organized course will improve productivity, focus, and even the ability to think creatively.
How to Use It
Focus on reducing visual clutter, as the more elements your course pages contain, the more confusing it can be to understand and chaotic it feels. To do this, figure out what is most important, create a clear pathway to access this information, and cut out everything else that’s not necessary (or relegate it to a separate section or page). Avoid using large swaths of text—break these up into smaller chunks instead, divided up by topic or concept.
Simplicity should also be apparent in your color, font and graphic choices. Limit these to just a few strong selections, and use these same styles and colors throughout. This will create a calm, virtual classroom where students aren’t distracted by excess visual stimuli.
Usability
Usability in many ways is the culmination of the successful deployment of all of the previous elements, both from an aesthetic and functional point of view. It’s listed last here, but should really be your first and primary concern. Usability, especially as it applies to navigation, is one area where it really doesn’t pay to be creative—keeping things simple and intuitive will do the greatest amount of good for your students. A highly usable course site will have clearly defined functional regions and be user-friendly, meaning that even students who are not technically fluent can figure out where to go and how to find the information they need.
How do you figure out how usable your page is? There are five quality components:
- Learnability: How easy is it for users to learn how to use the page? Can they understand it the first time using it?
- Efficiency: Once users know how to use your page, how quickly can they perform tasks?
- Memorability: Can users come back to your page and remember how to use it?
- Errors: How many errors are on your site?
- Satisfaction: Is it a pleasant experience to use your site?
Evaluate your course site for each of these and see where there’s room to improve and what is already working.
How It Helps Students to Learn
The impact of usability on learning incomes has been fairly well-researched and as you might expect, by and large studies have found that the more difficulty students have in finding and accessing the materials for an online course, the greater the negative effect on their learning performance.
Further studies have confirmed that improving the usability of courses, based on student feedback, had an immediate and direct impact on learning scores. It should also be noted that usability is often closely related to accessibility issues, and anything you can do to make your course more accessible to students who may need these accommodations is a good thing—not only because it’s more inclusive, but because it’s likely to very soon be required by law of any online course.
How to Use It
So how do design for maximum usability? Start by approaching your material as a student. Think about what the student will think, see, and need to access. How will they learn? What things would make it easier for them to learn? If you’re struggling with this, consider signing up for a free online course (like a MOOC). Once you have firsthand experience being an online student you can easily understand what things make taking an online course easier and the things that make it feel like a huge hassle.
One of the best things you can do to make your page usable is to take advantage of what your students already know about navigating the web. Don’t try to reinvent the wheel. Keeping things consistent with the standards set by most other pages will make it infinitely easier for students to find what they need.
Think about how the elements of your course are connected. Have you made it easy to get from one section to another? Can students access the assignments or discussions they need without having to go back to the home page? Students should be able to find the information they need in three clicks or fewer.
To a certain degree, you may not have control over some of the aspects of usability in your course—they are simply set by default in the LMS. But what you can control, do in a way that makes sense and is consistent for your students. You can help them figure out the rest if they have questions.
Good Design Matters
There’s a reason that retail sites frequently adhere to best practices for web design: it works. Visitors to these sites are more likely to spend time and money when a company has an attractive and user-friendly website. These sites are designed to encourage people to click and ultimately to consume. While you may differ in your reasons, this is an online educator’s goal, too. You want students to click on content. You want them to consume the information you’re sharing. Without it, they won’t learn and neither you nor they will be successful in your respective roles.
It’s also key, as Professor Lisa Lane reminds, to recognize that there is a difference between being experienced in instruction and being experienced in using the web to instruct. What works in the classroom may not work online. It will take time and effort to learn to become an effective online instructor, but it can be done, and integrating web design principles in your course design can play a big role in helping to get you there.
