Consistency in UI Design:

Creativity Without Confusion

 Copyright © 2015 by UXPin Inc.

All rights reserved. No part of this publication text may be uploaded

or posted online without the prior written permission of the publisher.

For permission requests, write to the publisher, addressed “Attention:

Permissions Request,” to [email protected].
 Index
0. Introduction 6

1. A Consistent Definition for Consistency 8

Why Consistency Matters for UI Design  9
External Consistency 12
Internal Consistency 18
Takeaway 23

2. Be Consistent, Not Boring 24

When to be Inconsistent 25
Inconsistency With a Purpose 28
Inconsistency That Requires Improvement 34
Takeaway 37
Jerry Cao is a content strategist at UXPin where he gets to put
his overly active imagination to paper every day. In a past life, he
developed content strategies for clients at Brafton and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror films, and
expanding his knowledge of random facts.
Follow me on Twitter

Co-founder and head of product, Kamil previously worked as a

UX/UI Designer at Grupa Nokaut. He studied software engineering
in university, but design and psychology have always been his
greatest passions. Follow me on Twitter @ziebak

Krzysztof is a graphic designer at UXPin. He is also a typogra-

phy enthusiast and a founder of the global Typeseeing Project.
Since 2014, he has been an instructor at the Academy of Fine
Arts in Gdansk, where he teaches his students about design
theory and design software. In his free time, he enjoys playing and
inventing board games. Follow me on Behance

With a passion for writing and an interest in everything anything

related to design or technology, Matt Ellis found freelance writing
best suited his skills and allowed him to be paid for his curiosity.
Having worked with various design and tech companies in the
past, he feels quite at home at UXPin as the go-to writer, research-
er, and editor. When he’s not writing, Matt loves to travel, another
byproduct of curiosity.
 Introduction

Consistency creates familiarity, and familiar interfaces are naturally

more usable.

Imagine the frustration of finding the perfect car, only to discover

that the accelerator is on the right and the brake on the left. Or, in
a digital context, if you’re breezing through a web form and come
across a “Delete” button highlighted in green.

While design inconsistencies are usually never that dramatic, even

seemingly insignificant deviations create friction for users. If the
search box appears on the top right on the homepage, but appears
on the top left for other pages, then the user must expend unnec-
essary energy relearning the interface on every page.

Consistency, however, does not equal uniformity. Design shouldn’t

just be a game of templates, but should reflect the usability advan-
tages of existing patterns. Understand why certain interaction de-
sign patterns are effective, then use them as a foundation for your
 Consistency in UI Design: Creativity Without Confusion 7

creativity. Over time, you might even develop even better patterns.

Our goal with this book is to help you strike the right balance
between consistency and creativity. To help illustrate our points,
we’ve analyzed visual best practices from companies like Reddit,
Jawbone, Dolce & Gabbana, and Amazon. To keep you on the right
track, we’ll also explore examples of what not to do.

We’ve written the book to be as practical as possible. If you find it

helpful, feel free to share with anyone else who might enjoy it!

For the love of consistent design,

Jerry Cao
co-written by Kamil Zieba, Krzysiek Stryjewski, and Matt Ellis
 A Consistent Definition
for Consistency
What Is It and Why Is It Important?

Consistency is essential to reducing the cognitive load of your inter-

face. When your design is consistent, every interaction feels smooth
and frictionless. When it is too inconsistent, the user must expend
unnecessary effort.

But consistency in interaction design is a little more specific than

simply doing the same things over and over – there are particular
kinds of consistency, and particular fields in which consistency is
more important than others.

On top of that, doing the same things over and over will yield boring,
uniform designs. You need to know when to break the consistency
without leading to design chaos. The key, as is most often the case
in design, is balance.
 Consistency in UI Design: Creativity Without Confusion 9

Source: Species in Pieces via awwwards.com

In this chapter, we’ll go into details about what consistency means

