Principles of Whiteboard Design

Principles of Whiteboard Design

Some websites look better than others. Some apps work smoother than others. A good whiteboard design can help participants to find relevant information quicker and learn better. What are the underlying principles of good interface design? This article is a collection of the most important design principles when it comes to digital whiteboards.

Contents

Size Matters

Contrast for Focus

Font Styling

No Focus Without White Space

Grouping Elements

Size Matters

image

The shark and the whale are not the same size (left), so let's adjust it accordingly (right).

But there is one more important aspect of size: Responsiveness. Since we all have a limited screen size on our laptops and monitors, the digital whiteboard usually holds more information than we can see on one page. That means we move around and zoom in and out in order to see everything.

The digital whiteboard has to respond to this behavior ("responsiveness") and elements should be smaller or bigger, depending on the zoom level. This helps people to move around and jump from one topic to another without zooming in and out too many times.

As a rule of thumb and starting point for Miro boards, you could work with the following header sizes:

  • Make the board header in 144
  • Make a section header in 64
  • Make a subheader in 48
  • Make a topic header in 36, when needed

With these sizes, the headlines are optimized for different zoom levels, like you see on the following picture. The subheader (in 48) is optimized for working with small sticky notes on a 100% zoom level.

Different header sizes on a Miro whiteboard
Different header sizes on a Miro whiteboard

These header, box and sticky note sizes give people a better understanding what to focus on and when to zoom in or out.

Contrast for Focus

On a big whiteboard, colors and contrasts are especially important. A strong contract helps people to focus on the relevant information.

image

In this example, a stronger contrast helps us to find the special element much quicker. You could do the same with flashy colors.

For colors, light pastel colors seem to be in the background (far away) and strong, dark colors seem to be in the foreground (near).

image

How near or far a color seems, also depends on the background.

This means, if you want to give people a strong focus, use strong contrasts. If you want to use colors and elements as part of a board identity (no further focus intended), use light contrasts.

Font Styling

image

The style of fonts can help people navigate complicated texts. Here is an example.

Especially when used just a few times, special styling can help to focus on important snippets.

image

Alignment is especially important, not just for texts and images. Try to align everything! When something is not aligned properly, it looks odd.

As a rule of thumb, try to use one text alignment only (left or right or middle).

Generally speaking, all the styles and colors on your whiteboard should follow the same design rules. All headers should have the same styling and size, als texts, all boxes and elements etc. and everything should be aligned in the same way. This is important for people to navigate because similar elements are perceived complete and related. In Miro, a function called Auto Layout helps you with this.

On the other hand, an exception from the rule can help you to point to a specific aspect and emphasize a certain element (this would not be possible without perceived uniformity), like watch this video! 😉

No Focus Without White Space

When a digital whiteboard is full of everything (videos, images, texts, stickies, icons, etc.) it's hard to focus. As a rule of thumb, don't put too many elements on your board. Leave white space.

image

In this example you can see that white space can help to lead the eye towards to rocket's flight path in the top right. Also, it's much cleaner and faster to understand.

The Google search website
The Google search website

Your whiteboard is not a newspaper website. It's more like a visual guide for people, to help them what they're looking for. As an example, take the Google search site. It's 101% clear what people should focus on because of its white space.

Grouping Elements

Lastly, a digital whiteboard should be separated into segments. These segments group together topics or lessons or activities which belong together. In this way you provide people a visual representation of your course, class or seminar, which (in my opinion) is much better than a linear hand-out because it's 2-dimensional and interactive: You can always resize and move segments, together with your participants.

image

As a rule of thumb, related informationen should be in close proximity.

Proximity is one way of grouping elements. Another is color-coding or styling text in the same way. These are subtile ways of connecting different parts of your whiteboard.

image

In this example, similar elements are also grouped together which makes them much easier to perceive as related.

A Miro digital whiteboard used as a graphic organizer
A Miro digital whiteboard used as a graphic organizer

In this example, different color codes for stickies and connecting lines are used to show the connections between topics.

Sources:

E-Learning and the Science of Instruction (Clark, Mayer 2016)

image

X_PLRS

Education Technology, made simple