nine things you really need to know to improve the design of your moodle
DESCRIPTION
Nine things you really need to know to improve the design of your Moodle. Barry Reeves & Darrah Long Learning 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 - PowerPoint PPT PresentationTRANSCRIPT
© NSW Technical and Further Education Commission, TAFE NSW eLearning Hub, 2013 www.ehub.tafensw.edu.au
Barry Reeves & Darrah LongLearning designers
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