Rabbis, Tropes, and Visually Consistent Designs

Maybe you’ve heard this one?

A rabbi, a priest, and a web designer walk into a bar…

It’s unlikely you have, because I just made it up. I don’t even have a punch line for it.

However, despite its faults, we can tell a lot from that one line. For example, we know each of the three people will say or do one thing. We know the rabbi will go first, the priest second, and the web designer last. Finally, we know the rabbi and priest will be the straight folks, while the web designer will do the funny thing.

We know all this because this type of joke has a well-understood pattern to it. Many jokes just like it have come before and they all fit the same basic pattern.

Take the classic Knock-Knock joke. We learn this type of joke at an early age, as we take turns sharing our various play on words and timing.

Person 1: Knock Knock
Person 2: Who’s there?
Person 1: Interrupting Cow
Person 2: Interrupting Cow …
Person 1: [Interrupting] MOO!

(Trust me: It’s funnier when a four-year-old does it.)

Knock-knock jokes have a different pattern from other types of jokes. Yet all knock-knock jokes have the same pattern. Once the joke teller says Knock Knock, we know what we’re in for.

This is what’s known in the literary world as a trope. Tropes are literary patterns that writers employ to take advantage of their audience’s expectations. Using a trope, the writer saves setup time, letting them float through familiar territory.

Jokes: Setups and Punches

Most jokes have two parts: a setup and a punch. The setup signals the writer’s chosen trope. Take this joke for instance:

Setup: A web designer walks into a shop with a frog on his shoulder. The shopkeeper asks, “Where did you find that?”

Punch: The frog answers, “In Silicon Valley. They’re everywhere.”

(Ok, I didn’t say it was a good joke.)

Let’s dissect it. (The joke, not the frog.) The setup establishes an unusual situation (because people rarely walk around with frogs on their shoulders), with a reasonable response (asking about the frog). That opens the door for the punch line.

Tropes, Consistency, and Meeting Expectations

In design, we often talk about making our interfaces consistent. Yet what are we really talking about?

The common misconception is we’re looking to match up the look and feel of other parts of our design, or other designs. However, what truly makes a design consistent is when we meet our users’ expectations.

What makes a joke work (or a romance novel or a murder thriller movie) is our expectations from the writer’s chosen tropes. It takes advantage of our experiences, minimizing the setup necessary.

Visual Design Systems

There are real parallels between a writer’s tropes and a visual designer’s systems. Like a writer’s tropes, systems are the tools visual designers use to fill out their designs. The grid system, the color system, and the typographic system are all essential to good design.

The grid system describes the placement of elements on the page or screen. It talks to the relationship of those elements, describing what’s aligned and where they go. Navigation, data, and actions are all part of the grid system.

The color system outlines the palette. It describes which colors are assigned to which purposes. The designer assigns distinct colors to represent different states: such as active versus inactive options or newly updated versus older information.

The typographic system, like the grid and color systems, describes how the designer will use type throughout the design. The fonts, size, and weight of the type are all part of the system. Bigger, heavier fonts serve as headings, while smaller, lighter text could be part of secondary actions.

Internal Consistency: Setups and Punches

For the visual design systems to work, the designer has to take advantage of setups and punches, just like in jokes. Each system needs to establish the pattern to set the users’ expectations.

Individually, the designer needs to create the setups for each system, through a deliberate process of design. They determine the exact positions, the specific colors, and the selected type for each element. Through a process of repetition, the user becomes familiar with the designer’s choices and their expectations are set.

The punches happen when the user encounters something new. Maybe they’re accessing a screen they’ve never seen before, like managing their account or dealing with an error condition. In these cases, the setup from their earlier experience helps them know what to expect. The setup and punch becomes the driver of internal consistency.

External Consistency: Bring In the Tropes

Relying on setups and punches alone is hard work for the designer. They have to be built up slowly, giving the user time to learn each nuance of the evolving language. While this can work when learning the design of a new game, for example, it’s less practical when introducing a user to a productivity tool or a new web site. In these cases, the visual designer can rely on the common tropes from other designs.

In its simplest form, these tropes are reutilized design components, such as the combination of username, password, forgot password, new account, and login fields and buttons. Because the user has witnessed these many times before, there’s little advantage for the designer to introduce something new here. The account-login trope does all the heavy lifting.

Tropes only work when the designer can count on their users having previous exposure to the tropes. Using the grid, colors, and typography from another design will work best if the users have significant previous experience with designs like that. If the designer isn’t clear about what experience their users have, it’s risky to rely on the trope to provide external consistency.

Mix and Match: Consistency Where It Works

The best designs are a combination of external and internal consistency. The designer takes advantages of tropes to deliver a familiar environment, while introducing the user to new elements with proper setups and punches. To make this work, designers need to know their users, the tropes that those users have already been exposed to, and how to make their design systems fill in the gaps.