This document discusses designing intuitive user interfaces by focusing on effective communication. It introduces the concept that the UI is a form of communication between users and technology. The speaker advocates designing UIs similar to how one would explain tasks to another person, focusing on clear, goal-oriented communication without unnecessary complexity or technical jargon. Examples are provided to illustrate intuitive versus less intuitive UI designs based on communication principles.
Designing for privacy: 3 essential UX habits for product teams
Ui is Communication: How to design intuitive, user-centered interfaces by focusing on effective communication
1. UI IS COMMUNICATION
How to design intuitive, user-centered
interfaces by focusing on effective
communication
Everett McKay
UX Design Edge
uxdesignedge.com
domakemethink.com
2. Who is this guy?
Copyright 2015 UX Design Edge. All rights reserved.
Principal of UX Design Edge (from Vermont, USA)
Offer UI design classes, workshops, and consulting
services, primarily to software teams that don’t have
(sufficient) design talent and resources
Previously was a Windows PM at Microsoft, where I
owned Windows Server security UI and wrote the
Windows UX Guidelines (but not for Windows 8)
Before that, was a developer of Windows and Mac UIs
3. And I have a new book!
Copyright 2015 UX Design Edge. All rights reserved.
4. Today’s agenda
Copyright 2015 UX Design Edge. All rights reserved.
The UI is Communication concept
Intuitive UI
Intuitive task flows
About the book
Wrap up
6. My promise
Copyright 2015 UX Design Edge. All rights reserved.
From now on, you will think about UI design
differently!
As if you had night vision goggles!
7. What’s it all about
The UI is Communication Concept
Copyright 2015 UX Design Edge. All rights reserved.
8. UI is an objective, principled practice
Copyright 2015 UX Design Edge. All rights reserved.
UI is an objective, principled form of human
communication, not a subjective art!
9. “Design is not
just what it looks
like and feels
like. Design is
how it works.”
Steve Jobs
Copyright 2015 UX Design Edge. All rights reserved.
10. Four core concepts
Copyright 2015 UX Design Edge. All rights reserved.
1. A user interface is essentially a conversation between
users and the technology to perform tasks
2. A UI can and should be evaluated by how well it
communicates
3. Scenarios and effective human communication should
drive the design process (not features, requirements,
schedules)
4. Focusing on effective communication removes much
of the mystique and subjectivity from UI design
12. A thought experiment
Copyright 2015 UX Design Edge. All rights reserved.
Suppose we are all working on a project whose UI is
crucial to its success
Suppose none of us have a UI design background
Not to worry: Bob and Alice, our best developers, are
on the project
They are presenting their first draft of the design to us
now
Q: What do you expect to happen?
13. My expectations
Copyright 2015 UX Design Edge. All rights reserved.
Their initial UI design won’t be very good
Bob and Alice will make the classic process mistakes
They will design for themselves
They will consider only one solution (with mechanical usability)
They’ll focus on technology and features instead of user goals
and tasks
The screens will be confusing, complicated, and often non-
standard
Their explanation of the design will be excellent
Bob and Alice are very intelligent, and that will show through in
their explanation
The design makes total sense when they explain it in person
14. What’s not surprising
Copyright 2015 UX Design Edge. All rights reserved.
It’s not surprising that the design isn’t very good
Bob and Alice don’t have any UI design training or
experience
It’s not surprising that their explanation makes total
sense
Bob and Alice are smart and articulate
As humans, we communicate to other humans all our lives
so we have lots of practice in a way that others understand
15. What is surprising
Copyright 2015 UX Design Edge. All rights reserved.
That the two are so different!
If Bob and Alice can communicate to us effectively
using English, why can’t they communicate equally
well using the language of UI?
During the design review, you might have thought
If they just put what they said in the meeting on the screen, it
would all make sense!
16. Why does this happen?
Copyright 2015 UX Design Edge. All rights reserved.
Communication between people tends to
Be natural, friendly, using plain language (vs.
unnatural, technical tone)
Be goal, results oriented, purposeful (vs. technology or
mechanically oriented, not explaining why)
Follow mental models and natural workflows (vs. the
way the code works)
Be simple, getting right to the point (vs. overly
complicated, laboring over unimportant details)
17. Can’t we use the same approach?
Copyright 2015 UX Design Edge. All rights reserved.
Q: If the way we communicate in person is so much
better, can’t we just design UI to be like that?
A: Yes! We can and we should!
The differences are artificial and historical
There’s (usually) no technical requirement to do this
Great UI design boils down to eliminating these
differences, making the experience simple and natural
18. The UI is Communication concept
Copyright 2015 UX Design Edge. All rights reserved.
UI design is ultimately about communicating to users,
both in terms of what you say and how you say it
If you can explain how to perform a task to the target
user in person in a way that’s clear and concise, you
can apply those same communication techniques in a
UI
We should have the same standards for software
interaction as we do for social interaction
If a UI feels like a natural, professional, friendly
conversation, it’s probably a good design
19. Imagine a conversation between friends
Copyright 2015 UX Design Edge. All rights reserved.
Suppose you are looking over a user’s shoulder and he
or she asks, “What do I do here?” Think about the
explanation you would give—the steps, their order, the
language you’d use, and the way you explain things.
Also think about what you wouldn’t say
This is a high-level guide to design and evaluate task
flows
Look for discrepancies—they reveal problems
20. Communications applies to all UI
Copyright 2015 UX Design Edge. All rights reserved.
All UI elements communicate something:
UI text
Controls
Icons, graphics, colors
Animations, transitions
Page layout
Feedback
Everything in a UI is there to communicate something
to someone for some reason
21. A natural, friendly conversation
Copyright 2015 UX Design Edge. All rights reserved.
22. We need the same standards for UI
Copyright 2015 UX Design Edge. All rights reserved.
…as we do for social interaction:
Tone Attitude a UI conveys to users
Respect Users are emotional, so care for their feelings
Politeness Good manners, social behavior
Forgiveness Preventing and recovering from mistakes
Personality Characteristics that connect emotionally with users
If a behavior would be inappropriate between people, it
should be inappropriate for software
A interesting test: if your product were a person, who
would it be?
23. If your product were a person…
Copyright 2015 UX Design Edge. All rights reserved.
24. Won’t this result in “dumbed down” UI?
Copyright 2015 UX Design Edge. All rights reserved.
A common misconception is that users are stupid and
that we have to “dumb things down”
More accurate: users are focused on their work and don’t
know how our UI works
So, no! Not if you do it right
Remember that the goal is to communicate effectively
to target users, not to morons
Be polite and respectful, but also get right down to
business
25. The power of adding a single word
Copyright 2015 UX Design Edge. All rights reserved.
Some designers are terrified to add a clarifying word or
two—some benefits:
A single word can add clarity
Custom icons are a poor way to communication
Everett’s rule of icons: People don’t get custom icons
Language is the simplest way to communicate personality
Double check those error messages!
Simple test: Would you normally add the word in person?
26. Keys to success
Copyright 2015 UX Design Edge. All rights reserved.
Focus design decisions on effective communication
Think about how you would explain the task to the
target user in person and look for discrepancies
Do this during design, design reviews, spec reviews
Don’t ignore or postpone text—text problems reveal
design problems (Lorem ipsum is not your friend)
27. Example 1: Communication design review
Copyright 2015 UX Design Edge. All rights reserved.
How well does this UI communicate?
Can we make it communicate more
effectively? More natural and friendly?
28. Example 2: Communication design review
Copyright 2015 UX Design Edge. All rights reserved.
How well does this UI communicate?
Can we make it communicate more
effectively? More natural and friendly?
30. What the heck is it?
Intuitive UI
Copyright 2015 UX Design Edge. All rights reserved.
31. Everybody wants an intuitive UI
Copyright 2015 UX Design Edge. All rights reserved.
Having an intuitive UI is a top goal for any UX project
To users, describing a UI as intuitive is the highest
praise they can bestow
Funny thing: nobody really knows what an “intuitive
UI” is
32. Some popular definitions
Copyright 2015 UX Design Edge. All rights reserved.
Are these useful definitions?
Simple, easy to use, better
Confused with other concepts
An “unrealistically high bar” that most UIs can’t achieve
If so, why bother?
A gap between the design model and the user model
Based on Norman’s The Design of Everyday Things
Difficult to use in practice
Whatever Apple does
Not sure, but I know it when I see it
33. My definition
Copyright 2015 UX Design Edge. All rights reserved.
A “dictionary” definition:
A UI is intuitive when target users understand its
behavior and effect without use of reason,
memorization, experimentation, assistance, or training
More simply, an intuitive UI is immediately self-
explanatory
Intuitive UIs need to communicate their purpose well!
34. A clear sign your UI isn’t intuitive
Copyright 2015 UX Design Edge. All rights reserved.
An intuitive UI shouldn’t need a manual or training
35. The definition is a good start
Copyright 2015 UX Design Edge. All rights reserved.
We can determine if a UI isn’t intuitive just by applying
the definition
But to make a UI intuitive, we need more
36. So, what’s an intuitive UI really?
Copyright 2015 UX Design Edge. All rights reserved.
A UI is intuitive when it has an appropriate combination of:
Discoverability Users can easily find the feature—when they need it.
Affordance Visually, the UI has clues that indicate what the user needs to do.
Users don’t have to experiment or deduce the interaction
Predictability Functionally, the UI delivers the expected results, with no
surprises. Users don’t have to experiment or deduce the effect
Responsiveness The UI gives clear, immediate feedback to indicate that the
action is happening, and was either successful or unsuccessful
Efficiency The UI enables users to perform an action with a minimum amount
of effort
Forgiveness If users make a mistake, either the right thing happens anyway or
they can fix or undo the action with ease
Explorability Users can explore without fear of making mistakes or getting lost
37. Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
38. Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
39. Intuitive UI is consistent
Copyright 2015 UX Design Edge. All rights reserved.
Consistency is crucial to being intuitive
Jakob Nielsen’s Law of UX (rephrased):
Users spend most of their time using software other than yours
But interaction consistency is far more important than
visual consistency
Benefits of small improvements achieved through
inconsistency are easily outweighed by the lack of
familiarity
Q: What does the swipe gesture do in mobile?
40. Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
41. Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
How do you deactivate this plugin?
Hint: We could be in the wrong place
42. The Design of Everyday Things
Copyright 2015 UX Design Edge. All rights reserved.
Donald Norman’s concept of affordance
“If a door handle needs a sign, then its design is probably
faulty.”
My translation:
If a UI needs a label to explain its interaction, the design has
failed
Users shouldn’t have to experiment to understand the
interaction
44. Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
45. But people learn all the time, right?
Copyright 2015 UX Design Edge. All rights reserved.
A common counter argument: people learn—and not
everything can be discoverable or have an affordance
Yes, people can learn—but will they? And will they
remember?
Having to learn is fine for advanced, infrequent,
optional interactions
Make sure any unintuitive UI is strategic, not accidental
Do you want the success of your product dependent
upon people learning for essential interactions?
46. Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
47. Common unintuitive UI
Copyright 2015 UX Design Edge. All rights reserved.
Advanced, infrequent, optional commands
Might not be worth making discoverable
Shortcuts and gestures
Not a problem if advanced and redundant
Inevitable discoverability
Users can’t not find these
Delighters
Experienced users are rewarded by finding them
Advanced modes
You don’t want users to find these accidentally
48. Intuitive UI has a cost
Copyright 2015 UX Design Edge. All rights reserved.
Discoverability
May result in clutter, feature might be inappropriate for
some users
Affordance
May look cluttered and heavy
Predictability
May require too much explanation
Forgiveness
Might not be practical or may harm performance
50. Some UI can be unintuitive if strategic
Copyright 2015 UX Design Edge. All rights reserved.
…instead of accidental
Most unintuitive UI is accidental
Sensible and learnable are good alternatives
51. Answering the one question all users have
Intuitive task flows
Copyright 2015 UX Design Edge. All rights reserved.
52. Inductive UI
Copyright 2015 UX Design Edge. All rights reserved.
An inductive UI is designed to be self-explanatory to
lead users through the task steps
Goal: To design intuitive task flows by eliminating the
need to think and experiment at the task level
The top question everyone has: What am I supposed
to do here?
When not obvious, we should consider answering this
question explicitly
53. Explainable first
Copyright 2015 UX Design Edge. All rights reserved.
An explainable UI is understandable, intuitive UI so
let’s start task design by making it explainable first
First step is to design the main instructions for each
step in a task
The quality of the main instruction often predicts the
quality of the page (ex: “Manage” is very weak)
If the task flow is complex, convoluted, unnatural, or
unintuitive, it should be apparent at this point
54. A “deductive” UI example
Copyright 2015 UX Design Edge. All rights reserved.
55. An “inductive” UI example
Copyright 2015 UX Design Edge. All rights reserved.
56. Elements of inductivity
Copyright 2015 UX Design Edge. All rights reserved.
A clear main instruction that explains the purpose of a
page
Page content that is related to the main instruction
To clarify: the goal is to eliminate thought and
experimentation, not to have a lot of text
57. This really works!
Copyright 2015 UX Design Edge. All rights reserved.
You might be skeptical, but if you:
Take a page
Determine a good main instruction
Redesign the page to focus on that instruction
The resulting page and/or task flow will be better
Having a clear, explicit understanding of what a page is for
makes it better
This is true even if you don’t display the main instruction on
the page!
Having explicit instructions reduces the need for training
58. This really works: an example
Copyright 2015 UX Design Edge. All rights reserved.
59. This really works: another example
Copyright 2015 UX Design Edge. All rights reserved.
60. This really works: a mobile example
Copyright 2015 UX Design Edge. All rights reserved.
61. Copyright 2015 UX Design Edge
“If I had an hour to solve
a problem and my life
depended on it, I would
use the first 55 minutes
determining the proper
question to ask, for once
I knew the proper
question, I could solve
the problem in less than
five minutes.”
Albert Einstein
62. What are we doing here again?
Copyright 2015 UX Design Edge. All rights reserved.
We are using main instructions to make pages and
flows self explanatory and intuitive
We can put the main instruction explicitly on the
pages, but only if we need to
By doing so, we are focusing on the user experience,
effective communication, and scenarios instead of
features, layout, and mechanical usability
The technique is simple, but the results can be huge!
63. I love user research and testing, but…
Copyright 2015 UX Design Edge. All rights reserved.
Traditional UCD is too dependent on research
No, it doesn’t always depend!
We know (or at least should know) much more about our
users than we think
Let’s use these simple, quick communication techniques to
fix the easy stuff
Let’s reserve more expensive, time consuming techniques
for design challenges that really need them
My ideal: user research to get us on the right track,
understand how to deliver value and delight
64. Getting beyond “sketching a pile of features”
A communication-focused process
Copyright 2015 UX Design Edge. All rights reserved.
65. Apple’s app design strategy
Copyright 2015 UX Design Edge. All rights reserved.
From the iOS Human Interface Guidelines
1. List all the features you think users might like
2. Determine who your users are
3. Filter the list through the audience definition
4. Don’t stop there…
5. Prototype and iterate
66. Sketching a pile of features
Copyright 2015 UX Design Edge. All rights reserved.
67. Sketching a pile of features
Copyright 2015 UX Design Edge. All rights reserved.
While this process can work, the focus is on features,
their physical layout, and performing tasks
mechanically
Instead, let’s use users and their goals (scenarios), plus
effective communication drive the process
69. A communication-based design process
Copyright 2015 UX Design Edge. All rights reserved.
1. Use the top scenarios to drive design decisions
2. Explain each scenario’s tasks as you would to
someone in person
3. Break the task into natural, goal focused, easily
explainable steps
4. Present each step using appropriate controls, UI text,
layout, defaults, etc. (normally we start here!)
5. Refine and simplify as necessary until communication
goals are achieved
70. Communicating tasks
Copyright 2015 UX Design Edge. All rights reserved.
Imagine a conversation between friends
Suppose you are looking over a user’s shoulder and he
or she asks, “What do I do here?” Think about the
explanation you would give—the steps, their order, the
language you’d use, and the way you explain things.
Also think about what you wouldn’t say
This is a high-level guide to designing task flows
Look for discrepancies—they reveal problems
71. Feels like a conversation
Copyright 2015 UX Design Edge. All rights reserved.
72. Communication reviews
Copyright 2015 UX Design Edge. All rights reserved.
A communication review evaluates how well a design
communicates
Try this when someone is presenting a design to your team
Process: Listen to what they say, compare to what is on
the screen
Things to check:
Does it feel like something you would say in person?
Is the language natural, friendly, and concise?
Is the language focused on purpose and goals?
76. Just the facts
Copyright 2015 UX Design Edge. All rights reserved.
Published by Morgan Kaufmann in June 2015
363 pages, all in color!
Price $44.45
$41.64 on Amazon, Rs. 2638 on FlipKart
Kindle, ebook versions available!
Sales so far—not so good (I need your help!)
77. My goals
Copyright 2015 UX Design Edge. All rights reserved.
Top goal: the “one book” to get started in UI design
An approachable, fun, quick read
Designed for scanning
Many, many UI examples
Technology neutral (but many mobile examples)
Recommendable (instead of DOET, DMMT)
6 Dilbert cartoons!
78. Table of contents
Copyright 2015 UX Design Edge. All rights reserved.
Ch 1: Communication Design Principles
Ch 2: Interaction Design
Ch 3: Visual Design
Ch 4: Communicating to People
Ch 5: A Communication-Driven Design Process
Ch 6: UI Design Process Examples (web and mobile)
79. Special request
Copyright 2015 UX Design Edge. All rights reserved.
Buy the book!
Amazon link: domakemethink.com
Review the book!
I need more reviews!
Recommend and discuss the book!
Use #UIComm on Twitter
80. Summary and wrap up
Copyright 2015 UX Design Edge. All rights reserved.
81. Four core concepts
Copyright 2015 UX Design Edge. All rights reserved.
1. A user interface is essentially a conversation between
users and the technology to perform tasks
2. A UI can and should be evaluated by how well it
communicates
3. Scenarios and effective human communication should
drive the design process (not features, requirements)
4. Focusing on effective communication removes much
of the mystique and subjectivity from UI design
82. The details
Copyright 2015 UX Design Edge. All rights reserved.
Effective communication applies to all UI elements
The attributes of an intuitive UI relate to
communicating interaction and purpose
“Inductive” UI reduces need for training and suggests a
design process
We can easily evaluate a UI easily just by comparing
what we say in person to what is on the UI
83. Final thought: Practical magic
Copyright 2015 UX Design Edge. All rights reserved.
Pretend it’s magic—Alan Cooper
What is a magical user experience like?
Doesn’t it feel like a good human experience,
enhanced through technology?
84. UX Design Edge offerings
Copyright 2015 UX Design Edge. All rights reserved.
UX Design Edge is all about helping teams without
design resources do their best work
Efficient, cost effective consulting
Team-based onsite workshops, public classes, and online
training
If you need design help, please contact me at
everettm@uxdesignedge.com or @UXDesignEdge
Subscribe to my blog and join my mailing list
Let’s connect on LinkedIn
85. Got feedback?
Copyright 2015 UX Design Edge. All rights reserved.
Would love to hear it!
Please send it to everettm@uxdesignedge.com