Ui is communication by Everett McKay

7/6/2016
Copyright 2016 UX Design Edge. All rights
reserved. 1
UI IS COMMUNICATION
How to design intuitive, user-centered
interfaces by focusing on effective
communication
Everett McKay
UX Design Edge
uxdesignedge.com, freeuxwebinars.com
@uxdesignedge
Amsterdam UX, July 2016
I have a new book!
Copyright 2016 UX Design Edge. All rights reserved.

7/6/2016
reserved. 2
Today’s agenda
 The UI is Communication concept
 Five specific techniques
1. Beyond sketching features
2. Intuitive UI
3. Strategically unintuitive
4. Intuitive task flows
5. Communication reviews
 About the book
Communication gives design clarity

7/6/2016
reserved. 3
My promise
 From now on, you will think about UI design
differently!
 As if you had night vision goggles!
What’s it all about
The UI is Communication Concept

7/6/2016
reserved. 4
A bold claim
A user interface is an objective, principled form
of human communication, not a subjective art!
Four core concepts
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

7/6/2016
reserved. 5
My expectations
 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

7/6/2016
reserved. 6
What’s not surprising
 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
What is surprising
 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!

7/6/2016
reserved. 7
Why does this happen?
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)
Can’t we use the same approach?
 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

7/6/2016
reserved. 8
The UI is Communication concept
1. UI design is ultimately about communicating to users
2. 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
3. We should have the same standards for software
interaction as we do for social interaction
4. If a UI feels like a natural, professional, friendly
conversation, it’s probably a good design
Imagine a personal conversation
 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

7/6/2016
reserved. 9
Communications applies to all UI
 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
Key takeaways
 We know how to communicate to our users in person
(even our most technical devs can), but we don’t take
advantage of this in the design process because we are
focused on other stuff
 If users fail to perform a task, the root cause is always
the same—they didn’t understand it

7/6/2016
reserved. 10
Technique #1: Beyond sketching features
UI as conversations
Apple’s App Design Strategy
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

7/6/2016
reserved. 11
Sketching a pile of features
Sketching a pile of features
 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

7/6/2016
reserved. 12
Features and requirements aren’t enough
A typical design process needs a miracle

7/6/2016
reserved. 13
A typical story
 Victor asked for help with mobile app for a national
park
 A good home screen: a home page, menu, or map?
 We could have brainstormed and sketched
 But instead we had a personal conversation…
 Found three themes: explore, plan, do
 The best home screen: that conversation to support
those scenarios
 Now we can brainstorm and sketch!
What should the home screen be?

7/6/2016
reserved. 14
 We could have brainstormed and sketched
 But instead we had a personal conversation…
 There were three clear themes
1. Explore the park
2. Plan a trip
3. Take a trip
 The best home screen: that conversation to support
those scenarios, elevate content people care about
 Now we can sketch!

7/6/2016
reserved. 15
What just happened?
 We deliberately focused on the target users and their
goals, and the human experience
 We elevated the content that people care about (an
iOS guideline)
 We didn’t think about the technology, features,
patterns, task flows, requirements
 We still need to brainstorm, sketch, etc. but now we
have a clear direction
 And we saved a lot of time! (spent minutes vs. days)
Doesn’t this result in chatty UI?
 No!
 If your human conversation would be concise, this
technique should result in concise UI
 Example: Sunglass Shack shopping tool—if you were to
walk into a sunglass store, what would be the human
conversation
 Salesperson: May I help you?
 You: No thanks, just browsing
 Conclusion: The UX should start with browsing!

7/6/2016
reserved. 16
Key takeaways
 There is tremendous insight in the human
conversation, yet we rarely take advantage of it
 A great user experience should feel like a great human
experience—that’s fully enhanced through technology
Technique #2: What the heck is it? It’s effective
communication!
Intuitive UI

7/6/2016
reserved. 17
Everybody wants an intuitive UI
 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