for interaction design, why it’s important, and describe the two
types of consistency and how they should influence your design.

Too much consistency creates boredom.

Not enough leads to chaos. Balance is the key.

Why Consistency Matters for UI Design

Interaction design relies on the learnability of your system.

To put it simply, when a UI works in a consistent manner, it becomes

predictable (in a good way), which means users can understand
how to use certain functions intuitively and without instruction.
This makes the product easier to use, which is a stepping stone to
making it more desirable. Conversely, when a UI is inconsistent, it
hinders learnability, provoking frustration in the user and leading
to a bad experience.
 Consistency in UI Design: Creativity Without Confusion 10

Source: UXPin

But consistency is not limited just to your interface’s appearance

and behavior.

Your users don’t spend all their time just with your product – the
majority of their time is on other products, and all the while they
are generating ideas and expectations from these other experienc-
es. So if you’re consistent with these outside experiences, your UI’s
learnability will increase without any extra work on your part.

When in doubt, refer to the Principle of Least Astonishment. De-

lightful surprises are fine (like how Mailchimp surprises users with
humor and fun), but your core functions should not stray far from
the norm. Review doesn’t mean the same thing as Verify. Videos
shouldn’t be mistaken for images. Don’t make buttons for primary
actions appear only on hover.

In fact, if you’re still questioning the nature of consistency in dig-

ital design, Apple’s iOS Human Guidelines do a pretty good job of
summarizing standards for consistency for their apps:
 Consistency in UI Design: Creativity Without Confusion 11

Is the app consistent with iOS standards? Does it use system-pro-

vided controls, views, and icons correctly? Does it incorporate
device features in ways that users expect?

Is the app consistent within itself? Does the text use uniform ter-
minology and style? Do the same icons always mean the same
thing? Can people predict what will happen when they perform
the same action in different places? Do custom UI elements look
and behave the same throughout the app?

Within reason, is the app consistent with its earlier versions?

Have the terms and meanings remained the same? Are the fun-
damental concepts and primary functionality essentially un-
changed?”

From what we’ve discussed above, we can divide design consisten-

cy into two categories: external and internal consistency. External
refers to your UI’s consistency with other products, while internal
is its consistency within itself. Let’s take a look at the best practices
for both.
 Consistency in UI Design: Creativity Without Confusion 12

External Consistency

External consistency is not only how consistent your product is with

other similar products, it can refer to its consistency to all products
on your platform, all software in general, and even non-digital in-
teractions throughout the real world. We’ll explain why external
consistency matters, and provide a cautionary tale of what happens
if you don’t follow the guidelines.

1. Why External Consistency Matters

To sum it up, external consistency is about meeting user expec-
tations. In order to create a design that coincides with what your
user is expecting, you must first understand what ideas they are
bringing with them before they even use your site or app. This
is a concept that usability expert Jared Spool refers to as current
knowledge.

Source: “Consistent Experience Across Multiple Screen Sizes.”

Intel Free Press. Creative Commons.
 Consistency in UI Design: Creativity Without Confusion 13

Your users’ current knowledge is influenced by many external

factors, anything from the last site they used to a far-fetched
expectation from their favorite sci-fi movie. Don’t worry though
– for the most part, your users’ expectations will be reasonable.

Designing based on what your users already know is not a new

concept. This idea has been in place for years, evolving into the
common design conventions you’ll see today in just about any
app or website. The image carousel, an envelope icon represent-
ing email, clicking on the site logo to return to the homepage...
these are all referred to as UI patterns.

UI patterns are design solutions to common usability problems.

Patterns benefit everyone – users already recognize how to use
them from previous exposure, and designers don’t need to rein-
vent the wheel.

Our free ebooks Web UI Design Patterns 2014 and Mobile UI De-
sign Patterns 2014 cover the most conventional and useful pat-
terns available, but for now all we’ll say is that they’re the sim-
plest way to incorporate external consistency.

