UX is a very personal thing. However, I have found several practices that, by themselves have shown to improve performance. Retention, Accessibility, and Conversion. Other Sources: Principles of Mobile Site Design by Nick Babich https://uxplanet.org/principles-of-mobile-site-design-c4c721693c42#.lrcjx89hq Against Storytelling by Paul Ford https://trackchanges.postlight.com/against-storytelling-7e53b6d7a0d8?ref=uxdesignweekly#.xko722skg UX Design Best Practices: Refined Microinteractions by Jerry Cao https://www.uxpin.com/studio/blog/ux-design-best-practices-refined-microinteractions/

1. UX Playbook
15 minutes to better performance.

2. Theory
Digital UX is to make very difficult decisions with screen space,
interactions, content, and branding.
Then, follow up with rigorous monitoring, testing, and subtle
improvements.
It takes time (patience), monetary investment, trust in the
processes, and most importantly a great team.

3. Intro…
Get out your product and follow along.

4. Intro…
Get out your product and follow along.
Also, bring a snack, this may take a
while.

5. Accessibility
What good is a design…
if it’s not accessible?

6. Fonts
Accessibility

7. Accessibility.Fonts
Use larger fonts.
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.

8. Accessibility.Fonts
Cut the number of fonts down to
ONE.
“Not very stylish.”, you say?
Fine… I’ll give you TWO.
(PS: This presentation is Roboto Black (900) &
Roboto Light (300). Yes, technically ONE font; but the
weight extremes make it seem like TWO.)
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially
unchanged.

9. Accessibility.Fonts
Allow for font sizing.

10. Accessibility.Fonts
When in doubt, use serif
fonts when they are smaller.
(Though no concrete evidence has ever surfaced
to argue either way. AND there are exceptions.)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
LoremIpsumissimplydummy text of the printingandtypesettingindustry.LoremIpsumhas beenthe industry'sstandard
dummytext eversincethe 1500s,when anunknown printertooka galleyof typeand scrambleditto make atypespecimen
book. Ithassurvivednot onlyfivecenturies,but alsothe leapintoelectronictypesetting,remainingessentiallyunchanged.

11. Accessibility.Fonts
It’s much more important to
use fonts that have
monospacing and consistent
x-height and ascender /
descender values.
Also try to choose something
with open counters.

12. Accessibility.Fonts
Black on white.
I repeat, black on white
Lorem Ipsumis simply dummytext of the printingand typesetting industry.Lorem Ipsumhas beenthe industry's
standard dummytext ever since the 1500s, whenanunknownprinter took a galley of type and scrambled it to makea
type specimenbook. It hassurvived not only five centuries,butalso the leap into electronic typesetting, remaining
essentially unchanged.
Lorem Ipsumis simply dummytext of the printingand typesetting industry.Lorem Ipsumhas beenthe industry's
standard dummytext ever since the 1500s, whenanunknownprinter took a galley of type and scrambled it to makea
type specimenbook. It hassurvived not only five centuries,butalso the leap into electronic typesetting, remaining
essentially unchanged.

13. Links
Accessibility

14. Accessibility.Links
Never underline text that are
NOT links.
Links must be tab tested.
Alt and Title tags are
mandatory.
WHERE’STHELINK?
LoremIpsum is simply dummy textof theprinting and typesettingindustry. LoremIpsum has
beentheindustry's standard dummy text eversince the1500s,whenan unknown printertook
a galley of typeand scrambled it to makea typespecimen book.
WHERE’STHELINK?
LoremIpsum is simply dummy textof theprinting and typesettingindustry. LoremIpsum has
beentheindustry's standard dummy text eversince the1500s,whenan unknown printertook
a galley of typeand scrambled it to makea typespecimen book.
WHERE’STHELINK?
LoremIpsum is simply dummy textof theprinting and typesettingindustry. LoremIpsum has
beentheindustry's standard dummy text eversince the1500s,whenan unknown printertook
a galley of typeand scrambled it to makea typespecimen book.

15. Animation
Accessibility

16. Accessibility.Animation
Sometimes it’s a good idea to disable
most animation via cookies if you are
sure the user is older or has
accessibility issues.

17. Accessibility.Animation
Always use subtle, helpful animation.
Animation for animation sake is
usually not a good UX practice,
regardless of the user.

18. Accessibility.Animation
Always use subtle, helpful animation.
Animation for animation sake is
usually not a good UX practice,
regardless of the user.

19. Planning
Accessibility

20. Accessibility.Planning
1. Hire a professional.
2. GET THEM INVOLVED ON THE GROUND LEVEL.
1. Use the guide: http://webaim.org/standards/508/checklist
2. Use this guide too: https://www.w3.org/TR/WCAG20/
3. Creating Accessible Videos: http://www.washington.edu/accessibility/videos/

21. Accessibility.Planning
Accessibility must take significant form in your…
• User stories
• Journey maps
• Testing
• Development estimation

22. Forms
Accessibility
(See Payments)

23. Accessibility.Forms
Forms are the most overlooked, under-scrutinized part of many digital products.
Forms are CRITICAL for:
• Conversion
• Participation
• Retention
• Income

24. Accessibility.Forms
Inputs (text, select, dropdowns…)
Email Address
john.smith@emailaddress.com
Email Address
Email Address
EX: john.smith@emailaddress.com
BAD
BETTE
R
BEST

25. Accessibility.Forms
Tapable…
chris.feix.71@gmail.com
Email Address
EX: john.smith@emailaddress.com
chris.feix.71@gmail.com
Email Address
EX: john.smith@emailaddress.com

26. Accessibility.Forms
Obfuscation
5oftT@c0
Password
Must contain at least 8 characters comprised of letters,
numbers, and at least one symbol.
••••••••
Password
Must contain at least 8 characters comprised of letters,
numbers, and at least one symbol.
SHOW

27. Accessibility.Forms
Obfuscation
5oftT@c0
Password
Must contain at least 8 characters comprised of letters,
numbers, and at least one symbol.
X HIDE PASSWORD

28. Accessibility.Forms
5
Password
HINT:
7 more characters
A number
A symbol
SHOW
5oftT@
Password
HINT:
2 more characters
A number
A symbol
SHOW
5oftT@c0
Password
HINT:
8 characters
A number
A symbol
SHOW
Expectation…

29. Accessibility.Forms
Input masks…

30. Accessibility.Forms
Buttons…
CancelNext × Cancel Next ›

31. Accessibility.Forms
Buttons…
× Cancel Next › × Cancel Login
I forgot my password.?

32. Accessibility.Forms
Color Placement

33. Retention
Driving traffic to a product is the second hardest task of any
company - retaining those customers is paramount.

34. Reduce
Retention

35. Retention.Reduce
Much of what goes on a page can
be removed if:
• Main navigation is muy facil
• Search optimization has been
properly implemented
• Your marketing people aren’t total
douchebags

36. Retention.Reduce
Much of what goes on a page can
be removed if:
• Main navigation is muy facil
• Search optimization has been
properly implemented
• Your marketing people aren’t total
douchebags

37. Retention.Reduce
Much of what goes on a page can
be removed if:
• Main navigation is muy facil
• Search optimization has been
properly implemented
• Your marketing people aren’t total
douchebags

38. Retention.Reduce
Much of what goes on a page can
be removed if:
• Main navigation is muy facil
• Search optimization has been
properly implemented
• Your marketing people aren’t total
douchebags

39. Retention.Reduce
Much of what goes on a page can
be removed if:
• Main navigation is muy facil
• Search optimization has been
properly implemented
• Your marketing people aren’t total
douchebags

40. Retention.Reduce

41. Conversion
If it can’t convert a user into a customer, what good is it?

42. Personalization
Conversion

43. Conversion.Personalization
• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

44. Conversion.Personalization
• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Small commitments are better than big ones,
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

45. Conversion.Personalization
• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

46. Conversion.Personalization
• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

47. Conversion.Personalization
• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

48. Conversion.Personalization
Provide a way out if a user isn’t interested…
(“buy our books instead, join the club, subscribe for free tips”)

49. Forms
Conversion

50. Conversion.Forms
HTML Attributes

51. Conversion.Forms
HTML Attributes

52. Conversion.Forms
HTML Attributes

53. Conversion.Forms
Prefills and Typeahead

54. Framing
Conversion

55. Conversion.Framing
Know how the brain works.

56. Conversion.Framing
Know how the brain works.

57. Conversion.Framing
Know how the brain works.

58. Conversion.Framing
Stay out of peoples’ cerebral cortex!

59. Conversion.Framing

60. Conversion.Framing

61. Conversion.Framing

62. Conversion.Framing

63. Conversion.Framing

64. Conversion.Framing

65. Profits 21%
Form Completion 54%
Conversion.Framing
77% 19% 3% |
1% .
2% 9% 33%
66%

66. Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.

67. Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.
68% 32%
Completion
34%

68. Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.

69. Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.
PRINT
$125/yr.

70. Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.
PRINT
$125/yr.
16%
68%
0% 84%
32%
Completion
49%
34%