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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
2
Users!
Users!
Users!
Users!
Users!
Users!
Users!
Users!
Users!
11/11/2014
3
“I don’t
want to
copy over all
that crap!”
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
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.”