But external consistency isn’t limited just to sites or apps with

visually rich designs. For example, users of Google Docs will find
the top menu bars fairly familiar since we’ve all used Microsoft
Word before. The menu options for Word are so firmly ingrained
in frequent users of text editors, it just seems natural to see them
 Consistency in UI Design: Creativity Without Confusion 14

again. It gets to the point where we take them for granted – we

only notice when they’re not there.

Source: UXPin

External consistency can be taken a step further to apply to human

perceptions. For example, as Quora’s design director David Cole
suggests, think about how most volume controls are presented as
sliders. The slider is popular because it matches how people perceive
volume. With the exception of specialists like sound technicians,
we don’t think of it on a scale of 0 to 100, it’s purely relative to us.
We either want sound to be louder, or quieter, not to go from 30%
to 28%. The slider format became popular (and thus a standard of
external consistency) because it matches our mental models.

Source: iTunes

So after all this talk about doing what everyone else is doing,
what does that say about being different, standing out, and set-
ting yourself apart from the competition?

These are all fine things – in fact, they’re even recommended strat-
egies – but you must be smart about where and how you stand
 Consistency in UI Design: Creativity Without Confusion 15

out. Offering a new design solution that your competitors haven’t

thought of will get you far. Going against a tried-and-true conven-
tion (that’s actually useful) for the sake of being clever will only
damage your design. We’ll discuss this more in the next chapter.

2. The Perils of External Inconsistency

A word to the wise for those of you fervent nonconformists. User

expectations aren’t merely preferences, sometimes they’re habits.

Take for example, the stand signup form. We’re all aware of the
UI pattern of the asterisk in form fields. Almost every user knows
that an asterisk next to a field means that it’s required before
proceeding.

Source: OverClothing

But for a lot of signup forms, the necessary fields outnumber the
optional ones. Wouldn’t it be simpler, then, to mark the optional
fields with the asterisk?
 Consistency in UI Design: Creativity Without Confusion 16

That was the thinking Avis had a few years ago when they deviat-
ed from external consistency (as Jared Spool points out UIE.com).
You can see in this screenshot how they broke from convention.
The only way you’d know the asterisks denoted optional fields
was by reading the microcopy at the top of the form.

Never underestimate the laziness of users. When most people are

faced with a form field, they start pumping out the information
right away. The result is a design that essentially forces users to
relearn how to read a form.

You can see in the new design that they’ve resigned themselves to
using asterisks to indicate mandatory fields. It’s more externally
consistent than their previous design, but it’s still incredibly visu-
ally obstructive. Now, it’s externally consistent almost to a fault.

Source: Avis
 Consistency in UI Design: Creativity Without Confusion 17

At first glance, the strongest impression is that everything is man-

datory. The bright red asterisks instantly tells the user that a ton
of work lies ahead. If asterisks are to be used, they could instead
make them black instead of red – the meaning is retained, minus
the visual overload.

Alternatively, they could also label which fields are optional with
an “(Optional)” tag. Such a treatment removes the need for aster-
isks, and the user could still understand that a lack of “(Optional)”
implies that it’s mandatory. This design strays a bit from users
may expect, but still feels more natural than putting asterisks
next to optional fields.

It’s true that the old and new form present only a minor set-
back. But a few milliseconds of confusion increases cognitive
load, which forces the user to think. Remember as we discussed
in Interaction Design Best Practices that digital time is not human
time. When visual interactions happen in the blink of an eye,
your interface can’t hold the user back by a couple milliseconds.
 Consistency in UI Design: Creativity Without Confusion 18

Internal Consistency

While external consistency can enhance your UI design through

meeting user expectations, internal consistency is seen as more
of a requirement, and failing to meet it will most likely harm the
user experience. Internal inconsistencies are usually only applied
to distinguish differences in content or user actions (for instance,
different layouts for different forms of content).

