The conversation of UI: Unpacking voice and tone for interfaces

Slide 1

Slide 1 text

THE CONVERSATION OF UI Unpacking Voice and Tone for Interfaces Andy Welﬂe (@awelﬂe) UX Content Strategy Manager, Adobe Michael J. Metts (@mjmetts) Conversation Design Lead, Allstate

Slide 2

Slide 2 text

WRITE DOWN THREE WAYS TO DESCRIBE EACH PICTURE. Warm-up

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

THE CONVERSATION OF UI Unpacking Voice and Tone for Interfaces Andy Welﬂe (@awelﬂe) UX Content Strategy Manager, Adobe Michael J. Metts (@mjmetts) Conversation Design Lead, Allstate

Slide 7

Slide 7 text

ARE YOU A DESIGNER? Question

Slide 8

Slide 8 text

YOU ARE A DESIGNER Why writing is design

Slide 9

Slide 9 text

Inspiration: https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words

Slide 10

Slide 10 text

Inspiration: https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words

Slide 11

Slide 11 text

“We expect things to be digital, but also, in many cases, physical. We want things to feel auto-magic while retaining a human touch. We want to be safe, but not spied on. We use words at our whim.” Abby Covert How to Make Sense of Any Mess

Slide 12

Slide 12 text

WHAT'S IT CALLED? Content Design Product Writing UX Content Strategy UX Writing Content Strategy

Slide 13

Slide 13 text

“I work on digital products and physical goods, so I’m deeply involved in the design process. But I also want to call out early that my process is the design process. I don’t write ﬁction or short stories; I use language to solve problems—whether that’s behind the scenes or in the product itself. I use words as material.” Nicole Fenton Co-author of Nicely Said Source: http://nicolefenton.com/words-as-material/

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

APP STORE If you really want to know your company’s value proposition, try ﬁtting it across the top of four screenshots in the app store.

Slide 16

Slide 16 text

ONBOARDING Do it again, but make it unique from the app store one while encouraging account creation.

Slide 17

Slide 17 text

ACCESS Log In, Sign In, Register, Create Account, Get Started, Sign Up, Connect, Username, User ID, Password, Passphrase, Recover, Reset, Email, Email Address

Slide 18

Slide 18 text

ERRORS Whoops, Sorry, Oops…, We broke something, Just a moment, Please wait, There was a problem, Something’s Wrong, Invalid, Incorrect, Don’t Worry

Slide 19

Slide 19 text

ADMIN AREAS Account, Proﬁle, Settings, My Acount, Your Proﬁle, Your Settings, Personal Details, Personal Information, Credit Cards, Payment Information, Payment Methods, Preferences

Slide 20

Slide 20 text

TRANSACTIONS Cart, Shopping Basket, Items, Payment, Renewal, Subscription, Recurring, Repeating, Pro-Rated, Discount, Initial Payment, Checkout, Buy, Complete Purchase, Burger Me!

Slide 21

Slide 21 text

MORE THINGS • SMS notifications • Push notifications • Email notifications • Confirmation emails • Account recovery emails • Email validation emails (emails about emails) • Re-engagement emails • Release notes (bug fixes and performance improvements) • Help content • Terms and conditions • Privacy policy • Contact forms • Contact form confirmation screens and emails

Slide 22

Slide 22 text

AND THAT’S JUST THE COMMON STUFF!

Slide 23

Slide 23 text

It's not a question of whether your interface has a voice or changes its tone. It's a question of how intentional you are about it.

Slide 24

Slide 24 text

“Customer Service Behavior included items that were related to the friendliness and politeness of the system, its speaking pace, and its use of familiar terms.” Melanie Polkosky, PhD Toward a Social-Cognitive Psychology of Speech Technology: Affective Responses to Speech-Based e-Service Source: https://www.researchgate.net/publication/33994535_Toward_a_social- cognitive_psychology_of_speech_technology_electronic_resource_aﬀective_responses_to_speech-based_e-service In a study with 821 participants, customer service behavior was found to be one of the four most important usability factors out of 76 possibilities.

