Loading

The importance of design on effective learning A.G. Pate, Centre for Teaching and Learning, University of Alberta

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 some examples of readability.

Please keep quiet and take care of your children. No romping in potato.

This text is legible; we can read the words.

The text is not readable because we cannot easily decipher the meaning.

Toilet: one place one dream

Again, this text is legible but not readable.

The text in this example is unreadable (it's a bit fuzzy) and also a bit illegible, which is why it has been included below.

Meet a bossy taste

Many non local officials due to the local situation awareness is not deep. Or to the local history, local customs and practices such as no interest. The product is of no great importance in politics, indifferent. It is a temporary disguising.

Even though the legibility of the text has been improved by including it above, it's still quite unreadable.

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.

Texts taken from Davies, Robertson. Fifth Business. Toronto: Penguin Canada, 1970.

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.

Decorative Fonts

The third type of font is the decorative font. These are usually very difficult to read in a small font size. Decorative fonts are excellent for large texts such as titles and major headings on posters.

Best Practice Recommendations

Paper-based documents

  1. Use a sans serif font for titles, headings, etc.;
  2. Use a serif font for main text (paragraphs).

Online documents & presentations (Powerpoint, etc.)

  1. Use a serif font in bold or different colour for titles, headings, etc.;
  2. Use the same 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 or Keynote.

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.

Using only boumas, see if you can deduce the text below.

The middle word has been done for you.

Did you figure it out?

Keep scrolling down for the answer

Just a little farther down

Keep going

You're almost there

University of Alberta

All caps slows you down

The Worboys Committee was formed by the British government in July 1963 to review signage on all British roads, chaired by Sir Walter Worboys. The purpose was to improve signage across the UK.

Before 1963, the road signs were written in all capitals.

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.

Sometimes your brain deciphers boumas incorrectly because the shape of the word matches another word you are more familiar with.

In this example, we're going to look a road sign for a real place in Scotland.

Many people will read this road sign and another word will pop into their head.

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.

What can you do to text to make words stand out—to add emphasis to specific text?

Spend 20 seconds and see if you can identify at least 5 ways you can change a word to add emphasis.

The most common responses to this task are:

Bold

Italics

Text Size

Text Colour

Highlight

Draw a border around the text

Underline the text

So what's wrong with drawing a border or underlining text?

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.

One last thing…

Going through each of those powerpoint slides and reading this information is plausible.

How would you feel, though, if the slide below is what you were faced with?

Learning Outcomes

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;

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

Created By
A Graeme Pate
Appreciate

Credits:

Created with an image by Adi Goldstein - "Pointing As You"