External consistency helps you meet user expectations.

Internal consistency prevents design contradictions.

Let’s look at an example of internal consistency and review a quick

checklist.

1. A Closer Look at Internal Consistency

Consistency within your site or app covers both aesthetics and
functionality – especially when both are the same. Let’s examine
the “front page of the Internet,” Reddit.

Source: Reddit
 Consistency in UI Design: Creativity Without Confusion 19

For starters, all of Reddit’s links that lead to outside sites are in
blue and in the same big font. This repeated consistency lets users
know exactly what they can click on and what will happen when
they do. It also takes advantage of external consistency with one
of the most well-known web patterns: putting links in blue.

But Reddit’s internal consistency goes deeper. Moving your mouse

across the page, all internal links (comments, subcategories, users,
and share options) will gain an underline when the cursor hovers
over them. Thus, the user gets immediate feedback that secondary
links are clickable, while some other text is not. While subtle, this
consistent use of visuals saves time in explaining the interactions.

2. How to Check for Internal Consistency

Internal consistency is a thankless feature. Only its absence is
noticed.

For example, changing the location of a button on different pages:

a user gets used to the Sign In option being in the top right corner,
and then they can’t find it on a page where it’s in the bottom right.
Another is the interchanging of Save and Submit – both represent
two different functions. One more is certain functionalities only
being available on certain pages: if the home page utilizes a drag-
-and-drop feature, the user will expect all pages to use it.

As a general checklist, try to cover all these bases when dealing

with internal consistency:
 Consistency in UI Design: Creativity Without Confusion 20

1. Color – An obvious visual cue, keep colors consistent with their

function (i.e., green always means Accept and red Reject). A site’s
overall color scheme as well should not deviate too much from
page to page.

2. Typography – As with the Reddit example, fonts and flourishes

can all be used as visual signals, but only if used consistently.
Set apart your headlines, bodies, and secondary texts by giving
them each a distinct typography.

3. Language – For simplicity’s sake, don’t change your word selec-

tions. If you give the user a choice between Yes and No for one
task, don’t change that to Accept and Reject for another.

4. General visuals – Features like icon sets, buttons, and even

clickable links must be consistent to express their function –
using two different types of buttons will confuse the user.

5. Layout and location – A consistent layout across pages is neces-

sary for users to navigate properly. Inconsistency is acceptable
when you’re trying to call out different types of content or user
actions.

6. Interactions – While they may seem like minor details, any in-
consistencies among form elements, dialogue boxes, animations,
transitions, etc. will feel jarring. One bad interaction can ruin
all the prior delightful ones.
 Consistency in UI Design: Creativity Without Confusion 21

If you think all these details are difficult to keep track of, you’re
right.

That’s why many companies – even outside of digital design – use

style guides for internal consistency. A style guide is a formalized
document that keeps track of the company’s proper policies for
handling these details. For example, “all headlines should be 12
pt., Arial black, and bolded,” or “the company logo must always
appear in a 4cm x 4cm box in the upper left-hand corner.”

Source: Yelp

If you’d like to know more about style guides, check out Web UI
Best Practices. For quicker, more general references, check out
these other online articles:
 Consistency in UI Design: Creativity Without Confusion 22

• Creating Style Guides by Susan Robertson

• Create a Website Style Guide by Steve Fisher
• Writing an Interface Style Guide by Jina Bolton

You can also get started with a beginner’s style guide using Me-
dialoot’s free UI Style Guide template – fill out what works and
tweak the rest.

Internal consistency is a thankless feature. Only its absence is noticed.

 Consistency in UI Design: Creativity Without Confusion 23

Takeaway

It’s not so much that you’re consistent, but how and where you’re
consistent.

Remember that patterns can save a lot of time because they work
off of your users’ previous knowledge, so use them every chance
you get. If you’re entering unchartered territory, try to enlist meth-
ods that are intuitively human – understanding the mind of your
user will help across the board.

