Everett McKay: Dont design like a programmer
-
Upload
msdevmtl -
Category
Technology
-
view
246 -
download
1
Transcript of Everett McKay: Dont design like a programmer
11/11/2014
1
Everett McKay Principal UXDesignEdge
Who is this guy?
• I’m Principal of UX Design Edge (in Vermont)
• I offer UI design training and consulting services,
primarily to software teams that don’t have
sufficient design talent
• Previously was a Windows PM at Microsoft, where
I wrote the Windows UX Guidelines
• Didn’t work on Windows 8
• Before that, was a developer of Windows and Mac
Uis
• Recently wrote UI is Communication, which is
targeted at non-designers
Copyright 2014 UX Design Edge
So, yes, I am a programmer!!
Copyright 2014 UX Design Edge
What I will cover today
• “The Revelation”—a personal story
• What I mean by “designing like a
programmer”
• Three solutions
• Scenario-based design
• Communication-based design
• Inductive UI for intuitive task flows
• Improving your design culture
Copyright 2014 UX Design Edge
My top goal for today
• To fundamentally change how you think
about UI design
Copyright 2014 UX Design Edge
11/11/2014
4
The revelation
We were focused on the mechanics!
The user was focused on his goals!
Copyright 2014 UX Design Edge
The revelation, part 2
For true user-centered design,
designers and users must be
focused on the same thing!
Copyright 2014 UX Design Edge
The revelation, part 3
There is a significant difference
between thinking about users and
thinking like users
Copyright 2014 UX Design Edge
“We need a
wizard to
copy files &
settings to a
new PC.”
11/11/2014
5
“What am I
supposed to
do here?”
“What does
this page
do?”
“What am I
supposed to
do here?
“Am I even
in the right
place?”
“What does
this label
mean?”
“Is this
going to
meet my
needs? Do I
trust it?”
“Is this
really going
to do what I
want?”
“Why is this
button red?
Did I do
something
wrong?”
11/11/2014
6
Users aren’t stupid
• …so we don’t need “dumbed down” UI
• Rather, they are busy, focused on their work
• Unlike us, they have fundamental questions
and challenges that we take for granted
• Unlike us, they don’t know how our UIs work
• And don’t really want to know
• They do know how to click on stuff!!
None of the previous UI changes addressed
any of the fundamental questions! Copyright 2014 UX Design Edge
The biggest mistake I see:
• Assuming that sophisticated software for
sophisticated tasks should require training
and documentation
• Not just anybody can do Finite Element
Analysis…!
• True, but your users should be able to figure
out what the Done button does without
training or reading a manual
Copyright 2014 UX Design Edge
Users won’t proceed in a task
until they are confident!
Copyright 2014 UX Design Edge
The classic programmer design mistakes
• Designing for yourself (works for me!)
• Focusing on technology and features, not users and
their goals
• Thinking that solving problem mechanically is good
enough (problem, solution, done!)
• Exposing raw data structures instead of something
meaningful to users
• Having unintuitive, non-standard interaction, icons
• Having unnecessary complexity, overwhelming UIs
• Not making self-explanatory UIs (RTFM!)
• Designing by copy (or committee)
Copyright 2014 UX Design Edge
Don’t play UI Tetris
Copyright 2014 UX Design Edge
Why do we do this?
• It’s easier to develop
• We aren’t aware that there are better
solutions
• We don’t notice the usability problems
As programmers, we don’t create bad
designs intentionally…we just don’t know
better
Copyright 2014 UX Design Edge
11/11/2014
7
What can we do about it?
Copyright 2014 UX Design Edge. All rights reserved.
The most useful tools here
• Scenario-based design
• Effective human communication
• Intuitive task flows
• Improving our design culture
Copyright 2014 UX Design Edge
Scenario-based design
Scenarios help you make design
decisions from the target user’s
point of view
Copyright 2014 UX Design Edge
11/11/2014
8
A scenario
A specific target user trying to
achieve a specific goal or task
in a specific environment Scenario = user + goal/task + environment
Copyright 2014 UX Design Edge
Don’t be random!
Random people doing random
things for random reasons in
random contexts This leads to random design decisions!
Copyright 2014 UX Design Edge
Feature-based design
We need a file and settings
transfer wizard
Copyright 2014 UX Design Edge
Task-based design
Transfer files and settings from
old PC to new PC
Copyright 2014 UX Design Edge
User story-based design
As a user, I need to transfer
files and settings from my old
PC to my new PC
Copyright 2014 UX Design Edge
Scenario-based design?
Joe just bought a new PC. He
discovered the FAST wizard, which
enables him to copy files and settings
from his old PC to his new one. Joe is
thrilled!
Copyright 2014 UX Design Edge
11/11/2014
9
Scenario-based design, Part 1
Joe just bought a new PC. While he was
thrilled with his old PC when he first
bought it, its performance has degraded
over time. He isn’t entirely sure why—
perhaps it just has too much junk
installed, or perhaps it has viruses and
malware. Regardless, Joe has decided to
upgrade.
Copyright 2014 UX Design Edge
Scenario-based design, Part 2
Joe would like to copy the files and
settings from his old PC that he still uses
and leave all the other stuff behind. He
knows the programs and documents that
he uses frequently from memory, he can
recognize files he uses occasionally, but
isn’t too sure about the rest. He doesn’t
know the specific file names and locations.
Copyright 2014 UX Design Edge
What does this scenario tell you?
• Joe doesn’t want to transfer
everything—just what he still uses and
cares about
• He doesn’t want files or settings—he
wants both
• He doesn’t know specifically what to
transfer
• His PC might have malware!
Copyright 2014 UX Design Edge
Context is essential to good scenarios!
• The old PC’s files and settings
aren’t all wanted!
• The old PC might be infected!
Copyright 2014 UX Design Edge
New requirements
• Tool must assist users in
selecting files and settings to
transfer
• Tool must scan everything
transferred for security and
performance
• Tool must not infect new PC! Copyright 2014 UX Design Edge
Without scenarios, we are
doomed to thinking about
features and technology, and
solving problems mechanically!
Copyright 2014 UX Design Edge
11/11/2014
10
Some insights
• User-centered design isn’t happy
talk—this is real!
• It requires us to understand
users and their goals
• Offering a pile of features based
on arbitrary requirements isn’t a
good substitute
Copyright 2014 UX Design Edge
Scenarios vs. use cases and user stories
• User stories capture a user’s goal or task as part of
his or her role in using a product, using this
format:
• As a <user role>, I want to <do something
supported by the program> so that I <can
achieve something of value>
• Use cases
• A detailed analysis of a solution-specific
scenario
• Both better for development more than design
Copyright 2014 UX Design Edge
Good scenarios are:
• Raw (rather than analyzed, like user stories)
• Complete (rather than partial, like user stories)
• User centered (rather than solution centered, like
use cases)
• Solution independent (rather than solution
specific, like use cases)
Copyright 2014 UX Design Edge
Wait a minute—you’ve gone
and changed the product!
Copyright 2014 UX Design Edge
Exactly!
Copyright 2014 UX Design Edge
11/11/2014
11
A UI isn’t a thin veneer
Copyright 2014 UX Design Edge
“Design is not
just what it looks
like and feels
like. Design is
how it works.”
Steve Jobs
Copyright 2014 UX Design Edge. All rights reserved.
The user experience needs to drive
It’s UX features, technology
Not features, technology UX
Copyright 2014 UX Design Edge
“I need a
tool to securely
transfer the
settings for the
programs I use
and the files I
care about.”
“I need a
wizard to infect
my brand new
PC with viruses,
malware, and
bloatware.”
Scenarios summary
• Help us see the design problem
from the user’s point of view
• Focused on user goals—which
isn’t to do the task mechanically
• Challenge the design to make it
better
• (It’s not just happy talk!) Copyright 2014 UX Design Edge
11/11/2014
12
Short break (15 minutes)
Copyright 2014 UX Design Edge
Copyright 2014 UX Design Edge. All rights reserved.
My expectations
• Their initial UI design won’t be
very good
• Their explanation to us will be
excellent
• What is surprising: that the two
are so different!
Copyright 2014 UX Design Edge
Why does this happen?
• When we communicate in person, we’re
totally focused on the user’s goals:
What does the user care about now?
• When we communicate through UI, we
are focused on the technology and
details: What does the program need
now?
Copyright 2014 UX Design Edge
Effective human communication
• A UI is ultimately about
communicating tasks to users
• Intuitive, user-centered UIs
communicate well
• A good UI feels like a natural,
friendly conversation
• We should have the same approach
and standards! Copyright 2014 UX Design Edge
11/11/2014
13
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 design and evaluate
task flows
• Look for discrepancies—they reveal problems
Copyright 2014 UX Design Edge
Bottom line
• We think UX design is difficult
because it is a subjective,
personal art
• Communication-based design
makes it an objective, principled
form of human communication!
Copyright 2014 UX Design Edge
Inductive UI
• An inductive UI is designed to be
self-explanatory to lead users
through the task steps
• Goal: To eliminate thought,
experimentation, documentation,
training at the task level
Copyright 2014 UX Design Edge
A clear sign your UI isn’t intuitive
Copyright 2014 UX Design Edge
An intuitive UI shouldn’t need a manual or training
11/11/2014
14
A “deductive” UI example 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
Copyright 2014 UX Design Edge
To be clear
• The main instruction is a
design tool
• We don’t have to have the
instruction on the page
unless we need it
Copyright 2014 UX Design Edge
The goals of inductivity
• To eliminate thought, experimentation,
documentation and training
• Not to have a lot of text!
• To answer the first question everyone
has: what am I supposed to do here?
• To give pages integrity
• And avoid playing UI Tetris
Copyright 2014 UX Design Edge
What are you supposed to do here?
11/11/2014
15
Can you see the data structures?
Copyright 2014 UX Design Edge
This is designing like a programmer!
What are you supposed to do here?
What are you supposed to do here? What are you supposed to do here?
Copyright 2014 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
My new book!
11/11/2014
17
Bottom line for business
• Great design sells!
• Bad design costs!
Copyright 2014 UX Design Edge
Mobile apps are setting the UX bar
Copyright 2014 UX Design Edge. All rights reserved.
• Radical claim: Mobile apps are setting the UX quality bar and raising customer expectations
If I can get a $2 mobile app with a great UX, why doesn’t my $20K business app have a great UX?
RTFM doesn’t work anymore
Copyright 2014 UX Design Edge
Users actually expect to figure out your UI
Some shocking facts
Many software development teams just
don’t care!
They are completely focused on
shipping features—on time
This “artsy” fussing over user details is
just an annoyance
Copyright 2014 UX Design Edge
This is a team culture
problem!
Copyright 2014 UX Design Edge
Every artifact an
organization
creates is an
embodiment of its
culture
11/11/2014
18
If you want a better user experience…
You need to make sure your team
culture will support it!
Why? Because you ship your culture!
Homework: Does your team’s design
culture match its aspirations?
Copyright 2014 UX Design Edge
Don’t design like a programmer
• Don’t design for yourself
• Don’t let features and technology drive the
user experience
• It’s not enough to enable a task mechanically
• Don’t expose the raw internal data structures
• Don’t expose everything all at once
Copyright 2014 UX Design Edge
Some solutions
• Scenario-based design is a great way to view
a task from the user’s point of view
• Intuitive, user centered designs communicate
well on a human level
• The inductive UI helps us design better, more
intuitive task flows
• You ship your culture! If you want to improve,
your team needs to value having a great UX
Copyright 2014 UX Design Edge
Everett’s Law of UI Design:
If a UI merely exposes the raw
technology to enable a task, it’s
probably not usable!
Copyright 2014 UX Design Edge
11/11/2014
19
Great products solve users’ goals
in a way that reflects how the
product is actually going to be
used
Copyright 2014 UX Design Edge
If you remember only one thing:
Want to learn more?
Check my website uxdesignedge.com
Contact me at [email protected]
Let’s connect on LinkedIn and Twitter
(@uxdesignedge)
Subscribe to my blog Read the Don’t Design Like a Programmer
series
Copyright 2014 UX Design Edge
Have UX Design Essentials Workshop
at your company! Train your entire team, learn by doing with
customized to use your product in the
exercises
Canadian customers include ANSYS and
InnovMetric
Copyright 2014 UX Design Edge
Want to learn more?
“I hear and I forget.
I see and I remember.
I do a UX Design
Essentials Workshop
and I totally get it!”
Confucius
Take UX Design Essentials! Will be holding a public class in Montreal
June 1 – 3, 2015
Check uxdesignessentials.com if you are interested!
Canadian customers include CAE, CGI, BMC,
HealthlinkBC, Spafax, Osram Sylvania, Quest
Software
Copyright 2014 UX Design Edge
Want to learn more?