© NSW Technical and Further Education Commission, TAFE NSW eLearning Hub, 2013 www.ehub.tafensw.edu.au

Barry Reeves & Darrah LongLearning designers

eCommunities & TAFE Connects

ecommunities.tafensw.edu.au

Agenda

Three things you need to know about layout

Three things you need to know about accessibility

Three things you need to know about writing for the web

A student’s blog post

http://gcd-anger.blogspot.com.au/2009/11/messy-moodle.html

Three things you need to know about layout

1. Plan with site maps and storyboards

2. People read differently online

3. Apply the proximity principle

1. Plan with site maps and storyboards (part 1)

Screen share…http://ecommunities.tafensw.edu.au

1. Plan with site maps and storyboards (part 2)

1. Plan with site maps and storyboards (part 3)

2. People read differently online (part 1)

F-shaped reading pattern

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

2. People read differently online (part 2)

Scan read• pick out key words and phrases• are guided by headings, links and bullet points

Are goal oriented• don’t browse for the sake of it• almost never read instructions or guides• action-oriented, looking for where to go next

http://useit.com

3. Apply the proximity principle (part 1)

Assessment

Photos

Groups

Visually group related elementsDon’t be afraid of white spaceCreate a visual hierarchyGrids help with proximityhttp://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design

Screen share…http://ecommunities.tafensw.edu.au

3. Apply the proximity principle (part 2)

Assessment

Photos

Groups

Visually group related elementsDon’t be afraid of white spaceCreate a visual hierarchyGrids help with proximityhttp://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design

Screen share…http://ecommunities.tafensw.edu.au

3. Apply the proximity principle (part 3)

Assessment

Photos

Groups

Visually group related elementsDon’t be afraid of white spaceCreate a visual hierarchyGrids help with proximityhttp://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design

Screen share…http://ecommunities.tafensw.edu.au

3. Apply the proximity principle (part 4)

Three things you need to know about accessibility

1. Use hierarchical headings to structure your page

2. Provide appropriate alternative (alt) text for images

3. Use the WAVE Toolbar to check accessibility

1. Use hierarchical headings to structure your page

Key way to make a resource more accessible: structure it well Use Moodle headings to structure your page for easier navigation:

• Use hierarchical headings in a logical order.– Content within your topic (section) should start with Heading 4– Content within a Moodle book chapter should start with Heading 2– Content within a Moodle HTML page should start with Heading 3

• Do not skip headings (eg, having a H4 followed by a H6)

• Do not use headings to create empty white space

Learn how: Moodle Top tips in UDL and accessibility: Top tips resource collection: http://ecommunities.tafensw.edu.au/mod/book/view.php?id=1729&chapterid=902

2. Provide appropriate alternative (alt) text for images (part 1)

1. Describe why the image is there and why it’s important

2. Identify purely decorative images

3. Format purely decorative images correctly

Flickr: opensourceway

2. Provide appropriate alternative (alt) text for images (part 2)

Describe why the image is there and why it’s importantHow to:• Select the Insert/Edit

Image icon in the toolbar • In the Image description field:

describe the point of the image – what it means in context on the page (why it’s there and why it’s important)

• Select Insert

Avoid using terms like 'graphic of', 'image of‘, ‘picture of’ when writing your alternative text.

2. Provide appropriate alternative (alt) text for images (part 3)

Identify purely decorative images

A purely decorative image• Is simply there to be visually

pleasing (eg ‘eye candy’) – like this photo of my kitten in a box

• Doesn’t add meaningful content to the surrounding text

• Repeats information already in the surrounding text

2. Provide appropriate alternative (alt) text for images (part 4)

Format purely decorative images correctlyHow to:• Select the Insert/Edit Image icon

in the toolbar • Add a space with the spacebar in

the Image description field.• Select Insert• This will create alt text that a

screen reader will ignore.

Why do this: A screen reader reads the alt text for each image. Hearing 'alt=icon, alt=icon, alt=lightbulb_orange_small.jpg' distracts from the important content on the page.

3. Use the WAVE Toolbar to check accessibility (part 1)

1. Add the toolbar to the Firefox web browser

2. Select ‘Errors, Features andAlerts’ to start the checker

3. WAVE uses icons on the page to highlight – Errors: red icons– Alerts: yellow icons– Accessibility features:

green icons– Structural and semantic

elements: blue iconshttp://wave.webaim.org/toolbar/)

3. Use the WAVE Toolbar to check accessibility (part 2)