Your users are also expecting your site or app to maintain its own
internal consistency, so don’t break the rhythm of the experience.
Consider the key categories of internal consistency – color, typogra-
phy, language, general visuals, layout, and interactions – and keep
them all in line with a style guide.
 Be Consistent, Not Boring
Know the Rules So You Know When to Break Them

In the last chapter we explained the importance of consistency and

how it’s necessary for successful interaction design. Here we’re
going to tag on a little footnote: consistency is advisable most, but
not all, of the time.

Source: White Frontier Beer via awwwards

Absolute consistency is repetitive to the point of boredom. In order

to mine its benefits without putting your users to sleep, you need to
know when to break the monotony. For example, you can see above
how the light graphic background immediately draws attention to
 Consistency in UI Design: Creativity Without Confusion 25

the beer compared to the black-and-white photo backgrounds in

the other grid blocks.

In this chapter we’ll point out the circumstances around when in-
consistency can work for your designs, then show you some re-
al-world examples.

When to be Inconsistent

Don’t get us wrong: we stand by the significance of consistency.

What we’re saying is that, when applying consistency in interaction
design, it’s important to break up the tedium occasionally. There are
specific times to do this, and don’t misconstrue this as a license to
break the rules whenever you’d like. In other words, be consistent
with when to be inconsistent.

1. Draw Attention
The most common and effective way to use inconsistency is to
draw attention to a single, specific element. Imagine a man
wearing black pants, black shoes, a black shirt, a black jacket, a
black hat... and a white tie. Where are people’s eyes going to be
drawn? If you want something particular in your interface to
stand out, make it different. If the stylish man wanted people
to notice his head instead, he’d wear a black tie and a white hat.

The golden rule with inconsistency is moderation.

 Consistency in UI Design: Creativity Without Confusion 26

The reason it works so well is its exceptionality. Every other ele-

ment within your design creates a pattern (consistency) so that,
when the pattern is broken (inconsistency), it stands out. If you
implement too much inconsistency, all patterns dissolve into
chaos. Overall, the more inconsistency you apply, the less each
individual occurrence draws attention. Save inconsistency for
when you really need it so that it delivers the strongest punch.

Inconsistency is a potent spice. Just a pinch is enough,

while too much will spoil the design.

Source: “A short treatise on head wear, ancient and modern (1885).” CircaSassy. Creative
Commons.

If our stylish man wore black pants, a black shirt, and a black jacket,
but a white hat, white shoes, and a white tie, then none of those in
particular would stand out. He’d be a walking fashion nightmare.
 Consistency in UI Design: Creativity Without Confusion 27

As a UI designer, the use of inconsistency can be a great tool. This

can be used to lure your users’ eyes where you want, whether a
call-to-action, a new feature, or even a product that could be selling
better.

2. The Sake of Usability

Another less common but nonetheless appropriate scenario for
inconsistency is simple usability concerns – if maintaining con-
sistency will get in the way of usability, break the rule for that
one instance (or, if it happens too often, change the rule).

Brendon Cornwell, UX Designer at Captech Consulting, points

out a perfect example of this in Making and Breaking UX Best
Practices. Like most companies, US Airways states that its logo
should appear in the upper lefthand corner of its site. This was
fine, until it came time to design their mobile app. Their logo,
which consists of a series of horizontal gray bars mimicking the
American flag, looked like the hamburger icon when shrunk
down and placed in an upper corner, confusing the users. The
problem was solved by removing the logo on their secondary
screens, inconsistent to the styling format, but a smart choice
for usability.

Use common sense about it – as beneficial as consistency is, you

shouldn’t force it at the cost of the user experience.
 Consistency in UI Design: Creativity Without Confusion 28

Inconsistency With a Purpose

Let’s take a look at inconsistency done right. The following exam-

ples know when to conform, and when to break the mold.

