g i v e

g o o d

ux

the 10 commandments of

UI DESIGN
10 timeless, proven principles
that will make your UI designs soar
 0 14 Introduction: Intuition and the 4 C’s

044 Make it Predictable

064 Make it Consistent

084 Make Progression Natural

094 Make Constraints Purposeful

1 1 4 Make Interactivity Visible

1 2 4 Make Benefits Outweigh Costs

1 3 4 Provide Continuous Feedback

1 4 4 Match the User’s Mode of Operation

1 5 4 Reduce Performance Load

1 7 4 Assume Nothing!

j o e n at o l i t h e 1 0 c o m m a n d m e n t s o f U I d e s ig n a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i TOC
Introduction Intuition and the 4 Cs

In a truly useful, usable UI design, everything matters.

Everything. The organization of content and control elements. The size, color
and placement of every icon, button and label. Charts, graphs, animation, audio
cues. And in the age of the touchscreen, how people use their hands and fingers
to act on or move through what they see is increasingly important.

So while functionality is certainly important, the delivery mechanism — what

people see on the screen — is the critical factor here.

At the end of the day, it doesn’t matter how technically superior your code is.
The remarkable, industry-leading depth of functionality it provides only matters
if it’s easy to use, if it’s intuitive.

And because that’s a loaded, misused and often misunderstood word, let me
take a moment to explain, in three words, what intuitive should mean to you in
terms of product design of any kind:

Single-trial learning.

That’s the real meaning of the word as it pertains to design of any kind. Intuitive
doesn’t mean that someone instantly knows exactly how to use something the
very second they lay eyes on it. That’s often not possible, primarily because
every human being has different, unique perceptions, interpretations and levels
of understanding, the majority of which exist as a result of personal experiences.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 1

Introduction Intuition and the 4 Cs continued

What intuitive does mean is that when something is designed well, in an intuitive
manner, we catch on pretty quick — and one time is all it takes. Do it once,
remember it forever. Intuitive interfaces share 4 main characteristics:

CONTROL Users should have control over an experience —

where they’re going, how they get there, and how
easily they can stop and start again.

CONSISTENCY The look and feel of behavioral elements — what’s on

the screen in terms of text, color, images, navigation
tools, audio, etc. — should be consistent.

CONTEXT Every element onscreen must have context. Each ele-

ment should be related by form, content and function
to the information or available actions around it. Ele-
ments should be clearly related to the task the user is
trying to accomplish.

CORROBORATION The interactivity should reflect the nature of the con-

tent — that is, it should corroborate and reinforce the
content. If there are images and/or graphic elements
on the screen, they should help the user understand
the content. Anything else means you’re decorating
instead of designing.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 2

Introduction Intuition and the 4 Cs continued

What follows here are ten principles you can apply to any kind of digital product.
Any app, site, portal, system, software product. If it has a screen, these 10 things
should be addressed.

At every phase of design and development, no matter what your internal process
may be, I can guarantee you’ll find opportunities to evaluate what you’re doing
with these commandments in mind.

I want you to understand that it doesn’t matter what design or development

process you follow. From daily stand-ups to weekly checkpoints to testing and
QA, there’s always a time and place where these principles can be considered,
and then applied as work progresses.

Commandments 1 and 2 in particular warrant a rather large chunk of your

attention during the strategy and design phases of your work, as you’ll see.

Failure to follow these two commandments has been responsible for easily
half of the product failures I’ve seen in my 25 years doing this.

These following 10 commandments are essentially the heart and soul of solid
usability, user interface design and user experience.

Serve them well and they will do the same for you in return.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 3

Commandment 1 Make it Predictable

I n every interactive experience, three mental models (user expectations about

how things should appear and work) always come into play:

The designer’s model — what the designer

1
envisioned when creating the system.

The user’s model — what the user expects

2
from the system.

The system’s model — the actual appearance

3
and performance of the system itself.

The areas where these three models overlap most are the sweet spots:
the places where it’s easiest for the user to accurately predict the outcome of
their actions.

Our ability to predict is born from learned behaviors. These come from our
experiences across the web, devices, and also from real-world places and
objects. So the “single trial learning” that constitutes an intuitive experience is
largely dependent on whether or not we recognize some aspect of the task at
hand as familiar. As an echo of something we’ve seen or done before.

Part of making interactions predictable is making them easy to learn and easy to
remember. Even interfaces that seem simple may require learning, and the more
we use it, the easier it seems.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 4

Commandment 1 Make it Predictable continued

Keep in mind that people are inherently click-happy (or tap-happy).

