Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Designing for Voice UI: Planning and Writing for Voice Interaction

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 57 Anzeige

Designing for Voice UI: Planning and Writing for Voice Interaction

Herunterladen, um offline zu lesen

In this talk by Marli Mesibov, we explore voice UI. These slides come from a webinar given for UX designers and UX writers. Planning and writing for a voice interaction is different from writing for the web. In this webinar, we discussed how to plan for it, and tools to make the process easier.

Topic include:
- How voice UI is different from written content
- How to build a strategy that accounts for voice UI use cases
- Why your company voice needs to change for voice UI
- How to write and test content for voice UI

In this talk by Marli Mesibov, we explore voice UI. These slides come from a webinar given for UX designers and UX writers. Planning and writing for a voice interaction is different from writing for the web. In this webinar, we discussed how to plan for it, and tools to make the process easier.

Topic include:
- How voice UI is different from written content
- How to build a strategy that accounts for voice UI use cases
- Why your company voice needs to change for voice UI
- How to write and test content for voice UI

Anzeige
Anzeige

Weitere Verwandte Inhalte

Anzeige
Anzeige

Designing for Voice UI: Planning and Writing for Voice Interaction

  1. 1. CHXD Webinar Designing for Voice UI: Planning and Writing for Voice Interaction
  2. 2. Kathryn Hautanen Director, CHXD khautanen@madpow.com @kathrynhautanen Welcome!
  3. 3. About Us Mad*Pow Mad*Pow leverages strategic design and the psychology of motivation to create innovative experiences and compelling digital solutions that are good for people and good for business. Center for Health Experience Design The Center for Health Experience Design, founded by Mad*Pow, is a community of over 800 professionals and a range of organizations in the health space. Our partners include fledging startups and global corporations.
  4. 4. Center for Health Experience Design A Focus on Collaboration We piece together and governs multi-stakeholder initiatives that are open to and will benefit the greater community. Membership to Accelerate Your Innovation Efforts Memberships are a lightweight way to strategically extend your team and bring in niche expertise. Access to subject matter experts, Mad*Pow design services, discounts on HXD and Workshops, and much more… Visit CenterHXD.com to learn more
  5. 5. GoToWebinar Interface We will be presenting for approximately 45 minutes, and then we will spend 10 minutes answering your questions. Please enter your questions into the question box. If we run out of time, you can email us directly.
  6. 6. M A D * P O W | @ M A R S I N T H E S T A R S 6 NICE TO MEET YOU! Marli Mesibov VP, Content Strategy Mad*Pow
  7. 7. Must Insert Background Image To do so: 1- Select “Insert” in the file menu 2- Select “Picture from File” 3- Scale your image to fill the page by dragging the corner Background Image must be “sent to back” To do so: Right click the Image, select “Send to Back” Make sure Arrow Box and Mad*Pow Are viewable. Mad*Powleverages strategicdesignandthe psychologyofmotivation tocreate innovativeexperiences andcompelling digitalsolutions that aregoodforpeople andgoodforbusiness. DESIGN FOR CHANGE
  8. 8. M A D * P O W | @ M A R S I N T H E S T A R S P H O T O F R O M C O O P E R
  9. 9. M A D * P O W | @ M A R S I N T H E S T A R S S T A T S F R O M D E S I G N I N T E C H R E P O R T 2 0 1 7 Voice recognition has gone from a high error rate (>25%) to a low rate (<5%).
  10. 10. M A D * P O W | @ M A R S I N T H E S T A R S
  11. 11. M A D * P O W | @ M A R S I N T H E S T A R S OUR JOB IS TO GO UNNOTICED “…when no one in the audience knows where the light on the stage comes from, and when no one notices anything on the stage except the actors […] then you know that you have done your job as it should be done.” –Jean Rosenthal, Broadway lighting designer
  12. 12. M A D * P O W | @ M A R S I N T H E S T A R S OUR JOB IS TO GO UNNOTICED “…when no one in the audience knows where the light on the stage comes from, and when no one notices anything on the stage except the actors […] then you know that you have done your job as it should be done.” –Jean Rosenthal, Broadway lighting designer “Tomorrow’s devices should be unobtrusive… something so “you” that it dissolves into your life.” - Thomas Gayno, Product Lead at Spotify
  13. 13. M A D * P O W | @ M A R S I N T H E S T A R S I M A G E F R O M L H B S
  14. 14. M A D * P O W | @ M A R S I N T H E S T A R S I M A G E F R O M L H B S
  15. 15. WHAT IS VOICE UI? The future is calling
  16. 16. M A D * P O W | @ M A R S I N T H E S T A R S EXAMPLES OF VOICE UI UI That Listens (Speech Recognition) Speech to Text apps (e.g. Dragon, or Google Voice) Evernote Midomi ToDoist Netflix Xbox UI That Listens and Responds Siri Cortana Amazon Echo Google Home Interactive voice response (robot phone operators) Cue robot
  17. 17. M A D * P O W | @ M A R S I N T H E S T A R S 17 VOICE VS. CONVERSATION Chatbots AI Assistants Alexa Skills Build a voice and tone Build a voice and tone Has a voice and tone Does not need an algorithm Requires an algorithm Does not need an algorithm Responds to trigger-words Responds to trigger-words Responds to trigger-words Transactional Technology-based, so could be either Transactional or informational All content created by 1 company All content created by 1 company Collection of apps
  18. 18. EXPECTATIONS ARE HIGH! M A D * P O W | @ M A R S I N T H E S T A R S 18
  19. 19. M A D * P O W | @ M A R S I N T H E S T A R S 19 REALITY? WE’RE NOT EVEN HITTING THE LOWEST BAR V O I C E A P P L I C A T I O N P R O D U C T S T R A T E G Y , P H I L L I P H U N T E R
  20. 20. M A D * P O W | @ M A R S I N T H E S T A R S 20 WHAT’S THE PROBLEM? We are too focused on creating something “delightful” and not focused enough on creating something useful, intuitive, and human. Let’s make Voice UI useful.
  21. 21. BIG PICTURE TIPS How much voice would a voice voice voice if a voice voice had a voice voice?
  22. 22. M A D * P O W | @ M A R S I N T H E S T A R S 22 “A conversational interface is any UI that mimics chatting with a real human.” –Conversational Interfaces, Explained VOICE IS VOICE
  23. 23. M A D * P O W | @ M A R S I N T H E S T A R S 23 1. IT’S A CONVERSATION Just like writing, you want to: • Consider the questions people state, and the questions they mean • Set the user up for success • Use language the audience will recognize • Match the tone to the situation
  24. 24. M A D * P O W | @ M A R S I N T H E S T A R S 24 EXAMPLE: LEMONADE HAS A CONVERSATION WITH YOU Question Answer Question Question Answer Answer
  25. 25. M A D * P O W | @ M A R S I N T H E S T A R S 25 2. SAY IT ALOUD AND USE NATURAL LANGUAGE You’re not building a chatbot, so you may be building one-off statements • Use active voice • Clarify the question • “What’s the capital of Alaska?” • “The capital of Alaska is Juneau.” • Keep information brief – too much will get lost • Accept that most conversations will be transactional • Vary sentence structure, much like in writing
  26. 26. M A D * P O W | @ M A R S I N T H E S T A R S 26 EXAMPLE: VEHICLE UI REQUIRES SHORT, NATURAL LANGUAGE STATEMENTS A F A I L U R E S T O R Y T O D E S I G N V O I C E U S E R I N T E R F A C E # 1 , S U N K I M
  27. 27. M A D * P O W | @ M A R S I N T H E S T A R S 27 EXAMPLE: MEMORIZING COMMANDS IS HARD
  28. 28. M A D * P O W | @ M A R S I N T H E S T A R S 28 3. DON’T ASSUME CONTEXT Voice UI doesn’t have the context of the written word • There’s no surrounding navigation to tell visitors “where” they are • No headers to visually orient • No images • User flows are broader, more expansive “You have to map each voice request to a manually-curated query (i.e. create “all the dialog boxes” by hand).” - This is the Year of Voice
  29. 29. M A D * P O W | @ M A R S I N T H E S T A R S 29 EXAMPLE: ALEXA ONLY KNOWS WHAT IT’S TOLD What about questions like… Alexa, where’s the nearest doctor? (that takes my insurance) Alexa, where can I get a flu shot? (and does that place have them in stock?) Alexa, is Starbucks open today? (and are there holiday hours in effect?) Alexa, when does daylight savings time begin? (and does the country I am visiting this weekend observe it?)
  30. 30. M A D * P O W | @ M A R S I N T H E S T A R S 30 4. ACCESSIBILITY IS SUPER IMPORTANT • Written accessibility makes things visual and auditory • Captions • Alt-tags • Transcripts • Voice UI accessibility is about… • Accents • Cultural phrasing • Understanding lisps • Asking nicely for repeats • Offering options before users get frustrated or overwhelmed
  31. 31. M A D * P O W | @ M A R S I N T H E S T A R S 31 EXAMPLE: VOICE UI NEEDS TO BE ABLE TO “HEAR” E L E V A T O R R E C O G N I T I O N | B U R N I S T O U N
  32. 32. M A D * P O W | @ M A R S I N T H E S T A R S 32 5. VOICE SOUNDS DIFFERENT Even an audio team like NPR identifies difference in the phrases people use: “We started with a few questions: • What features might users most value in a voice-driven context? • How would the voice device respond in each scenario? (When should the device give a minimal response? When should it provide more verbose feedback? When should it provide no feedback and just perform the action?) • What should a conversation with NPR over VUI feel like? (When might users expect to provide additional information? What contextual information are users expecting? How much response information is enough?)” -Talking Back to Your Radio: How We Approached Voice-UI (NPR)
  33. 33. M A D * P O W | @ M A R S I N T H E S T A R S 33 EXAMPLE: NPR CHANGES THE TERMINOLOGY FOR VOICE T A L K I N G B A C K T O Y O U R R A D I O : H O W W E A P P R O A C H E D V O I C E - U I
  34. 34. HOW DO YOU WRITE FOR VOICE? Your voice has a voice (and tone)
  35. 35. START WITH VOICE AND TONE M A D * P O W | @ M A R S I N T H E S T A R S A voice and tone accurately reflects brand personality. It supports communication goals and provides useful, usable content. Voice The voice, or personality, comes across in everything the brand “says” – every bit of help text, microcopy, messaging, etc. Tone Tone is a subset of voice; where voice is the overarching personality, the tone is the appropriate variation, given the specific situation.
  36. 36. EXAMPLE: 18F M A D * P O W | @ M A R S I N T H E S T A R S
  37. 37. EXAMPLE: MAILCHIMP M A D * P O W | @ M A R S I N T H E S T A R S
  38. 38. HOW DO YOU CREATE A VOICE (FOR VOICE)? M A D * P O W | @ M A R S I N T H E S T A R S 1. Identify content goals 2. Create a message architecture 3. Define the voice 4. TEST! 5. Select relevant scenarios, and each scenario’s appropriate tone 6. Add the nuts and bolts: editorial guidelines
  39. 39. 1. CONTENT GOALS M A D * P O W | @ M A R S I N T H E S T A R S The content goals are made up of a combination of audience needs and business objectives. To do that, first define: 1. Audience Define the audience(s) we are speaking to 2. Audience Goals List out prioritized audience goals 3. Business Objectives List out prioritized business objectives What Makes it Voice-Specific? It’s Not! But you should still consider: • Why do you offer this as a voice product? • How will voice UI help your audience reach their goals?
  40. 40. START WITH VOICE AND TONE M A D * P O W | @ M A R S I N T H E S T A R S K A T E K I E F E R L E E , C R E A T I N G C O N T E N T F O R H U M A N S
  41. 41. START WITH VOICE AND TONE M A D * P O W | @ M A R S I N T H E S T A R S K A T E K I E F E R L E E , C R E A T I N G C O N T E N T F O R H U M A N S
  42. 42. 2. MESSAGE ARCHITECTURE M A D * P O W | @ M A R S I N T H E S T A R S A message architecture serves as a guidepost for future decision making. These themes are distilled from our audience needs and business objectives. The message architecture themes will drive tactical decisions about content and how we prioritize, organize and present information. When in doubt, return to the message architecture to ask: does this decision support our architecture? What Makes it Voice-Specific? It’s Not! But you should still consider: • A message architecture should be what helps your team identify if voice UI is right for you. • But if you’re already committed, use the message architecture to check that voice UI will help uphold your pillars.
  43. 43. MESSAGE ARCHITECTURE THEMES M A D * P O W | @ M A R S I N T H E S T A R S A message architecture is typically made up of 4-6 pillars. Write down your pillars, and for each one consider: How People Will Describe Us This should be specific to the pillar: how will people describe us that tells us we are aligning with this pillar. i.e. if one pillar is that we are a technology-driven influencer, what will people say about us that reinforces that? Content/Design Implications These may come from behavior change recommendations, client requests, or known best practices. Examples: Scaffold learning; Use X technology; Allow users to track their work; Use gamification to do X; Personalize elements to do X; Create mobile-friendly content (etc.)
  44. 44. EXAMPLE M A D * P O W | @ M A R S I N T H E S T A R S A message architecture is typically made up of 4-6 pillars. Write down your pillars, and for each one consider: How People Will Describe Us Supportive. Company X is a caring, passionate, and friendly community that helps me pay my bills. The coaches have a genuine desire to pay-forward their own rewarding experience. Content/Design Implications Customer support should always be available. Chatbot is very important for hours coaches are not available. All personalized or automated elements need to be well explained, and never appear to be preset.
  45. 45. 3. VOICE M A D * P O W | @ M A R S I N T H E S T A R S The voice, or personality, comes across in everything the brand “says”. To create a voice, go back to your themes and how you said people would describe you. Make a list of 20-50 adjectives that align with your message architecture. Then remove duplicates and redundancies, and whittle your list of adjectives down to 6-8. These 6-8 define your voice. What Makes it Voice-Specific? It’s Not! But you should still consider: • Your voice will need to be consistent across multiple channels (including voice UI). • If you’re using Alexa Skills, there’s already a voice there. How will your voice align with Alexa’s?
  46. 46. TO CREATE YOUR VOICE, FOR EACH ADJECTIVE DEFINE: M A D * P O W | @ M A R S I N T H E S T A R S Why it Matters What we know about users. How We Do it Describe what this voice means/sounds like. What it Sounds Like (Written) Not… 1-2 sentence example 1-2 sentence example What it Sounds Like (Voice) Not… 1-2 sentence example 1-2 sentence example
  47. 47. EXAMPLE: EMPATHETIC M A D * P O W | @ M A R S I N T H E S T A R S Why it Matters Our audience fears they are being judged for not paying their bills on time. Empathy is key to reducing their fear of judgment. How We Do it Express sympathy and understanding for members’ decisions, beliefs, and motivations. What it Sounds Like (Written) Not… Of course you want to pay your bills, but sometimes life gets in the way. Let’s make a list of some of the reasons you want to pay your bills. Pay your bills on time. Otherwise you’re causing more problems for yourself. What it Sounds Like (Voice) Not… Do you want to call your coach? You didn’t call your coach yesterday. You need to call now.
  48. 48. 4. TEST M A D * P O W | @ M A R S I N T H E S T A R S You can usability test a voice UI without a fancy developed prototype! Just use the “Wizard of Oz” approach. It was pretty much invented for voice UI… in 1984.
  49. 49. 5. TONE: WHAT DO WE SOUND LIKE WHEN… M A D * P O W | @ M A R S I N T H E S T A R S Scenario #1 (common scenarios: first interaction, giving bad news, congratulating, explaining something, setting goals) Scenario #2 Scenario #3 Scenario #4 Scenario #5 Scenario #6
  50. 50. TO CREATE YOUR TONES, FOR EACH SCENARIO DEFINE: M A D * P O W | @ M A R S I N T H E S T A R S Key elements Describe the tone and why it is appropriate for this specific scenario How we do it Give concrete examples, such as “restate the question” What it sounds like 1-2 sentence examples What Makes it Voice-Specific? • Tone is intended to help for various scenarios… but don’t forget to include examples of the channels where someone might encounter a scenario.
  51. 51. EXAMPLE: MAILCHIMP M A D * P O W | @ M A R S I N T H E S T A R S K A T E K I E F E R L E E , C R E A T I N G C O N T E N T F O R H U M A N S
  52. 52. 6. EDITORIAL GUIDELINES M A D * P O W | @ M A R S I N T H E S T A R S While the voice and tone convey your brand personality, following best practices and your editorial guidelines gives your content structure and consistency. Many editorial guidelines will change from one project or brand to the next. The important thing is to stick to them for consistency. What Makes it Voice-Specific? • Editorial guidelines MUST change to accommodate the differences between voice UI and written text.
  53. 53. QUESTIONS TO DETERMINE EDITORIAL GUIDELINES M A D * P O W | @ M A R S I N T H E S T A R S • What grade reading level are you writing for? (7th grade is appropriate for most situations – written. What about voice?) • Are you writing in 1st, 2nd, or 3rd person? Why? • Do you use slang? • What punctuation do you prefer? • What pronouns do you use? • What abbreviations do you use (if any)? • Do you use complete sentences? • Do you use Active Voice? • Break content into easily digestible chunks with bullets, subheads, etc. – but how small? • Write clearly and concisely – what are examples for voice vs. written text?
  54. 54. IN CONCLUSION Let me ’splain… No, there is too much. Let me sum up.
  55. 55. VOICE UI IS A TOOL. USE IT WELL. M A D * P O W | @ M A R S I N T H E S T A R S
  56. 56. Q&A
  57. 57. Thank you! We’re here to help • We can help with your design and innovation goals: • Research & Strategy • User Experience Design & Development • Service Design • Intervention Design & Evaluation • Design & Innovation Challenges For any questions, contact khautanen@madpow.net

