cyberSlang: the ultimate instant online encyclopedia

Instructional Diagrams

Instructional diagrams in context

Explained by Chris

6 Instructional diagrams in context
Visual characteristics of different media

Conventional print media still have advantages: showing much finer detail in a diagram, less constraints of access.
Diagram as it stands in one medium cannot simply be transferred to another medium. The change of medium demands for modifications - in order to take advantage of the special possibilities of the alternative medium.
An important guideline is the way different media typically are used by both presenters of information and viewers.

Media constraints in diagram design

The physical and perceptual characteristics define what can be done with a specific medium. Its profile of strengths and weaknesses needs to taken into account.

There remains a difference between:

  • what is possible,
  • what is instructionally effective.

    Dynamic media should do more than just attention grabbing. The quality of a diagram's instructional design remains central to its potential instructional effectiveness.

    Some characteristics that need to be taken into account when designing diagrams for different media:

    1 Resolution
    Monitor screens and video displays have low resolution, laser printers and image setters high resolutions.
    The resolution worsens dramatically with distance.

    2 Colour
    Many tasks can be realized effectively with black and white and a few shades of grey.
    Using video certain color combinations produce undesirable effects.
    Human factors: bright primary colours can cause visual fatigue.
    Avoid certain colour combinations (red-green) because of the problems they would cause for viewers who are colour blind.

    3 Orientation and proportions
    The medium's proportions and fixed orientation limits the possibilities for presenting a diagram.
    A book can be rotated: portrait and landscape orientation.
    A video displays on a fixed screen with fixed proportions (4 units wide, 3 units high).

    4 Movement
    Incorporating movement can be useful for depicting a process.
    But important events and significant states in a process may be easier to discern in a static presentation.

    5 Closeness of view (part versus whole)
    The limited resolution media prohibit the learner to zoom in and out smoothly.
    In a book, viewers can take a closer look at a detailed diagram.
    Even a programs magnifying tool can spoil the presentation of a detailed diagram.

    6 Presentation durations (learner control)
    Who sets the pace?
    - The reader of the book.
    - The presenter at the overhead projector.
    - The mechanism of the video device.
    The viewer's control over the presentation time depends from the medium.
    Which way is a more useful learning tool?

    7 Exploration freedom (learner control)
    Who sets the order in which the diagram can be explored?
    How often each of the resources can be referred to in the study process?
    How can learners be guided thru the diagram without limiting their exploration freedom?

    Working around media constraints

    Producing instructionally effective diagrams, designers have to deal with the medium's constraints.

    When designing for presentation via video:
    - Show one single main idea only.
    - Build up gradually more complexe diagrams.
    - Show different levesl of detail by using a series of diagrams.
    - Minimize use of labels, make them short, large, bold and sans serif type face.
    - Reduce reliance on text with suitable voice-over.
    - Make diagrams as large as possible.
    - Fill the screen, but keep away from the border (round edges: losing material).
    - Video proportions: 4 units wide, 3 units high.
    - Use large bold shapes and heavy lines.
    - Clearly define each component: bold outline, sharp colour contrast.
    - Separate adjacent lines from each other.
    - Avoid finely textured patterns.
    - Work around the limited resolution and fixed screen shape using panning, zooming.
    - Use a related range of subdued colours instead lots of bright colours.
    - Keep background neutral, contrast foreground colours.
    - Use video-safe colours (only 75 per cent of normal saturation) to avoid bleeding across.
    - Show the diagram for an appropriate time.

    Computer-based diagrams

    Interaction allows learners to do something with a diagram. And the diagram can respond on the interactions.
    This interaction dialogue can keep the learner engaged with the diagram.

    Forms of interactivity:
    - clicking hot spots for additional information
    - moving selected items
    - changing orientation of a displayed item: rotating, inverting
    - increasing or decreasing size of item
    - adding or deleting items on display
    - coding items with particular types of identification: shading
    - pulling or pushing on a particular region in order to cause reaction

    For effective instruction, learners should be actively involved with the learning materials.
    Again, it is the quality that makes intructional effectiveness not quantity.
    Example of high level mental interaction: building up a diagram with the parts presented on screen.

    In developing interactive diagrams, designers need to go beyond their physical structure to consider the nature of interactions and the depth of mental processing.

    Animated instructional diagrams

    Animation in instruction means more than just engaging the learner's attention or sustaining motivation with graphic effects.

    When to use a static diagram
    - When no dynamic aspect is involved, when structure only is required.
    - When the learner has to explore in more detail a dynamic subject matter: move the attention to different parts to deal more effectively with aspects of the subject matter that are complexe or unfamiliar or familiar but have to be properly analysed.

    When to use an animated diagram
    - When dynamic subject matter is involved - if viewer have knowledge of components and structure.
    - When the subject matter is static but needs further explanation of aspects that are not obvious.

    After having used a variety of transformations to produce a static diagram that acts as a visual summary of the subject matter, what specific additional dynamic transformations can be introduced to heighten the presentation's effectiveness?

    In instructional diagrams animations can help learners to explore the subject matter more fully than otherwise possible.

    Uses of animation

  • Seamless changing between different views, showing relationships between views.
  • Exposing normally unavailable material to reveal additional key information: dismantling, taking a slice (cross-section), making outer layers transparent.
    Demonstrating the transformation process itself - in addition to the results.
  • Highlighting key information in the diagram: focusing the learner's attention on critical aspects (movement, colour, flashing, shaking, poping, drawing a ring around).
  • Building up or breaking down the subject matter. Example: start with outline, bring in components, form meaningful chunks.
  • Leading learners thru a diagram in order to get an appropriate interpretation of the subject matter. Example: overview, move from section to section.
  • Demonstrating a sequence of events.
    Instructionally effective distortions:
    - changing form, position or orientation,
    - leaving out unimportant parts,
    - changing the speed of some events,
    - breaking the whole sequence into key sub-sequences.
  • Allowing the learner to interact with the subject matter. For exploration or evaluation learning.

    up - Abstract - Literature - Lowe - 1 Learning - 2 Visual - 3 Development - 4 Designing - 5 Producing - 6 Context - 7 Integration - 8 Improving - 9 Helping - Links

  • tidBits 111-18

    contact mail to:
    Chris Mueller (

    ++41 (0)52 301 3301 phone
    ++41 (0)52 301 3304 fax

    97 03 25