Horror Vacui
and the battle for white space
After the launch of Codecademy’s redesign on April 23rd, some people reached out to us wondering how we were able to embrace such a clean, minimal interface. Designers are of course renowned for their lust for white space and unconfined content, yet for us, this was not just a preference or arbitrary choice, but a very intentional pursuit.
Some of you might have heard of horror vacui, a latin expression originally applied to visual arts, which expresses a “fear of the empty”. It simply entails a very common human desire to fill empty spaces with objects or information. You can witness horror vacui in a variety of circumstances, from a webpage trying to surface as much information as possible above the fold, to shop owners trying to fill their windows with every article in their store.
Yet the most interesting aspect of this common practice relies on an inverse relationship between horror vacui and value perception. As horror vacui increases, and a given space becomes cluttered with things, the perceived value of that space tends to decrease. This is why luxury brands normally have quite a minimalistic window, with only one or two articles, or premium magazines have an extremely clean layout, with very low information density. When interacting with such a spotless, uncluttered experience, users perceive it as being more elegant, classy, stylish, and refined.
As for Codecademy, we had decided early on that the goal of our redesign was to grow out of our early-stage startup look and feel, and pursue a more mature, sophisticated, and professional brand. Embracing white space was therefore a very natural choice. Nonetheless, this is never a straightforward task. Even if you try to streamline content on a page, what happens to all the controls, widgets, actions, and navigation that are required to fulfill users’ needs?
Here are a few information-organizing techniques that can help you minimize horror vacui in an effective way:
1. Direct Manipulation
A widespread interaction-design method that we took to heart when rethinking our web ecosystem, the concept for direct manipulation relies on letting users directly act upon UI elements for contextual actions and controls. This method ends up minimizing the amount of peripheral chrome and places content at the top of the UI pyramid. This approach can be particularly effective in touch-enabled platforms that offer a more natural set of interactive gestures and behaviors.
2. Progressive Disclosure
A widely applicable principle, particularly relevant for UX and information visualization, progressive disclosure describes a technique for sequencing actions and information through a series of steps (screens) in a gradual way. Instead of inundating users with every conceivable control and bit of information upfront, you can progressively reveal them from an abstract, simplified state to a deeper, detailed mode. This way you can minimize complexity and ultimately decrease a user’s cognitive load.
3. Hick’s Law
Hick’s law addresses a common quandary between quantity and quality. This important rule states that the time it takes to make a decision increases as the number of options increases. This principle is also expressed in the well-known paradox of choice, or in Danish philosopher Søren Kierkegaard’s existential stance that anxiety is the dizziness of freedom. You can minimize user’s anxiety by reducing the number of CTA’s in a given page and focusing only on what matters.
4. Chunking
Chunking is an old design principle that dates back to Ars Memorativa (Art of Memory) — a set of mnemonic techniques to improve memory and recall that started in Ancient Greece and was propagated throughout the European Middle Ages. You should always be concise and pragmatic on the content you decide to display, and whenever possible arrange it into smaller, manageable chunks of information. This will substantially improve content’s legibility and memorability.
5. Control
It’s critical that you get to know your users and spend some time understanding their background, expertise, main goals and aspirations. Once you have a solid grasp on the main user archetypes, you can provide a different level of control depending on a user’s proficiency level. Novice users generally don’t require a great level of control over the product, so there’s no need to overwhelm them with advanced features. Save those for a more experienced archetype or a long-time user.
6. Flexibility-Usability Tradeoff
As one of the most important UX principles, you should always be cognizant about the delicate balance between flexibility and usability. We have a natural tendency to make a system flexible to various user needs, by surfacing various types of input and interactive mechanisms. However, as the flexibility of a system increases, with a variety of actions and controls for every conceivable scenario, the usability of that system tends to decrease. Concentrate on the key action of a given webpage and make it more prominent that anything else.
7. Performance Load
For this principle we should put ourselves inside our users’ mind and try to understand what they go through each step of the way. As expressed before with the principle of progressive disclosure, cognitive load is quite a precious thing and we should always be very sensible on how much we are asking of users. If the effort to achieve a given task is too high, there’s a strong chance it will lead to errors and negative outcomes. Try to minimize users’ cognitive load by not asking too much of them at once.
8. Signal-to-Noise Ratio
In any communication medium that transmits a message (signal) to be interpreted by a receiver, there’s always extraneous information (noise) that can permeate and affect the final message. Most design artifacts should aim at maximizing signal and minimizing noise. Whenever you are evaluating a given design, carefully analyze the need for each graphical element on the space. If there are unnecessary elements that don’t support any specific function, they constitute visual noise. Over time, noise can degrade the message you’re trying to convey, and more worryingly, it can confuse user’s perception and expectations.
9. 80/20 Rule
The 80/20 rule is a wide-ranging principle, also know as Pareto’s Principle, named after Italian economist Vilfredo Pareto. It essentially states that in many systems, a large percentage (80%) of the effects are caused by a small percentage (20%) of the variables. The most applicable translation of this rule, as it pertains to UX, says that 80% of users use only 20% of the features of a given product. Nailing down these vital features (20%) could greatly minimize the amount of chrome you surface by default. As a friend of mine would say in allusion to this principle: bothering a majority of users with features that are only relevant to a few, is like asking someone to wear snow tires year round in the event it might snow.
10. Ockham’s Razor
This universal principle of simplicity, named after 14th century Franciscan Friar William of Ockham, ultimately states that whenever in doubt, you should always choose simplicity. In other words, if you have to pick between two designs that behave and function in a similar manner, the simplest design should always be selected. As Ockham himself put it: “Entities should not be multiplied without necessity”. Given its inherent universality, it’s easy to understand why philosophers, scientists, and designers have adopted this rule over the centuries. This is also why Ockham’s Razor constitutes the final, coalescing principle on this list.
Putting it all together
I hope you find this list of approaches useful in your own battle with horror vacui. If you are interested in other complementary design principles take a look at the remarkable, always absorbing, Universal Principles of Design. Alternatively, you can also delve into a Wikipedia page that features a comprehensive list of important cognitive biases.
Want to know how we’re applying many of these principles at Codecademy? We’re hiring! Send me an email or follow me at @mslima.
