1 / 36

Nine things you really need to know to improve the design of your Moodle

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

dahlia
Download Presentation

Nine things you really need to know to improve the design of your Moodle

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Nine things you really need to know to improve the design of your Moodle Barry Reeves & Darrah Long Learning designers

  2. eCommunities & TAFE Connects ecommunities.tafensw.edu.au

  3. 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

  4. A student’s blog post http://gcd-anger.blogspot.com.au/2009/11/messy-moodle.html

  5. Three things you need to know about layout • Plan with site maps and storyboards • People read differently online • Apply the proximity principle

  6. 1. Plan with site maps and storyboards (part 1) Screen share… http://ecommunities.tafensw.edu.au

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

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

  9. 2. People read differently online (part 1) F-shaped reading pattern http://www.useit.com/alertbox/reading_pattern.html

  10. 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

  11. 3. Apply the proximity principle (part 1) Visually group related elements Don’t be afraid of white space Create a visual hierarchy Grids help with proximity http://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design Screen share… http://ecommunities.tafensw.edu.au

  12. 3. Apply the proximity principle (part 2) Visually group related elements Don’t be afraid of white space Create a visual hierarchy Grids help with proximity http://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design Screen share… http://ecommunities.tafensw.edu.au

  13. 3. Apply the proximity principle (part 3) Visually group related elements Don’t be afraid of white space Create a visual hierarchy Grids help with proximity http://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design Screen share… http://ecommunities.tafensw.edu.au

  14. 3. Apply the proximity principle (part 4)

  15. Three things you need to know about accessibility • Use hierarchical headings to structure your page • Provide appropriate alternative (alt) text for images • Use the WAVE Toolbar to check accessibility

  16. 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

  17. 2. Provide appropriate alternative (alt) text for images (part 1) • Describe why the image is there and why it’s important • Identify purely decorative images • Format purely decorative images correctly Flickr: opensourceway

  18. 2. Provide appropriate alternative (alt) text for images (part 2) Describe why the image is there and why it’s important How 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.

  19. 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

  20. 2. Provide appropriate alternative (alt) text for images (part 4) Format purely decorative images correctly How to: • Select the Insert/Edit Image icon in the toolbar • Add a space with the spacebar in the Imagedescription 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.

  21. 3. Use the WAVE Toolbar to check accessibility (part 1) • Add the toolbar to the Firefox web browser • Select ‘Errors, Features andAlerts’ to start the checker • WAVE uses icons on the page to highlight • Errors: red icons • Alerts: yellow icons • Accessibilityfeatures: green icons • Structuralandsemanticelements: blue icons http://wave.webaim.org/toolbar/)

  22. 3. Use the WAVE Toolbar to check accessibility (part 2) Screen share… http://ecommunities.tafensw.edu.au/course/view.php?id=140

  23. Take-away:Accessibility checklist http://ecommunities.tafensw.edu.au/mod/book/view.php?id=1729

  24. Three things you need to know about writing for the web • Organise content with headings and short paragraphs • Keep sentences short and use plain English • Use a readability checker

  25. 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)

  26. 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 portfolio Creating 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

  27. 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 After: Creating a portfolio Creating 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 The main idea is at the start of the paragraph

  28. 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: timellis

  29. 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. After: The operator fixed the broken gizmo by replacing the blue widget. The widget did not meet the new standard. Fickr: timellis

  30. 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

  31. 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

  32. 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.

  33. 2. Keep sentences short (part 4) Verb Subject 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! Object

  34. 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 = 65 Time magazine = 52 http://www.readabilityformulas.com/flesch-reading-ease-readability-formula.php

  35. 3. Use a readability checker (part 2) Screen share Toolboxes… • Security • Chemical & oil refining • Correctional services • Aged care

  36. Nine things you really need to know to improve the design of your Moodle • Plan with site maps and storyboards • People read differently online • Apply the proximity principle • Use hierarchical headings to structure your page • Provide appropriate alternative (alt) text for images • Use the WAVE Toolbar to check accessibility • Organise content with headings and short paragraphs • Keep sentences short and use plain English • Use a readability checker

More Related