People are busier than ever. The UX karmic cycle can create positive experiences for them, which in turn drives business. We’ll point to ten specific principles for making your users’ lives easier—UX Mantras that can bring change for good. From typography to spacing to plain language, we’ll keep it fast, simple, and packed with common sense to make your users happier and your business stronger. When I was the Exec Creative Director at Infuz, I wrote this with Ryan Swarts, our UX Architect and Art Director for our presentation at the 2011 STL UX Conference. And yes... The airport sign at around 06:01 is not in Danish. I'm told it's Dutch. Doh!

1. Good UX Karma
Guiding Principles to
Simpler / Easier / Happier
User Interface Design
STL UX 2011
February 25, 2011
Presented by
Hafiz Huda and Ryan Swarts

2. HELLO.

4. Hafiz Huda
VP, Executive Creative Director
@lostpear
Ryan Swarts
Art Director / Usability Analyst
@swartsr

8. WHAT IS IT?
WHY SHOULD I CARE?
UX KARMA

10. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
CONTEXT + MAPPINGS

11. CONTEXT + MAPPINGS

12. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
CONTEXT + MAPPINGS

13. REMEMBER THE
DO UNTO OTHERS as you would
have them do unto you.
GOLDEN
RULE.

14. WITH
FOR THE
DESIGN
EMPATHY
USER.

15. USER.
PERSON.
YOU ARE A
MOST IMPORTANT...
YOU ARE A

17. Good UX Design
=
Happy People
=
Smart Business

18. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
CONTEXT + MAPPINGS
Our Guiding Principles.

19. Visual Confidence
Context + Mapping
Make It Easier
Misconceptions
Being Human

20. Make It Easier
Context + Mapping
Misconceptions
Being Human
Visual Confidence

21. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
VISUAL CONFIDENCE
Point the way with good hierarchy.
01

22. No Hierachy = No Confidence
Good hierarchy helps guide the eye
through a page of content.
A page without a strong hierarchy can be
as stressful to the user as a design without
proper space.
Prioritize the intended user interactions.

23. Methods to define hierarchy.
From Graphic Design: The New Basics — GDBasics.com

25. Group information into distinct elements.
From BigSpaceship.com

26. Leverage size to indicate hierarchy.
From BigSpaceship.com

27. Break up large articles.
From MSNBC.com

28. We access information in small chunks.
From MSNBC.com

29. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
VISUAL CONFIDENCE
Make commonly used
elements bigger.
02

31. Size Matters
If people use an area of your website often,
make it easier to find and interact with.
Don’t reduce key interaction elements.
The most important call to action should be
the biggest on screen.

32. Pagination Buttons: only 19x19 pixels?
From VEER.com

34. Large thumbnails to review products.
From Etsy.com

35. Large BUY NOW button. No subtlety.
From LivingSocial.com

36. Returning visitors clearly see SIGN IN.
From BankOfAmerica.com

37. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
VISUAL CONFIDENCE
Give me some room!
03

38. A little bit of elbow room and
whitespace goes a long way
Strike a balance between positive and
negative space to highlight content.
Avoid cluttering the visual canvas.
Each key element serves a purpose,
so define the boundaries and space
to emphasize importance.

41. Open spaces invite exploration.
From BatamHousing.com — Joel Sanders, Architect | Blesso Lofts, NYC, NY

42. Letting the page “breathe”
From HUGEinc.com

45. Let the page breathe.
From Logitech.com

49. Visual Confidence
Make It Easier
Misconceptions
Being Human
Context + Mapping

50. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
CONTEXT + MAPPING
Cues and Clues: Guide Your Users.
04

51. FILL ‘ER UP.

52. WHERE IS THE GAS TANK LOCATED?

53. What’s behind door #3?

54. Where are we?
Where we going?
Cues can save people a lot of time
and hassle.
Indicate where they are and where they need
to go next to complete an action.
Use indicators like color, font weight,
shadows, and arrows to guide a person’s
eye toward the next steps.

55. Where do you begin?
From www.facebook.com/BMWUSA

56. Animated setup: follow the arrow!
From DropBox Application Installation (Mac)

57. Cues can help your global navigation.
From USAToday.com

58. Ba-bam! Surprise!
From USAToday.com

59. Deliver expectations through cues.

60. What’s the booking process?
From Southwest.com

61. Guide the user through multiple steps.
From Crocs.com

62. Users need reassurance on the process.
From Crocs.com

63. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
CONTEXT + MAPPING
Adaptation: Design Responsively.
05

64. Consider the context
of the interface.
Ubiquitous computing means different
devices, screens, and situations.
Information and composition shift depending
on the needs and affordances of the device.
Placement dictates relevance.

65. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS

66. From tappinn.com
AWKWARD
PLACEMENT

67. From 100 yards away, exclusive content.
From http://qranywhere.blogspot.com

69. CollyLogic.com
“Narrow Version”

70. CollyLogic.com
“Wide Screen”

71. Feedly.com
Standard