Slide 25

Slide 25 text

RESEARCH EVERYTHING

Slide 26

Slide 26 text

“If your audience doesn’t trust you, they won’t interact with you.” Sarah Richards Content Design

Slide 27

Slide 27 text

Learning more about your users is always a good thing, no matter how small or limited the effort.

Slide 28

Slide 28 text

TYPES OF RESEARCH: Looking at numbers - A/B tests, analytics research, surveys Talking to users - Interviews, conversations Understanding vocabulary - Forums, Google Trends Observing users - Usability testing, contextual inquiry

Slide 29

Slide 29 text

CRITIQUE EVERYTHING

Slide 30

Slide 30 text

What's the difference between feedback and critique? Feedback is a quick, one-way reaction often grounded in opinion. Critique is critical dialogue grounded in objectives that helps us understand design decisions. Mia Blume deﬁnes it this way:

Slide 31

Slide 31 text

GUIDELINES FOR CRITIQUE • Let everyone participate. Every perspective is important. • Ask questions if you’re unsure why something is the way it is. • Speak from objectives. Avoid phrases like “I don’t like that”. • Dig into the details. Talk through the nuances of word choice, discuss alternate approaches and more. Critique the writing, not the writer.

Slide 32

Slide 32 text

DIG IN. ASK QUESTIONS.

Slide 33

Slide 33 text

ANY QUESTIONS? Discussion

Slide 34

Slide 34 text

VOICE Discovering and developing identity

Slide 35

Slide 35 text

A QUICK PRIMER ON VOICE VS. TONE (using a few GIFs from The Little Mermaid)

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Voice is who you are. Tone is how we respond to different situations. — Michael Haggerty-Villa, Intuit

Slide 39

Slide 39 text

BE HUMAN. NOT BAE. Human vs. Colloquial

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

HOW DO WE KEEP IT CONSISTENT?

Slide 44

Slide 44 text

Documentation

Slide 45

Slide 45 text

Source: MailChimp Content Style Guide: http://styleguide.mailchimp.com

Slide 46

Slide 46 text

Source: MailChimp Content Style Guide: http://styleguide.mailchimp.com

Slide 47

Slide 47 text

Source: MailChimp Content Style Guide: http://styleguide.mailchimp.com

Slide 48

Slide 48 text

Source: MailChimp Content Style Guide: http://styleguide.mailchimp.com

Slide 49

Slide 49 text

Source: 18F Content Guide: https://content-guide.18f.gov/voice-and-tone/#our-voice

Slide 50

Slide 50 text

WHAT IS ADOBE’S VOICE? Human Friendly, honest and respectful • Vary sentence style and structure for readability and empathy • Show empathy in situations where people feel uncertain, frustrated or confused Rational Clear and understandable • Avoid language that’s overly idiomatic, intentionally clever or trendy Reductive Concise and simple • Start with only essential information, and add in extra content if needed

Slide 51

Slide 51 text

Above: Voice and Tone | MailChimp Content Style Guide: http://styleguide.mailchimp.com/voice-and-tone/ Right: Shopify's voice and tone guide | Medium: https://medium.com/shopify-ux/shopify-s-voice-and-tone-guide-968539e06777 “ADJECTIVE BUT NOT ADJECTIVE”

Slide 52

Slide 52 text

DECLARATIVE STATEMENTS

Slide 53

Slide 53 text

YOUR VOICE SHOULD ALWAYS BE EVOLVING

Slide 54

Slide 54 text

YOUR VOICE SHOULD ALWAYS BE EVOLVING 2016 2018

Slide 55

Slide 55 text

