Imperfect, organic design is the next step
The current obsession over Pixel Perfect products. And how ‘imperfections’ can make our designs more human.
Long ago, there lived a priest who was in charge of a quaint, lush garden. The priest loved his garden very much and tended carefully to its shrubs, trees & colorful flowers. Next to the garden was an old Buddhist temple where an equally old Zen Master lived.
One day, the priest was expecting some special guests. So he got up early and, with an added meticulousness, trimmed the shrubs, pulled out the weeds, watered the flowers and even carefully arranged all the dry n’ fallen leaves. The Zen Master was sitting idly by watching all this action. When the priest was done, he stood back admiring his own work. “Isn’t it so perfect!”, he said. “Yes”, commented the Master, “but still.. something is missing. Help me get up and I’ll put it right for you.”
The priest helped him get up rather hesitatingly. The Master walked slowly and deliberately towards the tree at the garden’s center. He grabbed the tree-trunk and shook it. Dry and not-so-dry leaves, mature and not-so-mature flowers fell down haphazardly all over the garden. “There!”, said the Master, “that’s what it was missing”.
Look around (albeit digitally) and you’ll realize we are seeking Pixel Perfection in most of our websites & mobile apps. Vectors have weeded out those bitmappy images. We’ve trimmed the slow-loading Flash shrubs, watered the CSS/JS flowers and carefully arranged the HTML tree leaves.
Look at any well known website or app. Or look at Dribbble. Not a pixel and not a motion out of place. We’re all tending our perfect UI gardens.
How did we get here?
The Form <> Function Pendulum
Over time, design approaches seem to swing on the Form-Function Pendulum (at least for web/apps; but this appears to be true in other visual disciplines too — such as fashion, architecture et al).
In the first decade of consumer internet, websites were crafted by programmers and focussed mostly on Function : on getting things done, on presenting the information, on simple hyperlinks.
Then slowly — especially with the advent of flash, slightly better internet speeds and an enthusiastic but nascent digital design discipline — Form took over after 2005. Thus we got those super-heavy, skeuomorphic websites and apps.
In the last few years, the pendulum has swung back to Function. Mostly in a good way. This swing occurred because of following reasons:
- The developing countries consumer base, especially on mobile, is huge. But the slow/unreliable internet connection there has made everyone focus on speed.
- Responsive Design approaches made us adopt this minimal, fast & functional aesthetic from mobile to web as well.
- Living Design Systems are now powering a unified experience across all devices. More n’ more visual design is rendered by code now; and not via images.
We’ve all become the same
What has also happened in the last few years is:
- Front-end Frameworks like Bootstrap and Website/App builders such as WordPress have templatized the user experience. The templates themselves are becoming better and precisely rendered.
- Precision Design tools — especially Sketch and Illustrator — are letting digital designers define and handover their output precisely. And most tools deal in pixels.
- Data-driven Design which is definitely a good thing. But (maybe) all that data converges towards finding similar behavior and design patterns. Especially when that data comes from a small number of apps — WhatsApp, Messenger, Facebook, Instagram, Snapchat, Gmail, Amazon — which are used by a billion users. And other apps are either imitating them or piggybacking on their insights.
In effect, this imitation /piggybacking of a few brands and usage of precision tools + standardized frameworks has fuelled the perfectly rendered, data-driven design obsession everywhere. So much so that most designs are starting to look very perfect, very functional and sadly, very similar to each other.
Even logos, supposedly the most visual and unique representation of any brand, are getting uniform.
Why o’ why!? Is there no place for quirky, noisy, glitchy imperfections in our designs any more? Does every brand have only a perfect story to tell?
This is especially strange considering that Code — the other half of Design that makes up a Product and usually stays in background for the end user — Code never seeks perfection and is in a constant state of iteration. Coders are also generally not afraid of sharing their incomplete, imperfect code openly (simply look at Github, Codeshare, Gitlab, Codepen etc).
The case for Imperfections in UI Design
Imperfections are more natural, more human and thus more relatable. A movie-character with a scar on its face and shy in its manner is more relatable than a symmetric-faced, smooth-skinned character. A hero bouncing back from criminal life is much more compelling than a do-gooder one. And don’t we all root for the protagonist with fault in her stars? Don’t we like grey-shaded Batman more than the perfect Superman? What’s true for stories is true for design as well.
In real life too, we tend to remember people by their imperfections. Well, no one’s proud of remembering people like this; but we indeed do it. That acquaintance with a mole. The uncle with a war-wound. That co-traveller you met who had a stammer. The neighbor with a weird walking style. You get the point. If only brands and designs started taking note.
Imperfections make a design more sticky. Here’s a visual example.
As we can see in this 3D Monkey progression , once a certain level of Functional Perfection is achieved in our design, we start adding details to it. The first-order details are simple ones (like textures) which raise the level of design above simply functional, plasticky rendering.
The second-order details are made of imperfections — grizzly hair, scary scars and angry expression. It’s these imperfections which raise the level of that rendering from a 3D Monkey to Koba — the villain of Dawn of the Planet of the Apes — such a sticky, memorable design.
We’re at the middle, textured 3D-monkey level in the current state of UI design. The first swing of design towards Function in the early internet days was concerned simply with getting things done (Level 1).
The current swing towards Functional Design has incorporated a few first-order details (Level 2) — mostly being achieved via beautiful fonts, perfect grids and scalable icons / illustrations. It is perfect but not natural, logical but lacks emotion, beautiful but not memorable.
Only when we add the natural, quirky imperfections and let some noise seep through, we’d be able to reach Level 3 — the Koba Level.
‘Organically Imperfect’ is the gradual progression from ‘Beautifully Perfect’. Once — beautiful, functional, logical — is achieved, approaches in any maturing discipline usually tend to shift towards — elegant, organic, natural. We’ve seen this progression in fields as diverse as Nutrition, Exercise, Architecture, Fashion, Furniture, Sculpting, Philosophy…the list goes on.
As the Design discipline matures, let’s at least start thinking in this direction.
How to think about imperfections while designing
As the ‘Imperfections in UI Design’ thinking itself is yet to take off, I’d prefer proposing some frameworks / models rather than a precise how-to guide. The aim is to stir discussion and debates among your team along these lines. I bet you folks would come out with many more innovative ways to implement imperfections in design.
So here’s a few models to think of relevant imperfections for your design.
Functional Components & Emotional Components
If you take stock of your component inventory (Interface Audit as Brad Frost calls it), you’ll see that most design components fall into the above two categories. A form field, a list item, a button, a dropdown are heavy on function and have less scope for inducing emotion. Introducing imperfection here could end up hampering your product’s functionality.
Whereas an illustration, an icon, a loading dialog, an image etc — though they do serve a function — also have a great potential to induce emotion in users. Try introducing imperfections in these.
Some ways could be using a hand-drawn painting (vs a perfect vector illustration). A funny loading dialog (vs ‘Loading..’, ‘Please wait..’). Real humans talking to users during onboarding rather than animated characters (cue from HQ Trivia). A micro-animation bringing out the character in an UI element (the Medium clap).
The Core and the Wrapper
During 1960s, sculptor Isamu Noguchi had the idea to wrap a perfectly-engineered electric lamp in handmade mulberry paper. In various geometric sizes. And thus the legendary Paper Lantern Lamps were born; whose craze continues to this day. The imperfect, folded and textured paper wrapper turned the cold, bright electric light into a much warmer, softer illumination. The handmade wrapper really humanized the engineered core.
In UI / Brand Design, you may ask yourself: “What wrapper best compliments and augments my core design?” The wrapper could be a texture, a skin, a physical metaphor, an enclosing outline, an animation etc.
This is the last, topmost layer you apply once your design is done. Think of the Instagram photo-filters that you apply after a picture is clicked. You add a relevant imperfection and humanize the perfect photo.
The Organic Metaphor
We visual designers make use of metaphors a lot. As John Saito argues in his Making up metaphors :
Metaphors affect how intuitive a design is. If a design is based on something real and relatable, it’s easier for people to figure it out. If a design is based on something too abstract, there’s a good chance it’ll leave people scratching their heads.
Metaphors allow us to use icons — represent attachments as clips 📎, notifications as bell 🔔, search as magnifying glass 🔍. Metaphors also allow users to gain real-world familiarity with an app — iBooks is a bookshelf. Tinder is a stack of cards. Amazon is a shopping mall with tons of shelves. Notes app is a scribble-pad.
Using micro-animations, we’ve started making the icon metaphors exhibit their natural, organic behavior. A heart ❤️ beats when clicked. A clap 👏 claps. The alarm clock ⏰ buzzes. However in apps/websites as a whole, we’re increasingly flattening out the design thus completely eliminating the metaphor.
I’m nowhere arguing to bring back skeuomorphism-level, resource-intensive details. But how about adding just enough details to not kill the metaphor? iBooks certainly can choose to be brown and not white. Or the wooden plank holding the books may look just enough wooden. The books could even slant backward a little.
The real-world, organic imperfections of the chosen metaphor can give us designers so much material to work with. Instead, most of us have chosen to work with just fonts, icons, grids and a few illustrations.
With the onset of SVG, which is responsive, performant and supported by most browsers (this talk by Sarah Drasner ), we have the toolset to grow some shrubs on this flatland. Let’s do it.
The Imperfect Brand
If the brand you’re designing for is old, it has a treasure trove of history and well-known anecdotes (including mistakes) to draw from. Why not make use of those anecdotes during onboarding to connect with the user? How about laughing at your own past mistakes?
It could even be something buggy you shipped in the previous versions. Medium Release Notes keep doing this brilliantly.
Sometimes, even if the brand is new, it has a distinct personality. That Dollar Shave Club launch video, anyone? Or the Old Spice commercial. Or the TunnelBear bear. Or the Hipmunk chipmunk. If your brand has a unique personality, make use of its quirks, its stammers and its manners to humanize your design. Loading animation is an especially good place to do this.
Closing Thoughts
As a general heuristic, think of imperfections as noise and not as error. Noise adds character to the design without hampering its function; while error can completely kill it. It’s a thought-through glitch and not buggy incompleteness. Think of imperfections as a wrapper and not the core. Think of it as a charming quirk and not the most visible behavior.
I believe that ‘Imperfections’, if used wisely, can humanize our designs, showcase the less-known quirks of our brands and get an emotional response from our users. Imperfections may even end up strengthening the brand-user bond. Just like we feel closer to people who open up their imperfections to us.
What say!? Let’s make this perfect digital world just a lil’ bit imperfect…
“Forget your perfect offering / There’s a crack in everything / That’s how the light gets in.” — Leonard Cohen
About the Author
Hello! I currently head design at Juspay. Here, I led the design of BHIM app which saw transactions worth INR 4.01 billion in Feb ’18. I’ve also worked on designing UPI Common Library. This library is currently installed on ~100 million devices; which would become 300 million with WhatsApp inclusion soon. Various other Juspay products process 1.5 million+ transactions every single day.