72. Feedly.com
Wide Edition

73. Adaptation saves development/design time.
From CSSgrid.net

74. Flexible framework adapts to device.
From LessFramework.com

75. Visual Confidence
Make It Easier
Context + Mapping
Being Human
Misconceptions

76. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
MAKE IT EASIER
Simplify Things: Kill the Distractions.
06

77. Too many options become
overwhelming
Cut the number of options and your process
goes from a chore to a delight.
Limiting options leaves a person feeling
more confident and ultimately more satisfied.
Focus on the task goals at hand.
Empower the user to make a decision.

80. Where do you begin?
From KCSTAR.com

81. Hierarchy + Limit the story options and ads.
From MSNBC.com

82. Single call-to-action and clearing obstactles.
From Huggies.com

83. You’re here to do only one thing. Win. Win.
From www.SUBWAYfreshbuzz.com

84. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
MAKE IT EASIER
Reduce the number of steps.
07

85. If possible, reduce the steps
in repetative tasks
Examine your user-flow closely: can you
combine any steps or remove a few?
Use technology for efficiencies: cookies,
pre-populated fields, etc.
Less of a hassle means a happier person.

87. The double-confirmation:
You REALLY sure you want
to watch this program?

88. bit.ly
Auto-Shortening
upon Copy/Paste
Facebook Sharing
SHARE simultaneously
closes the window

89. Where’s the phone number?
From SuperPages.com

90. Click AGAIN to reveal the phone number.
From SuperPages.com

91. People expect numbers in directories.
From YP.com

92. Return visits are encouraged.
From HendricksGin.com

93. Visual Confidence
Make It Easier
Context + Mapping
Being Human
Misconceptions

94. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
Misconceptions
Users want reinvention.
08

95. People don’t always want you
to reinvent accepted practices
The Myth: As designers, we must create new
UI to stay innovative. People love seeing
pretty designs.
There’s always room to improve upon old
conventions, but consider the user.
Don’t force them to learn established
UI elements and interactions.
By going against the grain, are you
improving the experience or are you
putting up walls?

96. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS

97. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS

98. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS
IS THIS THE BEST LOCATION?

99. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS
PRACTICAL
vs.
CLEVER?

100. Not the flair you want on your site.
From TGIFridays.com

101. NOT A
BUTTON
BUTTONS

104. Most of these buttons are made by http://design-freak.com.

105. Major complaint
about e-readers
is that their page
numbers didn’t
correspond to the
page numbers in
a printed book.

106. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
Misconceptions
The Myth of “The Fold.”
09

107. Newspapers and Screens.
People scroll. Really!
The Myth: Users Won’t See Past ”The Fold”
Constant requests to cram as much
information above the fold as possible.
Use visual cues (such as cut-off images and
text) and compelling content to draw the
user down the page.

108. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS

109. 4,314pixels of posts
since January.
Our little Facebook page...

110. The essential elements are above the fold.
From www.boxee.tv

111. The essentials.
Great content
and features.
Repeat those
essentials.

112. Nice, big content blocks without clutter.
From www.boxee.tv

113. Thanks for scrolling 2,800+ pixels. Ready to BUY?
From www.boxee.tv

114. Recommendations
Stop cramming stuff above a specific pixel
point in your designs.
The three highest fold locations:
570, 590 and 600 pixels
(all different browsers) on 1024×768.
FORGET IT.
Offer compelling content for the scroll.
What’s at the bottom? More
than a copyright and footer?

115. When the Fold Matters.
If a specific piece of content is essential to
your business, move it to the top.
Advertisers will still want their ads towards
the top of the page.
Screen height matters with applications.

116. Visual Confidence
Make It Easier
Context + Mapping
Misconceptions
Being Human

117. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
Being Human
Real language. Honesty. Personality.
10

118. DIVDER PAGE HEADLINE
DIVDER PAGE SUB
DIVDER PAGE HEADLINE
CONTEXT + MAPPINGS

119. Treat the user as a person
Kill jargon when you can and speak frankly
and honestly.
Bring brand personality when appropriate.
Be aware of people’s time and efforts.

120. Close Button? Just deal.
From KCstar.com

121. Where to? Where from? Speak Up!
From JetBlue.com

122. Conversational language works.
From Southwest.com

123. Congratulate your
customers for doing a
good job.

124. Build your family profile.
From Alice.com

125. Monkeys make everyone smile.
From MailChimp.com

126. “Nuts, you had a few people jump ship.
Ah, who needs them anyway?”
From MailChimp.com

127. Discover opportunities to help,
guide, and delight.
People gravitate to brands that value them.
Customers are people, not simply “users.”
Step in their shoes and you’ll create better
digital experiences.
Happy customers. Repeat business.
You create fans, followers, and advocates!

128. UX KARMA
DESIGNING A BETTER WORLD.

129. USERS.
WE ARE
PEOPLE.
MORE THAN

130. THANKS.
Hafiz Huda
@lostpear
Ryan Swarts
@swartsr