1. Jawbone
Jawbone is a consumer tech company that specializes in wear-
able devices and wireless speakers. Their website showcases
many of their products, though some pages tend to deviate in
consistency – but for the right reasons.

Below are two screenshots for two different products:

UP 3

Source: Jawbone UP3

The UP3 a fairly straightforward fitness device, so the copy on the

page and three tabs at the top are enough. Users wear the brace-
let constantly, and as a result, get updates that form a complete
 Consistency in UI Design: Creativity Without Confusion 29

picture of their health. Once the users understand this benefit,

they’ll likely want to play around with some features, which is
easily accessible through the tabbed layout.

Jambox

Source: Jawbone Jambox

On the other hand, the Jambox page is more experimental, show-

casing a video as the default image, and foregoing the typical
descriptions to promote the limited time offer. Because the Jam-
box is a livelier product, with a different set of user benefits, this
inconsistency makes sense.
 Consistency in UI Design: Creativity Without Confusion 30

The important thing is that Jawbone maintains consistency where

it counts. The top navigation bar remains the same, including the
upper righthand Support/Sign In/Language options. Navigation is
one area that should be consistent throughout the entire site or app,
as orientation is a top priority in interaction design and making the
user comfortable. Likewise, the bottom righthand corner is con-
sistently occupied by the price and a call-to-action, both important
pieces of information that shouldn’t demand too much thought.

2. Miranda July
Now let’s take a look at a more surreal and unconventional web-
site, brought to our attention by Visual Swirl’s excellent article
on rule-breaking websites. Author Miranda July’s website for her
book No One Belongs Here More Than You is totally linear (like
the book it promote), yet strangely addictive and fun.

Source: No One Belongs Here More Than You

The website is externally inconsistent compared to similar sites

and user expectations. After all, not many of us have encoun-
tered a site with only a forward or backward navigation option,
 Consistency in UI Design: Creativity Without Confusion 31

where the narrative is told purely on a stove-top in black marker.

But the design works because the purpose is pure storytelling.
The author wants to tell a whimsical story about the book, so the
form matches function. Each page remains engaging because it
feels like a conversation. As you click forward, the site loads a
new stovetop message, which feels like it’s talking to you.

The trick to making this work, however, is keeping the content

simple and bite-sized. Chunking out content helps to reduce cog-
nitive strain and create a snappier experience. Imagine how the
interaction design on the page would work if all the messages
were connected in a scroll, and flanked by a navigation menu
and sidebar. The site would feel tedious instead of lighthearted
and enticing.

Chunk out your content for less cognitive strain

and a snappier experience.

While the site refuses to be externally inconsistent, it dutifully

remains internally consistent. The navigation arrows appear
on the same location on each page, and the primary content is
always the stovetop message. If they broke internal consistency
by having some pages in a standard layout, the design would
collapse.

As we’ve mentioned before, success lies in moderation.

 Consistency in UI Design: Creativity Without Confusion 32

3. Dolce & Gabbana

Another example of external inconsistency, Dolce & Gabbana de-
viates from the norm not to be showy, but for the sake of usabili-
ty. We came across this site after reading Jason Gross’ interesting
article on breaking design principles on purpose.

As we explained in our ebook Interaction Design Best Practices,

related actions should be placed close together to communicate
similarity, in accordance to Fitts’s Law. But when you reach the
shopping cart, the links for Back to Shopping and Proceed with
Order are on opposite ends of the page.

Source: Dolce & Gabbana

Why put such distance between them?

Having the two options side-by-side increases the likelihood of

the user accidentally hitting the one when they wanted the other.
Dolce & Gabbana’s slight increase in friction is worth prevent-
ing a couple unintentional (and bad) experiences. The design
choice does not totally abandon the best practices of interaction
design, though. Because the two options are on the same hori-
zontal plane, the user understands the two choices are related.
 Consistency in UI Design: Creativity Without Confusion 33

