The document is a presentation by Danielle Gobert Cooley on avoiding user interface mistakes. It discusses keeping users informed by providing feedback on what is happening, how much longer tasks will take, whether data has been saved, and other information. Examples of websites that provide good feedback are Mailchimp, Kayak, and Swagbucks. The presentation emphasizes that users should not be kept in the dark about what is happening on a site.

1. Avoiding UI Mistakes
Introduction to
Danielle Gobert Cooley
User Experience Methods
@dgcooley
26
February
2014
#CPL14
1

2. 26
February
2014
@dgcooley
#CPL14
Danielle
Gobert
Cooley
Selected
Work
15
years
as
a
UX
Specialist
BE,
Biomedical
and
Electrical
Engineering
–
Vanderbilt
University
MS,
Human
Factors
in
InformaOon
Design
–
Bentley
University
danielle@dgcooley.com
@dgcooley
hQp://linkedin.com/in/dgcooley
2

3. 26
February
2014
@dgcooley
#CPL14
Good sites?
3

4. 26
February
2014
@dgcooley
#CPL14
4

5. 26
February
2014
@dgcooley
#CPL14
5

6. 26
February
2014
@dgcooley
#CPL14
6

7. 26
February
2014
@dgcooley
#CPL14
hQp://www.theworldsworstwebsiteever.com/
7

8. 26
February
2014
@dgcooley
#CPL14
hQp://metatech.org/
8

9. 26
February
2014
@dgcooley
#CPL14
hQp://www.fgmarchitects.com/
9

10. 26
February
2014
@dgcooley
#CPL14
Mistake #1: Keeping Secrets
10

11. 26
February
2014
@dgcooley
#CPL14
Tell
the
user
what’s
going
on.
The
system
should
always
keep
users
informed
about
what
is
going
on,
through
appropriate
feedback
within
reasonable
Ome.
How
much
longer
will
it
take?
Am
I
done?
Where
am
I?
How
do
I
get
Home?
Am
I
logged
in?
Was
my
data
saved?
How
many
steps
are
there?
11

12. 26
February
2014
@dgcooley
#CPL14
How
do
I
get
Home?
12

13. 26
February
2014
@dgcooley
#CPL14
How
do
I
get
Home?
13

14. 26
February
2014
@dgcooley
#CPL14
How
much
longer
will
it
take?
14

15. 26
February
2014
@dgcooley
#CPL14
How
many
steps
are
there?
15

16. 26
February
2014
@dgcooley
#CPL14
Was
my
data
saved?
Mailchimp.com,
Kayak.com
16

17. 26
February
2014
@dgcooley
#CPL14
Was
my
data
saved?
hQp://swagbucks.com
17

18. 26
February
2014
@dgcooley
#CPL14
Was
my
data
saved?
HootSuite
iPad
app,
April
2012
18

19. 26
February
2014
@dgcooley
#CPL14
Am
I
logged
in?
19

20. 26
February
2014
@dgcooley
#CPL14
Where
am
I?
20

21. 26
February
2014
@dgcooley
#CPL14
Where
am
I?
21

22. 26
February
2014
@dgcooley
#CPL14
Mistake #2: Poor Word Choice
22

23. 26
February
2014
@dgcooley
#CPL14
Use
words
people
will
understand.
The
system
should
speak
the
users’
language,
with
words,
phrases
and
concepts
familiar
to
the
user,
rather
than
system-­‐oriented
terms.
Follow
real-­‐world
convenOons,
making
informaOon
appear
in
a
natural
and
logical
order.
23

24. 26
February
2014
@dgcooley
#CPL14
Use
words
people
care
about
Ortholite
®
anatomical
footbed
Breathable
mesh
lining
treated
with
Aegis®
Keep
feet
comfortable
with
our
Ortholite®
washable
foam
insole
Fight
odor
with
our
Aegis®
anOmicrobial-­‐treated
mesh
lining
hQp://www.nngroup.com/arOcles/user-­‐centric-­‐language/
24

25. 26
February
2014
@dgcooley
#CPL14
Use
words
people
can
relate
to
Customer
must
return
item
within
30
days
for
full
refund.
We
give
you
a
30-­‐day,
money-­‐back
guarantee
on
all
of
our
products.
hQp://www.nngroup.com/arOcles/user-­‐centric-­‐language/
25

