Avoiding UI Mistakes as delivered at KCDC in May 2013. This quick look at Nielsen & Molich's 10 Usability Heuristics provides a great starting point for developers looking to incorporate some UX thinking into their work.

1. KCDC 2013
Avoiding UI Mistakes
Introduction to
User Experience Methods
1
Danielle Gobert Cooley
@dgcooley
03
May
2013
#KCDC2013

2. KCDC 2013
2
03
May
2013
@dgcooley
#KCDC2013

3. KCDC 2013
Danielle
Gobert
Cooley
3
03
May
2013
@dgcooley
#KCDC2013
danielle@dgcooley.com
@dgcooley
14
years
as
a
UX
Specialist
BE,
Biomedical
and
Electrical
Engineering
–
Vanderbilt
University
MS,
Human
Factors
in
InformaMon
Design
–
Bentley
University
Selected
Clients
hOp://linkedin.com/in/dgcooley

4. KCDC 2013
Good sites?
4
03
May
2013
@dgcooley
#KCDC2013

5. KCDC 2013 03
May
2013
@dgcooley
#KCDC2013
5

6. KCDC 2013 03
May
2013
@dgcooley
#KCDC2013
6

7. KCDC 2013 03
May
2013
@dgcooley
#KCDC2013
7

8. KCDC 2013 03
May
2013
@dgcooley
#KCDC2013
8
hOp://www.theworldsworstwebsiteever.com/

9. KCDC 2013 03
May
2013
@dgcooley
#KCDC2013
9
hOp://metatech.org/

10. KCDC 2013 03
May
2013
@dgcooley
#KCDC2013
10
hOp://www.fgmarchitects.com/

11. KCDC 2013
The 10 Heuristics
11
03
May
2013
@dgcooley
#KCDC2013

12. KCDC 2013
Visibility
of
System
Status
12
03
May
2013
@dgcooley
#KCDC2013
The
system
should
always
keep
users
informed
about
what
is
going
on,
through
appropriate
feedback
within
reasonable
Mme.
Where
am
I?
How
do
I
get
Home?
Was
my
data
saved?
How
much
longer
will
it
take?
How
many
steps
are
there?
Am
I
done?
Am
I
logged
in?

13. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
13
How
do
I
get
Home?

14. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
14
How
do
I
get
Home?

15. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
15
How
much
longer
will
it
take?

16. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
16
How
many
steps
are
there?

17. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
17
Was
my
data
saved?
Mailchimp.com,
Kayak.com

18. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
18
Was
my
data
saved?
hOp://swagbucks.com

19. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
19
Was
my
data
saved?
HootSuite
iPad
app,
April
2012

20. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
20
Am
I
logged
in?

21. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
21
Where
am
I?

22. KCDC 2013
Visibility
of
System
Status
03
May
2013
@dgcooley
#KCDC2013
22
Where
am
I?

23. KCDC 2013
Match
Between
System
and
Real
World
The
system
should
speak
the
users’
language,
with
words,
phrases
and
concepts
familiar
to
the
user,
rather
than
system-­‐oriented
terms.
Follow
real-­‐world
convenMons,
making
informaMon
appear
in
a
natural
and
logical
order.
03
May
2013
@dgcooley
#KCDC2013
23

24. KCDC 2013
User
Control
and
Freedom
Users
oaen
choose
system
funcMons
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.
03
May
2013
@dgcooley
#KCDC2013
24

25. KCDC 2013
Consistency
and
Standards
Users
should
not
have
to
wonder
whether
different
words,
situaMons,
or
acMons
mean
the
same
thing.
Follow
plaform
convenMons.
03
May
2013
@dgcooley
#KCDC2013
25
?

26. KCDC 2013
Consistency
and
Standards
03
May
2013
@dgcooley
#KCDC2013
26

27. KCDC 2013
Consistency
and
Standards
03
May
2013
@dgcooley
#KCDC2013
27
Recommenda)on:
Both
for
consistency
and
intui5veness,
use
the
tradi5onal
calendar
picker
tool
throughout
the
applica5on.

28. KCDC 2013
Consistency
and
Standards
03
May
2013
@dgcooley
#KCDC2013
28
The
three-­‐way
toggle,
though
not
unique
to
this
tool,
is
not
an
immediately-­‐recognizable
control.
Recommenda)on:
Consider
a
more
tradi5onal
radio
bu>on
control:
Exists:
¤Yes
¢No
¢Either

29. KCDC 2013
Consistency
and
Standards
03
May
2013
@dgcooley
#KCDC2013
29

30. KCDC 2013
Error
PrevenMon
Even
beOer
than
good
error
messages
is
a
careful
design
which
prevents
a
problem
from
occurring
in
the
first
place.
Either
eliminate
error-­‐prone
condiMons
or
check
for
them
and
present
users
with
a
confirmaMon
opMon
before
they
commit
to
the
acMon.
03
May
2013
@dgcooley
#KCDC2013
30

31. KCDC 2013
Error
PrevenMon
03
May
2013
@dgcooley
#KCDC2013
31

32. KCDC 2013
Error
PrevenMon
03
May
2013
@dgcooley
#KCDC2013
32
hOp://www.lukew.com/ff/entry.asp?571

