UX Playbook - 15 Minutes to Better Performance

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

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”)

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

53. Conversion.Forms Prefills and Typeahead

54. Framing Conversion

55. Conversion.Framing Know how the brain works.

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

59. 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%

UX Playbook - 15 Minutes to Better Performance

You are reading a preview.

Check these out next

UX Playbook - 15 Minutes to Better Performance

More Related Content

Viewers also liked (19)

Similar to UX Playbook - 15 Minutes to Better Performance (20)

Recently uploaded (20)