everett mckay talk a ux antwerp meetup

7/6/2016

Copyright 2016 UX Design Edge. All rights reserved. 1

UI IS COMMUNICATIONHow to design intuitive, user-centered interfaces by focusing on effective communication

Everett McKayUX Design Edgeuxdesignedge.com, freeuxwebinars.com@uxdesignedge

UX Antwerp, July 2016

I have a new book!

Copyright 2016 UX Design Edge. All rights reserved.

7/6/2016


Today’s agenda


The UI is Communication concept

Five specific techniques

1. Beyond sketching features

2. Intuitive UI

3. Strategically unintuitive

4. Intuitive task flows

5. Communication reviews

About the book

Communication gives design clarity


7/6/2016


My promise


From now on, you will think about UI design differently!

As if you had night vision goggles!

What’s it all about

The UI is Communication Concept


7/6/2016


A bold claim


A user interface is an objective, principled form of human communication, not a subjective art!

Four core concepts


1. A user interface is essentially a conversation between users and the technology to perform tasks

2. A UI can and should be evaluated by how well it communicates

3. Scenarios and effective human communication should drive the design process (not features, requirements, schedules)

4. Focusing on effective communication removes much of the mystique and subjectivity from UI design

7/6/2016



My expectations


Their initial UI design won’t be very good Bob and Alice will make the classic process mistakes They will design for themselves They will consider only one solution (with mechanical usability) They’ll focus on technology and features instead of user goals

and tasks The screens will be confusing, complicated, and often non-

standard

Their explanation of the design will be excellent Bob and Alice are very intelligent, and that will show through in

their explanation The design makes total sense when they explain it in person

7/6/2016


What’s not surprising


It’s not surprising that the design isn’t very good

Bob and Alice don’t have any UI design training or experience

It’s not surprising that their explanation makes total sense

Bob and Alice are smart and articulate

As humans, we communicate to other humans all our lives so we have lots of practice in a way that others understand

What is surprising


That the two are so different!

If Bob and Alice can communicate to us effectively using English, why can’t they communicate equally well using the language of UI?

During the design review, you might have thought

If they just put what they said in the meeting on the screen, it would all make sense!

7/6/2016


Why does this happen?


Communication between people tends to

Be natural, friendly, using plain language (vs. unnatural, technical tone)

Be goal, results oriented, purposeful (vs. technology or mechanically oriented, not explaining why)

Follow mental models and natural workflows (vs. the way the code works)

Be simple, getting right to the point (vs. overly complicated, laboring over unimportant details)

Can’t we use the same approach?


Q: If the way we communicate in person is so much better, can’t we just design UI to be like that?

A: Yes! We can and we should!

The differences are artificial and historical

There’s (usually) no technical requirement to do this

Great UI design boils down to eliminating these differences, making the experience simple and natural

7/6/2016


The UI is Communication concept


1. UI design is ultimately about communicating to users

2. If you can explain how to perform a task to the target user in person in a way that’s clear and concise, you can apply those same communication techniques in a UI

3. We should have the same standards for software interaction as we do for social interaction

4. If a UI feels like a natural, professional, friendly conversation, it’s probably a good design

Imagine a personal conversation


Suppose you are looking over a user’s shoulder and he or she asks, “What do I do here?” Think about the explanation you would give—the steps, their order, the language you’d use, and the way you explain things. Also think about what you wouldn’t say

This is a high-level guide to design and evaluate task flows

7/6/2016


Communications applies to all UI


All UI elements communicate something:

UI text

Controls

Icons, graphics, colors

Animations, transitions

Page layout

Feedback

Everything in a UI is there to communicate something to someone for some reason

Key takeaways


We know how to communicate to our users in person (even our most technical devs can), but we don’t take advantage of this in the design process because we are focused on other stuff

If users fail to perform a task, the root cause is always the same—they didn’t understand it

7/6/2016


Technique #1: Beyond sketching features

UI as conversations


Apple’s App Design Strategy


From the iOS Human Interface Guidelines

1. List all the features you think users might like

2. Determine who your users are

3. Filter the list through the audience definition

4. Don’t stop there…

5. Prototype and iterate

7/6/2016


Sketching a pile of features


Sketching a pile of features


While this process can work, the focus is on features, their physical layout, and performing tasks mechanically

Instead, let’s use users and their goals (scenarios), plus effective communication drive the process

7/6/2016


Features and requirements aren’t enough


A typical design process needs a miracle


7/6/2016


A typical story


Victor asked for help with mobile app for a national park

A good home screen: a home page, menu, or map?

We could have brainstormed and sketched

But instead we had a personal conversation…

Found three themes: explore, plan, do

The best home screen: that conversation to support those scenarios

Now we can brainstorm and sketch!

What should the home screen be?


7/6/2016




We could have brainstormed and sketched

But instead we had a personal conversation…

There were three clear themes

1. Explore the park

2. Plan a trip

3. Take a trip



The best home screen: that conversation to support those scenarios, elevate content people care about

Now we can sketch!

7/6/2016


What just happened?


We deliberately focused on the target users and their goals, and the human experience

We elevated the content that people care about (an iOS guideline)

We didn’t think about the technology, features, patterns, task flows, requirements

We still need to brainstorm, sketch, etc. but now we have a clear direction

And we saved a lot of time! (spent minutes vs. days)

Doesn’t this result in chatty UI?


No!

If your human conversation would be concise, this technique should result in concise UI

Example: Sunglass Shack shopping tool—if you were to walk into a sunglass store, what would be the human conversation Salesperson: May I help you?

You: No thanks, just browsing

Conclusion: The UX should start with browsing!

7/6/2016


Key takeaways


There is tremendous insight in the human conversation, yet we rarely take advantage of it

A great user experience should feel like a great human experience—that’s fully enhanced through technology

Technique #2: What the heck is it? It’s effective communication!

Intuitive UI


7/6/2016


Everybody wants an intuitive UI


Having an intuitive UI is a top goal for any UX project

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

Funny thing: nobody really knows what an “intuitive UI” is

Some popular definitions


Are these useful definitions? Simple, easy to use, better

Confused with other concepts

Really “dumbed down” so any idiot can get it

An “unrealistically high bar” that most UIs can’t achieve If so, why bother?

A gap between the design model and the user model Based on Norman’s The Design of Everyday Things, but difficult in

practice

Familiar/learnable

Whatever Apple does

Not sure, but I know it when I see it—it just feels right

7/6/2016


The dictionary definition is useless


A typical dictionary definition:

Instinctive (based on behavior or knowledge we are born with)

My definition


A UI is intuitive when target users understand its behavior and effect without use of reason, memorization, experimentation, assistance, or training

More simply, an intuitive UI is immediately self-explanatory

Intuitive UIs communicate their purpose well!

7/6/2016


Ever heard this one?


It’s intuitive once you learn it!

A clear sign your UI isn’t intuitive


An intuitive UI shouldn’t need a manual or training

7/6/2016


Are you going to read the manual?


The definition is a good start


We can determine if a UI isn’t intuitive just by applying the definition

But to make a UI intuitive, we need more

7/6/2016


So, what’s an intuitive UI really?


A UI is intuitive when it has an appropriate combination of:1. Discoverability Users can easily find the feature—when they need it.2. Affordance Visually, the UI has clues that indicate what the user needs to do.

Users don’t have to experiment or deduce the interaction3. Comprehensible Target users understand the UI elements and can make

informed decisions, with the knowledge they already have4. Responsiveness The UI gives clear, immediate feedback to indicate that the

action is happening, and was either successful or unsuccessful5. Predictability Functionally, the UI delivers the expected results, with no surprises.

Users don’t have to experiment or deduce the effect6. Efficiency The UI enables users to perform an action with a minimum amount of

effort7. Forgiveness If users make a mistake, either the right thing happens anyway or

they can fix or undo the action with ease8. Explorability Users can explore without fear of making mistakes or getting lost

Let’s consider the interaction lifecycle

