Spatial Contiguity Principle

Students learn better when corresponding words and pictures are displayed close together than when they are far apart on a page or screen.

Use a connecting line for connecting the name of an element or the associated text with the component itself. Is the accompanying text is too long, make a pop-up message that appears when your mouse hovers the corresponding component, which also called mouse-over.


  • Text and graphic elements are separated by scrolling screens. Ensure that both can be placed side by side so that the student does not read the text first, and needs to wait until afterwards to have a look at the graphic element.
  • Separation of feedback from question or answer. Ensure that the student can compare his response with the feedback that you have prepared in the course. This increases the learning curve.
  • Guidelines on a separate screen. Make sure that guidelines that belong to a particular exercise or some part of the course, are permanently visible, for example, by making use of a smaller display which the trainee can minimize or move himself.
  • All text under the graphic element. Make sure the text is as close to the graphic element as possible and that it splits up the text into shorter pieces to get a better overview.
  • Simultaneous playback of animation and accompanying text. Make sure you first make students read the accompanying text, and that they can press the ‘play’ button afterwards to view the animation.
  • Use of a legend. Make sure each piece of the legend is next to the corresponding component. In this way, the student can easily understand both elements.