Automattic GM 2016

1. UI DESIGN BASICS
Automattic GM 2016

2. WELCOME

3. MIKE SHELTON
Spectrum Division, Cerulean
.blog, domains, and the WordPress.com store

4. SHAUN ANDREWS
Delta (NUX & retention)
Previously
Triton, Reader Squad
Editorial
dotOrg
VaultPress

5. THIS IS A DISCUSSION
Please feel free to ask questions anytime.

6. WHAT IS UI DESIGN?

7. LETS HEAR
FROM YOU
FIRST
Tell us your name, team, and
what UI Design means to you.

8. WHAT IS UI
DESIGN?
Making things that people
use to accomplish a task.

9. UI, UX, IA, IXD
RESEARCH
PROTOTYPING
TESTING
COPYWRITING
LAYOUT
COLOR
TYPOGRAPHY
Oh my…

10. USER EXPERIENCE (UX)
Focused on creating a positive overall experience
between a person and a system.

12. INFORMATION
ARCHITECTURE (IA)
Focused on organizing information to support
usability and “find-ability.”

14. INTERACTION
DESIGN (IXD)
Focused on the behavior of a system as a person
interacts with that system.

16. VISUAL DESIGN
Focused on imagery, colors, shapes, typography,
and form.

18. IT’S ALL CONNECTED

20. UI DESIGN PRINCIPLES

21. INTERFACES
ARE
OBVIOUS
A UI hints at how its used.

24. OBVIOUSNESS AND CLARITY
➤ Be able to recognize it.
➤ Care about why they would use it.
➤ Understand what the UI is helping them do.
➤ Predict what will happen when they use it.
➤ And successfully interact with it.

25. YOU AGAIN
What are some obvious UI’s
you’ve experienced.

26. INTERFACES
ARE
CONSISTENT
UI’s teach behavior.

29. INTERFACES
ARE
DYNAMIC
A UI reacts to input.

32. INTERFACES
CONSERVE
ATTENTION
Attention is a prerequisite for
use. Conserve it at all costs.

33. INTERFACES
ALLOW FOR
CONTROL
People like to feel in control.

34. DIRECT MANIPULATION
Design an interface with as little footprint as possible.

35. INTERFACES
PROVIDE A
NEXT STEP
Anticipate what the next interaction
should be and design to support it.

36. INTERFACES
ARE
HELPFUL
UI’s guide you towards
your goal.

38. INTERFACES
ARE
ACCESSIBLE
Anyone should be able to use it,
regardless of ability or device.

41. INTERFACES
ARE
USED
A UI that isn’t used,
is a failure.

43. VISUAL DESIGN DO’S
AND DON’TS
Some basics to keep in mind.

44. CONTRAST IS
KEY
Keep in mind visual
disabilities and legibility.

45. LINE LENGTH
AFFECTS
READBILITY
Not too long, not too short.

46. USE
HIERARCHY
TO HELP
Font, size, weight, color, and spacing can
help group and emphasis your message.

47. KEEP YOUR
AUDIENCE IN
MIND
Context matters.

48. DON’T LEAVE
WORDS
ALONE.
Orphans and widows .

49. KEEP FONTS
TO A
MINIMUM
Stick with one serif
and one sans-serif.

50. AVOID COLOR
DISCORD
Some colors just
don’t work together.

51. WHITE SPACE
IS YOUR
FRIEND
It’s not empty space.

52. GRAMMAR
MATTERS
The little details make
a big difference

53. KEEP IT
SIMPLE
Avoid gratuitous complexity
without good reason.

54. KEEP AN EYE
ON LEADING
Line-height can
impact readability.

55. ALWAYS
TRUST YOUR
EYE
“Technically” right isn’t
always right.

56. AVOID ALL
CAPS
Said the man who’s slides use
gratuitous all caps.

57. KEEP YOUR
FONT SIZES
SANE
Consider viewing distance,
screen size, and readability.

58. MOTION
Real world interfaces move.

59. MOTION
TELLS A
STORY
Interfaces are stories, too.

61. THE
ILLUSION OF
LIFE
Learn from Disney animators.

62. http://the12principles.tumblr.com
http://wp.me/puPv3-2xz

68. COPY AS DESIGN

69. KNOW YOUR
AUDIENCE
Users should be able to read
and understand all of the text.

70. YOUR TURN
What are some idioms that
don’t cross cultural boundaries?

71. BRIEF BUT
INFORMATIVE
People can only process small
amounts of information at one time.

72. REMOVE
IRRELEVANT
INFO
Only give them what they
need to complete their task.

73. WORDS
MATTER
Use the most effective and
accurate words.

74. USE THE
ACTIVE VOICE
Move people to take action.

75. MAKE IT
PERSONAL
Make it a pleasant and even
humorous experience.

76. TERRIBLE UI
What makes a UI bad?

77. “Bad user interface
design is death by
a thousand cuts
-Paul Boag

85. GROUP ACTIVITY
Lets break up into groups and find some examples
of good/terrible UI.

86. ➤ Spend 15 minutes to find a few interfaces you’re familiar with
and think about what makes it good and/or bad.
➤ Split into groups.
➤ Each person take 5 minutes to share their findings with the
rest of their group.

87. USER TESTING 101

88. LETS DO A USER TEST
Its super easy.

89. WHY DO WE TEST?
You’ll never guess what happens next…

90. MODERATED VS.
UNMODERATED
A few key differences.

91. MODERATED TESTS
➤ Perfect for early stages of design, like prototypes.
➤ Moderators can ask questions to obtain a deeper
understanding of users.
➤ Moderators can help keep users on track, and clarify
confusion to help complete a test.
➤ People act differently when someones watching them.
➤ Can be time consuming and costly.

92. UNMODERATED TESTS
➤ Users are more likely to “act natural.”
➤ Easer to setup and maintain.
➤ Lack of moderation means less control over the test.
➤ Without a moderator, its possible for users to get lost,
perform incorrect actions, or leave a test incomplete.
➤ Much cheaper overall, and allows for a high-volume of tests.

93. TREE TESTINGS
Strip away the visuals and focus on the
information architecture.

95. BENCHMARK TESTING
Get a raw measurement of user performance.

96. HALLWAY TESTING
Grab the next person to walk by the hallway and
have them use your UI.

97. LETS WATCH SOME