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
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’
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
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
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
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.
Share Your Thoughts
Where have you taken your visual design influences from? We’d love
to hear your thoughts. Share them at the UIE Brain Sparks blog