Imitation Is the Sincerest Form of Clarity

Consistency, Clarity, and "Copying" Product Design

"Picasso had a saying — 'good artists copy; great artists steal' — and we have always been shameless about stealing great ideas." 
—Steve Jobs, on Apple’s products

Tuesday morning of last week, I was drinking coffee, when I got a text message from a good friend and former colleague. He’s a very accomplished product designer and executive leader of creative teams. This designer-friend told me how impressed he was with Framer as a tool for making great-looking websites.

But it was the very next message in the thread that woke me up before the caffeine was in full effect: 

Framer’s interface is soooo similar to figma. Easy to use. 

So instead of innovating with original design thinking, they just copied Figma?  How lame, right?!  They must not be user-centric enough?  They must not be committed to great design? And this friend of mine must have been too far from actual design work for too long, to still care about genuine creativity? 

All of those thoughts appear to make sense on the surface, and I probably would have agreed with some of them earlier in my career. But at this point, I think they’re all wrong. Each of them is all wrong.

“De-sign” Is How It Works

The Internet mostly agrees that Steve Jobs was the first to publicly proclaim that “Design is how it works”.  Many have repeated this statement since.  It’s exactly right, but it’s a bit vague.  I think there’s more concrete implications hiding in the term “design” itself. 

Bear with me, as I approach the chalkboard for just a few seconds…

Design is a word composed of the root word “sign” and a prefix of “de-” (meaning “off” or “from”). In at least some sense, designing a product is the act of removing the “signs” from it, without rendering it harder to use. Decluttering is getting rid of the clutter. Designing is getting rid of the signs. 

We’re neither the first to notice this, nor to examine it — but doing so will help us get where we’re headed. 

The classic illustration of removing signs via design is the door at the main entrance of a large building, which Don Norman discusses in glorious detail in his classic book, The Design of Everyday Things. Do you push, pull, slide, or spin the door?  A poorly designed door will typically try to tell you, instead of show you.  

And how so? If you guessed with a sign, then you are correct! Typically the literal sign on the door will say either “PUSH” or “PULL” — depending on which side of the door you’re looking at. We didn’t think you’d be able to tell how to use the door, so we hung this sign for you to read.

But a well designed door needs no such signs.  The door itself makes it obvious how to open it.  It shows, not tells.  If the door needs a sign, then it was not well “de-signed”. 

There's much more that matters on the topic of product design (and many folks much more qualified than me to explain it all), but I’ve found this one thing is pretty fundamental. 

Design is how it works, and clarity is foundational to well-working design. 

Consistency Is Key to Clarity

But a product can’t offer clarity to its user, unless it is consistent.  Inconsistency is inherently unclear.  While it’s more of an annoyance than a true dysfunction, this is the fundamental design flaw of three-way light switches. 

Three-way switches are installed when two separate wall switches in a house are wired to control a single light — a separate switch on each end of a hallway, for example.  You don’t want to have to walk down to the other end of the hallway to turn off the hall light, and then walk back up the hallway in the dark to go to bed. So a switch on both ends of the hallway is useful.  The issue is the inconsistency these switches introduce to the experience of using them.  

With single-purpose switches (properly wired), “up” is on and “down” is off.  This is consistency, and it creates clarity for anyone who is feeling along the wall to find a light switch in the dark.  

Every time: find switch, flip it up, get light. 

Clarity!

But with a three-way switch, that clarity is lost: find switch, flip it up or down (but you can’t know which, because it depends on the state of the other switch, which you can’t see due to the darkness you’re trying to eliminate), get light (maybe). 

In abandoning consistency, the three-way switch has lost clarity. Without clarity, we need to observe and reason about the current state of the switches (i.e. we need to “read a sign”) — which we sadly can’t do until we turn the lights on.

Two Types of Consistency

When we design products, there are at least two types of consistency we can offer to users — internal and external consistency. Both are interrelated and very valuable, but the latter offers pivotal insight into Framer’s pragmatic approach to design.

Internal Consistency

In the light-switch example, internal consistency describes how all the switches behave within the same house. If “up” is on, no matter which switch in the house you’re using, then the switches in the house have internal consistency. In digital products, we might consider the shape and styling of buttons. 

