eight steps to an intuitive ui
TRANSCRIPT
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 1
Everett McKay UX Design [email protected], @uxdesignedge
A bold claim
Copyright 2016 UX Design Edge. All rights reserved.
UI design is an objective, principled form of human communication, not a subjective art!
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 2
Searching for a definition—if you can’t define it, you can’t design it!
Intuitive UI definition
Copyright 2016 UX Design Edge. All rights reserved.
Everybody wants an intuitive UI
Copyright 2016 UX Design Edge. All rights reserved.
Having an intuitive UI is a top goal for any UX project
To users, describing a UI as intuitive is the highest praise they can bestow
Funny thing: nobody really knows what an “intuitive UI” is
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 3
Some popular definitions
Copyright 2016 UX Design Edge. All rights reserved.
Are these useful definitions?
Simple, easy to use, better
Really “dumbed down” so any idiot can get it
An “unrealistically high bar” that most UIs can’t achieve
Familiar, easy to learn
Whatever Apple does
It depends—it’s personal and subjective
Not sure, but I know it when I see it—it just feels right
The dictionary definition is useless
Copyright 2016 UX Design Edge. All rights reserved.
A typical dictionary definition:
Instinctive (based on behavior or knowledge we are born with)
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 4
My definition
Copyright 2016 UX Design Edge. All rights reserved.
A UI is intuitive when target users understand its behavior and effect without use of reason, memorization, experimentation, documentation, or training
More simply, an intuitive UI is immediately self-explanatory
Ever heard this one?
Copyright 2016 UX Design Edge. All rights reserved.
It’s intuitive once you learn it!
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 5
A clear sign your UI isn’t intuitive
Copyright 2016 UX Design Edge. All rights reserved.
An intuitive UI shouldn’t need a manual or training
Why do you care?
Copyright 2016 UX Design Edge. All rights reserved.
The technology world has changed!!
Old world: Solve a problem well, people will buy your solution even if they need training
New world: People expect to figure things out immediately, without training or documentation
Reasons: They don’t want to—a new generation of users
They don’t have to—mobile apps are setting expectations
RTFM doesn’t work with modern software!
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 6
Are you going to read the manual?
Copyright 2016 UX Design Edge. All rights reserved.
Mobile apps are setting UX expectations
Copyright 2016 UX Design Edge. All rights reserved.
Radical claim: Mobile apps are setting the UX quality bar and raising customer expectations
If I can use my $2 mobile app without training, why can’t my $20K business app be just as easy to use?
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 7
How do I design thee to be intuitive? Let me count the ways
Intuitive UI attributes
Copyright 2016 UX Design Edge. All rights reserved.
The definition is a good start
Copyright 2016 UX Design Edge. All rights reserved.
We can determine if a UI isn’t intuitive just by applying the definition
But to make a UI intuitive, we need more
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 8
Let’s consider the interaction lifecycle
Steps required for interaction—the user
Sets a goal
Finds an interactive UI that might achieve the goal
Performs the interaction
Observes the results to determine if goal is achieved
An intuitive UI helps users achieve their goal at each of these steps
Without the use of reason, memorization, experimentation, assistance, or training
Copyright 2016 UX Design Edge. All rights reserved.
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 9
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
From a health care professional job posting tool
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 10
Intuitive UI is consistent
Copyright 2016 UX Design Edge. All rights reserved.
Consistency is crucial to being intuitive
Jakob Nielsen’s Law of UX (rephrased):
Users spend most of their time using software other than yours
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 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 11
Is this UI intuitive?
Copyright 2016 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 2016 UX Design Edge. All rights reserved.
Donald Norman’s concept of affordance “If a door handle needs a sign, then its design is probably
faulty.”
My translation: If a UI needs a label to explain its interaction, the design has
failed
Users shouldn’t have to experiment to understand the interaction
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 12
Is this intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 13
Does everything need to be intuitive? Surprisingly…no!
Strategically unintuitive
Copyright 2016 UX Design Edge. All rights reserved.
Now that we know what it means…
Copyright 2016 UX Design Edge. All rights reserved.
Most interactions should be intuitive
But some interactions just aren’t worth it
Let’s explore…starting with common excuses
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 14
Our users are trained professionals!
Copyright 2016 UX Design Edge. All rights reserved.
Our users are experienced, trained professionals. You can't just walk up and use this product! This product isn’t for your mom!
So these experienced professionals need training to understand your confusing, unintuitive UI?
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 15
But people learn all the time, right?
Copyright 2016 UX Design Edge. All rights reserved.
A common counter argument: people learn things all the time!
Yes, people can learn—but will they? And will they remember?
Having to learn is fine for advanced, infrequent, optional interactions
Do you want the success of your product dependent upon people learning for essential interactions?
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 16
Common unintuitive UI
Copyright 2016 UX Design Edge. All rights reserved.
Advanced, infrequent, optional commands Might not be worth making discoverable
Shortcuts and gestures Not a problem if advanced and redundant
Inevitable discoverability Users can’t not find these
Delighters Experienced users are rewarded by finding them
Advanced modes You don’t want users to find these accidentally
Games and puzzles are unintuitive
Copyright 2016 UX Design Edge. All rights reserved.
We enjoy the challenge of solving them
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 17
An intuitive Where’s Waldo?
Copyright 2016 UX Design Edge. All rights reserved.
Intuitive UI has a cost
Copyright 2016 UX Design Edge. All rights reserved.
Discoverability
May result in clutter, feature might be inappropriate for some users
Affordance
May look cluttered and heavy
Predictability
May require too much explanation
Forgiveness
Might not be practical or may harm performance
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 18
Levels of intuitiveness
Copyright 2016 UX Design Edge. All rights reserved.
Levels of intuitiveness
Copyright 2016 UX Design Edge. All rights reserved.
All users will get
Trained users mightremember
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 19
What about “single trial learning”?
Copyright 2016 UX Design Edge. All rights reserved.
It’s reflected in the intuitiveness levels
Sensible Single trial, figured out on your own
Learnable Single trial+, somebody showed you
Guessable Multiple trials, figured out on your own
Trainable Multiple trials, somebody showed you
Yes, people do learn things, but the retention rate is very low
Often more like “Multiple trial forgetting”
Some UI can be unintuitive if strategic
Copyright 2016 UX Design Edge. All rights reserved.
…instead of accidental
Most unintuitive UI is accidental
Sensible and learnable are good alternatives
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 20
How to make decisions and get your team on board
Intuitive UI in practice
Copyright 2016 UX Design Edge. All rights reserved.
A process for making design decisions
Copyright 2016 UX Design Edge. All rights reserved.
Grade the interaction (using Pass/Fail)
Don’t be surprised if any attributes are missing
Is the interaction critical?
Aim for fully intuitive
Is the interaction advanced, infrequent, or optional?
Aim for sensible or learnable if fully intuitive isn’t practical
Find a simple change to fix the problem
Done!
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 21
Hiding a crucial interaction
Copyright 2016 UX Design Edge. All rights reserved.
Suppose your team is designing a new version of a popular operating system
An executive would like to hide the entry point for all program interactions
Exec says “our users get it—they don’t need the training wheels anymore!”
How do you decide?
Is this UI intuitive?
Copyright 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 22
Let’s work it through
Copyright 2016 UX Design Edge. All rights reserved.
Grade the interaction (using Pass/Fail)
Not discoverable, FAIL!
Is the interaction critical?
YES!
Find a simple change to fix the problem
Keep on the task bar
Done!
10 things that don't require user testing
Copyright 2016 UX Design Edge. All rights reserved.
1. If you hide things, users won't find them
2. Users won't know something happened unless you tell them
3. Confusing labels are confusing
4. Nobody understands your custom icons
5. Users don't like to wait
6. Unhelpful help isn't helpful
7. …
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 23
Fixing a top call generator
Copyright 2016 UX Design Edge. All rights reserved.
You file a bug to fix the UI for a top tech support call generator
Bug gets resolved as “Won’t fix—superficial cosmetic detail”
Dev refuses to fix it: “makes total sense to me!”
How do you get your engineering manager on board?
What won’t work
Copyright 2016 UX Design Edge. All rights reserved.
Claiming the problem is personal and subjective
Claiming it’s unfamiliar
Claiming it’s unintuitive
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 24
What will work
Copyright 2016 UX Design Edge. All rights reserved.
Describing the problem with an objective vocabulary
Almost done!
Summary and wrap up
Copyright 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 25
If you remember only 5 things…
Copyright 2016 UX Design Edge. All rights reserved.
1. Don’t use the term “intuitive” without defining it
2. Instead, design for the eight intuitive attributes Discoverability, affordance, comprehensible, predictability,
responsiveness, efficiency, forgiveness, explorability
Don’t expect to be intuitive if any are missing
3. Intuitive UIs are self explanatory If a task requires thinking, memorization, experimentation,
assistance, or training, it’s not intuitive by definition
4. Consistency is part of making a UI intuitive
5. But not everything has to be intuitive
Copyright 2016 UX Design Edge. All rights reserved.
11/29/2016
Copyright 2016 UX Design Edge. All rights reserved. 26
Feel free to ask me questions
Lekker!
Copyright 2016 UX Design Edge. All rights reserved.