Some popular definitions
Are these useful definitions?
 Simple, easy to use, better
 Confused with other concepts
 Really “dumbed down” so any idiot can get it
 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, but difficult in
practice
 Familiar/learnable
 Whatever Apple does
 Not sure, but I know it when I see it—it just feels right

7/6/2016
reserved. 18
The dictionary definition is useless
A typical dictionary definition:
 Instinctive (based on behavior or knowledge we are
born with)
My 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 communicate their purpose well!

7/6/2016
reserved. 19
Ever heard this one?
It’s intuitive once you learn it!
A clear sign your UI isn’t intuitive
An intuitive UI shouldn’t need a manual or training

7/6/2016
reserved. 20
Are you going to read the manual?
The definition is a good start
 We can determine if a UI isn’t intuitive just by applying
the definition
 But to make a UI intuitive, we need more

7/6/2016
reserved. 21
So, what’s an intuitive UI really?
A UI is intuitive when it has an appropriate combination of:
1. Discoverability Users can easily find the feature—when they need it.
2. Affordance Visually, the UI has clues that indicate what the user needs to do.
Users don’t have to experiment or deduce the interaction
3. Comprehensible Target users understand the UI elements and can make
informed decisions, with the knowledge they already have
4. Responsiveness The UI gives clear, immediate feedback to indicate that the
action is happening, and was either successful or unsuccessful
5. Predictability Functionally, the UI delivers the expected results, with no surprises.
Users don’t have to experiment or deduce the effect
6. Efficiency The UI enables users to perform an action with a minimum amount of
effort
7. Forgiveness If users make a mistake, either the right thing happens anyway or
they can fix or undo the action with ease
8. Explorability Users can explore without fear of making mistakes or getting lost
Let’s consider the interaction lifecycle
Steps required for interaction—the user
 Sets a goal
 Finds an interactive UI that might achieve the goal
 Performs the interaction
 Observes the results to determine if goal is achieved
An intuitive UI helps users achieve their goal at each of
these steps
Without the use of reason, memorization, experimentation,
assistance, or training

7/6/2016
reserved. 22
Is this UI intuitive?

7/6/2016
reserved. 23
From a health care professional job posting tool
Intuitive UI is consistent
 Consistency is crucial to being intuitive
 Jakob Nielsen’s Law of UX (rephrased):
 Users spend most of their time using software other than
yours

7/6/2016
reserved. 24
The Design of Everyday Things
 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

7/6/2016
reserved. 25
Is this intuitive?
Key takeaways
 Intuitive interactions are self-explanatory—they
communicate well
 Users fail tasks because they don’t understand the
interactions
 We expect users to understand interactions that we
explain poorly—yet they rarely do

7/6/2016
reserved. 26
Technique #3: Being strategically unintuitive
Does everything need to be intuitive?
Surprisingly…no!
Strategically unintuitive
Now that we know what it means…
 Most interactions should be intuitive
 But some interactions just aren’t worth it
 Let’s explore…starting with common excuses

7/6/2016
reserved. 27
Our users are trained professionals!
 Our users are experienced, trained professionals. You
can't just walk up and use this product! This product
isn’t for your mom!
 So those experienced professionals must have training
to understand your confusing, unintuitive UI?

7/6/2016
reserved. 28
But people learn all the time, right?
 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
 Do you want the success of your product dependent
upon people learning for essential interactions?

7/6/2016
reserved. 29
Common unintuitive UI
 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
Games and puzzles are unintuitive
 We enjoy the challenge of solving them

7/6/2016
reserved. 30
An intuitive Where’s Waldo?
Intuitive UI has a cost
 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

7/6/2016
reserved. 31
Levels of intuitiveness
Levels of intuitiveness
All users will get
Trained users might
remember

7/6/2016
reserved. 32
What about “single trial learning”?
 It’s reflected in the intuitiveness levels
 Sensible Single trial, figured out on your own
 Learnable Single trial+, somebody showed you
 Guessable Multiple trials, figured out on our own
 Trainable Multiple trials, somebody else showed you
 Yes, people do learn things, but the retention rate is
