1. Designing Educational Web Sites to Support Student Learning Steven WarburtonTELRI Project

2. “There are three important technologies that all education researchers should come to terms with as a matter of urgency: the Web, the Web, and the Web” “Let’s face it, the Web even at its most ideal is a pretty awful medium for studying and undertaking course work … nothing wrong with books and videos!” From: “The Knowledge Web”, eds. Eisenstadt and Vincent (1998)

3. Overview Education What do I want to do - educational purpose? What pedagogical issues are important? The Web What are the possibilities? How do I take advantage of them? Education and the Web How does it all fit together? What tools are available? Did it work?

4. Bioinformatics course educational aims - Stage 1 Training students to use tools Computer based with access via Web e.g. BLAST database Overall research orientation Research paper - assess process Future distance learning Industrial clients Web solution

5. Educational Issues Type of audience: External students - distance learning, rich support Internal students - partial support Access to lectures remains available Access to tutorials remains available Combination

6. Educational methods available Problem Based Learning Problem solving Drill and practice Instructional Group working/collaborative Project based

7. Problem based learning Deconstruction of problems Based on ‘real world’ questions Open questions Allow for innovative solutions Possibilities for group-working Project management/planning

8. Designing the Web site - Stage 2 Knowledge base Web-based tasks and activities Publishing of student work Discussion area Administration information Help files Feedback Assessment - explicit/comparison

9. Possible site structures

11. Navigation Where am I? Where can I go? How do I get there? When I get there how do I get back?

12. Navigational components for site Navigation shell Experienced/casual/inexperienced users? –Linking - indicate where going –Search engines –Quick links/short cuts –Site map –Visual cues - metaphor –Index page Orientation Design goal = efficiency

14. Usability heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognise, diagnose, and recover from errors 10. Help and documentation Usability studies: http://www.useit.com

15. Producing the contents - Stage 3 Textual material targeted at two possible users: Casual student/prospective students Student following the course Images Possible animated examples Interactivity - Web based tasks and activities e.g. submit and retrieve data from search engines

16. Web page design: Layout Writing Style Graphics Interactivity Accessibility Browser Screen size

17. Layout of the course Web pages Visibility/accessibility White space control - print design Tables and grids Limit use of frames Web-based activities Discussion/comment areas Legible font/sensible background Control scrolling Cascading Style Sheets Guides for Web page design: http://www.gooddocuments.com/techniques What do usability studies tell us about design?

18. Writing material for the course Two levels of material: Material to be read on screen Material to be downloaded/printed (Word, pdf) Pyramid style Minimal hyper-linking within documents Help text scanning Headings and sub-headings effectively Paragraphs Lists

19. Using images in the course Browser safe 216 colour palette Format gif jpg size Animation gif Shockwave

20. Summary of the “core components” Organisation for web standards: http://www.w3c.org HTML 4.0? - for textual course material Dynamic HTML (interactivity) JavaScript 1.2? Cascading Style Sheets 2.0? Animation - gif or Shockwave Possible database connectivity - ASP 2.0? Browser and Server compatibility

21. Designing the Web site - Stage 2 Knowledge base Web-based tasks and activities Publishing of student work Discussion area Administration information Help files Feedback Assessment - explicit/comparison

23. Web-publishing in the context of bioinformatics Problem Based Learning Student publishes an outline of proposed strategy for solving the problem Available for tutor comment - feedback Research orientation and assessment Critical review of papers Comparison of scientific papers Discussion of structure of a scientific paper

24. Evaluation - Stage 4 Check educational objectives Check usability - prototype Web design Get feedback - small student test group Redesign as appropriate View the development as an iterative process: “the more frequently you get usability data and iterate your design, the better the usability of the end result” Jakob Nielsen

25. Prototyping and Evaluation Low/high fidelity prototype Low e.g. paper version High e.g. computer mock-up Vertical/horizontal prototype Vertical = deep and narrow Horizontal = broad and shallow Scenario testing Testing from the viewpoint of user tasks and goals

26. A design guide

27. Integrated Learning Environments COSE, FirstClass, WebCT, MERLIN, Lotus Learning Space, TopClass, Sybase NGL, Macromedia Attain etc … Student management facilities Document management and exchange Communication Standard interface and navigational shell Liberating or constraining?

28. Web page editing and managing

29. A selection of other tools For a range of freeware and shareware tools: http://www.winfiles.com