Steps required for interaction—the user

Sets a goal

Finds an interactive UI that might achieve the goal

Performs the interaction

Observes the results to determine if goal is achieved

An intuitive UI helps users achieve their goal at each of these steps

Without the use of reason, memorization, experimentation, assistance, or training


7/6/2016


Is this UI intuitive?




7/6/2016




From a health care professional job posting tool

Intuitive UI is consistent


Consistency is crucial to being intuitive

Jakob Nielsen’s Law of UX (rephrased):

Users spend most of their time using software other than yours

7/6/2016




The Design of Everyday Things


Donald Norman’s concept of affordance “If a door handle needs a sign, then its design is probably

faulty.”

My translation: If a UI needs a label to explain its interaction, the design has

failed

Users shouldn’t have to experiment to understand the interaction

7/6/2016


Is this intuitive?


Key takeaways


Intuitive interactions are self-explanatory—they communicate well

Users fail tasks because they don’t understand the interactions

We expect users to understand interactions that we explain poorly—yet they rarely do

7/6/2016


Technique #3: Being strategically unintuitive

Does everything need to be intuitive? Surprisingly…no!

Strategically unintuitive


Now that we know what it means…


Most interactions should be intuitive

But some interactions just aren’t worth it

Let’s explore…starting with common excuses

7/6/2016


Our users are trained professionals!


Our users are experienced, trained professionals. You can't just walk up and use this product! This product isn’t for your mom!

So those experienced professionals must have training to understand your confusing, unintuitive UI?

7/6/2016


But people learn all the time, right?


People learn—and not everything can be discoverable or have an affordance

Yes, people can learn—but will they? And will they remember?

Having to learn is fine for advanced, infrequent, optional interactions

Do you want the success of your product dependent upon people learning for essential interactions?



7/6/2016


Common unintuitive UI


Advanced, infrequent, optional commands Might not be worth making discoverable

Shortcuts and gestures Not a problem if advanced and redundant

Inevitable discoverability Users can’t not find these

Delighters Experienced users are rewarded by finding them

Advanced modes You don’t want users to find these accidentally

Games and puzzles are unintuitive


We enjoy the challenge of solving them

7/6/2016


An intuitive Where’s Waldo?


Intuitive UI has a cost


Discoverability

May result in clutter, feature might be inappropriate for some users

Affordance

May look cluttered and heavy

Predictability

May require too much explanation

Forgiveness

Might not be practical or may harm performance

7/6/2016


Levels of intuitiveness


Levels of intuitiveness


All users will get

Trained users mightremember

7/6/2016


What about “single trial learning”?


It’s reflected in the intuitiveness levels

Sensible Single trial, figured out on your own

Learnable Single trial+, somebody showed you

Guessable Multiple trials, figured out on our own

Trainable Multiple trials, somebody else showed you

Yes, people do learn things, but the retention rate is very low

Often more like “Multiple trial forgetting”

Some UI can be unintuitive if strategic


…instead of accidental

Most unintuitive UI is accidental

Sensible and learnable are good alternatives

7/6/2016


Technique #4: Using “main instructions” to make task flows intuitive

Intuitive task flows


Inductive UI


An inductive UI is designed to be self-explanatory to lead users through the task steps

Goal: To design intuitive task flows, to eliminate need to think and experiment at the task level

The top question everyone has: What am I supposed to do here?

When not obvious, we should consider answering this question explicitly

7/6/2016


Explainable first


An explainable UI is understandable, intuitive UI so let’s start task design by making it explainable first

First step is to design the main instructions for each step in a task

The quality of the main instruction often predicts the quality of the page (ex: “Manage” is very weak)

If the task flow is complex, convoluted, unnatural, or unintuitive, it should be apparent at this point

A “deductive” UI example


7/6/2016


An “inductive” UI example


Elements of inductivity


A clear main instruction that explains the purpose of a page

Page content that is related to the main instruction

To clarify: the goal is to eliminate thought and experimentation, not to have a lot of text

7/6/2016


This really works!


