The document provides tips for developing resources for interactive whiteboards, based on how people use the web and findings from eye tracking studies. It discusses how users scan pages in an "F-shaped" pattern, and how to design resources accordingly by using visual elements and structuring text and headings to maximize comprehension from scanning. Tips include keeping paragraphs and sections short, using images related to text, and starting subheadings and bullet points with key information-carrying words.

1. Developing resources for interactive whiteboards Martin Bazley, ICT4Learning Discovery Museum, Newcastle 28, 29 January 2009

2. Intro: Martin Bazley Consultancy/websites/training/user testing ICT4Learning.com Chair of E-Learning Group for Museums Previously: E-Learning Officer, MLA South East (3yrs) Science Museum, London, Internet Projects (7yrs) Taught Science in secondary schools (8yrs)

3. About how people use the web

4. People use the web differently…

5. … from the way they use books, object labels, magazines, newspapers, information screens, etc

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

9. 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 – scan ( as opposed to reading through them in detail) the web pages they are using, or at least the ones where they are still trying to work out where to go next

11. eyetracking study , recorded 232 users, 000’s of Web pages. Users' main reading behaviour was fairly consistent dominant reading pattern looks like an F :

12. Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.

13. Next, users move down the page a bit and then across in a second horizontal movement that typically covers a shorter area than the previous movement. This element forms the F's lower bar.

14. Finally, users scan left side in a vertical movement. This last element forms the F's stem.

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

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

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

19. If they have to work at it for example if they cannot see what they are looking for, or if it doesn’t 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

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

21. Website users

22. Website users Who uses your website? Why would they want to use it? How would they find it? What do they get out of it? What do they dislike about it?

31. Website users ‘ User A’ may like the depth of material available in their preferred section… … but dislike the time it takes to download the two high quality images in it ‘ User B’ may find the amount of text off-putting… … but be drawn in nevertheless by the impact of the two images How do you get it right for everyone?

32. Website users ‘ User X’ is only on this site because she saw the story about Amy Winehouse… … and is messaging her friends about it while trying to find out more ‘ User Y’ is drafting a letter of complaint about the website to his M.P. at this very moment… How do you get it right for everyone?

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

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

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

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

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

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

39. Some examples Romans in Sussex Science Museum antenna science news Science Museum Heavy Weather Introduction Flights of Inspiration Radio Taxis The Knowledge Did you Know Britons at War 1001 inventions Currier Museum of Art Online Curriculum Visual Media Gunpowder Plot Churchill Speech interactive Compass (collections access with tours and search) Making the Modern World (engaging encyclopedia with learning modules) Spinning the Web (learning-journey style access) Tate Online course (VLE-style self-paced learning) Bedford Bytes (highly specific classroom-oriented learning materials) Victorian Learning Journey (multi-channel learning programme) Kent e-Learning Initiative Hopping down in Kent Digital Schools

40. Some more examples Curating the City www.curatingthecity.org Minnesota Historical Soc h ttp://shop.mnhs.org/ Paleography www.nationalarchives.gov.uk/palaeography Life of a Rock Star http://collectionscanada.ca/rock Science Museum Buzz www.smm.org/buzz Int Council of African Museums www.africom.museum Birds in Backyards www.birdsinbackyards.net/ NYPL Digital gallery http://digitalgallery.nypl.org/nypldigital/ Waterford County Mus www.waterfordcountyimages.org/ Taken from: Best of the web 2006

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

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

43. 5Es Engage: This phase of the 5 E's starts the process. An "engage" activity should do the following: Make connections between past and present learning experiences Anticipate activities and focus students' thinking on the learning outcomes of current activities. Students should become mentally engaged in the concept, process, or skill to be learned. Explore: This phase of the 5 E's provides students with a common base of experiences. They identify and develop concepts, processes, and skills. During this phase, students actively explore their environment or manipulate materials.

44. 5Es Explain: This phase of the 5 E's helps students explain the concepts they have been exploring. They have opportunities to verbalize their conceptual understanding or to demonstrate new skills or behaviors. This phase also provides opportunities for teachers to introduce formal terms, definitions, and explanations for concepts, processes, skills, or behaviors. Elaborate: This phase of the 5 E's extends students' conceptual understanding and allows them to practice skills and behaviors. Through new experiences, the learners develop deeper and broader understanding of major concepts, obtain more information about areas of interest, and refine their skills. Evaluate: This phase of the 5 E's encourages learners to assess their understanding and abilities and lets teachers evaluate students' understanding of key concepts and skill development.

45. Using whiteboards http:// www.teachers.tv/ict/whiteboardtips http:// smarttech.com/trainingcenter/tutorials.asp # http:// www.prometheanplanet.com

46. Resources for use on whiteboards - examples Ford Madox Brown MAG Tate Tools Museum Network Artworks Museum Network Myths National Portrait Gallery Mary Seacole National Gallery Museum of London Fire of London

47. Resources for use on whiteboards - examples Britons at War Wartime in Bedford http://www.movinghere.org.uk/schools/default.htm www.mylearning.org/overview.asp?journeyid =409 www.mylearning.org/overview.asp?journeyid =441

48. Devise a whiteboard resource Choose one or two images, and think of how they might be used on a IWB Decide how/where teachers would find this 3. Caption 4. Key question(s) What else will the teacher need? What else will the pupils need? Don’t worry too much about accuracy – just get something on screen

49. Websites for different audiences

50. Websites for different audiences 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

51. ‘General users’ There is no such thing as a general user Are you a general user?

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

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

54. Adults/families with general interest Where is it? Further down the home page it says ‘alongside Middle Wallop airfield’ but I have no idea where that is. a schematic map on every page, or at least on the home page and visit info, would really help in attracting visitors who don’t know the area

55. Adults/families with general interest What’s 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

56. 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 pilot’s uniform, or games to play, etc?

57. Websites for schools ‘ Serve the National Curriculum’ or ‘extend or enhance’? ‘ enhance’ sounds good but most teachers want : curriculum specific – by all means cross-curricular but with one scheme of work or topic as ‘headline’ (think ‘product byline’) 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 minimal preparation and with time commitment (preparation time and class time) clearly specified flexible/adaptable/extensible where possible

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

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

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

61. ‘ 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.)

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

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

64. Accessibility A website can achieve AAA level accessibility (www.w3.org/WAI/ ) based on automated tests, and yet be almost unusable by many users

65. Improving general usability for a wide range of user types yields the best results. City University audit (2005): 4 out of 8 technical checkpoints that cause the majority of web access problems for disabled users relate to writing and laying out textual content .

66. To improve accessibility: 1. divide blocks of information into more manageable units 2. provide a text equivalent for every non-text element 3. clearly identify the target of each link 4. use the clearest and simplest language appropriate for the site’s content (from enableUK – accessibility specialist)

67. Search Engine Optimisation - article

68. More info from: Martin Bazley 0780 3580 727 www. ICT 4 Learning .com