Screen share…http://ecommunities.tafensw.edu.au/course/view.php?id=140

Take-away:Accessibility checklist

http://ecommunities.tafensw.edu.au/mod/book/view.php?id=1729

Three things you need to know about writing for the web

1. Organise content with headings and short paragraphs

2. Keep sentences short and use plain English

3. Use a readability checker

1. Organise content with headings and short paragraphs (part 1)

Before:

If you don’t yet have an account, you will need to register for one before you can create a portfolio (registration is free and also allows you to take advantage of our many other products and services.) Creating a financial portfolio is fast, easy and free. You can create and maintain as many portfolios as you like with a single account. There are several different ways to track your portfolio... (etc)

1. Organise content with headings and short paragraphs (part 2)

Before:

If you don’t yet have an account, you will need to register for one before you can create a portfolio (registration is free and also allows you to take advantage of our many other products and services.) Creating a financial portfolio is fast, easy and free. You can create and maintain as many portfolios as you like with a single account. There are several different ways to track your portfolio... (etc)

After:

Creating a portfolioCreating a financial portfolio is fast, easy and free. With a single account you can create and maintain as many portfolios as you like.

If you don’t have an account, you must register for one before you can create a portfolio. Registration is free and allows you to take advantage of our many other products and services.

There are several ways to track your portfolio... (etc)

Adapted from The Yahoo! Style Guide

After:

Creating a portfolioCreating a financial portfolio is fast, easy and free. With a single account you can create and maintain as many portfolios as you like.

If you don’t have an account, you must register for one before you can create a portfolio. Registration is free and allows you to take advantage of our many other products and services.

There are several ways to track your portfolio... (etc)

Adapted from The Yahoo! Style Guide

1. Organise content with headings and short paragraphs (part 3)

Before:

If you don’t yet have an account, you will need to register for one before you can create a portfolio (registration is free and also allows you to take advantage of our many other products and services.) Creating a financial portfolio is fast, easy and free. You can create and maintain as many portfolios as you like with a single account. There are several different ways to track your portfolio... (etc)

Heading gives a glimpse of the content The main idea is at the

start of the paragraph

2. Keep sentences short (part 1)

Strong and concise - one main point per sentence

Before:By replacing the broken widget, which was blue and did not meet the new standard, the operator fixed the gizmo.

Fickr: tim ellis

2. Keep sentences short (part 2)

Strong and concise - one main point per sentence

Before:By replacing the broken widget, which was blue and did not meet the new standard, the operator fixed the gizmo.

Fickr: tim ellis

After:The operator fixed the broken gizmo by replacing the blue widget. The widget did not meet the new standard.

2. Keep sentences short (part 1)

Cut the word count

by virtue of the fact that

conduct a search of

as of this moment

provide a description of

The Yahoo! Style Guide

Whiteboard activity…

Flickr: DieselDemon

2. Keep sentences short (part 2)

Cut the word count

by virtue of the fact that because

conduct a search of find

as of this moment now

provide a description of describe

The Yahoo! Style Guide

Whiteboard activity…

Flickr: DieselDemon

2. Keep sentences short (part 3)

Use active not passive voice

Active:The operator fixed the damaged gizmo.

Passive:The damaged gizmo was fixed by the operator.

2. Keep sentences short (part 4)

Use active not passive voice

Active:The operator fixed the damaged gizmo.

Passive:The damaged gizmo was fixed by the operator.

Remember, never speak to

Fluffy in the passive voice

again!

Subject

Verb

Object

3. Use a readability checker (part 1)

Flesch Reading Ease (available in Word)

90 - 100 Very easy 80 - 89 Easy 70 - 79 Fairly easy 60 - 69 Standard 50 - 59 Fairly difficult 30 - 49 Difficult 0 - 29 Very confusing

Readers Digest = 65Time magazine = 52

http://www.readabilityformulas.com/flesch-reading-ease-readability-formula.php

3. Use a readability checker (part 2)

Screen share Toolboxes…• Security• Chemical & oil refining• Correctional services• Aged care

© NSW Technical and Further Education Commission, TAFE NSW eLearning Hub, 2013 www.ehub.tafensw.edu.au

1. Plan with site maps and storyboards2. People read differently online3. Apply the proximity principle4. Use hierarchical headings to structure your page5. Provide appropriate alternative (alt) text for images6. Use the WAVE Toolbar to check accessibility7. Organise content with headings

and short paragraphs8. Keep sentences short and use plain English9. Use a readability checker