1. Creating online learning resources Martin Bazley Arts University College, Bournemouth 21 Jan 2011

2. Martin Bazley Previously Teaching (7 yrs) Science Museum, London, Internet Projects (7yrs) E-Learning Officer, MLA South East (3yrs) Currently Vice Chair, DLNet (was E-Learning Group for Museums, Lib, Archives) Consultancy, websites, training, user testing, evaluation … Martin Bazley & Associates www.martinbazley.com www.martinbazley.com Slides and notes available online

4. www.martinbazley.com

5. For most people the web is a predominantly visual medium

6. We are all different and some people like to read all the text on a web page before deciding what to do next, even though a lot of it might be pretty redundant but most people – or at least most regular users of the web – rather than reading through them in detail just scan the web pages they are using, or at least the ones where they are still trying to work out where to go next

8. Users won't read your text thoroughly word-by-word. Exhaustive reading is rare, especially when browsing. Yes, some people will read more, but most won't.

9. The first two paragraphs must state the most important information. There's some hope that users will actually read this material – though they'll probably read more of the first paragraph than the second.

10. Start subheadings, paragraphs, and bullet points with information- carrying words that users will notice when scanning down the left side of your content in the final stem of their F- behaviour. They'll read the third word on a line much less often than the first two words.

11. If they have to work at it for example if they cannot see what they are looking for, or if it doesnt make sense to them at first glance then most people – or at least many people who do a lot of searching or browsing on the web just decide that this particular site is not for them, and anyway they have a long list of other search results or ideas to try and so they go elsewhere

12. About website structure, ways people use the web and implications for writing for the web

13. Certain types of websites impose linear user journeys: TheTrainline.com Cinema ticket bookings Self assessment tax return online

15. In most websites, although there are some linear elements …

17. … people like to have other pathways available to them…

18. … and most journeys are very non-linear

19. Also, most people reach your website via Google Only 20% arrive at your website on the home page

20. Most may not have had your site in mind when searching

21. 30% of them go to home page to try and work out what this site is about

22. So each page on the site must quickly: (a)engage users and (b)give sense of what site is about – otherwise most will leave

23. Writing for the web is not just about text…

24. … but also choosing the right images … layouts … graphical look and feel …website structure etc

25. Key point of paragraph/ section Image clearly related to text Broken into short paras

26. Short video guides http://www.youtube.com/watch?v=AoU2yANNx Rs&eurl=http://inside.123- reg.co.uk/archives/video-writing-your-web-copyhttp://www.youtube.com/watch?v=AoU2yANNx Rs&eurl=http://inside.123- reg.co.uk/archives/video-writing-your-web-copy Writing web headlines http://www.youtube.com/watch?v=zBg7dJIfHM0 http://www.youtube.com/watch?v=zBg7dJIfHM0

27. Home page: key functions Offer overview: –Show user what the site can do for them –Show user what is in the site: The structure at a glance Content highlights or samples Engagement: – make user want to continue browsing –www.manchestergalleries.org/www.manchestergalleries.org/

28. Article page: key functions Engage the user – make them want to consume the article Signposting: –Show user what else is nearby in the site The structure at a glance –Show user what else the site offers them –www.mylearning.org/overview.asp?journeyid=73www.mylearning.org/overview.asp?journeyid=73 –www.manchestergalleries.org/www.manchestergalleries.org/

29. Short writing exercises

31. Home page: key functions Offer overview: –Show user what the site can do for them –Show user what is in the site: The structure at a glance Content highlights or samples Engagement: – make user want to continue browsing

32. Article page: key functions Engage the user – make them want to consume the article Signposting: –Show user what else is nearby in the site The structure at a glance –Show user what else the site offers them –www.mylearning.org/overview.asp?journeyid=73www.mylearning.org/overview.asp?journeyid=73 –www.manchestergalleries.org/www.manchestergalleries.org/

33. Task: create some online content

34. Decide where in the site this will be Add a title Short, clear summary Write a few sentences. Add subheading Few more sentences Banner This is an ARTICLE page

35. Title Add a summary? Each promo needs Title Image? One-line descn Links to related points elsewhere in this site Where in the site is this? This is a SECTION page - one of these links goes to the article page

36. Interactive whiteboards

