Designing Educational Web Sites to Support Student Learning Steven WarburtonTELRI Project

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

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?

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

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

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

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

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

Possible site structures

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

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

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:

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

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

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: What do usability studies tell us about design?

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

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

Summary of the “core components” Organisation for web standards: 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

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

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

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

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

A design guide

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?

Web page editing and managing

A selection of other tools For a range of freeware and shareware tools: