Everett McKay Talk a UX Antwerp Meetup
-
Upload
ux-antwerp-meetup -
Category
Design
-
view
214 -
download
1
Transcript of Everett McKay Talk a UX Antwerp Meetup
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 1
UI IS COMMUNICATIONHow to design intuitive, user-centered interfaces by focusing on effective communication
Everett McKayUX Design Edgeuxdesignedge.com, freeuxwebinars.com@uxdesignedge
UX Antwerp, July 2016
I have a new book!
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 2
Today’s agenda
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 3
My promise
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 4
A bold claim
Copyright 2016 UX Design Edge. All rights reserved.
A user interface is an objective, principled form of human communication, not a subjective art!
Four core concepts
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 5
Copyright 2016 UX Design Edge. All rights reserved.
My expectations
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 6
What’s not surprising
Copyright 2016 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
What is surprising
Copyright 2016 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!
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 7
Why does this happen?
Copyright 2016 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)
Can’t we use the same approach?
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 8
The UI is Communication concept
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 9
Communications applies to all UI
Copyright 2016 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
Key takeaways
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 10
Technique #1: Beyond sketching features
UI as conversations
Copyright 2016 UX Design Edge. All rights reserved.
Apple’s App Design Strategy
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 11
Sketching a pile of features
Copyright 2016 UX Design Edge. All rights reserved.
Sketching a pile of features
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 12
Features and requirements aren’t enough
Copyright 2016 UX Design Edge. All rights reserved.
A typical design process needs a miracle
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 13
A typical story
Copyright 2016 UX Design Edge. All rights reserved.
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?
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 14
What should the home screen be?
Copyright 2016 UX Design Edge. All rights reserved.
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
What should the home screen be?
Copyright 2016 UX Design Edge. All rights reserved.
The best home screen: that conversation to support those scenarios, elevate content people care about
Now we can sketch!
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 15
What just happened?
Copyright 2016 UX Design Edge. All rights reserved.
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?
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 16
Key takeaways
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 17
Everybody wants an intuitive UI
Copyright 2016 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
Some popular definitions
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 18
The dictionary definition is useless
Copyright 2016 UX Design Edge. All rights reserved.
A typical dictionary definition:
Instinctive (based on behavior or knowledge we are born with)
My definition
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 19
Ever heard this one?
Copyright 2016 UX Design Edge. All rights reserved.
It’s intuitive once you learn it!
A clear sign your UI isn’t intuitive
Copyright 2016 UX Design Edge. All rights reserved.
An intuitive UI shouldn’t need a manual or training
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 20
Are you going to read the manual?
Copyright 2016 UX Design Edge. All rights reserved.
The definition is a good start
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 21
So, what’s an intuitive UI really?
Copyright 2016 UX Design Edge. All rights reserved.
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 interaction3. Comprehensible Target users understand the UI elements and can make
informed decisions, with the knowledge they already have4. Responsiveness The UI gives clear, immediate feedback to indicate that the
action is happening, and was either successful or unsuccessful5. Predictability Functionally, the UI delivers the expected results, with no surprises.
Users don’t have to experiment or deduce the effect6. Efficiency The UI enables users to perform an action with a minimum amount of
effort7. Forgiveness If users make a mistake, either the right thing happens anyway or
they can fix or undo the action with ease8. 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
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 22
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 23
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
From a health care professional job posting tool
Intuitive UI is consistent
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 24
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
The Design of Everyday Things
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 25
Is this intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
Key takeaways
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 26
Technique #3: Being strategically unintuitive
Does everything need to be intuitive? Surprisingly…no!
Strategically unintuitive
Copyright 2016 UX Design Edge. All rights reserved.
Now that we know what it means…
Copyright 2016 UX Design Edge. All rights reserved.
Most interactions should be intuitive
But some interactions just aren’t worth it
Let’s explore…starting with common excuses
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 27
Our users are trained professionals!
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 28
But people learn all the time, right?
Copyright 2016 UX Design Edge. All rights reserved.
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?
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 29
Common unintuitive UI
Copyright 2016 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
Games and puzzles are unintuitive
Copyright 2016 UX Design Edge. All rights reserved.
We enjoy the challenge of solving them
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 30
An intuitive Where’s Waldo?
Copyright 2016 UX Design Edge. All rights reserved.
Intuitive UI has a cost
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 31
Levels of intuitiveness
Copyright 2016 UX Design Edge. All rights reserved.
Levels of intuitiveness
Copyright 2016 UX Design Edge. All rights reserved.
All users will get
Trained users mightremember
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 32
What about “single trial learning”?
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved.
…instead of accidental
Most unintuitive UI is accidental
Sensible and learnable are good alternatives
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 33
Technique #4: Using “main instructions” to make task flows intuitive
Intuitive task flows
Copyright 2016 UX Design Edge. All rights reserved.
Inductive UI
Copyright 2016 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, 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
Copyright 2016 UX Design Edge. All rights reserved. 34
Explainable first
Copyright 2016 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
A “deductive” UI example
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 35
An “inductive” UI example
Copyright 2016 UX Design Edge. All rights reserved.
Elements of inductivity
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 36
This really works!
Copyright 2016 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
This really works: an example
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 37
This really works: another example
Copyright 2016 UX Design Edge. All rights reserved.
This really works: yet another example
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights 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
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 39
Technique #5: Using effective communication as a design review tool
Communication reviews
Copyright 2016 UX Design Edge. All rights reserved.
A good UI feels like a conversation
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 40
If what we say in person is better…
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 41
Communication review example
Copyright 2016 UX Design Edge. All rights reserved.
Key takeaways
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 UX Design Edge. All rights reserved. 42
The details
About the book
Copyright 2016 UX Design Edge. All rights reserved.
Available now!
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 43
Just the facts
Copyright 2016 UX Design Edge. All rights reserved.
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
Copyright 2016 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!
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 44
Table of contents
Copyright 2016 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)
Special request
Copyright 2016 UX Design Edge. All rights reserved.
Buy the book!
Review the book!
Recommend and discuss the book!
Use #UIComm on Twitter
Tell your friends!
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 45
Summary and wrap up
Copyright 2016 UX Design Edge. All rights reserved.
Four core UI is Communication concepts
Copyright 2016 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
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 46
Five techniques we learned today
Copyright 2016 UX Design Edge. All rights reserved.
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!
Copyright 2016 UX Design Edge. All rights reserved.
Got feedback? Would love to hear it! Please contact me at [email protected]
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
Copyright 2016 UX Design Edge. All rights reserved. 47
One last thing…
Copyright 2016 UX Design Edge. All rights reserved.
I plan to present a workshop at UXNL on Nov 2nd!
I will be back soon!
Swag time!
Questions
Copyright 2016 UX Design Edge. All rights reserved.
7/6/2016
Copyright 2016 UX Design Edge. All rights reserved. 48
Copyright 2016 UX Design Edge. All rights reserved.
Lekker!
Thank you!
Copyright 2016 UX Design Edge. All rights reserved.