my elearning unsw


Planning an online course

Flowcharts, storyboards and sitemaps

There are some differences in the focus of these different formats, although some practitioners use the terms interchangeably. A sitemap shows the information and navigation structure of a website. A flowchart shows the user pathways through different elements present in the website or course. A storyboard shows screen by screen the path that a user will follow through a website or course.

The examples below show nicely designed sitemaps and course organisers that have been provided to students to help them understand the course structure. However, they did not start off this way! The easiest tools to use to create a flowchart are simply pencil and paper. Stickynotes can be useful, as they can be repositioned as you work out the most useful structure for the course.

You may find it useful to create both a flowchart/storyboard type chart that maps the learner pathways, and a structural map that represents how you will build the course. The first will inform the second.

EXAMPLES

The sitemap below shows the course in terms of its information structure – it helps students to find individual elements, but does not describe how the student should navigate the course.

flowchart example

The sitemap below shows the different links and topics in an online resource. For an information rich resource, this may be the most appropriate style of organiser.

flowchart example

 

The flowchart-style organiser below shows the process of navigating through the course, both describing the course schedule, and providing links to the required material.

flowchart example

The organiser below is both a sitemap, depicting the structure of information, and a flowchart, depicting the pathway through the content.

flowchart example

You can now begin to create a flowchart or storyboard for your course.

Here are some links on creating storyboards and flowcharts: