Using White Space for Clutter-Free eLearning

By Joseph Suarez

Imagine two scenarios. First, you are driving in a car down an open road with the windows down. Second, you are standing in a crowded bus stuck in traffic. Now imagine how the available space around you in each scenario would make you feel.

Chances are the car seems less stressful and more inviting (no offense to public transit). That almost claustrophobic feeling of being on the bus with little to no breathing room is exactly how our eyes perceive a document, presentation, website, or eLearning course without a healthy amount of white space.

What is White Space?
It is a visual design term for the negative space around and between visual elements (positive spaces).  On the web and in eLearning, these positive spaces typically show up as text, graphics, video placeholders, buttons, form fields, etc. White space, then, is the dark matter, the absence of any positive element.

The term white space seems to imply color, but negative space is not necessarily white. A great example of this is the homepage for Bing - Microsoft’s search engine. While the white space on Google’s homepage is actually white, each day a new high quality photo is used as a background element for Bing’s homepage. Both employ highly effective use of white space around the positive space of a logo and search box.

Two search giants using white space effectively. Click to enlarge.

Generally, when white space  is used effectively, it conveys a more professional and possibly sophisticated look and feel. Luxury brands, cosmetics, and of course Apple often use this to their advantage to convey simplicity and elegance.

Contrast this with a typical direct mail flyer stuffed into everyone’s mailbox where white space is actually considered a bad thing. Direct marketers may make more money cramming as many ads on a single piece of mail as possible, but the vast majority of the time the rest of us are better off using more white space, not less. This is especially true for eLearning courses and presentations.

Striking a Balance
Using white space effectively requires a strong balance between positive and negative spaces that matches the visual design, marketing message, and/or learning objectives. When that balance is struck, it has the following advantages:

• Improves readability – the ability of text to be seen and scanned 
• Can portray a more sophisticated or elegant look and feel
• Looks more professional, and gives the impression it’s worth someone’s time
• More effective at communicating a message and aiding learning retention

Apple.com using lots of white space effectively.

Presentations and eLearning courses with pages filled wall to wall with text are uninviting, unprofessional looking, and just plain boring.  That type of design (or lack thereof) is less effective than one where an emphasis has been placed on visual design.

Seeing the Negative Space
So much of developing training material such as eLearning courses and job aids involves the content. It takes a different mindset to see the empty spaces between the content and design accordingly. Here are a couple techniques you can use:

• Highlight everything on screen (Ctrl+A). This should outline every positive element in most applications, and allow you to see exactly where the white space is. 
• Think of every page element (or group of elements) as having a reverse magnetic field that repels other elements away. The more spacious the overall design, the stronger the repelling force becomes.

Once you begin to see the negative space, you can tweak the design to space elements more effectively, decide what is crucial, and possibly eliminate unnecessary elements.

So remember, just as you would rather be cruising down the road in a car with the wind blowing through your hair than be stuck standing on a bus in traffic, so too does the end user of your design yearn for balance between positive and negative design elements. Leave the clutter for junk mail.