A digital product might create internal consistency for buttons by always styling them based on these guidelines: 

• Buttons that move the user forward are always blue rectangles

• Buttons that take the user back are always styled as gray text links

• Buttons that cancel in-progress changes, delete saved data, or are otherwise destructive are always red, rounded rectangles

This internal consistency would allow a user to settle into the product with a quick and clear understanding of how to use it.  It may not be pretty, but it will help avoid frustrating confusions — some of which could cause serious problems, like accidentally deleting important data. 

In cases where a product belongs to a larger family of products, internal consistency should usually extend out across the entire brand or company portfolio. In Google’s productivity suite, for example, the toolbars for Sheets, Slides, and Docs were wisely designed to be as consistent as possible across that family of products. And other forms of internal consistency extend beyond that suite, to Google Tasks, Google Analytics, etc. 

This is why design systems become very valuable tools — as a product, team, and company grow. By offering each team and individual team member a shared library of components and styles, teams can easily create internally consistent user experiences, without re-implementing UI elements or needing a meeting to discuss every new bit of UI that’s added to the product. 

Internal consistency is often the focus of discussions around consistency in design. But it’s not the only form of consistency that matters. 

External Consistency

It’s not enough to be internally consistent.  If I ask an electrician to install new light switches across my entire home and find that “up” is the off position for every switch — that is indeed internally consistent. But this would make for a consistently bad user experience (and probably violate local building codes), because internal consistency is not nearly enough. 

Users bring an overwhelming amount of expectations to any product. One expectation we all bring to a modern building is this: when a light switch is up, that switch is on. If we need to remember to invert that expectation for some particular home we enter, that’s externally inconsistent, no matter how internally consistent it may be. 

Some aspects of some products are novel, and users bring fewer expectations to those. But most aspects of most products are fundamentally similar to other popular products — sometimes countless other products. 

Why do we English speakers all expect the cursor to move from left to right as we type into a text box?  It could work differently, where the cursor stays on the right side as we type and new characters, which push the rest of the text to the left. But that would not be externally consistent.  Virtually every text box we’ve ever typed in works in the same fundamental way, so we bring this as a deep (even if unconscious) expectation, to every new product we use. 

But what if being externally consistent is “worse” than violating the expectations a user will bring to our product?  In that case, we’ve got a tradeoff decision to make. Maybe our product is a tool for professionals in a certain industry, who use the tool 6 hours per day. In that case, it may indeed be worth burdening our users with external inconsistency, because our users will gladly spend a day or two re-learning their expectations — in order to save 2 hours per day, thanks to our innovative design. If instead our product is a wedding-registry platform, where the typical user will only use the product once, we probably can’t justify deviating from the expectations they bring to our product, in the name of “innovation”. 

Our product’s internal consistency must be anchored in external consistency.  

Clarity depends on both. 

Let’s Just “Copy” Figma

So, Framer’s design decision to offer UI layouts and interaction patterns which mimic Figma is an example of excellent design. It’s not an act of laziness, lack of creativity, or optimizing efficiency of the design team at the expense of the user. 

It’s a kind service to Framer’s users. 

Everyone who has previously used Figma will bring expectations to Framer’s product, for how layout and styling should work in a design tool. These pre-existing expectations are informed by their experience using Figma. There are millions of such people, many of whom work hours per day inside Figma. And they don’t want to visit a house where the light switches are all upside-down!

Hopefully now the text message I received from my designer-friend makes perfect sense: 

Framer’s interface is soooo similar to figma. Easy to use. 

Design is how it works, and clarity is foundational to a well-working design. Consistency is key to clarity, and external consistency meets users where they’re at.  If we get it right, we don’t need to hang signs all over our products. Users won’t think about any of these principles, but they’ll know the product is easy to use.

Have you ever crammed “innovation” into some aspect of your product, where users would have been better served by imitation? I have, but hopefully I’ve learned my lesson and won’t do it again.

Sometimes, imitation is the sincerest form of clarity. 

Sometimes, let’s just “copy”.