37. Using whiteboards http://www.teachers.tv/ict/whiteboardtips http://smarttech.com/trainingcenter/tutori als.asp#http://smarttech.com/trainingcenter/tutori als.asp# http://www.prometheanplanet.com

38. Roles of IWB … at different points in the lesson / learning cycle –Starter –Main –Plenary

39. Interactive means lots of things moving on screen, clickable, automatic response, quizzes etc interaction between students, teacher and screen – activities, conversation, cognitive engagement, etc first meaning used mainly by companies trying to market whiteboards, software etc as interactive second used mainly by educators

40. Resources – examples HE /other www.exploringsurreyspast.org.uk/ http://jameelcentre.ashmolean.org/ www.nationalarchives.gov.uk/cabinetpapers www.manchestergalleries.org/ford-madox- brown/www.manchestergalleries.org/ford-madox- brown/ www.seayourhistory.org.uk/content/view/20/35/ www.nationalarchives.gov.uk/latinpalaeography/ www.preraphaelites.org/

41. Resources - examples Bedford Bytes Britons at War Tate Tools Museum Network ArtworksMuseum Network National Portrait Gallery Mary Seacole National Gallery Museum of London Fire of London

42. Resources for use on whiteboards - examples Wartime in Bedford http://www.movinghere.org.uk/schools/de fault.htmhttp://www.movinghere.org.uk/schools/de fault.htm www.mylearning.org/overview.asp?journe yid=409 (Passion for Fashion)www.mylearning.org/overview.asp?journe yid=409 http://www.mylearning.org/overview.asp? journeyid=318 (Ruskin)http://www.mylearning.org/overview.asp? journeyid=318 Ford Madox Brown MAG

43. Some examples –http://www.nhm.ac.uk/nature-online/british- natural-history/index.htmlhttp://www.nhm.ac.uk/nature-online/british- natural-history/index.html –http://www.manchestergalleries.org/the- collections/highlights-of-the- collection/narrativeobject.php?irn=876http://www.manchestergalleries.org/the- collections/highlights-of-the- collection/narrativeobject.php?irn=876 –www.seayourhistory.org.uk/content/view/39/ 77/www.seayourhistory.org.uk/content/view/39/ 77/ –http://www.portsmouth.gov.uk/business/2781.htmlhttp://www.portsmouth.gov.uk/business/2781.html

44. Task: create some online content -review

45. Home page: key functions Offer overview: –Show user what the site can do for them –Show user what is in the site: The structure at a glance Content highlights or samples Engagement: – make user want to continue browsing

46. Article page: key functions Engage the user – make them want to consume the article Signposting: –Show user what else is nearby in the site The structure at a glance –Show user what else the site offers them –www.mylearning.org/overview.asp?journeyid=73www.mylearning.org/overview.asp?journeyid=73 –www.manchestergalleries.org/www.manchestergalleries.org/

47. More information: Well presented advice on usability including writing for the web, with a useful little self test option http://usability.coi.gov.uk/ A one page structured set of advice: http://www.webdesignfromscratch.com/co pywriting/writing-for-the-web/ http://www.webdesignfromscratch.com/co pywriting/writing-for-the-web/

48. More information (2) Simple to follow good practice list: http://www.jisc.ac.uk/aboutus/whoweare/br and/webwriting.aspx Articles to read and help you develop skills http://www.writingfortheweb.co.uk/artwrite. html Classic advice from usability guru Jakob Nielsen http://www.useit.com/papers/webwriting/ http://www.useit.com/papers/webwriting/

49. Website users

50. How do you get it right for everyone? Answer: You cant get it right for everyone. You have to make choices, and stick to them: Who is it for? What.. How…

51. Who for…? What for? How will they use it?

52. Learning resource: iterative planning content curriculum (find a match) Learning activities Learning outcomes (find a match) Filtered by your specific audience needs

53. Who for…? What for? How will they use it?

54. Who for what for... Who for? (audience) Need to be clear from start mum + 2 children looking for something to do this weekend teachers of yr5/6 in local area with whiteboards men interested in gadgets

55. Who for what for... What real-world outcomes? What will they do as a result of using the site? make a donation plan a visit to a museum buy a train ticket think differently about learning disability

56. Who for what for... How will they use it? (user experience) What do they actually do on the site? browse and read articles working alone or in pairs? (learning resources) lean forward or sit back? Browsing, following, searching… Also Where, When and Why?

