TEN CONTENT COMMANDMENTS BEST PRACTICES FOR USABLE, ACCESSIBLE CONTENT

Transcription

1

2 TEN CONTENT COMMANDMENTS BEST PRACTICES FOR USABLE, ACCESSIBLE CONTENT Leonard Houx Centre for Technology-Enhanced Learning

3 About Leonard I am an E-Learning Content Developer at the Centre for Technology-Enhanced Learning (CTEL). Previously, I was at the Chartered Institute of Personnel and Development (CIPD), where I worked with accessibility and usability experts and became passionate about it.

4 About these rules These rules are not going to resolve all of your problems. But they will help to make your content more: readable engaging consistent accessible seamless

5 Commandment One Images

6 1. Images What s wrong with this image? The woman looks like someone who could be at King s. She s looking at a computer (which is what we do, mostly). Plus, it makes good use of the screen real estate. So what s the problem?

7 1. Images The problem is twofold: 1. She not a real person and 2. This picture doesn t really communicate anything

8 1. Images Using eyetracking, usability experts such as Jakob Nielsen have found that users do not look at stock photographs. This picture above is an example of how a user looked everywhere on this page besides at the filler image on the right.

9 1. Images So our first commandment is:

10 Display 1. Images So our first commandment is: for a reason

11 1. Images If you don t have any images that communicate anything, consider not displaying any image at all.

12 1. Images But if you do want to share something, share something:

13 Informative

14 1. Images: display for a reason

15 Dramatic

16 1. Images: display for a reason

17 Funny

18 1. Images: display for a reason

19 But, most of all

20 Real

21 Real As in: real people in your course especially teachers especially their faces

22 1. Images: display for a reason Although small, the picture above humanizes this message and adds interest. So encourage academics to upload their profile pictures.

23 Commandment Two Links

24 2. Links Although small, the picture above humanizes this message and adds interest. So, when you work with tutors, encourage them to upload their profile pictures.

25 2. Links Commandment number two is about links. What is wrong with this link?

26 2. Links Answer: the problem with this link is it gives the user no idea what they are getting.

27 2. Links So our second commandment is:

28 Link to 2. Links So our second commandment is: the noun

29 2. Links: link to the noun Here, we simply gave the title of the essay. We also added a description.

30 2. Links: link to the noun Using concrete nouns for your link text is also critical for accessibility. Many disabled users who use screen readers or tabbing may get the link out of context as they may scan the content by jumping from link to link.

31 Commandment Three Course section headings

32 3. Course section headings Let s start with section headings. What s wrong with these headings?

33 3. Course section headings Answer: 1. It uses a header which is h1, which is way out of place. 2. It s got this generic header above it that says general. 3. But the root problem is it does not use section names.

34 3. Course section headings So our second commandment is:

35 3. Course section headings So our second commandment is: Use the section names

36 3. Course section headings Just put the header in the section name.

37 3. Course section headings And voilà.

38 3. Course section headings Section names appear in your course navigation blocks make your course more consistent. need less work

39 Commandment Four HTML

40 4. HTML What s wrong with this bit of stylized text?

41 4. HTML Answer: among other things, it uses inline styles.

42 4. HTML The <span> tag in this code contains inline styles.

43 4. HTML So our fourth commandment is:

44 Keep your 4. HTML So our fourth commandment is: HTML clean

45 4. HTML: Keep it clean This is an example of the same content with nice, clean HTML.

46 4. HTML: Keep it clean In Moodle, your HTML should look very simple.

47 4. HTML: Keep it clean Clean HTML makes pages 1. Simpler to maintain 2. Easier for browsers to load 3. More accessible 4. Consistent with other courses

48 Commandment Five Alignment

49 5. Alignment Number five. Alignment. What s wrong with this picture?

50 5. Alignment Answer: it s centred. Centre alignment stops the eye from having any consistent line to return to. Using alignment is one of the most important ways to create visual order, and it greatly enhances readability.

51 5. Alignment So our fifth commandment is:

52 Align left 5. Alignment So our fifth commandment is:

53 5. Align left Like this.

