UI is Communication

8/8/2019 UI is Communication

1/13


2/13


3/13


4/13


5/13

9/10/2010

pyright 2010 UX Design Edge. All rightserved. 5

Copyright 2010 UX Design Edge. All rights reserved.

UI is Communication (in a nutshell)


UI is communicationbetween the user andtechnology

UI is different from natural language, but only slightlyWe can and should use the same approach andstandards to communicate to users throughtechnology as we do in person

This approach was developed over centuriesDoing so is a simple way to help us focus on ourusers and their goalsIf a UI feels like a natural, professional, friendlyconversation, its probably a good design

Attributes of effective communication


Useful, relevant Provides the right information,purposefulClear, natural Speaks the users languageEasy to understand Doesnt require thought,experimentationExplicit, specific Doesnt under communicateConcise, efficient Doesnt over communicateGood tone Friendly, good personality

Control Leaves user in control of the conversationTimely Presented at the right time

Communications applies to all UI


All UI elements communicate something:Task flowControlsUI textIcons, graphics, colorsAnimations, transitionsPage layoutFeedback

UI elements arent arbitrary choicesThey work together harmoniously to communicate differentaspects of the same consistent story

Example: Animations and transitions


Good animations and transitionsCommunicate non-verbally and make state changesmore natural and less noticeableOften used for feedback, showing relationships, causesand effects, or drawing attention to important change

Consistency is crucial to their effectivenessSpecific effects should have specific meaningsException: Generic effects like cross fades

Best approach: define an animation and transitionvocabulary

We need the same standards for HCI


as we do for human interaction:Tone attitude a UI conveys to the userRespect users are emotional, care for users feelingsPoliteness good manners, social behavior (rude demo)Forgiveness Preventing and recovering from mistakesPersonality characteristics that connect emotionally withusers

If a behavior would be inappropriate between people, itshould be inappropriate for softwareA interesting test: if your product were a person, whowould it be?


6/13

9/10/2010


Communication design review


Exercise 3 How well does this UI communicate?

Can we make it communicate moreeffectively? More natural and friendly? How to use the right UI elements

The language of UI



Using the right UI element


Key questions to ask:Is the element used for the correct purpose?

Is the interaction natural, efficient, and standard?Is the purpose and effect obvious from inspection?

Can a label clearly communicate the purpose?For all states?

Are the details right?Is the scale suitable?

Is it the best choice compared to the alternatives?Is there a simpler, lighter weight alternative?Is there a more constrained, less error prone alternative?

Evaluating elements by what theycommunicate


WarningsA condition that might cause a problem in the futureGood: and communicates info that makes users performan action or change their behavior

ConfirmationsA possibility user might be making a mistakeGood: and communicates a good reason not to proceed

Wizard pagesA step in a processGood: where users need to actually do something

UI element body language


Body language its not just what you say, but howyou say it

Data type, source

Data values, continuityNumber of items

Immediate vs. delayedScreen space requiredDefault values

Encourage change

Secondary commandsPresentation, order

Level of commitmentComplexityDiscoverability


7/13

9/10/2010


Body language example


Exercise 4 These controls have the same basicpurpose: to choose a single item

But their body language is differentHow?

Based on effective communication

A design process



Consider a conversation between friends


Suppose you are looking over a users shoulder andhe or she asks, What do I do here? Think aboutthe explanation you would give the steps, theirorder, the language youd use, and the way youexplain things. Also think about what you wouldnt sayThis is a high-level guide to design and evaluate taskflowsLook for discrepancies they reveal problems

Inductive UI


An inductive UI is designed to be self-explanatory to

lead users through a taskGoal: To eliminate the need to think and experiment

Elements of inductivityA clear main instruction that explains the purpose of a pagePage content that is related to the main instructionUse of clear, specific language on all controlsClear navigation elements

Underlying concept: Explainable UI is understandableUIthe quality of the main instruction oftenpredicts/indicates the quality of the page (ex: Manage)Implication: Not a good idea to avoid writing UI text

A deductive UI example



8/13

9/10/2010


An inductive UI example


A communication-based design process


Explain the task as you would to someone in person

Break the task into natural, goal focused, easilyexplainable stepsPresent each step using appropriate controls, UItext, layout, defaults, etc.

Refine and simplify as necessary untilcommunication goals are achieved

Designing task steps


Lets think about the steps required to perform a task

Break task down into individual stepsWhere does the user start?Where does the user end?What are the steps in between

Craft a plain, friendly language description of each, focused on goals and purpose

Designing screens


Start by thinking about the purpose of the screenWhat does the user need to do?How can you communicate that concisely and naturally?What is the input, likely actions?

Map the communication to controls and UI textNeed progressive disclosure, dynamic behaviors?

Determine layout by consideringProper sizing and spacingOrder the actionsVisual hierarchy, focus, flow

Details: defaults, optimize for probable, error handling

Inductive UI design review


Exercise 5 How well does this UI communicate?How can we make it more inductive?

Everybody wants an intuitive UI

Intuitive communication



9/13

9/10/2010


Everybody wants an intuitive UI


Having an intuitive UI is a top goal for any UXproject

To users, describing a UI as intuitive is the highestpraise they can bestow

Funny thing: nobody really knows what an intuitiveUI is

Lets try to define it!

So, whats an intuitive UI?


A UI is intuitive when it has an appropriate combination of:Affordance Visually, the UI has clues that indicate what it is going todo. Users dont have to experiment or deduce the interactionExpectation Functionally, the UI delivers the expected results, withno surprises. Users dont have to experiment or deduce the effectEfficiency The UI enables users to perform an action with aminimum amount of effortResponsiveness The UI gives clear, immediate feedback to indicatethat the action is happening, and was either successful orunsuccessfulForgiveness If users make a mistake, either the right thing happensanyway or they can fix or undo the action with easeExplorability Users can explore without fear of penalty or gettinglost

Consistency


Consistency is crucial to being intuitive

Jakob Nielsens Law of UX (rephrased):Users spend most of their time using software other than yours

Benefits of small improvements achieved throughinconsistency are easily outweighed by the lack of familiarity

Common controls with standard interaction are bestCustom controls are acceptable when really needed

Following guidelines helps


Guidelines are rules, based on experience andconvention

Guidelines are the grammar and usage rules for thelanguage of UI

Following guidelines will help your programcommunicate to users effectively, feel intuitive,and have a familiar, consistent appearance

Bottom line


The various element design decisions arentarbitrary they need to work together tocommunicate different aspects of the sameconsistent message

The effective communication is essential to anintuitive UI

Trying to make a UI intuitive directly doesnt get usvery far


10/13

9/10/2010


How to make sure that youve got it right

Evaluation techniques

Copyright 2010 UX Design Edge. All rights reserved.Copyright 2010 UX Design Edge. All rights reserved.

Communication review


A communication review evaluates how well adesign communicates by reading it according to aset of rules

Process: Apply rules for immersive, scanning, andGinger reading

A simple way to evaluate if a design communicateswell

My inspiration for Ginger

Copyright 2010 UX Design Edge. All rights reserved.Cartoon Gary Larson

How people read


People read in a left-to-right, top-to-bottom order (in Western

cultures)There are two modes of reading: immersive reading and scanningThe goal of immersive reading is comprehensionThe goal of scanning is to find things

Generally, users usually don't read they scanThey aren't immersed in the UI itself but in their workThey first scan the whole pageThey read bits of text comprehensively only when they believe theyneed toThey tend to skip over large blocks of unformatted text without readingthem at allThey tend to read interactive control labels

Immersive reading rules


RulesRead all text from left to right, top to bottomRead icons (ex: warning icon as Warning!)Drill down into any progressive disclosureRead wait cursors and progress barsRead whitespace as pausesBut ignore anything that requires hover

What to look for:Text makes sense, is well written, not redundantA good design wont sound silly when read this way


11/13

9/10/2010


Scanning rules


RulesReader generally from left to right, top to bottom, but let

your eye gravitate to things that catch your eyeRead all prominent textRead only the first line, replace the remainder with blah, blah,blah

Read all control labelsRead error and warning iconsIgnore everything else

What to look for:It should be clear what to do

Ginger rules


RulesIf there is a heading, read first 7 words

Read all interactive control labelsRead anything that heading or interactive controlsindicate that you should readIgnore everything else

What to look for:It should still be clear what to do

Q: Using this model, how do you make sure usersread essential text?

Lets try a communication review


Exercise 6 Apply the reading rules to the followingexamples

What problems did you find?How can you fix them?

Communication review example 1


Communication review example 2


Summary and wrap up



12/13

9/10/2010


Summary


UI is communication!Focusing on communication is the simplest way to

develop design thinking and focus on user goalsWe should have the same standards for HCI as we dofor human interactionEffective communication applies to al l UI elementsUI elements have a body languageInductive UI suggests a design processMost of the attributes of an intuitive UI are related toeffective communicationWe can easily evaluate a UI easily just by reading it

Things to remember


UI is a conversation between users and a productGood designs communicate their purpose wellGreat designs have a human touchMost interaction problems are some type of communicationproblem

When in doubt, ask yourself:What would you say in person to a friend or colleague ?Does the UI match?

For the details:Why is this element here?What does it communicate?Would an alternative communicate better?What would you lose if you removed it?

UX Design Edge offerings


UX Design Edge is all about helping teams withoutdesign resources do their best workEfficient, cost effective consultingTeam, onsite, and online trainingDesign reviews, in house UX expert serviceIf you need design help, please contact me

[email protected]

Be sure to subscribe to my blogAnd join my mailing list

UX Design Essentials Course


A three-day UX design course targeted at non-designers

Top goals:Learn the practical essentialsHelp you make better decisions more quickly andconfidently

Next class scheduled for Stowe for October 18 20

Please sign up!

UX Design Essentials Outline


Part 1: Basic design process

Part 2: Design principles and guidelinesPart 3: User centered decisionsPart 4: Elements of UIPart 5: Task flowsPart 6: Modern UXPart 7: Delighting usersPart 8: Design communication techniques: sketches, prototypes,specsPart 9: Design evaluation techniquesPart 10: Informal usability studiesOptional workshop

For more info, check http://www.uxdesignedge.com

Useful UX Design Edge blog posts


From http://www.uxdesignedge.com/blog :Getting started in interaction designWhy everybody is a designer : The UX Design SkillsLadderIntuitive UI: What the heck is it?Dont design like a programmerIcon design for non-designersDesign scenarios and how thrilled users ruin themAre you sure? How to write effective confirmationsInteraction design interview question #1The politics of ribbons
mailto:[email protected]://www.uxdesignedge.com/http://www.uxdesignedge.com/http://www.uxdesignedge.com/http://www.uxdesignedge.com/bloghttp://www.uxdesignedge.com/bloghttp://www.uxdesignedge.com/2010/03/getting-started-in-interaction-design/http://www.uxdesignedge.com/2010/03/why-everybody-is-a-designer/http://www.uxdesignedge.com/2010/03/why-everybody-is-a-designer/http://www.uxdesignedge.com/2010/06/intuitive-ui-what-the-heck-is-it/http://www.uxdesignedge.com/2010/03/dont-design-like-a-programmer/http://www.uxdesignedge.com/2010/07/icon-design-for-non-designers/http://www.uxdesignedge.com/2010/05/design-scenarios-and-how-thrilled-users-ruin-them/http://www.uxdesignedge.com/2010/05/design-scenarios-and-how-thrilled-users-ruin-them/http://www.uxdesignedge.com/2010/05/design-scenarios-and-how-thrilled-users-ruin-them/http://www.uxdesignedge.com/2010/06/are-you-sure-how-to-write-effective-confirmations/http://www.uxdesignedge.com/2010/04/interaction-design-interview-question1/http://www.uxdesignedge.com/2010/04/the-politics-of-ribbons/http://www.uxdesignedge.com/2010/04/the-politics-of-ribbons/http://www.uxdesignedge.com/2010/04/interaction-design-interview-question1/http://www.uxdesignedge.com/2010/06/are-you-sure-how-to-write-effective-confirmations/http://www.uxdesignedge.com/2010/05/design-scenarios-and-how-thrilled-users-ruin-them/http://www.uxdesignedge.com/2010/05/design-scenarios-and-how-thrilled-users-ruin-them/http://www.uxdesignedge.com/2010/05/design-scenarios-and-how-thrilled-users-ruin-them/http://www.uxdesignedge.com/2010/07/icon-design-for-non-designers/http://www.uxdesignedge.com/2010/07/icon-design-for-non-designers/http://www.uxdesignedge.com/2010/07/icon-design-for-non-designers/http://www.uxdesignedge.com/2010/03/dont-design-like-a-programmer/http://www.uxdesignedge.com/2010/06/intuitive-ui-what-the-heck-is-it/http://www.uxdesignedge.com/2010/03/why-everybody-is-a-designer/http://www.uxdesignedge.com/2010/03/why-everybody-is-a-designer/http://www.uxdesignedge.com/2010/03/getting-started-in-interaction-design/http://www.uxdesignedge.com/bloghttp://www.uxdesignedge.com/http://www.uxdesignedge.com/mailto:[email protected]


13/13

9/10/2010

i ht 2010 UX D i Ed All i ht

Got feedback?


Would love to hear it!

Please send it to me [email protected]

Questions


Thank you!!

mailto:[email protected]:[email protected]

UI is Communication

Documents

Transcript of UI is Communication