Designing EducationalWeb Sites to Support

Student Learning

Steven Warburton TELRI 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: http://www.useit.com

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: http://www.gooddocuments.com/techniques

What do usabilitystudies 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: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 Servercompatibility

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

Tools Edit Manage Platform

FrontPage 98 MS bias

NetObjects Fusion 4.0 Any

Dreamweaver 2.0 Any

Visual InterDev 6.0 MS

PageMill 3.0 Any

A selection of other toolsTools Type

PhotoShop Graphic/image

Paint Shop Pro Graphic/image

FreeHand Graphic/diagram

WS_FTP FTP – for up/downloading files

Browserola Browser compatibility

ShockWave Animation

ColdFusion Database connectivity

NetObjects Script builder Scripting environment

For a range of freeware and shareware tools: http://www.winfiles.com