57. Who for what for... Website appraisal –For each example note first impressions Who is it for? What does it offer them? How will they use it?

58. Evaluation and testing - inc. market research

59. Martin Bazley www. ICT4Learning.com Website evaluation and testing Need to think ahead a bit: –what are you trying to find out? –how do you intend to test it? –why? what will do you do as a result? Why? The Why? should drive this process

60. Martin Bazley www. ICT4Learning.com Test early Testing one user early on in the project… …is better than testing 50 near the end

61. Martin Bazley www. ICT4Learning.com When to evaluate or test and why Before funding approval – project planning Post-funding - project development Post-project – summative evaluation

62. Martin Bazley www. ICT4Learning.com Testing is an iterative process Testing isnt something you do once Make something => test it => refine it => test it again

63. Martin Bazley www. ICT4Learning.com Before funding – project planning *Evaluation of other websites –Who for? What for? How use it? etc –awareness raising: issues, opportunities –contributes to market research –possible elements, graphic feel etc *Concept testing –check idea makes sense with audience –reshape project based on user feedback Focus group Research

64. Martin Bazley www. ICT4Learning.com

65. Post-funding - project development *Concept testing –refine project outcomes based on feedback from intended users Refine website structure –does it work for users? *Evaluate initial look and feel –graphics,navigation etc Focus group One-to-one tasks

66. Martin Bazley www. ICT4Learning.com

70. Post-funding - project development 2 *Full evaluation of a draft working version –usability AND content: do activities work, how engaging is it, what else could be offered, etc Observation of actual use of website by intended users, using it for intended purpose, in intended context – classroom, workplace, library, home, etc

71. Martin Bazley www. ICT4Learning.com

77. Post-funding - project development 3 Acceptance testing of finished website –last minute check, minor corrections only –often offered by web developers Summative evaluation –report for funders, etc –learn lessons at project level for next time

78. Martin Bazley www. ICT4Learning.com Two usability testing techniques Get it testing - do they understand the purpose, how it works, etc Key task testing -ask the user to do something, watch how well they do Ideally, do a bit of each, in that order

79. Martin Bazley www. ICT4Learning.com User testing – who should do it? The worst person to conduct (or interpret) user testing of your own site is… –you! Beware of hearing what you want to hear… Useful to have an external viewpoint First 5mins in a genuine setting tells you 80% of whats wrong with the site etc

80. Focus on learning: how will learners use it? What will they do?

81. How do learners use online learning resources? -Read -Read and take notes... -Look at the pictures... Learning is usually enhanced by a clear task or some other specific motivation. (a) Task set by teacher (b) Activity within learning resource – the more specific the better – but then less flexible

82. Resources – examples HE /other www.exploringsurreyspast.org.uk/ http://jameelcentre.ashmolean.org/ www.nationalarchives.gov.uk/cabinetpapers www.manchestergalleries.org/ford-madox- brown/www.manchestergalleries.org/ford-madox- brown/ www.seayourhistory.org.uk/content/view/20/35/ www.nationalarchives.gov.uk/latinpalaeography/ www.preraphaelites.org/

83. Resources - examples Bedford Bytes Britons at War Tate Tools Museum Network ArtworksMuseum Network National Portrait Gallery Mary Seacole National Gallery Museum of London Fire of London

84. Resources for use on whiteboards - examples Wartime in Bedford http://www.movinghere.org.uk/schools/de fault.htmhttp://www.movinghere.org.uk/schools/de fault.htm www.mylearning.org/overview.asp?journe yid=409 (Passion for Fashion)www.mylearning.org/overview.asp?journe yid=409 http://www.mylearning.org/overview.asp? journeyid=318 (Ruskin)http://www.mylearning.org/overview.asp? journeyid=318 Ford Madox Brown MAG

85. Some examples –http://www.nhm.ac.uk/nature-online/british- natural-history/index.htmlhttp://www.nhm.ac.uk/nature-online/british- natural-history/index.html –http://www.manchestergalleries.org/the- collections/highlights-of-the- collection/narrativeobject.php?irn=876http://www.manchestergalleries.org/the- collections/highlights-of-the- collection/narrativeobject.php?irn=876 –www.seayourhistory.org.uk/content/view/39/ 77/www.seayourhistory.org.uk/content/view/39/ 77/ –http://www.portsmouth.gov.uk/business/2781.htmlhttp://www.portsmouth.gov.uk/business/2781.html

