1 / 90

Making your templates as user friendly as possible Glyn Thomas 20 JUNE 2019

Learn how to make your templates more user-friendly by optimizing layout, buttons, text size, width, and images for better engagement and accessibility.

aechavarria
Download Presentation

Making your templates as user friendly as possible Glyn Thomas 20 JUNE 2019

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Making your templates as user friendly as possible Glyn Thomas 20 JUNE 2019 USER FRIENDLY TEMPLATES

  2. Emails & Pages EVENT TITLE HERE IN CAPS

  3. Emails USER FRIENDLY TEMPLATES

  4. Emails Some of the things we’ll look at: • Layout • Buttons • Text size • Width • Images USER FRIENDLY TEMPLATES

  5. Layout USER FRIENDLY TEMPLATES

  6. Layout One column, mobile first layout USER FRIENDLY TEMPLATES

  7. Layout One column, mobile first layout • Will work well across all devices and apps • Content works for people who prefer to clicks links or buttons • Designed for supporters who want the key informationas well as supporters who want a lot more information USER FRIENDLY TEMPLATES

  8. Layout One column, mobile first layout • Will work well across all devices and apps • Content works for people who prefer to clicks links or buttons • Designed for supporters who want the key information as well as supporters who want a lot more information USER FRIENDLY TEMPLATES

  9. Layout One column, mobile first layout • Will work well across all devices and apps • Content works for people who prefer to clicks links or buttons • Designed for supporters who want the key informationas well as supporters who want a lot more information USER FRIENDLY TEMPLATES

  10. Text size USER FRIENDLY TEMPLATES

  11. Text size 16-18px minimumline-height 22-24px minimum USER FRIENDLY TEMPLATES

  12. Text size 16-18px minimumline-height 22-24px minimum USER FRIENDLY TEMPLATES

  13. Text size 16-18px minimumline-height 22-24px minimum USER FRIENDLY TEMPLATES

  14. Buttons USER FRIENDLY TEMPLATES

  15. Buttons HTML buttons - not images USER FRIENDLY TEMPLATES

  16. Buttons HTML buttons - not images • Bulletproof buttons • https://www.emailonacid.com/blog/article/email-development/how-to-make-your-emails-bulletproof/ • https://buttons.cm/ USER FRIENDLY TEMPLATES

  17. Buttons USER FRIENDLY TEMPLATES

  18. Buttons USER FRIENDLY TEMPLATES

  19. Width USER FRIENDLY TEMPLATES

  20. Width Maximum width of 600px USER FRIENDLY TEMPLATES

  21. Width USER FRIENDLY TEMPLATES

  22. Preheader / Preview Often overlooked when emails are written, and when templates are designed • Appears next to or below the subject line • Helps to get people opening your email USER FRIENDLY TEMPLATES

  23. USER FRIENDLY TEMPLATES

  24. Key things Often overlooked when emails are written, and when templates are designed • Template width: max 600px • Preheader / Preview text in template • HTML buttons • Font size minimum 16px USER FRIENDLY TEMPLATES

  25. Pages USER FRIENDLY TEMPLATES

  26. Pages USER FRIENDLY TEMPLATES

  27. Pages Some of the things we’ll look at: • Page layout and Multi-step forms • Form fields and Error messages • Conditional logic • Address lookup • Bank validation and Card validation • Accessibility • Mobile / Desktop / Tablet • Buttons USER FRIENDLY TEMPLATES

  28. One column layout USER FRIENDLY TEMPLATES

  29. One column layout USER FRIENDLY TEMPLATES

  30. One column layout USER FRIENDLY TEMPLATES

  31. Align labels top left USER FRIENDLY TEMPLATES

  32. Align labels top left USER FRIENDLY TEMPLATES

  33. Align labels top left USER FRIENDLY TEMPLATES

  34. Do you really need all those fields? USER FRIENDLY TEMPLATES

  35. Do you really need all those fields? Only collect the data you really need and remove all non-essential fields USER FRIENDLY TEMPLATES

  36. Do you really need all those fields? USER FRIENDLY TEMPLATES

  37. Use conditional logic to shorten forms USER FRIENDLY TEMPLATES

  38. Use conditional logic to shorten forms USER FRIENDLY TEMPLATES

  39. Use conditional logic to shorten forms USER FRIENDLY TEMPLATES

  40. Multi-step forms USER FRIENDLY TEMPLATES

  41. Multi-step forms Avoid overwhelming supporters with all the form fields on the same page - but signpost each step in the process USER FRIENDLY TEMPLATES

  42. Multi-step forms USER FRIENDLY TEMPLATES

  43. Multi-step forms USER FRIENDLY TEMPLATES

  44. Multi-step forms USER FRIENDLY TEMPLATES

  45. Inline error messages USER FRIENDLY TEMPLATES

  46. Inline error messages Immediately indicate if the supporter has made an error USER FRIENDLY TEMPLATES

  47. Inline error messages USER FRIENDLY TEMPLATES

  48. Required or optional USER FRIENDLY TEMPLATES

  49. Required or optional Be very clear which form fields are required or which ones are optional USER FRIENDLY TEMPLATES

  50. Required or optional USER FRIENDLY TEMPLATES

More Related