54 5. Align left Left alignment is one of our best tools for visual organisation, because it is the most gentle: you don t always need noisy elements like underlining or coloured background. You just line things up and the eye knows where to go.

55 Commandment Six Sub-headers

56 6. Subheaders Number six. Sub-headers. What s wrong with the sub header here?

57 6. Subheaders Answer: it doesn t get to the point. Eyetracking has shown two things about headers. 1. people scan headers. 2. they tend to scan just the first two words.

58 6. Course section headings So our sixth commandment is:

59 6. Course section headings So our sixth commandment is: Frontload your subheaders

60 6. Subheaders To front-load the meaning in our headers there are two good tactics we can use: 1. Use gerunds

61 6. Subheaders To front-load the meaning in our headers there are two good tactics we can use: 1. Use gerunds 2. Use imperatives

62 Commandment Seven Section order

63 7. Section order The seventh commandment is about section order. Here we have some sections from a course shown in collapsed topics. Looks pretty good to me. What could be wrong with it?

64 7. Section order Answer: it doesn t maintain one consistent scheme. It s like we were going through a list that said: apples oranges plums naval attack cruiser.

65 7. Section order Commandment seven is: Commit to one scheme

66 7. Section order Keeping one scheme is the most effective way, to make material in your course material findable for students.

67 7. Section order With consistent scheme like this, you look at it and you know exactly what s going on. It s simple and it s good.

68 Commandment Eight Online content

69 8. Online content This is a section from a KEATS course that I made up. What s wrong with it?

70 8. Online content Answer: the problem is this section is a big PDF dump. Much of this material can go online.

71 8. Online content What are PDFs good for? Two things: 1. Offline reading. 2. Reading where you cannot provide the level formatting required online (for example, footnotes). PDFs really should never be used as webpages.

72 8. Online content PDFs 1. require a pdf reader. 2. don t follow KEATS theme 3. don t have KEATS navigation 4. Usually not written for online reading. 5. Encourage the user to leave KEATS.

73 8. Course section headings Rule eight:

74 8. Course section headings Rule eight: Convert to HTML

75 8. Online content HTML makes your content more accessible flexible future-proof

76 Commandment Nine Text formatting

77 9. Text formatting I took this paragaph from the wikipedia entry on the english langauge (and took all of the links out). What wrong with it?

78 9. Text formatting The main problem is its online readability: that is, it s a big wall of text. The problem is users don t read on the web. They scan. So you need to deploy strategies to make the text more scannable.

79 9. Text formatting Rule nine:

80 9. Text formatting Rule nine: Break up walls of text

81 9. Text formatting To break up this wall of text, I did four things. I 1) gave it a header 2)broke up paragraphs 3)broke comma-separated lists into bullet points 4)used bold for key points

82 Commandment Ten Text length

83 10. Text length What s wrong with this text? It s grammatical. It explains the course. What s the problem?

84 10. Text length The answer: it s too long for online reading. For an online reading, it doesn t get to the point quickly enough. Here -- not counting the bolded title -- we have a 43- word sentence.

85 10. Text length The final commandment:

86 10. Text length The final commandment: Cut your text in half

87 10. Text Steve Krug in Don t make me think says cut it in half, then, when you are done cut in half again I think we can start with just cutting it in half.

88 10. Text We can reduce text by: changing verb phrases to single word verbs Removing fluffy language Removing points that should be self-explanatory

89 10. Text So here, in the end, we have gone from 43 words to 19. So slightly less than half.

90 10. Text I realise in most cases, many of us won t be able to tell academics how to write. But we can try to educate them about the difference between online and offline reading behaviour. We can appeal, also, to their sense of rigour.

91 The Ten Content Commandments 1. Display images for a reason. 2. Make the link a noun. 3. Use section names. 4. Keep your HTML clean. 5. Align left 6. Sub-head sections with gerunds and imperatives. 7. Keep lists in one scheme. 8. Use HTML for online content. 9. Break up your wall of text. 10. Cut your text in half.

92 RECOMMENDED READING

93 QUESTIONS? LEONARD HOUX E-LEARNING CONTENT DEVELOPER ROOM 3.12 FRANKLIN-WILKINS BUILDING, WATERLOO BRIDGE WING