OTHER VOICE CHARACTERISTICS Facebook: Simple | Straightforward | Human Shopify: Trustworthy | Conﬁdent | Empowering Source: https://ux.shopify.com/shopify-s-voice-and-tone-guide-968539e06777 Airbnb: Straightforward | Inclusive | Thoughtful | Spirited Source: Marissa Philips, Advocating from the inside out: Motivating your team to evangelize their work, Confab 2017 Source: https://medium.com/facebook-design/getting-started-in-content-strategy-d7543ed22633 Slack: Clear | Concise | Human Source: https://api.slack.com/best-practices/voice-and-tone

Slide 56

Slide 56 text

THIS BUT NOT THAT Michael’s Voice: Soft-spoken but not hesitant Funny but not goofy Humble but not deferential Conﬁdent but not braggadocios

Slide 57

Slide 57 text

DISCOVERING AND DEFINING VOICE Activity

Slide 58

Slide 58 text

TODAY’S PROJECT: (but this isn’t a workshop about designing chatbots) A FINANCIAL CHATBOT

Slide 59

Slide 59 text

THE CONSTRAINTS No personas: If your voice is friendly, the bot shouldn't have to say "I'm friendly". Let the interface itself convey the nuances of voice and tone. Focus on providing user value: Unlike the real world, there are no technology constraints. Create any functionality you want—just make sure your users' needs are resolved.

Slide 60

Slide 60 text

WHAT TO FOCUS ON Facilitation: Lead others through unfamiliar territory. Experimentation: The conversation of UI can go in a lot of different directions. Adaptation: Let’s talk through how these work, or even don’t work, for your situation.

Slide 61

Slide 61 text

READ THROUGH THE PROJECT INTRO. Activity

Slide 62

Slide 62 text

WRITE DOWN THREE QUESTIONS YOU HAVE ABOUT THE PROJECT. Activity

Slide 63

Slide 63 text

THE WRITER THE TEAM • Repsonsible for: Writing the words. • Motivation: Clarity. • Pain point: Left out of design conversations.

Slide 64

Slide 64 text

THE DESIGNER THE TEAM • Repsonsible for: Visuals and interaction. • Motivation: Cohesive aesthetics. • Pain point: Heavy workload.

Slide 65

Slide 65 text

THE ENGINEER THE TEAM • Responsible for: Delivering code. • Motivation: Smart architecture. • Pain point: Team doesn't understand the technology.

Slide 66

Slide 66 text

THE PRODUCT MANAGER THE TEAM • Repsonsible for: Reducing call center volume. • Motivation: Appeasing leadership. • Pain point: Thinks the team plans too much.

Slide 67

Slide 67 text

THE CONTENT STRATEGIST THE TEAM • Repsonsible for: Maintaining standards. • Motivation: Consistency. • Pain point: Spread across 10 scrum teams.

Slide 68

Slide 68 text

THE WRITER THE TEAM • Responsible for: Writing the words. • Motivation: Clarity. • Pain point: Left out of design conversations. THE DESIGNER • Responsible for: Visuals and interaction. • Motivation: Cohesive aesthetics. • Pain point: Heavy workload. THE ENGINEER • Responsible for: Delivering code. • Motivation: Smart architecture. • Pain point: Team doesn't understand the technology. THE PRODUCT MANAGER • Responsible for: Reducing call center volume. • Motivation: Appeasing leadership. • Pain point: Thinks the team plans too much. THE CONTENT STRATEGIST • Responsible for: Maintaining standards. • Motivation: Consistency. • Pain point: Spread across 10 scrum teams.

Slide 69

Slide 69 text

EACH PERSON WRITE DOWN THREE ATTRIBUTES FOR YOUR PRODUCT'S VOICE Activity

Slide 70

Slide 70 text

EACH PERSON SHOULD SHARE THE ATTRIBUTES THEY'RE PROPOSING Activity

Slide 71

Slide 71 text

USE AFFINITY CLUSTERING TO GROUP SIMILAR ATTRIBUTES. Activity

Slide 72

Slide 72 text

Source: https://medium.com/@stephenanderson/whats-wrong-with-dot-voting-exercises

Slide 73

Slide 73 text

WRITERS: FACILITATE DECIDING ON THE TOP FIVE ATTRIBUTES. EVERYONE MUST AGREE. Activity

