Universal Design for Learning & Principles of Web Design C. Candace Chou

UDL How we gather facts and categorize what we see, hear, and read. Identifying letters, words, or an author's style are recognition tasks. Planning and performing tasks. How we organize and express our ideas. Writing an essay or solving a math problem are strategic tasks. How learners get engaged and stay motivated. How they are challenged, excited, or interested. These are affective dimensions.

Principle I: Provide Multiple Means of Representation 1. Provide options for perception 2. Provide options for language, mathematical expressions, and symbols 3. Provide options for comprehension

Principle II. Provide Multiple Means of Action and Expression 4. Provide options for physical action 5. Provide options for expression and communication 6. Provide options for executive functions

Principle III. Provide Multiple Means of Engagement 7. Provide options for recruiting interest 8. Provide options for sustaining effort and persistence 9. Provide options for self- regulation

Learn More About UDL

Basics of Web Design Simplicity and consistency Standard HTML Content and navigation Organization Typography Web-safe Color Accessibility

Essential Information An informative title The creator’s identity (author or institution) A creation or revision date At least one link to a local home page The “home page” URL on the major menu pages in your site Source: Lynch, P & Horton, S (1999), Web Style Guide. Yale University Press.

Document Design

Selective Display

Rule of Thumb Use careful layouts of text and links with relatively small graphics Web page graphic should not be more than 535 pixels wide or more than about 320 pixels high (within letter size paper) Browser safe area: 600 x 350

Visual Design - Consistency

Contrast

White Space

Leave 20% white space. Use shorter paragraphs Avoid heavy lines. ( example) example)Layout

Researchers have noted the disorientation that results from scrolling on computer screens

Optical Center The viewer will tend to focus at the screen’s optical center, located slightly above the center of the screen. Tend to locate objects at this optical center

CENTER OF INTEREST Focal point

CENTER OF INTEREST Focal point

CENTER OF INTEREST NOT Focal point NOT

Rule of Thirds Divide the screen into thirds horizontally and vertically Place focus of interests on the four intersections

Rule of Thirds Upper right position See full shadow and tracks

Fonts T T Serif fonts have thin lines and feet. Sans-serif fonts have even lines and NO feet.

Fonts T T Serif fonts are easier to read in print media. Sans-serif fonts are more legible in projected media.

Fonts Helvetica Geneva Arial Sans-Serif Times Palitino Courier Serif

Readability of Fonts This is a serif font (Times) –Can you read this easily? Do the letters all run together? Would you like to see an entire screen full of this? This is Times 18-points This is a sans-serif font (Arial) –Which is easier to read, this text block or the block above? In general, sans-serif fonts look better on computer monitors. This is Arial 18-point.

Legi bility Use sans-serif for headers. Use sans-serif for projected visuals. Use at 18 points for projected visuals. Change preferences in web browsers.

Use serif font for lots of printed text. Use 12 points for adult learners. Use 14 for children & special needs. Readability

Use ragged right justification. Avoid centering. Avoid full justification. Avoid italic fonts, look awful in small fonts Readability

DON’T USE ALL CAPS FOR LARGE BLOCKS OF TYPE. READERS READ FASTEST WHEN SENTENCES ARE PRINTED IN UPPER AND LOWER CASE - THE WAY THEY NORMALLY ARE SEEN IN PRINT. HEADLINES ARE SET IN ALL CAPS BECAUSE THEY REQUIRE THE READER TO SLOW DOWN, GIVING EMPHASIS TO A FEW WORDS. WASN’T THIS BLOCK OF ALL CAPS DIFFICULT TO READ?

Don’t use all caps for large blocks of type. Readers read fastest when sentences are printed in upper and lower case - the way they normally are seen in print. Headlines are set in all caps because they require the reader to slow down, giving emphasis to a few words. Wasn’t this better? Compare

Single Concept

Color Use color to enhance your presentation. Avoid more than 5 colors on one slideAvoid more than 5 colors on one slide

cessible-print-design/effective-color-contrast Choose dark colors with hues from the bottom half of this hue circle against light colors from the top half of the circle.

Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.

Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.

BEST LEGIBILITY for text black text on a white background dark green text on a white background dark blue text on a white background brown text on a white background. green text on red background red text on green background green text on blue background WORST LEGIBILITY for text

BEST VISIBILITY to attract attention but not for large blocks of text text black on orange red on white dark blue on yellow white text on purple Source:

Background WhiteorYellowWhiteorYellow Red or Black Red or Black

Trial Run Check out your visuals in your presentation room. Make sure that everyone can read! Never be caught having to APOLOGIZE!

Web Resources Web Style Guide, 3 rd edtion, Style Guide, 3 rd edtion, Web page design for designers, Universal design for learning, design for learning,