SlideShare a Scribd company logo
1 of 86
UI IS COMMUNICATION
How to design intuitive, user-centered
interfaces by focusing on effective
communication
Everett McKay
UX Design Edge
uxdesignedge.com
domakemethink.com
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
And I have a new book!
Copyright 2015 UX Design Edge. All rights reserved.
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
Communication gives design clarity
Copyright 2015 UX Design Edge. All rights reserved.
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!
What’s it all about
The UI is Communication Concept
Copyright 2015 UX Design Edge. All rights reserved.
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!
“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.
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
Copyright 2015 UX Design Edge. All rights reserved.
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?
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
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
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!
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)
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
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
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
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
A natural, friendly conversation
Copyright 2015 UX Design Edge. All rights reserved.
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?
If your product were a person…
Copyright 2015 UX Design Edge. All rights reserved.
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
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?
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)
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?
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?
Example 3: Communication design review
Copyright 2015 UX Design Edge. All rights reserved.
What the heck is it?
Intuitive UI
Copyright 2015 UX Design Edge. All rights reserved.
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
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
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!
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
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
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
Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
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?
Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
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
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
Is this intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
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?
Is this UI intuitive?
Copyright 2015 UX Design Edge. All rights reserved.
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
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
Levels of intuitiveness
Copyright 2015 UX Design Edge. All rights reserved.
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
Answering the one question all users have
Intuitive task flows
Copyright 2015 UX Design Edge. All rights reserved.
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
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
A “deductive” UI example
Copyright 2015 UX Design Edge. All rights reserved.
An “inductive” UI example
Copyright 2015 UX Design Edge. All rights reserved.
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
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
This really works: an example
Copyright 2015 UX Design Edge. All rights reserved.
This really works: another example
Copyright 2015 UX Design Edge. All rights reserved.
This really works: a mobile example
Copyright 2015 UX Design Edge. All rights reserved.
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
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!
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
Getting beyond “sketching a pile of features”
A communication-focused process
Copyright 2015 UX Design Edge. All rights reserved.
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
Sketching a pile of features
Copyright 2015 UX Design Edge. All rights reserved.
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
Features and requirements aren’t enough
Copyright 2015 UX Design Edge. All rights reserved.
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
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
Feels like a conversation
Copyright 2015 UX Design Edge. All rights reserved.
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?
Communication review example
Copyright 2015 UX Design Edge. All rights reserved.
The details
About the book
Copyright 2015 UX Design Edge. All rights reserved.
Available now!
Copyright 2015 UX Design Edge. All rights reserved.
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!)
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!
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)
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
Summary and wrap up
Copyright 2015 UX Design Edge. All rights reserved.
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
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
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?
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
Got feedback?
Copyright 2015 UX Design Edge. All rights reserved.
 Would love to hear it!
 Please send it to everettm@uxdesignedge.com
Thank you!
Copyright 2015 UX Design Edge. All rights reserved.

More Related Content

What's hot

UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
Scaling UX Design
Scaling UX DesignScaling UX Design
Scaling UX DesignUXDXConf
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionProttay Karim
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXNewflux UX/UI News
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX Murali Krishna
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdfJejeCans
 

What's hot (20)

The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Scaling UX Design
Scaling UX DesignScaling UX Design
Scaling UX Design
 
UX/UI Workshop Slides
UX/UI Workshop SlidesUX/UI Workshop Slides
UX/UI Workshop Slides
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
 
UX Design Process
UX Design ProcessUX Design Process
UX Design Process
 
What Is UX?
What Is UX?What Is UX?
What Is UX?
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 
Desain Grafis 4 - UI/UX
Desain Grafis 4 - UI/UXDesain Grafis 4 - UI/UX
Desain Grafis 4 - UI/UX
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 

Similar to Ui is Communication: How to design intuitive, user-centered interfaces by focusing on effective communication

Ui is communication by Everett McKay
Ui is communication by Everett McKayUi is communication by Everett McKay
Ui is communication by Everett McKayAmsterdam UX
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?DariaPersell
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Jessie Doan
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
 
UI/UX: Distinction and Trends
UI/UX: Distinction and TrendsUI/UX: Distinction and Trends
UI/UX: Distinction and TrendsAnkur Sharma
 
UI/UX-Distinction and Trend
UI/UX-Distinction and TrendUI/UX-Distinction and Trend
UI/UX-Distinction and TrendQuikr
 
Uxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesUxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesimdurgesh
 
Why Does a UI Matters?
Why Does a UI Matters?Why Does a UI Matters?
Why Does a UI Matters?NotifyVisitors
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1Durgesh Pandey
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXqixingz
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1Lewis Lin 🦊
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patternsKevinHao14
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Akhil Kumar
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Lewis Lin 🦊
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slidesoopscrash1
 
UX design presentation
UX design presentationUX design presentation
UX design presentationAjanthan M
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 

Similar to Ui is Communication: How to design intuitive, user-centered interfaces by focusing on effective communication (20)

Ui design by mhm
Ui design by mhmUi design by mhm
Ui design by mhm
 
Ui is communication by Everett McKay
Ui is communication by Everett McKayUi is communication by Everett McKay
Ui is communication by Everett McKay
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
UI/UX: Distinction and Trends
UI/UX: Distinction and TrendsUI/UX: Distinction and Trends
UI/UX: Distinction and Trends
 
UI/UX-Distinction and Trend
UI/UX-Distinction and TrendUI/UX-Distinction and Trend
UI/UX-Distinction and Trend
 
UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
Uxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesUxpin web ui_design_best_practices
Uxpin web ui_design_best_practices
 
Why Does a UI Matters?
Why Does a UI Matters?Why Does a UI Matters?
Why Does a UI Matters?
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UX
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patterns
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slides
 
UX design presentation
UX design presentationUX design presentation
UX design presentation
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 

Recently uploaded

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 

Recently uploaded (19)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
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
  • 5. Communication gives design clarity Copyright 2015 UX Design Edge. All rights reserved.
  • 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
  • 11. Copyright 2015 UX Design Edge. All rights reserved.
  • 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?
  • 29. Example 3: Communication design review Copyright 2015 UX Design Edge. All rights reserved.
  • 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
  • 43. Is this intuitive? Copyright 2015 UX Design Edge. All rights reserved.
  • 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
  • 49. Levels of intuitiveness Copyright 2015 UX Design Edge. All rights reserved.
  • 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
  • 68. Features and requirements aren’t enough Copyright 2015 UX Design Edge. All rights reserved.
  • 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?
  • 73. Communication review example Copyright 2015 UX Design Edge. All rights reserved.
  • 74. The details About the book Copyright 2015 UX Design Edge. All rights reserved.
  • 75. Available now! Copyright 2015 UX Design Edge. All rights reserved.
  • 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
  • 86. Thank you! Copyright 2015 UX Design Edge. All rights reserved.

Editor's Notes

  1. Version, Build, Serial Number
  2. The shower controller from Willows Lodge in Woodinville, WA.
  3. This is what I call the “sketching a pile of features” approach to UI design.
  4. CC: Cost center CA: Cost assignment