Slide 74

Slide 74 text

SHARE YOUR VOICE WITH THE GROUP. Activity

Slide 75

Slide 75 text

HOW DID IT GO? Discussion

Slide 76

Slide 76 text

DRAW THREE IDEAS FOR HOW TO SPREAD THE IDEAS BEHIND YOUR PRODUCT'S VOICE ON STICKY NOTES. Bonus round

Slide 77

Slide 77 text

USE DOT VOTING TO FIND THE BEST IDEAS. Activity

Slide 78

Slide 78 text

HOW DID IT GO? Discussion

Slide 79

Slide 79 text

RETURN AT 0:00 Break!

Slide 80

Slide 80 text

TONE Systems for situational awareness

Slide 81

Slide 81 text

Lots of tone No tone LEVEL 1 Headlines, marquees, subject lines, big stories, chapter headers Tone is engaging, human, emotional, creative, thought-provoking LEVEL 2 Subheads, pre-headers, How Adobe helps Tone is more directional or informational LEVEL 3 Main body copy, sub-sections, customer stories, case studies Tone is conversational, including technical details and story LEVEL 4 Main bullets, deeper content, tech specs, features, capabilities Tone is technical, straightforward, to the point LEVEL 5 CTAs Tone is direct, short and punchy How marketers often think about tone

Slide 82

Slide 82 text

HOW UX WRITERS THINK ABOUT TONE Sibling Boss Cow orker Room m ate N eighbor Rather than a volume knob where you turn “tone” up and down, it’s a spectrum upon which you pick a tone to best respond to the user.

Slide 83

Slide 83 text

HOW UX WRITERS THINK ABOUT TONE Rather than a volume knob where you turn “tone” up and down, it’s a spectrum upon which you pick a tone to best respond to the user. Inform ational M otivational U seful Supportive Reassuring Proactive Reactive

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Could your account BE any more hacked? Go you!

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

You (the interface) YOU Goal: What do you want the user to do? Mood: What feeling do we want to display to the user? Attribute: What qualities does this interaction have? How would you say things? USER Emotion: What might they be feeling when they encounter this message? Receptiveness: How open to this message is the user likely to be? Your user Scenario SCENARIO UI Type: What is this UI element? Location: Where in their journey might this user be? Exit Point: What will the user be encountering next after this message?

Slide 91

Slide 91 text

MOTIVATIONAL Your goal To show user new features, get them excited about using a product — perhaps for the ﬁrst time You mood Positive and passionate User’s emotion: Curious, possibly overwhelmed User’s receptiveness: Medium to high Typical UI type: Onboarding, new user experiences Tone Attribute: Encouraging TONE PROFILE

Slide 92

Slide 92 text

Your Goal: To tell you about something that might be useful for you in context. Your Mood: Polite, respectful User’s Emotion: Busy, distracted User’s Receptiveness: Low to medium Typical UI Type: Tooltips, modal dialogs Tone Attribute: Helpful USEFUL TONE PROFILE

Slide 93

Slide 93 text

Your Goal: To fade into the background and present relevant information if needed Your Mood: Neutral User’s Emotion: Any User’s Receptiveness: High Typical UI Type: Microcopy, labels, button CTAs Tone Attribute: Straightforward INFORMATIONAL TONE PROFILE

Slide 94

Slide 94 text

A/B TESTS! Light & Funny Caring & Serious With  Headline We got you, boo  So it looks like your password is not so fresh — how about you work on that? Your password is out of date We care about you and your account, so please take a moment to update your password. Without  Headline So it looks like your password is not so fresh — how about you work on that? We care about you and your account, so please take a moment to update your password.

Slide 95

Slide 95 text

Light & Funny Caring & Serious With  Headline We got you, boo  So it looks like your password is not so fresh — how about you work on that? -2.18% CTR Your password is out of date We care about you and your account, so please take a moment to update your password. +5.45% CTR Without  Headline So it looks like your password is not so fresh — how about you work on that? +.47% CTR We care about you and your account, so please take a moment to update your password. +1.2% CTR A/B TESTS!

