Your SlideShare is downloading. ×
UI IS COMMUNICATION
How to design intuitive, user-centered
interfaces by focusing on effective
communication
Everett McKay...
Who is this guy?
Copyright 2015 UX Design Edge. All rights reserved.
 Principal of UX Design Edge (from Vermont, USA)
 O...
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
 Intu...
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!
...
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...
“Design is not
just what it looks
like and feels
like. Design is
how it works.”
Steve Jobs
Copyright 2015 UX Design Edge. ...
Four core concepts
Copyright 2015 UX Design Edge. All rights reserved.
1. A user interface is essentially a conversation b...
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 U...
My expectations
Copyright 2015 UX Design Edge. All rights reserved.
 Their initial UI design won’t be very good
 Bob and...
What’s not surprising
Copyright 2015 UX Design Edge. All rights reserved.
 It’s not surprising that the design isn’t very...
What is surprising
Copyright 2015 UX Design Edge. All rights reserved.
 That the two are so different!
 If Bob and Alice...
Why does this happen?
Copyright 2015 UX Design Edge. All rights reserved.
Communication between people tends to
 Be natur...
Can’t we use the same approach?
Copyright 2015 UX Design Edge. All rights reserved.
 Q: If the way we communicate in pers...
The UI is Communication concept
Copyright 2015 UX Design Edge. All rights reserved.
 UI design is ultimately about commun...
Imagine a conversation between friends
Copyright 2015 UX Design Edge. All rights reserved.
 Suppose you are looking over ...
Communications applies to all UI
Copyright 2015 UX Design Edge. All rights reserved.
 All UI elements communicate somethi...
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:
...
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 tha...
The power of adding a single word
Copyright 2015 UX Design Edge. All rights reserved.
 Some designers are terrified to ad...
Keys to success
Copyright 2015 UX Design Edge. All rights reserved.
 Focus design decisions on effective communication
 ...
Example 1: Communication design review
Copyright 2015 UX Design Edge. All rights reserved.
 How well does this UI communi...
Example 2: Communication design review
Copyright 2015 UX Design Edge. All rights reserved.
 How well does this UI communi...
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...
Some popular definitions
Copyright 2015 UX Design Edge. All rights reserved.
Are these useful definitions?
 Simple, easy ...
My definition
Copyright 2015 UX Design Edge. All rights reserved.
A “dictionary” definition:
 A UI is intuitive when targ...
A clear sign your UI isn’t intuitive
Copyright 2015 UX Design Edge. All rights reserved.
An intuitive UI shouldn’t need a ...
The definition is a good start
Copyright 2015 UX Design Edge. All rights reserved.
 We can determine if a UI isn’t intuit...
So, what’s an intuitive UI really?
Copyright 2015 UX Design Edge. All rights reserved.
A UI is intuitive when it has an ap...
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...
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 ...
The Design of Everyday Things
Copyright 2015 UX Design Edge. All rights reserved.
 Donald Norman’s concept of affordance
...
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: peo...
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
 Migh...
Intuitive UI has a cost
Copyright 2015 UX Design Edge. All rights reserved.
 Discoverability
 May result in clutter, fea...
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
 Mos...
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
l...
Explainable first
Copyright 2015 UX Design Edge. All rights reserved.
 An explainable UI is understandable, intuitive UI ...
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 p...
This really works!
Copyright 2015 UX Design Edge. All rights reserved.
 You might be skeptical, but if you:
 Take a page...
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 mi...
What are we doing here again?
Copyright 2015 UX Design Edge. All rights reserved.
 We are using main instructions to make...
I love user research and testing, but…
Copyright 2015 UX Design Edge. All rights reserved.
 Traditional UCD is too depend...
Getting beyond “sketching a pile of features”
A communication-focused process
Copyright 2015 UX Design Edge. All rights re...
Apple’s app design strategy
Copyright 2015 UX Design Edge. All rights reserved.
From the iOS Human Interface Guidelines
1....
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 ...
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...
Communicating tasks
Copyright 2015 UX Design Edge. All rights reserved.
Imagine a conversation between friends
 Suppose y...
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 de...
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...
My goals
Copyright 2015 UX Design Edge. All rights reserved.
 Top goal: the “one book” to get started in UI design
 An a...
Table of contents
Copyright 2015 UX Design Edge. All rights reserved.
 Ch 1: Communication Design Principles
 Ch 2: Inte...
Special request
Copyright 2015 UX Design Edge. All rights reserved.
 Buy the book!
 Amazon link: domakemethink.com
 Rev...
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 b...
The details
Copyright 2015 UX Design Edge. All rights reserved.
 Effective communication applies to all UI elements
 The...
Final thought: Practical magic
Copyright 2015 UX Design Edge. All rights reserved.
 Pretend it’s magic—Alan Cooper
 What...
UX Design Edge offerings
Copyright 2015 UX Design Edge. All rights reserved.
 UX Design Edge is all about helping teams w...
Got feedback?
Copyright 2015 UX Design Edge. All rights reserved.
 Would love to hear it!
 Please send it to everettm@ux...
Thank you!
Copyright 2015 UX Design Edge. All rights reserved.
Upcoming SlideShare
Loading in...5
×

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

2,951

Published on

A user interface is ultimately a conversation between users and technology, so well-designed user interfaces use the language of UI to communicate to users efficiently, naturally, and intuitively. Focusing on effective human communication removes much of the mystique, subjectiveness, and complexity from user interface design, and helps you make better design decisions with confidence.
In this talk, Everett McKay presents the core principles of communication-focused design, shows how they apply to intuitive interactions and task flows, provides some communication-based design tools and techniques, and applies these principles and tools to several design makeovers. In the end, you will have a new perspective that will help you make better design decisions more quickly and confidently. 

Published in: Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,951
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Version, Build, Serial Number
  • The shower controller from Willows Lodge in Woodinville, WA.
  • This is what I call the “sketching a pile of features” approach to UI design.
  • CC: Cost center
    CA: Cost assignment
  • Transcript of "Ui is Communication: How to design intuitive, user-centered interfaces by focusing on effective communication "

    1. 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. 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. 3. And I have a new book! Copyright 2015 UX Design Edge. All rights reserved.
    4. 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. 5. Communication gives design clarity Copyright 2015 UX Design Edge. All rights reserved.
    6. 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. 7. What’s it all about The UI is Communication Concept Copyright 2015 UX Design Edge. All rights reserved.
    8. 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. 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. 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. 11. Copyright 2015 UX Design Edge. All rights reserved.
    12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. A natural, friendly conversation Copyright 2015 UX Design Edge. All rights reserved.
    22. 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. 23. If your product were a person… Copyright 2015 UX Design Edge. All rights reserved.
    24. 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. 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. 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. 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. 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. 29. Example 3: Communication design review Copyright 2015 UX Design Edge. All rights reserved.
    30. 30. What the heck is it? Intuitive UI Copyright 2015 UX Design Edge. All rights reserved.
    31. 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. 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. 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. 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. 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. 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. 37. Is this UI intuitive? Copyright 2015 UX Design Edge. All rights reserved.
    38. 38. Is this UI intuitive? Copyright 2015 UX Design Edge. All rights reserved.
    39. 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. 40. Is this UI intuitive? Copyright 2015 UX Design Edge. All rights reserved.
    41. 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. 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. 43. Is this intuitive? Copyright 2015 UX Design Edge. All rights reserved.
    44. 44. Is this UI intuitive? Copyright 2015 UX Design Edge. All rights reserved.
    45. 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. 46. Is this UI intuitive? Copyright 2015 UX Design Edge. All rights reserved.
    47. 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. 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. 49. Levels of intuitiveness Copyright 2015 UX Design Edge. All rights reserved.
    50. 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. 51. Answering the one question all users have Intuitive task flows Copyright 2015 UX Design Edge. All rights reserved.
    52. 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. 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. 54. A “deductive” UI example Copyright 2015 UX Design Edge. All rights reserved.
    55. 55. An “inductive” UI example Copyright 2015 UX Design Edge. All rights reserved.
    56. 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. 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. 58. This really works: an example Copyright 2015 UX Design Edge. All rights reserved.
    59. 59. This really works: another example Copyright 2015 UX Design Edge. All rights reserved.
    60. 60. This really works: a mobile example Copyright 2015 UX Design Edge. All rights reserved.
    61. 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. 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. 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. 64. Getting beyond “sketching a pile of features” A communication-focused process Copyright 2015 UX Design Edge. All rights reserved.
    65. 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. 66. Sketching a pile of features Copyright 2015 UX Design Edge. All rights reserved.
    67. 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. 68. Features and requirements aren’t enough Copyright 2015 UX Design Edge. All rights reserved.
    69. 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. 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. 71. Feels like a conversation Copyright 2015 UX Design Edge. All rights reserved.
    72. 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. 73. Communication review example Copyright 2015 UX Design Edge. All rights reserved.
    74. 74. The details About the book Copyright 2015 UX Design Edge. All rights reserved.
    75. 75. Available now! Copyright 2015 UX Design Edge. All rights reserved.
    76. 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. 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. 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. 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. 80. Summary and wrap up Copyright 2015 UX Design Edge. All rights reserved.
    81. 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. 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. 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. 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. 85. Got feedback? Copyright 2015 UX Design Edge. All rights reserved.  Would love to hear it!  Please send it to everettm@uxdesignedge.com
    86. 86. Thank you! Copyright 2015 UX Design Edge. All rights reserved.

    ×