Visual Design for Usability

 

 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, if you weren't paying attention, could you tell how many times the team in white passes the ball in this video?

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 

For example, mixing photographs with clip art with line drawings can confuse your students and distract from your content. 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?

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?

There is NO option to change the font in the Canvas 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 Canvas 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.. (In case you're curious, the default font in Canvas is Helvetica Neue which has also been the default font in iOS since iOS7.)

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?