Empathetic Design is Honest Design

Content first. User experience design. These terms are tossed around daily by eager commentators.

The new trend of “flat design” has been founded on the premise that realistic elements on a web page diminish the experience for the user by presenting a dishonest representation of what the page presents: digital content. Or, as opined by the good folks at Layer Vault who take distinction for naming the trend,

designing honestly means recognizing that things you can do with screens and input devices can’t be done with physical objects — more importantly that we shouldn’t try copying them.

This distinction is well-meant, but fallacious. In attempting to justify their decision to break away from the trends of unnecessary realism and skeuomorphism, the writer asserts that realistic design is dishonest. It is not. When done incorrectly, realistic design is bad design. When done correctly, it translates lines of code into a rich experience for the user, one where actions are intuitive, interfaces are beautiful and interactive, and content communicates on a level unobtainable by mere text. When done correctly, it is honest.

Good design satisfies an itch

To call something dishonest is to imply that it is insincere. The designers at Layer Vault allege that the visuals we design for our web content should be made to be taken literally; those elements whose digital manifestations don’t perfectly equate to their real life counterparts should be abandoned.

Indeed, leather stitching, coffee stains, and other ornamental elements are unnecessary, tacky, and do not help a user to digest a site or app’s content in any meaningful way. These details are often added as an after thought without any real purpose or sincerity. However, just because an element has realistic attributes does not mean that it is insincere. Gradients, bevels, inset shadows, and drop shadows suggest that elements on the screen are 3D when they are not, but are they dishonest? No.

Good designers often add these effects with purpose, sometimes to attract extra attention to an element or to suggest that it is actionable, or to soften the interface visually to make it more pleasing to the eye. Layer Vault says that these effects feel “wrong”, but one tweet to the contrary particularly caught my eye:

This tweet sums it up: there is something about a clickable interface that feels right. Music execs might call it the “X Factor”. Broadway producers know “it” when they see “it”. There is something fundamentally pleasing about an interface that offers depth; something that makes us want to interact with it. It is the soul of the design.

All those deceitful buttons…

From its inception, web design has involved representing digital content as something that it is not. The humble hyperlink offers a rudimentary example. This element is at the core of the internet, linking one group of content to another and thereby providing the mechanism by which all web browsing relies. To call attention to these cardinal tags, Tim Berners-Lee, the creator of the web, styled them differently from their surrounding text. This was a conscious decision to style one element differently in order to enhance the user experience, and while he did not have a team of UX experts and visual designers on hand at the time, that decision has influenced the way we view all web content since.

Granted, this is not the type of application that the Layer Vault writers were discussing in their article. Hyperlinks never existed prior to the advent of the web, and therefore their distinctive styling is not a reflection of a designer attempting to recreate a real-world object in a digital form. The evolution of hyperlinks into buttons, though, is one facet of realistic design that “flat design” attacks.

But web buttons have a purpose. Web buttons are sincere.

Not all hyperlinks are created equal. Some represent links to content, such as those in-lined within this article. Others represent primary actions, such as a “search” button or “submit” button. Still others are functional, such as arrows that imply hidden content on accordion menus or dropdowns. By styling these differently, we are able to create visual cues that communicate meaning to our users. Remember, a picture is worth a thousand words. The original Google interface may not have been the most aesthetically pleasing, but there was no doubt which links were actionable and which linked to other pages.

image of Google Beta from 1995
Screenshot of the original Google homepage via Wikipedia

To suggest that the styling of web buttons using gradients or dropshadows is dishonest shows a failure to understand why web buttons exist, and demonstrates a substantial lack of faith in modern web users.

To address the first point, web buttons were conceptualized and styled to intentionally resemble buttons instead of text in order to represent a link that lead to an action instead of a document. In this case, utilizing a design metaphor that users could relate to drastically improved the usability of the product. It made the design useful.

This is where the line between good design and bad design is drawn. No matter what an element looks like, if it does not communicate something useful to the user, then it does not belong or its form is wrong. If a realistic element makes the interface more intuitive, then it is not dishonest, as it serves the meaning it conveys. If, however, the element is merely superficial, then the designer should use it with careful discretion. That doesn’t mean they should never use it, though, which leads me to my next point…

People like playing with beautiful things

Zealots of the “flat design” trend love to espouse the 10 principles of design, by Dieter Rams. The most telling of these is his definition of useful design:

A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic. Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it.

There it is, a product has to look good if we expect people to use it.

Returning to the tweet mentioned above, there is something satisfying about a tangible interface. Sure, icons and text can convey meaning just as well, but there is a psychological stimulus to interact with something that looks and feels beautiful.

Minimal design can be beautiful. Overly realistic design can be cluttered and tacky. But minimal design can also be cold, stark, and boring. It leaves the interface more vulnerable, and if it lacks soul, the user will be left feeling wanting.

Don’t be afraid to inject realistic design techniques into your work, because these techniques, when used appropriately, breathe life into an interface. Have faith in your users to accept and understand your visual metaphors, when used correctly. You’ll never hear someone say, “hey, buddy, your button looks too realistic. I felt so put off that it turned out to be just a digital screen.”

However, if your interface is so flat that it fails to communicate, you may hear feedback such as, “where do I click to find <x>?” or “how do I go to the next page?”. Those sorts of comments are indicative of a poor user experience. The Layer Vault folks fell victim to these criticisms when users pointed out that the first iteration of the Designer News interface failed to communicate how a user should navigate, find content, or filter posts. They have since updated the interface to address these issues, and the site navigation is much more intuitive as a result.

A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic.

— Dieter Rams

That’s not to say that this design trend does not have its place. There are good reasons for web designers to adopt a more flat aesthetic. With users increasingly using mobile devices to view websites, they will be more put-off by sites made sluggish by an over-reliance on images or visual effects. Furthermore, minimal design really does look beautiful. The Layer Vault homepage is one of many examples of minimal design done right – it is sleek, warm, and modern.

My point is not that every design needs gradients, bevels, and dropshadows to be considered good design. Good designers use these techniques selectively and sparingly to guide the user’s eye and to make the interface more gratifying.

Screenshot of the Layervault homepage
Layer Vault using tasteful shadows behind the drawn elements on their hero image.

So to wrap it up…

Skeuomorphic design is a trend on its way out. Flat design is up-and-coming. Good design is timeless.

As the internet continues to evolve, users will hold a higher expectation for performance and aesthetics. They will continue to get more familiar with digital interfaces, adopting new gestures and cues, but they will also continue to pine for the indescribable sensation of using something that is beautiful. It draws the senses.

As designers, we continue to learn the importance of understanding what our users want, need, and expect. If we design to that triad, and not to our own fancy or the whim of trends, the design we produce will be honest. It may be flat. It may lift off the page with subtle gradients and shadows. It may include astounding CSS animations and transitions, or it may be stripped down to its core content. But it will be good design.

Related

The empathy paradox

Empathy is so hot right now. Whether you’re a user experience professional, visual designer, marketer, developer, empathy is the new skill to have. Unfortunately, like most buzz words that become jargon, the value of the word is being lost in the noise. What really is empathy? The first definition that may likely come to mind is […]

What do top UI designers do differently?

Yesterday, I was asked to answer a question on Quora: What do the top 1% of user interface designers do differently than the other 99%? I think the original poster was assuming that the top eschelon of UI designers use different tools or techniques in their practice. However, I see expert UI design differently. Those designers […]