1. © NSW Technical and Further Education Commission, TAFE NSW eLearning Hub, 2013 www.ehub.tafensw.edu.au 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 1.Plan with site maps and storyboards 2.People read differently online 3.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) Assessment Photos Groups 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) Assessment Photos Groups 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) Assessment Photos Groups 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 1.Use hierarchical headings to structure your page 2.Provide appropriate alternative (alt) text for images 3.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 http://ecommunities.tafensw.edu.au/mod/book/view.php?id=1729&chapterid=902

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

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

21. 3. Use the WAVE Toolbar to check accessibility (part 1) 1.Add the toolbar to the Firefox web browser 2.Select ‘Errors, Features and Alerts’ 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 icons http://wave.webaim.org/toolbar/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.ph p?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 1.Organise content with headings and short paragraphs 2.Keep sentences short and use plain English 3.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. 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 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

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: tim ellis

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

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

34. 3. Use a readability checker (part 1) Flesch Reading Ease (available in Word) 90 - 100Very easy 80 - 89 Easy 70 - 79Fairly easy 60 - 69Standard 50 - 59Fairly difficult 30 - 49Difficult 0 - 29Very 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. © NSW Technical and Further Education Commission, TAFE NSW eLearning Hub, 2013 www.ehub.tafensw.edu.au Nine things you really need to know to improve the design of your Moodle 1.Plan with site maps and storyboards 2.People read differently online 3.Apply the proximity principle 4.Use hierarchical headings to structure your page 5.Provide appropriate alternative (alt) text for images 6.Use the WAVE Toolbar to check accessibility 7.Organise content with headings and short paragraphs 8.Keep sentences short and use plain English 9.Use a readability checker