Invisible Design

The topic of invisible design tends to group people into two camps: those who believe that design should get out of the way of the user and be effectively invisible, and those who think it has something to contribute by being seen, by giving pleasure through well crafted visuals.

I don’t think there is a need to pick a single one definition because the two camps are actually concerned with disparate goals that do not necessarily contradict themselves, and, if the two forms of design are equally valid, it is worth attempting to define where the dividing line lies and how the two differ from each other. As Rian van der Merwe writes, “Instead of striving for purely invisible design, or design that is ‘stunningly, beautiful visible’ but unusable, our aim should be to balance the decisions we make and the aesthetic we choose to arrive at a state of appropriate visibility.”

Steve Jobs famously defined design as a field concerned with not just with what something looks like and feels like, but how it works. The word design holds in itself different meanings for different people and different contexts, but if we try to define all of it the result would still be split into the two big areas that Jobs has highlighted: the realm of the function and the realm of the form. Both, the inventor and the decorator are designers in their own way, and the different responsibilities of their labor come together in the same product, elevating it and making it work in different ways.

When we interact with products for the first time, or with products we seldom use, we have to initially figure out how to operate them, to learn how they work. Good design makes this initial interaction straightforward by guiding us along using a set of familiar cues or techniques that make use of natural behavior. This process of lightening the initial cognitive load is what we call “invisible design”. It is design that hides the set of interactions we need to go through in order to use the product by making them so simple and straightforward that we find ourselves gliding along. Invisible design prevents us from expending needless mental energies in order to figure out what to do next by making the next action obvious and natural.

When design isn’t very good, we end up in a confused state, having to do much work to try and figure out what to do next. Design that should have been invisible, is now a very much visible wall blocking our progress. Vitaly Friedman has put it well: “Some things are so well designed that we don’t notice them any more. Our experience of them is invisible; almost beyond form and function … unless they break.” This isn’t visible design, however, merely bad design. Visible design is that other side of design which is concerned with the look and the feel, and which works with invisible design elements, not against them.

When we are busy figuring out how to use the product or performing a mentally intensive action, invisible design is our aid. But when we arrive at a moment of pause, visible design takes over. Visible design is the sort of design that we can appreciate and enjoy during moments of pause or rest. Our mind, released from the conscious interaction with the product is for the moment free and able to enjoy the subtleties and nuances of well crafted form. The empty space is filled with the light of beauty, enriching and elevating our brief moment of interaction with the object at hand.

One area of design deals with managing our interaction with the product, the other deals with managing our mood in a moment of rest. The highest level of the former is to become invisible, to make the interaction so transparent that the user feels like they knew what to do all along. The highest level of the latter is to make the moment of pause a pleasure for the user, to delight them and lift their emotional state by means of beautiful visual treatments and style. It is not a question of whether design as a whole should be visible or not, but of which parts and in what context.

Visible and invisible design oftentimes intersect. In those cases the design elements involved can either work well together, one may impair the other, or both may intersect in such a way as to do damage to each other. For example: if you are using whitespace to focus your users’ attention on certain elements on your page, or to provide some sense of hierarchy between those elements, filling this space with decorations will destroy the purpose of that whitespace. A more subtle example: if you are using variable levels of contrast between the elements on your page to guide the user’s eye, styling those elements will almost certainly have an effect on those contrast levels, and if the changes are not careful the initial balance that helps pull the user’s attention towards certain elements and away from others may be lost.

Additionally, since the goals of visible and invisible design are different, implementing both in the same element can cause tension – i.e. the point of visible design is to delight the user with beautiful visuals, which require a certain amount of time to appreciate, while the goal of invisible design is to guide the user along, to help them accomplish a certain action, which aims to save time. For example: do you use that navigation bar to find the content you’re looking for, or do you pause to admire its style? It’s not necessarily a question of picking one or the other since use cases will vary, sometimes during a single interaction, but of understanding the intent of each so that their function can be better realized – i.e. avoiding excessive style on elements in the wrong context.

Whenever both sides, the visible and the invisible, intersect, their integration should be careful and thought out so as to ensure the final product works well together as a unified whole. In other words: styling the form should not have a negative affect on the underlying function.

So how do we decide what should be styled, how, and to what extent? The what is decided based on your interaction with the design element. Are you likely to see it during a moment of rest, and will styling it in any way impair its function? How it is styled will largely be governed by the chosen aesthetic for the project, which is probably dictated by a brand style guide, or if no guide exists by the sort of character that the designer wants to give their product. This is up to the designer or their project objectives.

The extent to which an element should be styled is governed by the user’s capacity to consume beauty in the given moment, which I have covered here. To summarize: the designer should look at the circumstances of the interaction – is it in the context of work or pleasure – and estimate the length of the interaction – will it be just a couple of seconds, several hours, or even many days. Short interactions in the context of work limit our capacity to enjoy beauty, so we should not expend our creative energies on complicated visual treatments. On the other hand, long interactions in the context of pleasure give us the opportunity to delight the user with beautiful visuals. Everything else falls in-between, though the two broad parameters give us some idea of which direction to lean towards.

One other thing to note is that this is never a 50/50 split, by which I mean that some types of products will skew naturally towards allowing for greater visible design, while others will benefit from focusing on the invisible. Web design is oftentimes compared to architecture, but the two are quite different in this regard. Architecture is all around us, in times of work and in times of play. It shapes the world we live in, almost every moment of our daily lives. As such, it benefits greatly from visible design, from using visuals to have a positive effect on our mood.1

Navigating the world of the Web on the other hand is a fairly cognitively intensive task. Every website has their own navigation bar, with sites constantly inventing and re-inventing many of their common design elements. Unlike a beautiful house in which you want to live in, this is more like a place of transit where you are constantly looking for directions to your destination, like searching for your departure gate in an airport. This makes the invisible part more important than the visible. Visitors tend to be impatient, so you should help them along, get them to the content they want to see.

Ultimately, there is always a combination of both and the same principles apply to all. There is a time and context for visible design and time for invisible. Good design is to be able to pick the right amount of either and integrate them flawlessly into a working whole.

  1. With exceptions like transport/transitory architecture of train stations, airports and the like, which is focused on invisible design by helping people get to their destination.
August 2012