MA Studio: Readability

Professor Andrew Twigg | Fall 2016

For our third project in MA Studio: Visual Communication Fundamentals, we were asked to choose a design principle and make a video no more than 3 or 4 minutes for it.

Using video, you will explain a design principle or method. You are encouraged to consider whether the idea needs a literal explanation or if you can communicate the idea purely through metaphor or analogy. You should consider the visual style, use of type, color, image, audio, and pacing as you create this project.

Final Video

Phase 1: Choose a Design Principle and Write Script Outline

I chose Readability as the topic for my assignment. Readability is an essential part of user experience design but its role is often neglected by new designers. The draft script includes 8 parts:

Script #1

Readability is the degree to which prose can be understood. It bases on the complexity of words and sentences.

Why is it important to designers? A common belief is that complex information requires complex presentation. But the fact is the more complex the information is, the simpler the presentation should be, so that the focus is on the information rather than the way it is presented.

Readability is different from legibility. Legibility is the visual clarity of text, deals with short text,scattered words,individual character, based on size, typeface, contrast, text blocks and spacing. While readability deals with blocks of type, and long prose. Good legibility generally enhance readability.

Readability also includes other factors, like words length, words commonality, sentence length, number of clauses, number of syllables. Let look at an example, the difference between a college level text and a 4th grade reading level text. They have same topic, each paragraph has 100 words, but different numbers of syllables, different numbers of sentences.

How to improve readability? You can omit needless words, avoid acronyms, jargon, sweep away untranslated quotations in foreign languages. Keep paragraph width and sentence length appropriate, try to use active voice, but consider using passive voice when the emphasis on the message rather messenger.

When attempting to produce text for a specific reading level, use published readability formulas and software application designed for this purpose. The readability rating is usually represented in the form of school levels ranging from 1st to 12th grade and college.

However, do not write for the formulas. Simple languages are preferred, but overly simple language obscure meaning.

When you consider about readability, always keep your target reader, context, media in your mind.

Now you understand Readability, a design principle can engage audience betters.

I drafted a rough storyboard to help me think about the visualization of the script.

Image for post
Image for post
Image for post
Image for post
Draft Storyboard

Phase 2: Flesh Out Script, Think about Visual Style

I got some feedback for my draft script:

Script #2:

Have you ever asked a question: will the readers understand what I’m trying to communicate? That is readability, the degree to which prose can be understood.

Why is it important to designers? A common belief is that complex information requires complex presentation. But the fact is, when the information becomes more complex, the presentation should be simpler, so that the focus is on the information rather than the way it is presented.

Readability is different from legibility. Legibility is the visual clarity of text, deals with short text, scattered words, and individual characters, based on size, typeface, contrast, and text spacing. While readability deals with blocks of type and long prose, based on the complexity of words and sentences. It includes factors like words length, sentence length, number of clauses, number of syllables, etc.

Let’s look at an example of readability. there is a college level text, and a 4th grade reading level text. They have the same topic, each paragraph has 100 words, but different syllable counts, different numbers of sentences. So they have appropriate readability for two groups of target readers.

How to improve readability? From the visual perspective, you can enhance legibility. From the textual view, you can omit needless words, avoid acronyms and jargon, keep sentence length and paragraph width appropriate. You should try to use active voice, but consider using passive voice when the emphasis is on the message.

When attempting to produce text for a specific reading level, you can use a readability formula, a mathematical equation which measures the difficulty experienced by people reading a given text, and the linguistic characteristics of that text. The readability rating is usually represented in the form of school levels ranging from 1st to 12th grade and college.

Simplifying your writing to reach all reading levels is not always the best strategy. For example, if you write for professionals who readily understand technical information, then you probably do not want to cut out familiar hard words or “industry jargon”, otherwise the text will be found flat and dull.

To achieve appropriate readability, always keep your target readers in mind, considering their reading skills, body conditions, reading environment, media, and so on.

Now you understand Readability, a design principle which can engage your audience in better reading.

Then I add more details of the storyboard and start to think about the visual style. I decided to adopt a clean, flat style so that the visual effects won’t distract audience from the content. The typography should be clean, a little bit cute, but not too playful. I chose Avenir.

Phase 3: Refine Storyboard and Draw High-Fidelity Storyboard

I wrote sentence by sentence for each key frame. For every scene, there is key information that need to be delivered effectively. I began to consider questions like these:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Refined storyboard

Then I moved to drawing High-Fidelity storyboard, the flat style:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Draft HF storyboard

Phase 4: Refine High-Fidelity Storyboard

In order to relieve the memory load of audiences, I changed human figures into little yellow jelly-shaped figures which has a simpler shape yet can highlight the differences well.

Image for post
Image for post
Image for post
Image for post
Little jelly-shaped figures

For the same purpose, I also removed some visual elements like button, scroll bar, dropdown menu etc.

The final HF Storyboard:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Refined HF storyboard

Phase 5: Revise Script and Storyboard

After listening the to voiceover, I decided to removed the part of “Readability Formula” which is a big concept and hard to explain well within several seconds. I also adjusted the speed and tone of the voiceover to match the music pace and visual style.

Script #3:

Have you ever asked a question: will the readers understand what I’m trying to communicate? That is readability, the degree to which prose can be understood.

Why is it important to designers? A common belief is that complex information requires complex presentation. But the fact is, when the information becomes more complex, the presentation should be simpler, so that the focus is on the information rather than the way it is presented.

Readability is different from legibility. Legibility is the visual clarity of text, deals with short text, scattered words, and individual characters, based on size, typeface, contrast, and text spacing. While readability deals with blocks of type and long prose, based on the complexity of words and sentences. It includes factors like words length, sentence length, number of clauses, number of syllables, etc.

Let’s look at an example of readability. there is a college level text, and a 4th grade reading level text. They have the same topic, each paragraph has 100

words, but different syllable counts, different numbers of sentences. So they have appropriate readability for two groups of target readers.

How to improve readability? From the visual perspective, you can enhance legibility. From the textual view, you can omit needless words, avoid acronyms and jargon, keep sentence length and paragraph width appropriate. You should try to use active voice, but consider using passive voice when the emphasis is on the message.

Simplifying your writing to reach all reading levels is not always the best strategy. For example, if you write for professionals who readily understand technical information, then you probably do not want to cut out familiar hard words or “industry jargon”, otherwise the text will be found flat and dull.

To achieve appropriate readability, always keep your target readers in mind, considering their reading skills, body conditions, reading environment, media, and so on.

Now you understand Readability, a design principle which can engage your audience in better reading.

Final video

Feedback and Room for revisions:

A common belief is that complex information requires complex presentation. But the fact is, when the information becomes more complex…

Written by

Designer+Illustrator · IxD@CMU · Translation@FDU 【dribbble.com/Minrui】

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store