You might be skeptical, but if you: Take a page

Determine a good main instruction

Redesign the page to focus on that instruction

The resulting page and/or task flow will be better

Having a clear, explicit understanding of what a page is for makes it better This is true even if you don’t display the main instruction on the

page!

Having explicit instructions reduces the need for training

This really works: an example


7/6/2016


This really works: another example


This really works: yet another example


7/6/2016


Copyright 2016 UX Design Edge

“If I had an hour to solve a problem and my life depended on it, I would use the first 55 minutes determining the proper question to ask, for once I knew the proper question, I could solve the problem in less than five minutes.”

Albert Einstein

Key takeaways


Comprehensible tasks are easily explainable

The main instruction gives us insight on how to design the page

Put the main instruction explicitly on the page if its purpose isn’t obvious

7/6/2016


Technique #5: Using effective communication as a design review tool

Communication reviews


A good UI feels like a conversation


7/6/2016


If what we say in person is better…


If you find yourself in a “show and tell” design review… BTW: My least favorite design review technique

and the presenter translates UI elements into “what they really mean”…

You have just found a design problem!

Intuitive UIs are self explanatory, so if the presenter says something different from what is on the screen, the UI is wrong!

Remember Bob and Alice

Communication reviews


A communication review evaluates how well a design communicates

Use this when someone is presenting a design to your team (the “show and tell”)

Process: Listen to what they say, compare to what is on the screen

Things to check: Does it feel like something you would say in person?

Is the language natural, friendly, and concise?

Is the language focused on purpose and goals?

7/6/2016


Communication review example


Key takeaways


When we explain a UI in person, we explain it in terms the target users understand

If our explanation is different from the UI, the UI is probably wrong

Let’s take advantage of this during design reviews

You will be amazed by what you can find

7/6/2016


The details

About the book


Available now!


7/6/2016


Just the facts


Published by Morgan Kaufmann in June 2013

363 pages, all in color!

Price $44.45

$42.70 on Amazon, Rs. 2638 on FlipKart

Kindle, ebook versions available!

Sales so far—sluggish (I need your help!)

My goals


Top goal: the “one book” to get started in UI design

An approachable, fun, quick read

Designed for scanning

Many, many UI examples

Technology neutral (but many mobile examples)

Recommendable (instead of DOET, DMMT)

6 Dilbert cartoons!

7/6/2016


Table of contents


Ch 1: Communication Design Principles

Ch 2: Interaction Design

Ch 3: Visual Design

Ch 4: Communicating to People

Ch 5: A Communication-Driven Design Process

Ch 6: UI Design Process Examples (web and mobile)

Special request


Buy the book!

Review the book!

Recommend and discuss the book!

Use #UIComm on Twitter

Tell your friends!

7/6/2016


Summary and wrap up


Four core UI is Communication concepts


1. A user interface is essentially a conversation between users and the technology to perform tasks

2. A UI can and should be evaluated by how well it communicates

3. Scenarios and effective human communication should drive the design process (not features, requirements)

4. Focusing on effective communication removes much of the mystique and subjectivity from UI design

7/6/2016


Five techniques we learned today


1. Start your designs by thinking about the human experience, not sketching a list of features

2. The attributes of an intuitive UI relate to communicating interaction and purpose

3. Not everything has to be intuitive—recognize strategically when it isn’t worth it

4. “Inductive” UI makes task flows intuitive and reduces need for documentation and training

5. We can evaluate a UI easily just by comparing what we say in person to what is on the UI, such as during design reviews

Calls to action!


Got feedback? Would love to hear it! Please contact me at [email protected]

Join the UX Design Edge mailing list

Let’s connect on LinkedIn, follow me at @uxdesignedge

Consider hosting a workshop at your company (uxdesignworkshop.com)

Check out my onDemand classes (ux-ondemand.com)

mailto:[email protected]

7/6/2016


One last thing…


I plan to present a workshop at UXNL on Nov 2nd!

I will be back soon!

Swag time!

Questions


7/6/2016



Lekker!

Thank you!
