Usability and Visual Design: What can I do to help my students see where to go and what to do?
Learning Objectives
Designing for usability helps everyone. If the course and course materials are usable from the start, it reduces frustration, helps maintain student motivation, and reduces the amount of time you spend re-explaining and fixing during the course. By the end of this module we hope that you will:
- explain the ways in which usability - including findability and visual design - can support student success, and
- make a plan to enhance usability in your course
Table of Contents
- Usability and Findability
- Visual Design for Usability
- Improving Usability and Visual Design
- Usability and Visual Design: Practicing with Visual Design
- Usability and Visual Design: Resources
Usability and Findability
It's About the Experience
Usability, findability, and visual design are critical aspects of the way your students experience your course. Just as you try to set a certain tone in your classroom to support student learning, your online class also has a tone and a feel to it. A good student experience requires a functional and usable course. A great student experience also needs thoughtfulness. Think about how your students may feel when beginning a task or trying to navigate the course. Imagine someone close to you doing these things. Would they find it interesting and enjoyable, or would they be frustrated and lose motivation?
Usability refers to the ease with which an individual can navigate, understand, learn, and use something. In this case, the something is your course, and the individuals are your students. Usability is not something commonly considered in face-to-face courses, but it is a critical component of online course success. It is defined as the ability of the user to "do what he or she wants to do, the way he or she expects to be able to do it, without hindrance, hesitation, or questions" (Rubin, Chisnell & Spool, 2008). It also tends to be an umbrella term that includes other components such as findability, accessibility, readability, etc. - all important aspects in supporting a positive student experience.
There are several versions of usability principles for online learning - most stemming from the work of Jakob Nielsen. Some of the major principles that faculty have control over include:
Accessibility
Discussed in detail in the accessibility section of this module.
Consistency
Includes consistency of layout, navigation, images, and terminology used.
You'll notice throughout these pages, the content is displayed consistently from page to page, and the images and graphics are similar in appearance, size, and shape. The intent is to make these pages approachable and easy to navigate. Contrast these pages to many commercial news websites like Yahoo (Links to an external site.) or MSN (Links to an external site.) where the pages are cluttered with a mix of story links, pictures, video, notices, and advertisements which makes it more difficult to navigate. The less time your students are hunting for information or spending energy trying to distinguish the important information from the decoration or side notes, the more time and energy they have to learn what you want them to learn. (See Findability below)
Visual Clarity
Includes using legible fonts, color contrast, white space, headings, and indents to visually organize text as well as eliminating distracting animations and most purely decorative graphics
Readability
Includes writing in active voice and at an approachable reading level. To check readability you can paste in a sample of your text into a Readability Checker (Links to an external site.). You can also check readability within MS Word (Links to an external site.).
Findability: A key component of usability
If your students can't find what they are looking for, don't understand the instructions to an assignment, or aren't able to download an article or worksheet, they can't do what you are asking them to do or learn what you are asking them to learn. Lack of findability impacts student self-efficacy, motivation, and learning. Robins, Simunich, and Kelly (2013) found that students experienced frustration and reduced motivation when findability was reduced due to:
- Lack of use of logical categories for organizing content and activities
- Poor labeling, including use of file names as labels
- Deeply buried content such as placing a syllabus in a folder in instead of using the syllabus tool
- Lack of visual contrast among page elements
The Modules tool in Blackboard can make organization and navigation easier for yourself and your students. Modules allows you to aggregate your content, activities, and assignments for the module in one easy-to-find place and put things in the order that you want your students to work through them.
Course Organizational Map Outline (File can also be downloaded under Attachments at the bottom of this article)
By placing all your content, assignments, quizzes/tests, discussions, etc. in folders/modules, you can hide the Assignments, Quizzes, Discussions, and Files from student view. This provides students with one place to look for everything. That means fewer "where is ____?" questions for you and less frustration for your students. Starting each module with an overview including what the students are to read, watch, and explore as well as a brief description of the assignment(s) for that module also improves usability. Think about it as if you are providing an outline of the concepts in the folder/module.
When moving a course online or revising from a previous online course, organizing with Modules also allows you to see where there may be too much material for the students to work through in the time provided as well as where there may be gaps in content that need to be filled in order for students to complete required assignments.
Visual Design for Usability
Using images and visual organizers supports learning and can improve recall. Because the brain codes visual and verbal information separately, associating facts and concepts with clear graphics provides two channels to memory.
Visual Design and Attention
As you have likely experienced, students don't always pay attention to everything you give them. That's not unexpected since people in general do not pay attention to everything they do and read. For example, check out Christopher Chabris and Daniel Simons (1999) "The Invisible Gorilla" test (Links to an external site.). Viewers are asked to watch and count how many times a group of individuals pass the ball around. The study found that 50% of the participants completely missed the gorilla who walked in the middle of the ball-passing group.
Peters (2014) points out that there are certain visual features humans recognize unconsciously that we can use to orient students and draw attention to different parts of a graphic or page.
- Shape - closed shapes and boundaries connect their contents
- Size - the larger, the more important.
- Grouping - by proximity, similarity, or connectedness
- Position - certain things always go in a specific part of the page such as navigation buttons
- Contrast - putting elements together with differing color, direction, size, or shape
Higgenbotham (2011) notes that
You convey information by the way you arrange a design's elements in relation to each other. This information is understood immediately, if not consciously, by the people viewing your designs. This is great if the visual relationships are obvious and accurate, but if they're not, your audience is going to get confused. They'll have to examine your work carefully, going back and forth between the different parts to make sure they understand.
For example, mixing photographs with clip art with line drawings (image) (Links to an external site.) can confuse your students and distract from your content (Tom Kuhlman, 2009) (Links to an external site.). A single large illustrative image is more likely to grab the viewer's attention and be memorable that a collection of smaller, mismatched images.
A Note on Color
Using color to organize and call attention to things is a common strategy in textbooks and online learning materials. However, there are challenges to working with color due to differences in how different brands and types of monitors, tablets, and phones display colors and how different people perceive colors as they are displayed. While individuals with varying levels of color-blindness may have trouble telling colors apart, the general public also has troubles identifying colors at times. For example, can you tell the color of the dress? (Links to an external site.)
Visual Design and Comprehension
When you are presenting and explaining content to your students, the goal is comprehension and learning. Writing for readability is a good way to start but it is important to not overlook the way in which your text is presented.
Which block of text is easier to read?
| Left aligned | Center aligned | Right aligned |
|---|---|---|
| Lady Macbeth, Act I, sc. 7 (line 35)
Was the hope drunk |
Lady Macbeth, Act I, sc. 7 (line 35)
Was the hope drunk |
Lady Macbeth, Act I, sc. 7 (line 35)
Was the hope drunk |
Native speakers of languages written left to right have difficulty reading centered or right-aligned text because people look for a consistent starting point for each line of text. When our eyes and brain have to search for the beginning of each line, it takes us longer to read, increases effort, and reduces efficiency.
What About Fonts?
Words hold power. But the aesthetic manner in which those words are presented can affect the way we read, and the way we think about the information presented. (Chris Gayomali, The Week) (Links to an external site.)
There is NO option to change the font in the Blackboard Rich Content Editor so the section below is primarily for materials you are providing students through PDFs, PowerPoint files, or other downloadable documents types. This is design decision on the part of Blackboard both for usability reasons as well as the philosophy that the individual user should have control of the font they see through setting preferences in their browser of choice (Links to an external site.).
High definition displays mean the old rule of thumb of serif fonts for paper and san-serif fonts for screen, no longer holds true. Current display technology can render serifs as cleanly as a printer so there is no need to restrict your font choice based on the delivery method. However, there are still a few things to consider before choosing a font (or fonts) for your materials.
While readability generally refers to the content of the text via a Readability Checker, font also plays a role. if students can't decipher the words easily you can lose them whether or not the text is written at an appropriate reading level. Letters have to be quickly and clearly distinguishable from one another without having to stop to think about them.
Research has shown that occasionally using slightly less readable fonts, causes readers to slow down and read more carefully. This also holds true for text written in italics. The letters are not shaped the same way as the majority of text we read, so we have to make a greater effort to read that style of text. The point is to use this strategy sparingly. Results from French, et al. (2013) appear to support that it is useful up to 56 words at a time. Longer passages in slightly less readable fonts may lead to cognitive fatigue.
However, fonts that are very hard to read can lead to both lack of comprehension and lack of motivation. For example, Song and Schwartz (2008) showed that students given either exercise instructions or recipes in an easy-to-read font believed that they would be able to complete the actions required and were more willing to try. Alternatively, participants who were given the same instructions in a hard-to-read font comprehended less of the text and, as a result, thought the instructions were more complex, doubted their ability to do what was asked of them, and were less willing to even try.
While font choice clearly affects readability, the research on font and typeface shows that your choice of font also affects the emotional reaction to the content. Fonts set the tone of the writing. Modern fonts are designed with a purpose and a persona; some are friendly while others are more direct, and others quite elegant (Brumberger, 2003). Chris Gayomali's article How typeface influences the way we read and think (Links to an external site.) provides a nice overview.
Visual Design and Trust
Research shows that people make decisions about the credibility of a source based in large part on how the content looks. Whenever you take in information from any source, your brain evaluates that information based on the combination of a cognitive component (to assign meaning) and an affective component (to assign value). Research consistently shown that human beings value things they perceive to be attractive and tend to evaluate them as more trustworthy, professional, and credible (Fogg, et al, 2003; Metzger, Flanagin, & Medders, 2010).
In one example, a psychology professor at Cornell analyzed data from a large study (n=45,524) of New York Times readers (Links to an external site.) presented with the same article in different fonts. Each person reaching the page was presented with the article in a random font from their list of Baskerville, Georgia, Computer Modern, Helvetica, Trebuchet, and Comic Sans. The results showed statistically significant differences in assessment of the truth and reliability of the article based on the font in which it was read. Baskerville was far and away the winner with the highest rate of agreement and the lowest rate of disagreement at a p-value of .0068. Fonts are something to pay attention to when evaluating web resources for your students.
Take a look at the two screenshots below from the perspective of a student judging whether the information on the site is credible enough to cite in a paper. Which content do you think looks more trustworthy?
Fogg et al. (2003) found that the most common feature participants cited for regarding a web site as credible was visual design, comprising over 46% of the credibility decision. This included logical layout, readable fonts and appropriate font size, use of white space, professional-looking images, and muted color schemes. These findings were confirmed by Metzger, Flanagin, and Medders (2010) where an "especially prevalent form" of heuristic evaluation of credibility centered on visual design, readability, navigation, and writing mechanics such as grammar and spelling. They found that their participants frequently noted "that visually unpleasant font type and size, poor layout, and bad use of graphics all indicated ‘‘amateurish’’ sites, signaling low credibility" (p. 431).
Improving Usability and Visual Design
How can I improve usability in my course?
Seeing your course and materials from the perspective of someone unfamiliar with your content and organizational structure can help you to clarify important instructions and emphasize important concepts. Having someone else review your course for usability provides a useful second set of eyes to help you see things you hadn't notices before. Here are some usability questions that you can use to review the usability in your course. You can download these questions to refer to each semester: Usability and Visual Design Questions for Online Courses (pdf, 65k) (File can also be downloaded under Attachments at the bottom of this article)
General Course Questions
- Are your learning outcomes easy to find and clearly tied to modules and assessments?
- Does your beginning-of-the-semester course home page include or link to a brief introduction to the course and explicit instructions on what to do first?
- Do students have a single main path to follow to move through the course?
- Are there clear, easy-to-find instructions for contacting both you and Tech Support?
Text Content and Instructions Questions
- Do your page titles accurately describe page content?
- Are your content areas, assignment instructions, etc. written in an active, 2nd-person voice?
- Have your content areas, assignment instructions, etc. been proofread?
- Do your content areas, syllabus, assignments, etc. use headings and indenting to help readers follow your organizational structure?
- Are your instructions clear to people with a student-level understanding of the concepts?
- Are there rubrics, models, or examples to help students understand what they are supposed to do?
- Are all links in your content and instructions working and have some description of what the link is to and what the student is to do once they follow the link?
Visuals and Multimedia Usability Questions
- Are your images crisp and clear (not skewed or blurry)?
- If you use color, is the color contrast (Links to an external site.)strong enough for everyone to see?
- If you have images with text in them, is the text clear and large enough to read (and does it have alt text for assistive technology)?
- Do longer videos (>15 minutes) have a table of contents with time marks for each section above or below the video?
- Is the audio on videos clear and understandable?
How can I improve visual design in my course?
There are several easy updates you can make to your course to help student visually navigate more easily.
Visual Design Questions
- Do you have relevant images (charts, graphs, diagrams, pictures) to break up longer sections of text?
- Do your images have a similar look and feel to them (photos with photos, line drawings with line drawings, etc.)? *
- Are your images illustrating concepts or providing examples (not only decorative)?
- Do different sections of your page have enough white space around them to be clear what belongs with each one?
- Is your text almost all left aligned (unless you're teaching a language that reads right to left)?
- Is your text almost all in the default font size? **
* To find images, try the resources listed in the Content module.
** Readers can adjust font size in their browsers to meet their individual needs.
For a good tutorial on visual design basics see Clean Up Your Mess - A guide to visual design for everyone (Links to an external site.).
What if I'm teaching a course I didn't design and can't change?
That's a really good question. While no one wants to teach a course with usability or accessibility problems, sometimes these things happen. While the best case scenario is to work with the faculty member or committee that designed the course to improve usability there are times that isn't possible due to time constraints or other complications. In terms of usability, while you may not be able to change the original course, you can still help your students to have a better experience. If you can add an ungraded discussion forum, students can ask questions there and you can respond and clarify for the entire class. If not, regular use of Announcements is an easy way to share updates and clarifications.
Preemptively review the course for usability issues and document them so you know where the stumbling blocks are. If there are issues with clarity of instructions, rubrics, models, or examples, you can clarify or provide additional examples, diagrams, or charts. If you have broken links or links without descriptions of what they are to do once there, you can preemptively provide the correct link and/or explanation. If the course is not using the Modules tool and there is no single place where students can go to find their path through the course, you can provide a course map or a video walkthrough to help students understand where everything is and how to get there. You can create a video walkthrough and embed it into either an announcement or a discussion forum. Be sure to include full transcripts for students with hearing or visual issues.
The key is to figure out where students will have problems and questions as early in the semester as possible and provide clarifying material at the time they are beginning to work on each section. If students receive all the clarifications at the beginning of the semester they will forget that they have them when the section begins. By providing just-in-time support, students are better able to take advantage of the additional resources you are providing.
Finally, keeping notes on the issues and the strategies you used to help students past them can be a valuable resource when it is possible to update or revise the course.
Usability and Visual Design: Practicing with Visual Design
Aesthetically pleasing interfaces are more usable (Norman, 2003). Working with well-designed tools and content supports positive emotions which are important to learning, creative thinking, curiosity, motivation, and the ability to cope with minor problems.
How can you improve usability and aesthetics in your course?
As you become more comfortable in working with images and alignment, the better-trained your eye will be in noticing things like not enough white space, skewed images, and test issues. To practice, download the Practice with Visuals PowerPoint file.
Transcript - Visuals PowerPoint (Files can also be downloaded under Attachments at the bottom of this article)
Usability and Visual Design: Resources
Additional Information
Clean Up Your Mess - A guide to visual design for everyone
Usability Guidelines:
- Principles for Usable Design (Links to an external site.)
- Principles of Accessible and Universal Design (Links to an external site.)
More than Just Eye Candy (Links to an external site.) by Clark & Lyons. This article is good for learning about the types of visuals used in instruction; however, the example graphics they use are dated as the article was written in 2003.
Typography and readability by Itkonen (Links to an external site.) (Translated from Itkonen, M. 2007. Typografian käsikirja. 3. edition. Helsinki: RPS-yhtiöt.)
Color Theory for the Color Bind (Links to an external site.) is a nice walk-through of things to consider and strategies to use to make your visuals and text color-blind friendly
References
- Brumberger, E. (2004). The rhetoric of typography. Technical Communication, 51(1), 13-24.
- Fogg, B. J., Soohoo, C., Danielson, D. R., Marable, L., Stanford, J., & Tauber, E. R. (2003). How do users evaluate the credibility of web sites?: A study with over 2,500 participants (Links to an external site.). In Proceedings of the 2003 Conference on Designing for User Experiences (pp. 1-15). ACM.
- French, M. M. J., Blood, A., Bright, N. D., Futak, D., Grohmann, M. J., Hasthorpe, A., ... & Tabor, J. (2013). Changing fonts in education: how the benefits vary with ability and dyslexia. The Journal of Educational Research,106(4), 301-304.
- Haugen, J. L. (2015) Becoming a more thoughtful user experience designer (Links to an external site.). UX Magazine
- Mehlenbacher, B. (2002).Assessing the usability of on‐line instructional materials (pdf, 60k) (Links to an external site.). New Directions for Teaching and Learning, 2002(91), 91-98.
- Metzger, M. J., Flanagin, A. J., & Medders, R. B. (2010). Social and heuristic approaches to credibility evaluation online (Links to an external site.). Journal of Communication, 60(3), 413-439.
- Rello, L., & Baeza-Yates, R. (2013, October). Good fonts for dyslexia. In the Proceedings of the 15th International ACM SIGACCESS Conference on Computers and Accessibility (p. 14). ACM.
- Robins, D., & Holmes, J. (2008). Aesthetics and credibility in web site design (pdf, 752k) (Links to an external site.). Information Processing and Management, 44(1), 386-399.
- Song, H., & Schwarz, N. (2008). If it's hard to read, it's hard to do: Processing fluency affects effort prediction and motivation. Psychological Science,19(10), 986-988.