Successfully reported this slideshow.
Your SlideShare is downloading. ×

UX Playbook - 15 Minutes to Better Performance

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 70 Ad

UX Playbook - 15 Minutes to Better Performance

Download to read offline

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/

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/

Advertisement
Advertisement

More Related Content

Viewers also liked (19)

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

Advertisement

Recently uploaded (20)

UX Playbook - 15 Minutes to Better Performance

  1. 1. UX Playbook 15 minutes to better performance.
  2. 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. 3. Intro… Get out your product and follow along.
  4. 4. Intro… Get out your product and follow along. Also, bring a snack, this may take a while.
  5. 5. Accessibility What good is a design… if it’s not accessible?
  6. 6. Fonts Accessibility
  7. 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. 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. 9. Accessibility.Fonts Allow for font sizing.
  10. 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. 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. 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. 13. Links Accessibility
  14. 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. 15. Animation Accessibility
  16. 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. 17. Accessibility.Animation Always use subtle, helpful animation. Animation for animation sake is usually not a good UX practice, regardless of the user.
  18. 18. Accessibility.Animation Always use subtle, helpful animation. Animation for animation sake is usually not a good UX practice, regardless of the user.
  19. 19. Planning Accessibility
  20. 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. 21. Accessibility.Planning Accessibility must take significant form in your… • User stories • Journey maps • Testing • Development estimation
  22. 22. Forms Accessibility (See Payments)
  23. 23. Accessibility.Forms Forms are the most overlooked, under-scrutinized part of many digital products. Forms are CRITICAL for: • Conversion • Participation • Retention • Income
  24. 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. 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. 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. 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. 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. 29. Accessibility.Forms Input masks…
  30. 30. Accessibility.Forms Buttons… CancelNext × Cancel Next ›
  31. 31. Accessibility.Forms Buttons… × Cancel Next › × Cancel Login I forgot my password.?
  32. 32. Accessibility.Forms Color Placement
  33. 33. Retention Driving traffic to a product is the second hardest task of any company - retaining those customers is paramount.
  34. 34. Reduce Retention
  35. 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. 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. 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. 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. 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. 40. Retention.Reduce
  41. 41. Conversion If it can’t convert a user into a customer, what good is it?
  42. 42. Personalization Conversion
  43. 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. 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. 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. 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. 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. 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. 49. Forms Conversion
  50. 50. Conversion.Forms HTML Attributes
  51. 51. Conversion.Forms HTML Attributes
  52. 52. Conversion.Forms HTML Attributes
  53. 53. Conversion.Forms Prefills and Typeahead
  54. 54. Framing Conversion
  55. 55. Conversion.Framing Know how the brain works.
  56. 56. Conversion.Framing Know how the brain works.
  57. 57. Conversion.Framing Know how the brain works.
  58. 58. Conversion.Framing Stay out of peoples’ cerebral cortex!
  59. 59. Conversion.Framing
  60. 60. Conversion.Framing
  61. 61. Conversion.Framing
  62. 62. Conversion.Framing
  63. 63. Conversion.Framing
  64. 64. Conversion.Framing
  65. 65. Profits 21% Form Completion 54% Conversion.Framing 77% 19% 3% | 1% . 2% 9% 33% 66%
  66. 66. Conversion.Framing DIGITAL $59/yr. PRINT & DIGITAL $125/yr.
  67. 67. Conversion.Framing DIGITAL $59/yr. PRINT & DIGITAL $125/yr. 68% 32% Completion 34%
  68. 68. Conversion.Framing DIGITAL $59/yr. PRINT & DIGITAL $125/yr.
  69. 69. Conversion.Framing DIGITAL $59/yr. PRINT & DIGITAL $125/yr. PRINT $125/yr.
  70. 70. Conversion.Framing DIGITAL $59/yr. PRINT & DIGITAL $125/yr. PRINT $125/yr. 16% 68% 0% 84% 32% Completion 49% 34%

Editor's Notes

  • Luke Wroblewski writes of a study that determined top-aligned labels result in the shortest completion times, due to the reduced amount of eye movement needed.  Placeholder text (a.k.a. hint text), on the other hand, is generally agreed to be the opposite of helpful. Including the label as placeholder causes it to disappear once the field gains focus, meaning the user can no longer view it. This causes strain on short-term memory and increases the chances of error.
  • Tab tested.
  • A mask only appears once a user focuses on a field, preventing the scanning issue. Masks format the text automatically, while the field is being filled out, allowing users to focus on the required data and more easily notice errors.
  • Incentivizing conversion doesn’t always have to cost you money.
    Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Incentivizing conversion doesn’t always have to cost you money.
    Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Incentivizing conversion doesn’t always have to cost you money.
    Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump
  • Tim Ash (CEO of SiteTuners)
    Simon Sinek – The Golden Circle
    Cerebral cortex
    Limbic – Emotional memory
    160th jump

×