how to make things easy to read (and understand)

How to make things

Easy to Read(and understand)

Presenters

Kimberly Vlies

Web/Graphic Designervliesk@uwgb.edu

Leif Nelson

Instructional Designer/Technologistnelsonl@uwgb.edu

Presented by the Academic Staff Professional Development Programming Committee

Fonts

• Use Serifs for printed documents – (e.g., Times New Roman)

• Use sans-serifs for web pages – (e.g., arial)

• Don’t mix too many fonts, sizes, and colors within the same document.

Making things stand out

• Bold Text• Italic• Underline• ALL CAPS

•Outlines

Making things stand out

DON’T TRY TO MAKE EVERYTHING STAND OUT OR NOTHING WILL.

Don’t try to make everything stand out or nothing will.

ABOUT USING ALL CAPS

For PowerPoint:use the "seven by seven" rule

Your slides should have no more than seven lines of text with each line having no more than seven words. This keeps your word slides visually clean and appealing. More importantly, it keeps the audience's attention focused on YOU, not on the slide. If there is a novel up there on the screen, people will be reading it, rather than listening to you. The words on your slides should be talking points only. If you find yourself writing lengthy word slides, move the text down to speaker's notes, and just boil the slides down to the essential points.

Source: http://groundwire.org/resources/articles/powerpoint-best-practices

Think Like Your Audience

• Is the language clear?• Are you over-using the passive voice?

– The TPS report was filed by Peter (passive)– Peter filed the TPS report (active)

• Check grammar and spelling– Don’t always rely on spell check– re-read yourself or have someone proofread

Psychology of Design

The pleasure of your company is most sincerely requested for the honorable celebration of the Anniversary of Hank’s birth year. This illustrious event will be held at Kroll’s East.

Psychology of DesignHey, Guess What? . . .

YOU STILL HAVE A JOB!

How People Scan Web Pages

Source: http://www.useit.com/alertbox/reading_pattern.html

F’F’ F ’

Alignment

F

“I am by birth a Genevese, and my family is one of the

most distinguished of that republic. My ancestors had

been for many years counsellors and syndics, and my

father had filled several public situations with honour

and reputation. He was respected by all who knew

him for his integrity and indefatigable attention to

public business. He passed his younger days

perpetually occupied by the affairs of his country; a

variety of circumstances had prevented his marrying

early, nor was it until the decline of life that he

became a husband and the father of a family.”

Excerpt from Frankenstein: The Modern Prometheus by Mary Shelly

Avoid Centered Text

“I am by birth a Genevese, and my family is one of

the most distinguished of that republic. My

ancestors had been for many years counsellors and

syndics, and my father had filled several public

situations with honour and reputation. He was

respected by all who knew him for his integrity and

indefatigable attention to public business. He

passed his younger days perpetually occupied by

the affairs of his country; a variety of circumstances

had prevented his marrying early, nor was it until

the decline of life that he became a husband and

the father of a family.”

Excerpt from Frankenstein: The Modern Prometheus

by Mary Shelly

Don’t Center Bullet Points!

• Labrador retriever• German shepherd• Yorkshire terrier

• Beagle• Golden retriever

• Bulldog• Boxer

• Dachshund• Poodle• Shih Tzu

• Labrador retriever• German shepherd• Yorkshire terrier• Beagle• Golden retriever• Bulldog• Boxer• Dachshund• Poodle• Shih Tzu

And for Pete’s sake,

Pay attention to line length

A good rule of thumb is to use thirty-nine characters, an alphabet and a half, in a single line.

Abcdefghijklmnopqrstuvwxyzabcdefghijklm

Lines of text that are too long can impede tracking. In long segments of text in it can cause the eye to accidentally skip lines or jump back and re-read the same line of text twice, without even intending to. Can you imagine how difficult it might be to read something like this if you have a learning disability or you’re not a strong reader to begin with?

Lines of text that are too short are difficult to read. There’s just to many line breaks and the constant need to zig-zag can cause eye strain and fragmented understanding of the text.

Too Short

Too Long

Columns help

When columns aren’t possible

Abcdefghijklmnopqrstuvwxyzabcdefghijklm

If you absolutely must make your lines longer than thirty-nine

characters, try increasing the line spacing. It will make it easier for

the eye to focus on the single line of text and not get lost when

dropping down to the next line

Compensate

with line

spacing

Contrast

Is this easy to read?

Is this easy to read?

Is this easy to read?

Reversed Text Avoid large amounts of

“I am by birth a Genevese, and my family is one of the most

distinguished of that republic. My ancestors had been for many years

counsellors and syndics, and my father had filled several public

situations with honour and reputation. He was respected by all who

knew him for his integrity and indefatigable attention to public

business. He passed his younger days perpetually occupied by the

affairs of his country; a variety of circumstances had prevented his

marrying early, nor was it until the decline of life that he became a

husband and the father of a family.”

Excerpt from Frankenstein: The Modern Prometheus by Mary Shelly

Light text on a dark background not only uses up toner, it’s difficult to read.

“I am by birth a Genevese, and my family is one of the most

distinguished of that republic. My ancestors had been for many years

counsellors and syndics, and my father had filled several public

situations with honour and reputation. He was respected by all who

knew him for his integrity and indefatigable attention to public

business. He passed his younger days perpetually occupied by the

affairs of his country; a variety of circumstances had prevented his

marrying early, nor was it until the decline of life that he became a

husband and the father of a family.”

Excerpt from Frankenstein: The Modern Prometheus by Mary Shelly

Dark text on a light background not only uses less toner, it’s easier to read.

“I am by birth a Genevese, and my family is one of the most

distinguished of that republic. My ancestors had been for many years

counsellors and syndics, and my father had filled several public

situations with honour and reputation. He was respected by all who

knew him for his integrity and indefatigable attention to public

business. He passed his younger days perpetually occupied by the

affairs of his country; a variety of circumstances had prevented his

marrying early, nor was it until the decline of life that he became a

husband and the father of a family.”

Excerpt from Frankenstein: The Modern Prometheus by Mary Shelly

“I am by birth a Genevese, and my family is one of the most

distinguished of that republic. My ancestors had been for many years

counsellors and syndics, and my father had filled several public

situations with honour and reputation. He was respected by all who

knew him for his integrity and indefatigable attention to public

business. He passed his younger days perpetually occupied by the

affairs of his country; a variety of circumstances had prevented his

marrying early, nor was it until the decline of life that he became a

husband and the father of a family.”

Excerpt from Frankenstein: The Modern Prometheus by Mary Shelly

Don’t use faded background images

Clear graphics

Source: http://headrush.typepad.com/creating_passionate_users/2006/06/do_your_graphic.html

Sometimes line art is more effective at conveying a concept than detailed images or photographs

When to Use . . .

Where to Find Graphics

• http://www.flickr.com/creativecommons• Best to avoid Copyrighted material

Use tables and graphics for quick understanding

All grading will be done on a “0 - 100%” scale which translates into the following letter grades. A is 92% and higher, AB is 89 to 91%, B is 82 to 88%, BC is 79 to 81%, C is 72 to 78%, CD is 69-71%, D is 59-68% and F is less than 59%.

Letter Grade PercentageA 92% +

AB 89 - 91%B 82 - 88%

BC 79 - 81%C 72 - 78%

CD 69 - 71%D 59 - 68%F Below 59%

All grading will be done on a “0 - 100%” scale which translates into the following letter grades:

Don’t scale images disproportionately

Hold down your shift key while scaling to preserve height to width ratio.

Questions?