Slide 96

Slide 96 text

TONE FRAMEWORK Activity

Slide 97

Slide 97 text

IDEAS FOR SCENARIOS • A user just created their bank account • A payment was just accepted by its intended recipient • A credit card on the user's account is about to expire • There was suspicious activity on the user's account, so they need to reset their password before they can sign in • ABC is offering an account credit if the user invites friends to sign up for an account

Slide 98

Slide 98 text

TESTING Activity

Slide 99

Slide 99 text

TESTING METHOD • Underline the things that are helpful • Circle the things that aren't helpful Ask your participant to: • Ask follow-up questions You should:

Slide 100

Slide 100 text

DESIGN CHATBOT CONVERSATIONS FOR TWO SCENARIOS Activity

Slide 101

Slide 101 text

CRITIQUE Activity

Slide 102

Slide 102 text

TAKE A FEW MINUTES TO WRITE DOWN WHAT YOU'RE LOOKING FOR FROM YOUR CRITTERS. Step 1

Slide 103

Slide 103 text

Slide 104

Slide 104 text

HOW DID IT GO? Discussion

Slide 105

Slide 105 text

SYSTEMS & SCALING Guiding teams toward consistent quality

Slide 106

Slide 106 text

Consistency helps with recognition and recall.

Slide 107

Slide 107 text

WHAT NEEDS TO BE CONSISTENT? • Style. The basics like abbreviation and capitalization, as well as things unique to your org, like branded terms and product names. • Patterns. The components that are actually used to build the software. These can include writing, visual design, and code.

Slide 108

Slide 108 text

Efficiency helps teams focus on what's important.

Slide 109

Slide 109 text

WHAT NEEDS TO BE EFFICIENT? • Design decisions. There's no reason eight competent professionals need to spend an hour every other month debating the merits of "Buy" vs "Purchase". • Workﬂow. Working from a place of shared understanding helps teams estimate accurately and mitigates miscommunication.

Slide 110

Slide 110 text

ENTER THE DESIGN SYSTEM Source: https://design.trello.com

Slide 111

Slide 111 text

START WITH A STRATEGY A design system that's not driven by strategy just helps you do the wrong thing more efficiently and consistently.

Slide 112

Slide 112 text

A design system that doesn't treat language as a core element isn't really about design.

Slide 113

Slide 113 text

"A design system is a product. Documenting business processes for a product does not create a product. Documenting components for a design system does not create a design system. It's a tool for a speciﬁc set of users under speciﬁc circumstances." Amy Chick Strategist and Designer

Slide 114

Slide 114 text

STRATEGY DESIGN SYSTEMS Shopify includes naming guidelines in the Polaris design system. • Used as a governance tool • Enables the teams to have naming conversations based on more than personal opinion Source: https://polaris.shopify.com/content/naming

Slide 115

Slide 115 text

STYLE DESIGN SYSTEMS

Slide 116

Slide 116 text

PATTERNS DESIGN SYSTEMS Instagram handles truncation consistently, and you can see why they handle it this way: • More consistent than "view both comments" • Better clarity than "view all comments"

Slide 117

Slide 117 text

PATTERNS DESIGN SYSTEMS Rationale and guidelines give design system users the conﬁdence to adopt patterns. • Designed speciﬁcally for intent recognition • Quickly summarize the intent so the user can decide whether to stay

Slide 118

Slide 118 text

PATTERNS DESIGN SYSTEMS Including example wording when documenting a component helps teams understand its use. Audi's design system uses placeholder words, making it harder for its users to see how to use them. Source: https://www.audi.com/ci/en/guides/user-interface/components/buttons.html

Slide 119

Slide 119 text

PATTERNS DESIGN SYSTEMS Including example wording when documenting a component helps teams understand its use. Atlassian's design system uses real words from the interfaces, making it easier for its users to understand the guidelines.