33. KCDC 2013
Error
PrevenMon
03
May
2013
@dgcooley
#KCDC2013
33
Microsoa
Word,
Unknown
version;
Microsoa
Word
for
Mac
2011,
Version
14.3.1

34. KCDC 2013
RecogniMon
>
Recall
Minimize
the
user’s
memory
load
by
making
objects,
acMons,
and
opMons
visible.
The
user
should
not
have
to
remember
informaMon
from
one
part
of
the
dialogue
to
another.
InstrucMons
for
use
of
the
system
should
be
visible
or
easily
retrievable
whenever
appropriate.
03
May
2013
@dgcooley
#KCDC2013
34
hOp://online.epocrates.com/noFrame/

35. KCDC 2013
RecogniMon
>
Recall
03
May
2013
@dgcooley
#KCDC2013
35
Microsoa
PowerPoint
for
Mac
2011,
Version
14.3.1

36. KCDC 2013
Flexibility
and
Efficiency
of
Use
Accelerators
–
unseen
by
the
novice
user
–
may
oaen
speed
up
the
interacMon
for
the
expert
user
such
that
the
system
can
cater
to
both
inexperienced
and
experienced
users.
Allow
users
to
tailor
frequent
acMons.
03
May
2013
@dgcooley
#KCDC2013
36

37. KCDC 2013
Flexibility
and
Efficiency
of
Use
03
May
2013
@dgcooley
#KCDC2013
37
American
Giant,
ThinkGeek

38. KCDC 2013
Flexibility
and
Efficiency
of
Use
03
May
2013
@dgcooley
#KCDC2013
38
Chrome’s
right-­‐click
menu

39. KCDC 2013
Flexibility
and
Efficiency
of
Use
03
May
2013
@dgcooley
#KCDC2013
39
Microsoa
Word
and
PowerPoint
for
Mac
2011,
Version
14.3.1

40. KCDC 2013
Flexibility
and
Efficiency
of
Use
03
May
2013
@dgcooley
#KCDC2013
40
TwiOer’s
iOS
app,
November
2011

41. KCDC 2013
AestheMc
and
Minimalist
Design
Dialogues
should
not
contain
informaMon
which
is
irrelevant
or
rarely
needed.
Every
extra
unit
of
informaMon
in
a
dialogue
competes
with
the
relevant
units
of
informaMon
and
diminishes
their
relaMve
visibility.
03
May
2013
@dgcooley
#KCDC2013
41

42. KCDC 2013
AestheMc
and
Minimalist
Design
03
May
2013
@dgcooley
#KCDC2013
42

43. KCDC 2013
AestheMc
and
Minimalist
Design
03
May
2013
@dgcooley
#KCDC2013
43
Lane
Furniture
(2011)

44. KCDC 2013
AestheMc
and
Minimalist
Design
03
May
2013
@dgcooley
#KCDC2013
44

45. KCDC 2013
AestheMc
and
Minimalist
Design
03
May
2013
@dgcooley
#KCDC2013
45
hOp://lesscontentmorestrategy.com

46. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
Error
messages
should
be
expressed
in
plain
language
(no
codes),
precisely
indicate
the
problem,
and
construcMvely
suggest
a
soluMon.
03
May
2013
@dgcooley
#KCDC2013
46

47. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
03
May
2013
@dgcooley
#KCDC2013
47

48. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
03
May
2013
@dgcooley
#KCDC2013
48

49. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
03
May
2013
@dgcooley
#KCDC2013
49
Chrome,
version
26.0.141065
–
May
2013

50. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
03
May
2013
@dgcooley
#KCDC2013
50

51. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
03
May
2013
@dgcooley
#KCDC2013
51

52. KCDC 2013
Help
users
recognize,
diagnose,
and
recover
from
errors
03
May
2013
@dgcooley
#KCDC2013
52
AmericanGiant.com

53. KCDC 2013
Help
and
DocumentaMon
Even
though
it
is
beOer
if
the
system
can
be
used
without
documentaMon,
it
may
be
necessary
to
provide
help
and
documentaMon.
Any
such
informaMon
should
be
easy
to
search,
focused
on
the
user’s
task,
list
concrete
steps
to
be
carried
out,
and
not
be
too
large.
03
May
2013
@dgcooley
#KCDC2013
53

54. KCDC 2013
Help
and
DocumentaMon
03
May
2013
@dgcooley
#KCDC2013
54

55. KCDC 2013
Help
and
DocumentaMon
03
May
2013
@dgcooley
#KCDC2013
55
Microsoa
PowerPoint
for
Mac
2011,
Version
14.3.1

56. KCDC 2013
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
accommodaMng
both
my
novices
and
my
experts?
(How
about
repeat
novices?
• Is
there
too
much
crap
in
here?
• Have
I
given
them
the
informaMon
they
need
to
recover
from
their
errors?
• Can
they
find
the
help
they
need?
Quickly
and
easily?
When
and
where
they
need
it?
56
03
May
2013
@dgcooley
#KCDC2013

57. KCDC 2013
References
03
May
2013
@dgcooley
#KCDC2013
57