4. Amazon
So far we’ve outlined two fundamental UX design principles:

• Usability trumps consistency.

• Consistency in navigation is essential for orientation.

But what happens if these two come into conflict? Amazon – and
many others – enter the gray zone of UI patterns with their dis-
appearing navigation bar.

Source: Amazon

When you’re ready to check out, the standard navigation is sud-

denly replaced with a progress bar indicating your location in
the purchase process. You could argue they did this to increase
friction in backing out of a purchase, or they’re simply stripping
away any interface objects that don’t assist the user in finishing
the purchase. With less distractions, the checkout process can be
completed faster, which is good for business.
 Consistency in UI Design: Creativity Without Confusion 34

Inconsistency That Requires Improvement

Now that you’ve seen a few examples of acceptable inconsistency,

let’s look at the other end of the spectrum.

1. Xfinity
Xfinity’s navigation design is a shining example of bad internal
inconsistency. The secondary navigation on the main Xfinity pag-
es is inconsistent with the secondary navigation on the Xfinity
TV pages.

Xfinity Main Pages

On the main pages, the secondary navigation is presented as a

dropdown menu that takes you to subpages.

Source: Xfinity TV
 Consistency in UI Design: Creativity Without Confusion 35

On the Xfinity TV page, however, the secondary navigation is

tabbed. If Xfinity TV existed as a separate site (or even a subdo-
main), such a departure could be acceptable because users might
expect different navigation on different properties. But since the
TV page is on the same property as the main pages, users expect
consistent navigation.

Because the Xfinity TV navigation tabs also look similar to the

main page dropdown, you might at first glance think they func-
tion the same. Since they don’t, this similarity only deepens the
confusion. Jawbone is a much better example of the right ap-
proach to inconsistency: either use drastically different naviga-
tion for different content types, or keep the navigation identical.
Anywhere in between will only result in confusion.

But there’s more that needs fixing. Notice how the labelling of the
tabbed categories is also internally inconsistent. TV Shows and
Family & Kids are not perceived as the same level of information
architecture, yet here they are presented as similar.

Source: Xfinity TV

Ultimately, these nuanced mistakes all stack up against the user,

especially if they need to browse between the main pages and
the Xfinity TV page.
 Consistency in UI Design: Creativity Without Confusion 36

2. Adobe
Adobe is a subtler example of internal inconsistency between
icons in the navigation. After you click the hamburger icon, the
following overlay menu appears.

Source: Adobe

At first glance, the menu doesn’t look too bad. But look closely at the
categorical meaning of the icon types. We are lead to believe that:

• Large grey icons – These represent product suite (like Cre-

ative Cloud)

• Colored icons – These represent individual products (like Pho-

toshop)

Yet the design breaks this internal consistency by also making

products like Acrobat and Echosign display as large gray icons.
Because these products don’t fall into any particular suite, per-
haps a better treatment would be displaying them in a style dif-
ferent from colored icons or gray icons.
 Consistency in UI Design: Creativity Without Confusion 37

If we gave these “other” products their own icon style, we could

immediately communicate the distinction. Otherwise, this inter-
face breaks the rules it just established.

It may sound nitpicky, but think about the usability implications:

the user may click on an “other” product icon thinking it leads
to a suite of products, finds out that’s not true, and now needs to
resort to other menus or the search bar to find what they need.

Takeaway

Because of its powerful side effects, inconsistency is best used del-

icately. Keeping in mind the necessity of moderation, first isolate
which elements you’d like to stand out most, then apply inconsis-
tency only to them.

Take another glance at the examples of inconsistency done right –

Jawbone, Miranda July, Dolce & Gabbana – if you are still confused
about when to use it. Think about inconsistency as a very potent spice:
just a pinch could mean the difference between a good and a great
meal; too much (or the wrong spice) will ruin the food completely.

Start building my next interface in UXPin (7-30 day free trial)