Hinweis der Redaktion

  • We handle complex industries
  • Plenty of devices. It’s a trend, it’s super exciting. And we’re at a good place to start talking about the UX.
    They’re complex (like stuff MP works with)
    Example of Mike with timers
  • Imagine if 1 out of every 20 times you spoke to them, they couldn’t understand you
  • We’ve barely in the reliable section. Now it’s time to make it usable and convenient.
    People are jumping from functional to significant – and it’s failing.
    We need to think about it and actually achieve it, by taking small steps.
  • How did we get here? It’s been a long time in coming.
  • When you look at the list, there aren’t a lot of situations where content creators are writing voice UI conversations.
    Who are you working for? Are you at a big company?
  • What are people asking you for when they say “Voice UI?”
    You’re likely working on one of these three things.
    Sometimes we confuse “conversational UI” with “UI that can have a conversation”
  • Talk about trust
  • Lemonade – a rental insurance company
  • There may come a day when people trust us enough that we don’t need to let them know we heard them correctly. We’re not here yet.
  • - People’s speaking ways are all different: ‘Call John Smith’, ‘John Smith making a call’, ‘Would you call John Smith?’, and ‘Phone call John Smith’.
    Let people know the commands they can give
    Short statements!
    Confirm whether you’ve heard the speaker
  • Is VoiceUI even the appropriate step?

×