very low
 Often more like “Multiple trial forgetting”
Some UI can be unintuitive if strategic
 …instead of accidental
 Most unintuitive UI is accidental
 Sensible and learnable are good alternatives

7/6/2016
reserved. 33
Technique #4: Using “main instructions” to make
task flows intuitive
Intuitive task flows
Inductive UI
 An inductive UI is designed to be self-explanatory to
lead users through the task steps
 Goal: To design intuitive task flows, to eliminate 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

7/6/2016
reserved. 34
Explainable first
 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
A “deductive” UI example

7/6/2016
reserved. 35
An “inductive” UI example
Elements of inductivity
 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

7/6/2016
reserved. 36
This really works!
 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
This really works: an example

7/6/2016
reserved. 37
This really works: another example
This really works: yet another example

7/6/2016
reserved. 38
Copyright 2016 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
Key takeaways
 Comprehensible tasks are easily explainable
 The main instruction gives us insight on how to design
the page
 Put the main instruction explicitly on the page if its
purpose isn’t obvious

7/6/2016
reserved. 39
Technique #5: Using effective communication as a
design review tool
Communication reviews
A good UI feels like a conversation

7/6/2016
reserved. 40
If what we say in person is better…
 If you find yourself in a “show and tell” design review…
 BTW: My least favorite design review technique
 and the presenter translates UI elements into “what
they really mean”…
 You have just found a design problem!
 Intuitive UIs are self explanatory, so if the presenter
says something different from what is on the screen,
the UI is wrong!
 Remember Bob and Alice
Communication reviews
 A communication review evaluates how well a design
communicates
 Use this when someone is presenting a design to your
team (the “show and tell”)
 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?

7/6/2016
reserved. 41
Communication review example
Key takeaways
 When we explain a UI in person, we explain it in terms
the target users understand
 If our explanation is different from the UI, the UI is
probably wrong
 Let’s take advantage of this during design reviews
 You will be amazed by what you can find

7/6/2016
reserved. 42
The details
About the book
Available now!

7/6/2016
reserved. 43
Just the facts
 Published by Morgan Kaufmann in June 2013
 363 pages, all in color!
 Price $44.45
 $42.70 on Amazon, Rs. 2638 on FlipKart
 Kindle, ebook versions available!
 Sales so far—sluggish  (I need your help!)
My goals
 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!

7/6/2016
reserved. 44
Table of contents
 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)
Special request
 Buy the book!
 Review the book!
 Recommend and discuss the book!
 Use #UIComm on Twitter
 Tell your friends!

7/6/2016
reserved. 45
Summary and wrap up
Four core UI is Communication concepts
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

7/6/2016
reserved. 46
Five techniques we learned today
1. Start your designs by thinking about the human
experience, not sketching a list of features
2. The attributes of an intuitive UI relate to communicating
interaction and purpose
3. Not everything has to be intuitive—recognize
strategically when it isn’t worth it
4. “Inductive” UI makes task flows intuitive and reduces
need for documentation and training
5. We can evaluate a UI easily just by comparing what we
say in person to what is on the UI, such as during design
reviews
Calls to action!
 Got feedback? Would love to hear it! Please contact
me at everettm@uxdesignedge.com
 Join the UX Design Edge mailing list
 Let’s connect on LinkedIn, follow me at
@uxdesignedge
 Consider hosting a workshop at your company
(uxdesignworkshop.com)
 Check out my onDemand classes (ux-ondemand.com)

7/6/2016
reserved. 47
One last thing…
 I plan to present a workshop at UXNL on Nov 2nd!
 I will be back soon!
Swag time!
Questions

7/6/2016
reserved. 48
Lekker!
Thank you!

Ui is communication by Everett McKay

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ui is communication by Everett McKay

Similar to Ui is communication by Everett McKay (20)

Recently uploaded

Recently uploaded (20)

Ui is communication by Everett McKay