86. Crit room

87. Simulated user testing -Learn how user testing works -Get feedback on specifics of websites Remember this is just a simulation of real user testing!

88. Crit room sites Victoria and Albert

89. Agree activity following todays session

90. Sustaining learning – continue practising! Now: - decide on an achievable task for the next two weeks In two weeks: -Email your work (however unfinished) to Martin [if progress is slow, ask for help] Then: - Martin will offer feedback and suggestions

91. My task Write down what you plan to achieve within two weeks

92. Websites for different audiences

93. The following tips are based on numerous evaluation sessions numerous user testing sessions talking to other people who use websites talking to other people who make websites

94. General users There is no such thing as a general user Are you a general user?

95. Adults/families with general interest What does the site tell me at a glance? genuine enthusiasts will stay interested whatever the website looks like, and will spend some time looking around it or phone up for more information if required.

96. Adults/families with general interest But most will not bother unless something engages them within a few seconds The questions people might like answered within a few seconds of arriving on a museum site probably include:

97. Adults/families with general interest Where is it? a schematic map on every page, or at least on the home page and visit info, would really help in attracting visitors who dont know the area

98. Adults/families with general interest Whats the rough cost and roughly how long might I/we want to spend there? This would give me an idea of whether to view it as a place to pop into on the way somewhere or combine it with another attraction; or whether it requires more serious investment of time or money

99. Adults/families with general interest What kind of experience will I get? I know there will be displays – it is a museum! but will there be people around to help bring the place alive for me, my spouse, my children or friends? – or are there events, or things to do like dressing up in a pilots uniform, or games to play, etc?

100. Websites for schools Serve the National Curriculum or extend or enhance? enhance sounds good but most teachers want: 1.curriculum specific – by all means cross- curricular but with one scheme of work or topic as headline (think product byline) 2.ready-to-use – teachers may want to adapt to their own situation (esp second time round), but most will not have time – offer at least one ready to use version 3.minimal preparation and with time commitment (preparation time and class time) clearly specified 4.flexible/adaptable/extensible where possible

101. Foundation and KS1 (3-7yrs) Production of materials for this age range is particularly tricky: aim at teachers not children, so… good bank of images, videos or other mainly visual assets think of interactive whiteboards

102. Key Stage 2 (7 to 11 years old) keep no of words on each page to a minimum, say 50 in total illustrate key ideas visually as well as verbally and use audio if possible do not assume that the teacher can be over their shoulder at all points – so keep the instructions and processes simple try to use language, images, ideas, and settings that will appeal to the target audience

103. Key Stage 3 (11 to 14 years old) For KS2 a cross-curricular approach is OK (for example they may use the same site for Geography and Science) but: At KS3 cater for a single subject (and scheme of work) (Can offer suggestions for cross-curricular working, but remember generally each teacher teachers only one subject each.)

104. Lifelong learners for (non-specialist) interest level think of 12 yr olds Identify a particular audience with specific interests/motivations for using your site then focus on constraints to allow successful design to proceed. (In a formal learning setting constraints often implicit in the course, physical set up etc.)

105. HE (undergraduates) Identify a particular course or selection of courses with specific interests/motivations for using your site Talk to course lecturers and if possible students about their needs. Show them inital designs at paer

106. Specialists and researchers Fact-oriented, less graphics and design, more text and specifically relevant images, with good search facility Examples of specialist researchers: –HE doctoral students and staff –experts or enthusiasts in this subject area

107. Accessibility tips http://www.w3.org/WAI/ Images & animations: Use the alt attribute to describe the function of each visual.Images & animations Image maps. Use the client-side map and text for hotspots.client-side maptext for hotspots Multimedia. Provide captioning and transcripts of audio, and descriptions of video.captioning and transcripts of audio descriptions of video Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."Hypertext links Frames. Use the noframes element and meaningful titles.titles Etc, etc. Also: http://diveintoaccessibility.org Illustrates real life implications e.g. JavascriptJavascript

108. More information / advice / ideas Martin Bazley 0780 3580 737 www.martinbazley.com