Learning Outcomes
When you have finished reading this document, you should be able to:
- justify the need to reflect on design when creating documents and presentations;
- list some basic design principles for (re)creating documents and presentations;
- evaluate and improve text-based materials based on basic design principles
Have you ever watched a toddler learning to walk?
It's easier to learn if there aren't any obstacles in the way. In this photo, the child won't have much difficulty.
What if the child tried to walk on this uneven path?
You can see there are a number of obstacles which could trip them up!
In an educational setting, we don't want obstacles in the way when our students are learning.
Readability & Legibility
Readability: How easily text can be understood
Legibility: How easily letter formation can be read.
If you are unable to understand the text, it’s unreadable. If you are unable to decipher the letters or read the words because of the way the letters are formed, it’s illegible.
Let's look at two examples of poor readability.
Even if the text is readable and legible, you should be aware of how you are setting out your letter formation.
Read each of the examples below out loud.
Which was the easiest to read? Which was the most difficult?
The fonts and spacing you choose can impact on how easy your text is to read.
The style of the font impacts how the meaning of the text is perceived.
Scroll down and see the same letter written using three different fonts.
The first two examples come across as less-serious than the last one. The font chosen can have an impact on your perception of the content.
It's also worth noting that the 2nd example uses a font called Comic Sans. For any professional work, you are strongly advised not to use it. This font's child-like demeanour (for lack of a better word) may trivialize the content.
Types of Fonts
There are two (arguably three) types of fonts. The first we’ll look at is the serif font.
Serif Fonts
Serif fonts have extra parts called serifs and the stroke—or line thickness—often varies.
These extra parts and varied stroke widths help your eye to flow from one letter and one word to another. This supports fluent reading and is ideal for longer texts such as paragraphs. It’s more readable for paper-based text.
Serif fonts are used in pretty much every textbook and every book you’ll see in a bookstore and library, except, perhaps, in the young children’s section.
Sans Serif Fonts
Sans-serif fonts don’t have these aesthetic additions. The letters tend to be of equal width and take slightly more time to read (milliseconds more, so not too much of a difference).
Sans-serif fonts are ideal for headings, sub-headings and short text.
However, differentiating between the lower-case L and the capital i can be challenging.
Ill-advised
Ill-advised
The larger text above is sans-serif but it has some subtle serifs on the letter L and at the base of the a and d. This makes some words (such as ILL) easier to read.
Best Practice Recommendations
Paper-based documents
- Use a sans serif font for titles, headings, etc.;
- Use a serif font for main text (paragraphs).
Online documents & presentations (Powerpoint, etc.)
- Use a sans serif font in bold or different colour for titles, headings, etc.;
- Use the same sans serif font for main text (paragraphs) but without bold.
Sans serif fonts are often crisper on a computer monitor than serif fonts because of their straight edges. This makes them easier to read.
As sans serif fonts look better on a computer monitor, it's best to only use these for presentations such as Powerpoint, Google Slides or Keynote.
The University of Alberta's recommended font is Roboto. It can be downloaded for free from Google at fonts.google.com.
CAPITALS
The outline of a word is called a bouma.
Every word typed completely in capitals (also known as uppercase or all caps) has the same bouma—a rectangle.
But if we were to trace this word in lowercase capital letters, we would find a distinct shape.
Our eyes use these boumas to help identify words.
By 1965, road signs were changing based on the Worboys report to look like this.
What do you notice about the fonts?
They're not in all caps. Why?
Drivers in the UK were slowing down on the new motorways (highways) at every junction in order to read the road signs. Worboys' research identified that by changing the place names on the signs to lower-case (except for the capital letter, of course), drivers were able to continue at speed (thus reducing accidents).
In case you’re not convinced that boumas impact on reading, let’s look at it from another perspective.
Why does this happen?
The boumas for these words are almost identical. (Scroll up and down to see for yourself). Your eyes are more accustomed to seeing the word bellybutton than the word tullybelton so it fills in the gaps (in this case, incorrectly).
This is the reason most countries have road signs in lowercase. If you're driving to, say, Calgary, you have an image in your mind of what the word 'Calgary' looks like. When you are scanning a complicated road sign, you are automatically drawn to a word with a bouma matching the word Calgary.
WHILE NOT IMPOSSIBLE TO READ, IT TAKES TWICE AS LONG TO READ LONG TEXT WHICH HAS BEEN WRITTEN USING ONLY CAPITAL LETTERS. IT TAKES LONGER TO PROCESS INFORMATION BEING READ IN ALL-CAPS. ALL-CAPS SLOWS DOWN THE SPEED OF READING BECAUSE YOU DO NOT HAVE THE BOUMAS TO HELP YOUR EYE AND BRAIN PROCESS INFORMATION. RESEARCH SHOWS THAT READERS ARE LESS LIKELY TO READ MORE THAN A COUPLE OF WORDS WRITTEN IN ALL-CAPS.
Gump, J. (2001). The readability of typefaces and the subsequent mood or emotion created in the reader. Journal of Education for Business, 76(5), 270-273.
The most common responses to this task are:
The Border
Your eyes need white space in order to cope with other elements on the page (or powerpoint slide).
Small boxes containing text create a cluttered look. Don't be afraid to have wide margins, empty space before and after the text. Spread out your text. The ideal is to have the same amount of space on all four sides of the text (although, to be fair, this isn't always possible—or practical).
If you re-creating a presentation (Powerpoint, etc.), reflect on whether you need that much text in the first place. Remember, presentations are aide memoirs so you probably don't need all that text on your slide.
Less is more.
Underlining
Most of us are used to underlining text in a document. However, it is not recommended as a way to emphasize text. There are two reasons.
One, nowadays, if text is underlined, there’s an assumption it’s a weblink. So underlining text which isn't a weblink just causes confusion. But the other reason has to do with how computers manage baselines (i.e., where the word “sits” on the line).
Think about when you were in elementary school. On the first day, you were probably given an exercise book like the one shown above. And on that first day, when you wrote the date, you took your time and used your best handwriting because you were determined to make this the best exercise book ever. Once you had written the date, you took your ruler and you very carefully lined up the ruler to the blue line (the baseline) and then you used your pencil to draw your underline. This line you drew made it look as if what you had written was sitting on the line.
By the second week of school, you'd probably given up on trying to make your exercise book the best ever and it had probably already descended into a bit of a mess. But I digress…
Computers don't underline the same we humans do. They put a little bit of space underneath the baseline (the blue line in your exercise book).
Avoid underlining
In the 21st Century, underlining = weblink.
Text Alignment
Text which is left-justified has a straight left edge and a ragged right edge. Your eye uses the ragged right edge as a visual clue in order to identify the next line of text. This makes it easier to read and less likely you’ll re-read the same line of text
Fully-justified text has a straight left edge and a straight right edge. While more pleasing to the eye as a whole, it is more difficult to read as the eye has less support in finding the next line.
Have you ever read the same line in a book more than once? Fully-justified text also creates wider gaps between words which makes it more difficult to read particularly if large words are used. Have you ever come across extraordinarily large gaps in the text of a newspaper? These are caused by the inclusion of exceptionally or extraordinarily long words.
Now it's your turn
When you scroll down you’re going to see a powerpoint slide which could use some improvement.
Use what you have learned to identify what you would do to remove the obstacles to learning.
Let's see what you can do to engage your learners rather than enrage them?
Stop scrolling now and think of what you could do to improve the powerpoint slide.
Let's improve this in stages.
We shall start by removing the colour which is distracting and makes it difficult to read the text.
Now let's remove the borders.
Now we can remove the all-caps and the underlines.
We'll now change the justification from fully-justified to left-justified. We can also adjust the spacing a little bit between the titles and paragraphs to give some much-needed space.
Let's use a different font and add a bit of colour into our titles.
This is much better.
However…
… this is a powerpoint slide. We don't need all that text.
We can now enlarge the text. It's now easier to read for all the students—particularly those at the back!—and is a much more effective aide memoire.
Students are more likely to remember these three main headings. They will find it easier to follow along with your presentation and won't be distracted by too much text.
While the slide above is much more effective than what we started with, we can still make it much more engaging!
Let's start by using the University of Alberta's recommended colour scheme. We can also enlarge the text a little bit so we use the space on the slide effectively.
It's much better than what we started with—but it's not particularly memorable.
Finally, let's emphasize the three main points by using a more visual approach.
Want to learn more or need an educational developer to help you integrate what you've learned into your own course?
Email ctl@ualberta.com or complete the consultation request form available at ctl.guide/consultationrequest
Credits:
Created with an image by Adi Goldstein - "Pointing As You"