Designing for Student Success
Effective learning through intentional formatting
Formatting pages well supports all learners. Learning is studied by everyone from cognitive scientists to marketing teams. While their goals and interests may vary widely, one commonality is the desire to make learning easier. These groups have developed their own approaches to learning, but they agree that two strategies have big benefits: developing schemas and grouping.
Schemas
Schemas allow learners to see patterns and organize categories of information. A schema is a representation of a plan or theory in the form of an outline or model. Schemas can be really powerful, as they allow us to understand new material by connecting it to old material that we already understand.
You may be scratching your head and wondering what an advanced learning theory has to do with creating a beautiful page. The answer is simple: to design the best pages, you must first ensure that you've thoughtfully divided the material in your learning unit into smaller "chunks" that make sense based on some sort of schema.
Before you start designing your page, evaluate the whole unit, and check to make sure the content is thoughtfully divided into pages. If you'd like to know more about the role of schema in learning, here's a great overview of learning theory from Crash Course Psychology. View the whole video (7 minutes), or jump directly to the information on schemas (at the 2:40 mark).
Grouping
Our ability to understand the underlying schema and to connect meaningfully to the existing schema is enhanced when information is thoughtfully grouped into chunks. Your units should be broken into chunks, with each chunk appearing on a separate page in the resource, and the information on each page should be grouped into smaller chunks.
Readability
Studies on readability predate computers. As we have shifted from consuming information in print formats, such as books and magazines, to using computers, however, more and more studies have focused on optimal design for web pages. Using sophisticated software to track the reader's eye movements, and surveys to test reading comprehension, these studies suggest at least four important design principles that we should keep in mind when designing our content pages:
- Use white space thoughtfully.
- Chunk information.
- Use headings.
- Use lists.
In order to see how these design features work, consider the following block of text. You don't have to read the whole block--we wouldn't want you to strain!--we just want you to read some of it, to consider the look of it, and to consider how this block of text makes you feel (based on how it looks): The next paragraph is a long block of dense text, if you're using a screen reader, you can use this link to skip the next paragraph.
Famous sayings. A stitch in time saves nine. All good things come to those who wait. Too many cooks spoils the broth. I have seen the future, and it works. The early bird catches the worm. A bird in the hand is worth two in the bush. Don't beat a dead horse. Don't blow out the candle from both ends. There's got to be a pony in there somewhere. A penny saved is a penny earned. Love is the wisdom of the fool and the folly of the wise. Don't cross your bridges before you come to them. Don't be penny-wise and pound-foolish. There are three kinds of lies: lies, damned lies and statistics . Home is where the heart is. Early to bed, early to rise makes a man healthy, wealthy and wise. It ain't over 'til the fat lady sings. No pain, no gain. An apple a day keeps the doctor away. You can't reason with drunks or morons. Cleanliness is next to godliness. Time flies when you're having fun. It is not best to swap horses while crossing the river. Time is money. While the cat is away the mice will play. Now is the time for all good men to come to the aid of their country. Every cloud has a silver lining. Don't put all your eggs in one basket. Make hay while the sun shines. Don't count your chickens before they hatch. Haste makes waste. If at first you don't succeed, try, try again. Big oaks from little acorns grow. The grass is always greener on the other side of the fence. It's not over 'til its over. It's a tough row to hoe. Better to have loved and lost than never to have loved at all. The love of money is the root of all evil. It takes what it takes. The shortest distance between two points is a straight tine. Don't cry over spilled milk. It never rains 'til it pours. How time flies when you're unconscious. Spare the rod and spoil the child. He who hesitates is lost. You only live once. No man is an island. Look before you leap. The bigger they are the harder they fall. The best things come in small packages. Time flies like an arrow, fruit flies love bananas. Drive for show, putt for dough. Strike while the iron is hot. Phony as a two dollar bill. Better to give than to receive. When in Rome, do as the Romans do. When the going gets tough, the tough get going. Let sleeping dogs lie. Never say never. You can tune a piano, but you can't tune a fish. Don't throw good money after bad. Careful what you wish for, you might get it. You can't judge a book by its cover. It takes two to tango. A cat has nine lives. Beauty is only skin deep. There is no such thing as a free lunch. Here today, gone tomorrow, first you're ahead, then you borrow. When in doubt, punt. Never put off ‘til tomorrow what you can do today. No news is good news. You get what you pay for. Laugh and the whole world laughs with you, cry and you cry alone. Beggars can't be choosers. Hell hath no fury like a woman scorned. Let sleeping dogs lie. The way the twig is bent, so grows the tree. It's not whether you win or lose but how you play the game. Every dog has its day. Don't look a gift horse in a the mouth. An idle mind is the devils workshop. An apple a day keeps the doctor away. You're only as old as you feel. Better late than never. A rolling stone gathers no moss. What goes up must come down. Three strikes and you're out. A watched pot never boils. Blood is thicker than water. Necessity makes strange bedfellows. Birds of a feather flock together. If it ain't broken, don’t fix it.
If you are sighted, this block of text may be very hard to read through, and even harder to understand. The long block of unremitting text lacks the structural features that would give our brains a moment to process the information. If you have a visual impairment, the long block of text has the same impact--no structures to help you make sense of the text, and no breaks to allow you to think. For most users, this block of text probably causes feelings of boredom or dread.
Is this how we want our students to feel? How can we provide them with the content they need, without the overload?
Formatting is one way to help readers process information. The sections below outline two important design concepts. We'll explain the technical aspects of each concept in later pages.
White space
The block of text in our example is dense enough to frustrate anyone who is trying to understand it. Design experts argue that white space — all of the area that is not covered in text or images, including the spaces between lines of text — helps readers navigate and process the information. There are three design elements, in particular, in this block of text that violate guidelines for using white space.
| Characteristic | Less Effective | More Effective |
|---|---|---|
| Paragraph length | The paragraph is too long. | Keep paragraphs short and concise. A paragraph need not consist of at least three sentences; rules you may have learned in elementary school may not be consistent with effective digital design. |
| Text justification | The text is "justified" on both the left and right margins. | Left-justify text. |
| Line Spacing | The space between the lines is too small. | Text spacing is at least 1.5. |
By default, most text editors prevent you from making two of these mistakes: justification and line spacing. So, the element you most need to address is the length of the paragraph.
The default text justification in most text editors is left-justified. This ensures that the left margin is a clean line straight down, and all new lines of text snap to the left margin. This is perfect for most content, as the English language is read left to right, so our eyes naturally gravitate to the left margin. The ragged right margin, though it does not look as tidy as the crisp margins you may see in a newspaper, actually helps the reader keep their place — the bumps and bulges serve as visual markers that differentiate one line of text from another.
In addition, the default setting for the space between lines in paragraph text most text editors are optimized for reading, leaving plenty of white space between lines so the text is not crowded, further enhancing readability.
Chunking
Cognitive scientists study how we process information. They have found that our short-term memory doesn't hold much information. Asking the reader to keep so much information in their short-term memory while they process the whole paragraph might actually decrease comprehension.
Chunking allows you to break the information up into more digestible pieces, which aids in comprehension, helps students skim the page more quickly and efficiently, and helps students who may be overwhelmed by large blocks of text. Moreover, chunking into smaller, shorter paragraphs creates more white space, and this space literally gives readers a break — a visual cue to stop and process, and a visual pause when skimming a page.
There's one other value to chunking that really benefits learners. As experts, we understand what "goes together." Grouping material into sets and subsets of information — chunking both visually and conceptually — helps students develop schemas for new information.
Designing for students with visual impairment
White space, chunking, headings, and lists provide visual cues for readers that help them process information, including skimming for specific information. There are two other important visual cues that can help students--images (including pictures, diagrams, graphs, and charts) and hyperlinks. Like white space, headings, and lists, images and hyperlinks provide rich visual cues to help your students navigate your content and process information. We'll return to these two features later in the unit, but we wanted to mention them now so we could reinforce that these are visual cues.
When fully sighted students experience your course, they see these differences in the text. Take a look at this image of a simple Google search response, for instance:
In just a quick glance, we can see that the website designers at Google are "chunking" the search results and using white space between the results to help readers quickly scan the information. There are other visual cues, as well, including using font size and color to denote a new result and a hyperlink. Sighted readers take these visual cues for granted — we don't consciously look for these cues, but rather quickly process them with little effort. Students with visual impairment, on the other hand, can't see these visual cues. Instead, when a web page is formatted correctly, they listen to the text.