When they don’t know what to do (or what they can do), they’ll attempt interaction
with anything on the screen. Which typically has unintended consequences and
quickly leads to frustrating situations.

By contrast, when they have a clear understanding of what they can do and
what will happen, they only interact with the necessary elements to complete
their task and accomplish their goals.

Every aspect of your UI design should set accurate expectations about what will
happen before the interaction has occurred. Labels, controls, text and images
should all work together to answer the inherent questions every user will have:

• What can I do?

• What will happen as a result?
• Where will I go?

The more of these questions your UI answers, the better. This increases the
user’s confidence and encourages them to continue using the system.

The more they’re able to do this, the better the system serves their needs, the
more efficiently they can use what’s in front of them.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 5

Commandment 2 Make it Consistent

Much like the processor in your laptop or phone or tablet, the brain’s
cognitive processes have limits. When those limits are exceeded, we get
overloaded and distracted. Things take longer and we make mistakes.

In addition to the mental energy expended for the task at hand, we also expend
mental energy interpreting and using the interface. Consistency allows people
to focus on the former, because they don’t have to work too hard to figure out
the latter.

For instance, on your phone, there’s a UX pattern for how an item is deleted. A
dialog appears in a particular way with standard buttons, e.g. DELETE. The first
time you saw the pattern, you spent a few seconds looking at it, and you paid
attention to what you were selecting in order to get the result.

All you do now, however, is do it. Habit and reflex take over; no conscious
thought required. That’s because you already know the delete pattern, and it’s
applied consistently. The option is always in the same place, the controls look
the same and they respond to your actions in the same way. Tap, tap, done.

And if other apps on your phone follow the same pattern, your efficiency and
ability increases. The pattern is the same even though it’s a different app, so you
don’t have to stop and think.

That’s UI consistency – not just within a single app or interaction, but across
multiple apps or interactions within a “collection.”

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 6

Commandment 2 Make it Consistent continued

But when the software vendor comes out with an upgrade and the pattern
changes, or your new favorite app uses a completely different pattern, it all
grinds to a halt. You have to start over. The speed and dexterity gained is gone,
because you now have to stop and examine the new pattern and think, “Am I
doing this correctly?”

And, continuing the phone example, the more apps you have, and the more
difference there is in the delete pattern across those apps, the more work your
brain has to do just to figure out what to do. Repeatedly. This is the fabled “death
by a thousand cuts.”

The brain is good at recognizing that something’s different from a known

item, even if it can’t specifically tell what’s different. So any difference, visual
or otherwise, forces us to re-evaluate how the pattern works.

When users start asking why something is the way it is, that’s a red flag. It means
they’re focused on your UI, instead of the content or the experience.

When interactions and outcomes become consistent (and predictable), people

only have to learn the controls and patterns once — and then employ them
without much active thinking.

Which, in turn allows them to concentrate on the task at the hand.

Which is the reason they’re using your UI in the first place :-)

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 7

Commandment 3 Make Progression Natural

Everything in an interactive application should progress naturally, from

simple to complex. The person using your UI should never be confronted with
more complexity than is necessary at any given stage.

As I mentioned in the previous section, if we have to devote the same amount

of mental energy to understanding the UI as we do about what we’re trying to
accomplish, bad things happen.

When something’s harder than we think it should be, we get frustrated.

When we’re confronted with too much information all at once, we assume we’ll
have to read all of it in order to understand any of it.

If we have no sense of getting closer to the finish line, motivation, interest and
involvement are the first casualties.

Your default should always be the simplest level of information, with details
accessible – but only if and when the user wants them. In addition, the user
should be able to set the default level of information, to avoid repeating the
same actions every time s/he logs into the system.

At any given moment, you should only be surfacing what the person needs
to know in order to take the very next step. Put yourself in their place and
consider how much information is needed in order to act. And remember that
the “act” in question may be a request for additional detail!

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 8

Commandment 4 Make Constraints Purposeful

A user should be prevented from making too many mistakes — that is, a
system should be designed to minimize user errors. That means introducing
purposeful, intentional constraints that determine what can be done at any
given moment or scenario. Constraints limit possible actions, and we use them
primarily to:

• Simplify usability and minimize error

• Reduce the sensitivity of controls
• Minimize unintentional input
• Prevent or slow dangerous actions

For example, hiding unavailable software controls constrains the options that
can be selected. If you’ve ever visited an online auto site (e.g. carmax.com), you
have to enter a make – e.g. GMC – before you can enter a model (e.g. Terrain).
That’s a purposeful constraint.

Physical Constraints

There are several types of physical constraints, and they can be applied to any
app, website or software system. Consider the following and think about how
they might benefit what you’re working on:

Paths convert applied force in a specific direction or motion,

1
using channels or grooves (like the scroll bar in your browser).

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 9

Commandment 4 Make Constraints Purposeful continued

Axes convert applied forces into rotary motion, providing

2
a control surface of infinite length in a small space (like the
trackpad on your laptop).

3 Barriers absorb or deflect applied force: stopping, slowing, or

redirecting forces around the barrier (like the boundaries of
your mobile phone or tablet screen)

Psychological constraints

There are several types of psychological constraints as well. These are

manifested in what the user sees onscreen – in visual UI design.

Symbols influence behavior by communicating meaning

4
through visuals and/or language (like the text & icon
combination of a warning sign).

Conventions influence behavior based on the traditions,

5
practices and mental models we have (like red means stop,
green means go).

Mappings influence user behavior based on perceived

6
relationships between elements (like the SUBMIT button
that appears at the end of a form).

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 10

Commandment 5 Make Interactivity Visible

Necessary elements must be visible, and their function should

be obvious. You can’t invite interaction and engage users if they’re
unaware that the opportunity to interact exists!

Discoverability shouldn’t involve luck or chance – people should be

able to presume, deduce, or infer that an opportunity to interact is
available. Remember, people are click-happy! In the absence of clear
cues, they will attempt interaction with anything that could possibly be
clickable or touchable. Which will almost always take them somewhere
they had no intention of going, sometimes literally.

However, making an element visible doesn’t mean showing every

possible control at all times! It simply means that the functions that
apply to what’s onscreen at any given time should be accessible. Users
shouldn’t have to search for information, tools or actions that are
contextually related to what they’re doing.

Making a function obvious also means that elements in the interface

should look like what they are. Controls, such as buttons, should have
visual attributes that strongly identify them.

Visibility invites interaction, so making sure your users can see what’s
available to them – and can infer how to interact with it – is absolutely
key to positive user experience.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 11

Commandment 6 Make Benefits Outweigh Costs

Any activity – onscreen or otherwise – will be pursued only if its benefits are
perceived to be equal to or greater than the costs of taking the action. In other
words, if we don’t think the reward is worth the effort, we bail.

The cost-benefit model isn’t new. It’s a principle.... We leverage the cost-benefit
model to determine design quality from a user experience perspective. It’s
actually pretty simple:

If costs associated with interaction outweigh the benefits, the design is poor. If
the benefits outweigh the costs, the design is good.

It’s worth noting that design features or elements that excite designers are
often never used or even noticed by other people. So evaluating cost-benefit
in the things you design and build is a matter of thinking like your user:

How much reading is too much to be able to apply an

1
instruction or understand a message?

How many steps are too many to complete a process, like

2
setting the time and date on your camera?

How long is too long for a person to wait for a page to load, a
3
process to finish or a file to download?

The answers to those questions are dependent on what the user believes to be
the benefits of the interaction.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 12

Commandment 7 Provide Continuous Feedback

 eople need to know the results of their actions immediately. Each action a
P
user takes should have an immediate and obvious effect. Feedback is important
because it provides:

• Location: where am I?
• Status: what’s happening – and is it still happening?
• Preview: what will happen?
• Outcome: it has happened

Every action a user takes should produce a visible, understandable and

immediate reaction. Every interaction should be acknowledged in some manner.
Otherwise, people will often resort to repeating their last action, which often
produces mistakes. Clicking the buy button more than once and ordering 100
pairs of bunny slippers, for example.

This is all too often forgotten because designers and developers assume their
users are as tech-savvy as they are. The problem with this rationale is that
positive user experience isn’t a matter of savvy or understanding. It’s a matter
of how much effort someone has to expend to ascertain what’s done, what’s
left to do and where they are in the process.

If you minimize my effort, you improve my experience. So if the system is

keeping me aware of what’s up, even if I already know, that’s one less thing I
have to think about. And I like that.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 13

Commandment 8 Match the User’s Mode of Operation

The UI’s mode of operation should match the user’s mode of operation. People are
typically operating in one of three modes when they interact with a digital product
of any kind:

Commanding: telling the application or system to do

1
something, e.g. searching, turning something on or off.

Manipulating: accomplishing tasks by manipulating objects

2
or fields, running a simulation, or changing variables.

Recording: entering data, making annotations, highlighting

3
text or recording thoughts, input or action.

Everything from labeling (e.g. verbs vs. nouns) to control types (e.g. boolean search
vs. multiple choice selections) should make sense for the mode of operation, the
primary way the person uses the app or the system. For example, people who use
financial systems spend the majority of their time manipulating data: searching,
filtering, calculating and running projections.