26. 26
February
2014
@dgcooley
#CPL14
Mistake #3: Taking Over
26

27. 26
February
2014
@dgcooley
#CPL14
User
Control
and
Freedom
Users
ocen
choose
system
funcOons
by
mistake
and
will
need
a
clearly
marked
“emergency
exit”
to
leave
the
unwanted
state
without
having
to
go
through
an
extended
dialogue.
Support
undo
and
redo.
27

28. 26
February
2014
@dgcooley
#CPL14
User
Control
and
Freedom
<script
language="JavaScript1.2">
<!-­‐-­‐
top.window.moveTo(0,0);
if
(document.all)
{
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else
if
(document.layers||document.getElementById)
{
if
(top.window.outerHeight<screen.availHeight||
top.window.outerWidth<screen.availWidth){
top.window.outerHeight
=
screen.availHeight;
top.window.outerWidth
=
screen.availWidth;
}
}
//-­‐-­‐>
</script>
28

29. 26
February
2014
@dgcooley
#CPL14
Mistake #4: Being Inconsistent
29

30. 26
February
2014
@dgcooley
#CPL14
Consistency
and
Standards
?
Users
should
not
have
to
wonder
whether
different
words,
situaOons,
or
acOons
mean
the
same
thing.
Follow
plauorm
convenOons.
30

31. 26
February
2014
@dgcooley
#CPL14
31

32. 26
February
2014
@dgcooley
#CPL14
Recommenda)on:
Both
for
consistency
and
intui6veness,
use
the
tradi6onal
calendar
picker
tool
throughout
the
applica6on.
32

33. 26
February
2014
@dgcooley
#CPL14
The
three-­‐way
toggle,
though
not
unique
to
this
tool,
is
not
an
immediately-­‐recognizable
control.
Recommenda)on:
Consider
a
more
tradi6onal
radio
bu?on
control:
Exists:
¤Yes
¢No
¢Either
33

34. 26
February
2014
@dgcooley
#CPL14
Consistency
and
Standards
34

35. 26
February
2014
@dgcooley
#CPL14
Mistake #5: Making Mistakes
Easy
35

36. 26
February
2014
@dgcooley
#CPL14
Error
PrevenOon
Even
beQer
than
good
error
messages
is
a
careful
design
which
prevents
a
problem
from
occurring
in
the
first
place.
Either
eliminate
error-­‐prone
condiOons
or
check
for
them
and
present
users
with
a
confirmaOon
opOon
before
they
commit
to
the
acOon.
36

37. 26
February
2014
@dgcooley
#CPL14
37

38. 26
February
2014
@dgcooley
#CPL14
hQp://www.lukew.com/ff/entry.asp?571
38

39. 26
February
2014
@dgcooley
#CPL14
Microsoc
Word,
Unknown
version;
Microsoc
Word
for
Mac
2011,
Version
14.3.1
39

40. 26
February
2014
@dgcooley
#CPL14
Mistake #6: Relying on People’s
Memories
40

41. 26
February
2014
@dgcooley
#CPL14
RecogniOon
>
Recall
Minimize
the
user’s
memory
load
by
making
objects,
acOons,
and
opOons
visible.
The
user
should
not
have
to
remember
informaOon
from
one
part
of
the
dialogue
to
another.
InstrucOons
for
use
of
the
system
should
be
visible
or
easily
retrievable
whenever
appropriate.
hQp://online.epocrates.com/noFrame/
41

42. 26
February
2014
@dgcooley
#CPL14
Microsoc
PowerPoint
for
Mac
2011,
Version
14.3.1
42

43. 26
February
2014
@dgcooley
#CPL14
Mistake #7: Failing to Balance
Ease & Speed
43

44. 26
February
2014
@dgcooley
#CPL14
Flexibility
and
Efficiency
of
Use
Accelerators
–
unseen
by
the
novice
user
–
may
ocen
speed
up
the
interacOon
for
the
expert
user
such
that
the
system
can
cater
to
both
inexperienced
and
experienced
users.
Allow
users
to
tailor
frequent
acOons.
44

45. 26
February
2014
@dgcooley
#CPL14
American
Giant,
ThinkGeek
45

46. 26
February
2014
@dgcooley
#CPL14
Chrome’s
right-­‐click
menu
46

47. 26
February
2014
@dgcooley
#CPL14
Microsoc
Word
and
PowerPoint
for
Mac
2011,
Version
14.3.1
47

