![#LitmusLive
Ease of Use
The degree of [a] system’s aesthetics affected the post-use perceptions of both
aesthetics and usability, whereas the degree of actual usability had no such effect.
Don Norman, Emotional Design
Translation:
Visual design impacts experience as much as usability principles.](https://image.slidesharecdn.com/high-performanceemaildesignworkshopnonotes-180917154317/85/Engaging-Users-with-High-Performance-Design-12-320.jpg)
![#LitmusLive
Ease of Use
The degree of [a] system’s aesthetics affected the post-use perceptions of both
aesthetics and usability, whereas the degree of actual usability had no such effect.
Don Norman, Emotional Design
Translation:
Visual design impacts experience as much as usability principles.](https://image.slidesharecdn.com/high-performanceemaildesignworkshopnonotes-180917154317/75/Engaging-Users-with-High-Performance-Design-12-2048.jpg)
Uploaded byLitmus
Engaging Users with High-Performance Design
The passage discusses the importance of summarization in an age of information overload. It notes that with the massive amounts of data available online, being able to quickly understand the key points of lengthy documents, articles, or reports is crucial. The ability to produce clear, concise summaries helps people save time and focus on only the most essential information.
More Related Content
Similar to Engaging Users with High-Performance Design
![Adapting to Consumers' New Definition of Spam [Webinar]](https://cdn.slidesharecdn.com/ss_thumbnails/adaptingtoconsumersnewdefinitionofspam-161116220236-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Engaging Users with High-Performance Design
- 1.
- 2. #LitmusLive 1:00pm - 1:30pm Introduction,housekeeping stuff, and some thoughts on the importance of visual design. 1:30pm - 2:30pm The principles of visual design, and how they're applied to email. 2:30pm - 2:45pm Understanding how design relates to engagement. 3:00pm - 4:00pm Design challenges! 4:00pm - 4:45pm Scaling visual design for email. 4:45pm - 5:00pm Resources, open discussion, and wrap.
- 3. #LitmusLive JASON RODRIGUEZ Community &Product Evangelist, Litmus Website: rodriguezcommaj.com Twitter: @rodriguezcommaj
- 4. Better understand howvisual design can improve email engagement and performance Give you the tools and knowledge you need to create higher-performing emails through visual design #LitmusLive 1 2
- 5.
- 6.
- 7. #LitmusLive Aesthetics, or visualappeal, factors may be detected first and that these could influence how users judge subsequent experience and enjoyment with that site. Source: http://www.anaandjelic.typepad.com/files/attention-web-designers-2.pdf
- 8. #LitmusLive 46.1% of peoplesay design is the number one criterion for discerning the credibility of a company. Source: https://blog.hubspot.com/blog/tabid/6307/bid/33423/19-Reasons-You-Should-Include-Visual-Content-in-Your-Marketing-Data.aspx
- 9. #LitmusLive The average timespent looking at an email increased 7%… to 11 seconds. Source: https://litmus.com/blog/email-attention-spans-increasing-infographic
- 10. #LitmusLive Visual design isthe mechanism through which we interact with subscribers.
- 11.
- 12. #LitmusLive Ease of Use Thedegree of [a] system’s aesthetics affected the post-use perceptions of both aesthetics and usability, whereas the degree of actual usability had no such effect. Don Norman, Emotional Design Translation: Visual design impacts experience as much as usability principles.
- 13.
- 14. #LitmusLive Visual design isthe mechanism through which we interact with subscribers.
- 15.
- 16. #LitmusLive Contrast noun | ˈkänˌtrast| The state of being strikingly different from something else in juxtaposition or close association.
- 25. #LitmusLive Contrast in email Usecolor to create contrast between background and foreground elements. CSS: color, background-color <td style="background-color: black; color: white;"> CONTENT </td>
- 26. #LitmusLive Contrast in email Usesize to create contrast between elements. CSS: font-size <h1 style="font-size: 32px;"> </h1> <p style="font-size: 18px;"> </p>
- 27. #LitmusLive Contrast in email Usecolor, weight, and underlines to create contrast between links and other text. CSS: color, font-weight, text-decoration <a href="/" style="color: blue; font-weight: bold; text-decoration: underline;"> </a>
- 28. #LitmusLive Contrast in email 1.Use contrasting colors between background and foreground. 2. Use size to reinforce contrast. 3. Underline text links for accessibility and contrast.
- 29. #LitmusLive Hierarchy noun | ˈhī(ə)ˌrärkē| An arrangement or classification of things according to relative importance. # ## ###
- 36. #LitmusLive If everything isimportant, nothing is important.
- 37. #LitmusLive Hierarchy in email Usesize, color, weight, and layout to create hierarchy. CSS: color, font-weight, font-size <h1 style="color: black; font-size: 32px; font- weight: bold;"> </h1> <p style="color: grey; font-size: 18px; font- weight: normal;"> </p>
- 38. #LitmusLive Hierarcy in email Usesemantic markup to create hierarchical, accessible documents. HTML: h1-h6, p, article, section, div, role="presentation" <article> <h1>This is a heading </h1> <p>This is a paragraph. With sentences. </p> </article>
- 39. #LitmusLive Hierarchy in email Varyyour layout based on content and importance.
- 40. #LitmusLive Hierarchy in email 1.Draw the reader's attention to what's most important. 2. Use size, color, and weight to show importance. 3. Vary your layout to reinforce hierarchy.
- 41. #LitmusLive Proximity noun | präkˈsimədē| Nearness in space, time, or relationship.
- 45. #LitmusLive Proximity in email 1.Group related content together. 2. Use ample whitespace. 3. Use proximity to reinforce hierarchy and clarity.
- 46. #LitmusLive Readability noun | ˈrēdəˈbilədē| The quality of being legible or decipherable.
- 51. #LitmusLive The optimal linelength for body copy is 50-60 characters, or up to 75-80 depending on who you ask. The line length of the above is 58 characters. Source: https://baymard.com/blog/line-length-readability
- 53. #LitmusLive Readability in email Usecolor, font-size, line length, and line spacing to keep text readable. CSS: color, font-size, line-height, max-width <p style="color: black; font-size: 18px; line-height: 28px; max-width: 600px;"> </p>
- 54. #LitmusLive Readability in email 1.Keep copy readable so people can understand your message. 2. Rely on color contrast, font size, line spacing, and line lengths. 3. Use inherently readable fonts. The fancier the font, the harder it is to read.
- 55. #LitmusLive Alignment noun | ˈəˈlīnmənt| Arrangement in a straight line, or in correct or appropriate relative positions.
- 62. #LitmusLive Alignment in email Usetext alignment to keep text readable for all users. CSS: text-align, dir <p style="text-align: left;"> </p> <p dir="rtl"> </p>
- 63. #LitmusLive Alignment in email 1.Left align text to keep it readable for all users. 2. Align items to create structure and order. 3. Break that alignment to draw attention to key elements.
- 64. #LitmusLive Color noun | ˈkələr| Vividness of visual appearance. A shade of meaning.
- 66.
- 67.
- 71. #LitmusLive Color in email Putcolor to use in emails to reinforce messaging and draw attention. CSS: background-color, color <div style="background-color: rebeccapurple;"> </div> <p style="color: black;"> </p>
- 72. #LitmusLive Color in email 1.Use color to reinforce messaging and convey meaning. 2. Don't use vibrating color combinations. 3. Use color sparingly as an accent or to draw attention.
- 73. #LitmusLive Consistency noun | ˈkənˈsistənsē| Conformity which is necessary for the sake of logic and accuracy.
- 75. #LitmusLive Inter- vs. intra-email Inter-emailconsistency is consistency across different emails. Intra-email consistency is consistency within the same email.
- 76. #LitmusLive Picture Superiority Effect Imagesare remembered better than words.
- 81. #LitmusLive Signal-to-Noise Ratio The ratioof relevant vs. irrelavent information on display. K.I.S.S.
- 83.
- 84. #LitmusLive K.I.S.S. (Keep it simpleand straighforward)
- 85. #LitmusLive Constraints Simplify usability, minimize errors,and improve the clarity of your design.
- 86. #LitmusLive How does allof that relate to engagement?
- 87. #LitmusLive Visual design isthe mechanism through which we interact with subscribers.
- 88. Allowing subscribers toengage Encouraging subscribers to engage #LitmusLive 1 2
- 89. #LitmusLive Usability Visual design providesbaseline usability, allowing your subscribers to engage with your content. Mechanisms Hierarchy, contrast, readability, alignment, etc.
- 90. #LitmusLive Affordance The patterns whichhelp people accomplish certain tasks. Feeling familiar with and empowered by an interface. Buttons
- 91. #LitmusLive Motivation Using visual designto lead a subscriber down a specific path. Encouraging action through visual design cues.
- 99. #LitmusLive Visual design eitherbuilds or erodes subscriber trust.
- 101.
- 102. #LitmusLive Use visual designto fill your trust bank. Your subscribers will engage more when they trust you.
- 103. #LitmusLive Phew! Let's takea break.
- 104.
- 105. #LitmusLive How they work 1.I'll present a type of email with a specific goal. 2. We'll break into groups and discuss how to design the email. 3. We'll reconvene and present, then discuss the idea. 4. Rinse and repeat.
- 106. Let's defer judgement(mostly anything goes) Wild ideas are encouraged (don't censor your ideas) Say "and" instead of "but" (build on ideas instead of tearing them down) The more ideas the better (write it down and put it up) One conversation at a time (stay focused on the discussion) 1 2 3 4 5 #LitmusLive
- 107. #LitmusLive 1. Cart abandonment Someonevisited your site, added items to their shopping cart, but left before checkout. Goal Use an email to get that person into the checkout process.
- 108.
- 109. #LitmusLive 2. Forced passwordreset Due to a security issue, all users need to log into their account and create a new password. Goal Get the user into your app to update their password.
- 110.
- 111. #LitmusLive 3. Event invite Youhave an upcoming webinar and your boss wants as many signups as possible. Goal Get subscribers to sign up for the webinar.
- 112.
- 113. #LitmusLive 4. Request feedback Youwant to improve your product with customer feedback, so you need to get that feedback. Goal Get subscribers to fill out a feedback form.
- 114.
- 115.
- 116.
- 117. #LitmusLive Design systems empoweranyone to produce send-ready emails.
- 119. Design, coding, and reviewtake up the most time.
- 120. #LitmusLive A design systemis a collection of reusable elements governed by a set of standards. - Fabio Carneiro
- 121. #LitmusLive Design systems: Why Definethe goals of your design system. To ensure usability for subscribers, consistency across the email system, adherence with brand guidelines, and ease of production for the team.
- 122. #LitmusLive Design systems: What Definewhat will be included in your design system. TTypography Color Spacing Layouts Imagery
- 123. #LitmusLive Typography What typefaces areused? What size are headings? What size is body copy? What weights are the fonts?
- 124. #LitmusLive Colors What is theprimary color palette? What are the secondary colors? What combinations are allowed? Do elements require specific colors?
- 125. #LitmusLive Spacing How much paddingis around each element in the email? How big are margins around headings and paragraphs? How is white space used to aid usability?
- 126. #LitmusLive Layouts What does theemail structure look like? How many columns are there? Are there different types of modules? Is there a defined grid system?
- 127. #LitmusLive Imagery What type ofimagery is used? What type of icons are used? How are images prepared? How are images sourced?
- 128. #LitmusLive Design systems: How Thisis how the design system is actually implemented. Documentation Examples Production Code Tools
- 129. #LitmusLive Documentation Documentation explains your designsystem. It provides anyone an explanation on how to use the design system.
- 130. #LitmusLive What makes adesign system is comprehensive documentation. - Fabio Carneiro
- 131.
- 132. #LitmusLive Docs: Content Your documentationshould contain the why, what, and how of your system. Why The reasoning behind design decisions. Any goals associated with the visual design. What The components, style rules, and resources needed to build emails. How The actual examples, instructions, and code needed to build emails.
- 135. #LitmusLive Examples Examples should beclear, concise, and motivational. Clear Address specific use cases with directions on usage. Concise Short and to the point. Use more examples instead of complex ones. Motivational Show the ideal uses, give users a sense of what's possible and desired.
- 138. #LitmusLive Production Code The heartof your system, the actual code powering everything. Modular Make it easy for different types of emails to be built from the same code. Accessible Make that code easy to find, grab, and use. Tested The code needs to be well- tested and robust, so that nothing breaks when sent.
- 141. #LitmusLive All of youremails should be built with modular components.
- 142.
- 143. #LitmusLive Code: Snippets Reusable blocksof code that are pulled into an email and changed as needed. Examples Buttons, images, article blocks, product features, copy blocks
- 144. #LitmusLive Code: Partials Sections ofcode that are dynamically pulled into an email, can't be updated directly in the email. Examples Headers, footers, unsubscribe links, disclaimers, logos
- 145. #LitmusLive Code: Templates Full emailswith dummy content that can be updated before send. Examples Transactional email, newsletters, product features, event notifications
- 146. #LitmusLive Tools The tools requiredto improve efficiency and get emails out the door. Editors Code editors used for creating and testing email campaigns. Repos Code repositories from which to grab and store code. Builders Build tools to help facilitate quicker email production times.
- 147.
- 149.
- 150.
- 152. #LitmusLive Build tools takean upfront investment, but have a huge payoff.
- 153. #LitmusLive Design systems empoweranyone to produce send-ready emails.
- 154.
- 156. Marketers work with 2.4other departments to get emails reviewed and approved. #LitmusLive Executives 47.9% Sales 32.7% Legal/Compliance 30.3% IT 24.1%
- 157. #LitmusLive Meetings Hold kickoffs andregular meetings to educate team members about email design and development. Record meetings and make them available to everyone.
- 158. #LitmusLive Email Playbooks Documentation onwhat emails are included in your program and how they can be used. Provides strategy recommendations and baseline education for team members.
- 159. Guide Your Teamwith an Email Playbook Shannon Crabill, T. Rowe Price Tomorrow @ 3:40pm
- 160.
- 161.
- 162. #LitmusLive Thanks! Enjoy theconference!