So a UI designed for this user’s mode of operation would primarily consist of tools,
controls and functions that allow for sorting, comparison and calculation at a very
granular level of detail, across multiple categories, data types and parameters.
You wouldn’t expect to find paragraphs of text or free-form search or fancy
illustrations here. The focus of both content and controls would be on data: getting
it, manipulating it and understanding it.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 14

Commandment 9 Reduce Performance Load

Performance Load is the degree of mental and physical activity required to

complete a task or achieve a goal.

If the performance load is high, performance time and errors increase. Which
means that the probability of successful accomplishment decreases.

If the performance load is low, performance time and errors decrease, and the
probability of successful accomplishment increases.

There are two types of performance loads: cognitive and physical. Here’s a
quick primer on each and why they are extremely important to your design and
development work:

Cognitive Load

Cognitive load is the amount of mental activity (perception, memory, problem

solving) required to accomplish a goal. It’s the difference between having to
remember command strings vs. dragging and dropping in a UI. Strategies for
reducing cognitive load include:

• Minimizing visual noise

• Chunking information
• Using memory aids
• Automating complex, memory-intensive tasks

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 15

Commandment 9 Reduce Performance Load continued

Physical Load

Physical load is exactly what it sounds like. It’s the degree of physical
activity required to accomplish a goal. A single tap or a click may not seem
exhausting to you, but multiplied by repetition and time, they quickly
add up to fatigue. This is where the idea that more than 3 clicks to get to
something is a bad idea...which compels me to digress for a minute and
tell you:

The “3 clicks” rule is a myth. People could care less about the number of
clicks – IF each click (1) delivers value to them and (2) perceptibly moves
them closer to their goal.

OK, back to physical load.

Studies have shown that people in data entry jobs, for example, type
15,000 keystrokes a day and click a mouse approximately 430 times a
day. That’s actually a high degree of sustained physical effort.

Reduced physical load results in better performance, less mistakes and

happier people. Strategies for reducing physical load include:

• Reducing steps required to complete tasks

• Minimizing range of motion and “travel” distances
• Automating repetitive tasks

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 16

Commandment 10 Assume Nothing!

Anything you design – an app, a site, a system – should be appropriately

designed to accommodate your users. As developers and designers, we should
make no assumptions about what a user can or cannot do. We shouldn’t ever
assume that we know what a user will want to do. Those decisions should be
left to the user.

The most important thing you can do to be successful is take yourself out of
the equation. Your perceptions, your preferences, your assumptions and your
ego. This is not about you. It’s about the two parties who stand to receive value
from what you’re doing: users and client stakeholders.

Caveat: sometimes the business stakeholder will be you, if the product in

question is yours alone (like an app you want to design and sell). In this case, you
still have to take yourself out of the equation and focus on your users if for no
other reason than they’re paying the bills.

Rules to remember:

• Understand the goals and needs for which you are designing.
• Think analytically and critically about the design and the experience.
• Never hinder, obstruct, or interfere with the experience.
• Advocate for the user but strive to achieve to the business goals.
• Break everything you design by being your own worst visitor.
• You are not designing for yourself.

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 17

Sharpen Your UX Skills at givegoodux.com

Thanks for reading.

All too often, the focus around UI and UX Design has been squarely on the technology
used, instead of the quality and value of the interaction. Very few of us are ever explicitly
taught how to create a compelling user experience or an intuitive UI design. I’m trying to
change that, with this book and with my UX Design Fundamentals online course.

The things that we all find memorable and exciting, the things we’re willing to spend our
time and money on, haven’t really changed all that much throughout human history. The
way we’re wired as human beings is the key to how we perceive what we experience.

The tactical things you do to design or build something don’t matter nearly as much as
Follow Me on Twitter what you think about while you’re doing those things. What makes you truly valuable as
a UX designer or consultant is what’s between your ears. Cultivating that, learning the
Like Me on Facebook
fundamental principles behind the things that motivate human beings, is your core task.

Anyone can learn to deliver great user experiences. Any and every one of you can add
some measure of what we’re talking about here to the work you’re doing right now. All it
takes is being mindful of the principles we’ve discussed, and allowing them to affect and
inform your decisions.

I wish you much success on the road ahead. I invite you to visit my website and take
advantage of a wealth of free tips, templates and how-to articles to help you deliver
useful, valuable experiences for your customers, clients or employers.

GIVE GOOD UX!

j o e n at o l i the 10 commandments of UI design a l l i l lu s t r at i o n s © 2 0 1 4 j o e n ato l i 18