48. 26
February
2014
@dgcooley
#CPL14
TwiQer’s
iOS
app,
November
2011
48

49. 26
February
2014
@dgcooley
#CPL14
Mistake #8: Too Much Stuff
49

50. 26
February
2014
@dgcooley
#CPL14
AestheOc
and
Minimalist
Design
Dialogues
should
not
contain
informaOon
which
is
irrelevant
or
rarely
needed.
Every
extra
unit
of
informaOon
in
a
dialogue
competes
with
the
relevant
units
of
informaOon
and
diminishes
their
relaOve
visibility.
50

51. 26
February
2014
@dgcooley
#CPL14
51

52. 26
February
2014
@dgcooley
#CPL14
AestheOc
and
Minimalist
Design
Lane
Furniture
(2011)
52

53. 26
February
2014
@dgcooley
#CPL14
53

54. 26
February
2014
@dgcooley
#CPL14
hQp://lesscontentmorestrategy.com
54

55. 26
February
2014
@dgcooley
#CPL14
Mistake #9: Bad Error Messages
55

56. 26
February
2014
@dgcooley
#CPL14
Help
users
recognize,
diagnose,
and
recover
from
errors
Error
messages
should
be
expressed
in
plain
language
(no
codes),
precisely
indicate
the
problem,
and
construcOvely
suggest
a
soluOon.
56

57. 26
February
2014
@dgcooley
#CPL14
57

58. 26
February
2014
@dgcooley
#CPL14
58

59. 26
February
2014
@dgcooley
#CPL14
Chrome,
version
26.0.141065
–
May
2013
59

60. 26
February
2014
@dgcooley
#CPL14
60

61. 26
February
2014
@dgcooley
#CPL14
61

62. 26
February
2014
@dgcooley
#CPL14
AmericanGiant.com
62

63. 26
February
2014
@dgcooley
#CPL14
Mistake #10: No or Bad Help
63

64. 26
February
2014
@dgcooley
#CPL14
Help
and
DocumentaOon
Even
though
it
is
beQer
if
the
system
can
be
used
without
documentaOon,
it
may
be
necessary
to
provide
help
and
documentaOon.
Any
such
informaOon
should
be
easy
to
search,
focused
on
the
user’s
task,
list
concrete
steps
to
be
carried
out,
and
not
be
too
large.
64

65. 26
February
2014
@dgcooley
#CPL14
65

66. 26
February
2014
@dgcooley
#CPL14
Help
and
DocumentaOon
Microsoc
PowerPoint
for
Mac
2011,
Version
14.3.1
66

67. 26
February
2014
@dgcooley
#CPL14
Bonus Mistake: Being Evil
67

68. 26
February
2014
@dgcooley
#CPL14
Dark
PaQerns
A
Dark
PaQern
is
a
type
of
user
interface
that
appears
to
have
been
carefully
craced
to
trick
users
into
doing
things,
such
as
buying
insurance
with
their
purchase
or
signing
up
for
recurring
bills.
darkpaQerns.org
68

69. 26
February
2014
@dgcooley
#CPL14
Road
Block
69

70. 26
February
2014
@dgcooley
#CPL14
So,
ask
yourself:
•
•
•
•
•
•
•
•
•
•
Am
I
keeping
them
informed
about
what’s
going
on?
Will
they
understand
this
terminology?
If
I
do
X,
will
it
take
control
away
from
my
user?
Am
I
being
consistent
with
standards?
With
myself?
How
can
I
reduce
the
possibility
that
they
will
make
this
mistake?
Am
I
asking
them
to
remember
something
unnecessarily?
If
they
get
a
phone
call
in
the
middle
of
this,
are
they
screwed?
Am
I
accommodaOng
both
my
novices
and
my
experts?
(How
about
repeat
novices?)
Is
there
too
much
crap
in
here?
Have
I
given
them
the
informaOon
they
need
to
recover
from
their
errors?
Can
they
find
the
help
they
need?
Quickly
and
easily?
When
and
where
they
need
it?
• Are
we
being
evil?
70

71. 26
February
2014
@dgcooley
#CPL14
10
HeurisOcs
for
User
Interface
Design
71

72. 26
February
2014
@dgcooley
#CPL14
References
72

73. 25
February
2014
@dgcooley
#CPL14
More
from
me?
73