SlideShare a Scribd company logo
1 of 26
Voice + Content
Giving Your UX Its Soul
Steve Stegelin, Information Architect
GIANT Conference (Charleston, SC)
Image source: http://www.artisopensource.net/network/artisopensource/wp-
content/uploads/2012/02/shedroff.gif
Image source: http://www.artisopensource.net/network/artisopensource/wp-
content/uploads/2012/02/shedroff.gif
5
6
7
8
9
Image source: http://www.artisopensource.net/network/artisopensource/wp-
content/uploads/2012/02/shedroff.gif
11
12
13
17
18
http://cdn.wetfeet.com/upload/RCL_useoflanguage_orig.jpg
23
24
Thanks!

More Related Content

Viewers also liked

Introduction to Xamarin
Introduction to XamarinIntroduction to Xamarin
Introduction to XamarinVadym Melnyk
 
10eko aurkespenaaak
10eko aurkespenaaak10eko aurkespenaaak
10eko aurkespenaaakRossanaa16
 
Fiksu verkkotekeminen Suomessa 2014
Fiksu verkkotekeminen Suomessa 2014Fiksu verkkotekeminen Suomessa 2014
Fiksu verkkotekeminen Suomessa 2014North Patrol
 
EgeJeo dogaltas sunum
EgeJeo dogaltas sunumEgeJeo dogaltas sunum
EgeJeo dogaltas sunumOzlemYurdakul
 
M6 thai-2551
M6 thai-2551M6 thai-2551
M6 thai-2551Walk4Fun
 
Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...
Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...
Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...Roadshow2014
 
M6 math-2551
M6 math-2551M6 math-2551
M6 math-2551Walk4Fun
 
Portafoli catala (1)
Portafoli catala (1)Portafoli catala (1)
Portafoli catala (1)aida15122001
 
Synthesis of low spin iron complex as potential redox mediator for DSCs
Synthesis of low spin iron complex as potential redox mediator for DSCsSynthesis of low spin iron complex as potential redox mediator for DSCs
Synthesis of low spin iron complex as potential redox mediator for DSCsdanielmorales91
 
My secret planet
My secret planetMy secret planet
My secret planetNayjah
 
Actividad
ActividadActividad
ActividadAyalaC
 
SilentVoice(サイレントボイス)とは
SilentVoice(サイレントボイス)とはSilentVoice(サイレントボイス)とは
SilentVoice(サイレントボイス)とはTomoya Onaka
 

Viewers also liked (14)

Introduction to Xamarin
Introduction to XamarinIntroduction to Xamarin
Introduction to Xamarin
 
10eko aurkespenaaak
10eko aurkespenaaak10eko aurkespenaaak
10eko aurkespenaaak
 
Fiksu verkkotekeminen Suomessa 2014
Fiksu verkkotekeminen Suomessa 2014Fiksu verkkotekeminen Suomessa 2014
Fiksu verkkotekeminen Suomessa 2014
 
EgeJeo dogaltas sunum
EgeJeo dogaltas sunumEgeJeo dogaltas sunum
EgeJeo dogaltas sunum
 
M6 thai-2551
M6 thai-2551M6 thai-2551
M6 thai-2551
 
Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...
Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...
Module D - CNR, ELETTRA, ESRF, ILL, ISIS: the Access Procedure and Organizati...
 
M6 math-2551
M6 math-2551M6 math-2551
M6 math-2551
 
Our culture
Our cultureOur culture
Our culture
 
Portafoli catala (1)
Portafoli catala (1)Portafoli catala (1)
Portafoli catala (1)
 
Synthesis of low spin iron complex as potential redox mediator for DSCs
Synthesis of low spin iron complex as potential redox mediator for DSCsSynthesis of low spin iron complex as potential redox mediator for DSCs
Synthesis of low spin iron complex as potential redox mediator for DSCs
 
Tes Tutorial
Tes TutorialTes Tutorial
Tes Tutorial
 
My secret planet
My secret planetMy secret planet
My secret planet
 
Actividad
ActividadActividad
Actividad
 
SilentVoice(サイレントボイス)とは
SilentVoice(サイレントボイス)とはSilentVoice(サイレントボイス)とは
SilentVoice(サイレントボイス)とは
 

Recently uploaded

原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样asdafd
 
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...Mumbai Escorts
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxChloeMeadows1
 
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...APNIC
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirtsrahman018755
 
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理B
 
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样rgdasda
 
一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书
一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书
一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书rgdasda
 
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书gfhdsfr
 
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理C
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfOndejSur
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfappinfoedgeca
 
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理gfhdsfr
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样Fi
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书B
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...musaddumba454
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirtrahman018755
 
AI Generated 3D Models | AI 3D Model Generator
AI Generated 3D Models | AI 3D Model GeneratorAI Generated 3D Models | AI 3D Model Generator
AI Generated 3D Models | AI 3D Model Generator3DailyAI1
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appscristianmanaila2
 

Recently uploaded (20)

原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
 
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
 
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
 
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
 
一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书
一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书
一比一定制(OSU毕业证书)美国俄亥俄州立大学毕业证学位证书
 
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
 
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
AI Generated 3D Models | AI 3D Model Generator
AI Generated 3D Models | AI 3D Model GeneratorAI Generated 3D Models | AI 3D Model Generator
AI Generated 3D Models | AI 3D Model Generator
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of apps
 

Editor's Notes

  1. Synopsis While words and content are the foundation of interactions and the intent of your website or app, they’re often an afterthought in UX design… but no more! In this session, we’ll discuss: · How the voice and appearance of content gives your design a personality and an emotional connection · Ways to inject friendly assistance — and humor — to put your user at ease · Simple tweaks and approaches to help give your design a human touch (no more robots!) · The importance of testing content with users, just as you do your visual design (sorry, lorem ipsum!) · How, most importantly, context and audience trumps all
  2. Originally given at GIANT Conference 2015, Charleston SC (June 15-17) As with any conference, one of the highlights is the opportunity for some great conversations with friends and peers from around the globe. Conversations about ideas and concepts discussed during presentations, or spontaneous critiques and sharing of UX and content (both good and bad) that you find online.
  3. Similarly, UI content is our conversation with users. From message prompts to embedded instructional text, content is our dialogue to help users navigate and understand features, tasks, and information.
  4. Unfortunately, when I look back at UI content I’ve encountered as a user or professionally, it sounds something like this guy (Ben Stein’s teacher from FERRIS BUELLER’S DAY OFF). Detached, monotone, droning on and on. Not really the best conversationalist or experience.
  5. Of course, it’s even worse than that, as users aren’t interacting with a human. Instead, the user’s interacting with a machine, a screen. There’s no telltale signs of expression to connote emotion. It’s really more like HAL 9000. Cold, detached, apathetic.
  6. Wouldn’t it be better if the machine had a sense of humor, could make us smile or laugh?
  7. Wouldn’t it be better if the machine was helpful and cared about our well-being?
  8. Wouldn’t it be better if the machine let the humanity behind it peek through? For there are humans – us! – behind the machine. Humans who care about the user, who want to help, who want to provide a delightful, engaging experience.
  9. Really, it’s all about bringing the machine to life, giving it a soul.
  10. And we can do this, through content. Content is at the heart of the user experience, but it’s unfortunately something that’s often an afterthought, something rushed together without much thought. Perhaps it’s a product of silos at your organization, where a separate team handles the content and injects it at the last minute. Maybe it’s not your strong suit as a designer. Or maybe it’s just not as interesting to work on as the latest fancy CSS3 animations or UX patterns. However, when you stop to give content its due focus, to give it as much attention as other aspects of the user experience, you can give your application a voice and soul that delights end users.
  11. For example, MailChimp injects a human voice throughout their customer experience, from when you first check out their site and sign-up for an account through creating an email campaign and beyond. The consistently friendly and encouraging voice is as much a feature of MailChimp as anything else, an integral part of the UX that injects moments of delight with its cute illustrations and cheeky message prompts.
  12. Groupon is another example of an app that also prides itself on its “voice”, with an internal style guide that promotes a consistent sense of humor, a quirky lexicon and thesaurus, crutches and taboos to avoid, and so on. If you read this content, it sounds human. Conversational, not technical, with a sense of humor, despite its heady and serious topic of Identity Theft.
  13. More subtle but just as effective: TurboTax. As you read this UI, with its use of contractions and turn of phrase -- “put a dent in your tax bill” – you hear the human voice coming through. In this case, the content guides the user through a complicated and – for many – infrequent task, fraught with potential stress and confusion. If you look at this screenshot, this person’s have a very bad day, $7K in the whole to the IRS and almost $900 owed to the state. But the human voice helps put the user at ease and is able to provide empathy and hope (“we’ll… hopefully turn your tax due into a refund”).
  14. There’s obviously a spectrum in how human a voice you can adopt, from the subtlety of TurboTax to the cheekiness of MailChimp or Groupon. Where your application falls on that spectrum depends – as with pretty much anything – on your audience and context. You want to come across as an empathetic and knowledgeable friend. Don’t put off users with an inappropriate sense of humor or a tone that undermines their trust in your application.
  15. One great way to determine which voice resonates with users? Test it like you do any other feature. Have designers and content creators collaborate on prototypes to craft UI together for user testing and Discovery sessions. Scrap lorem ipsum, and instead test live content with users.
  16. Don’t get me wrong, lorem ipsum has its place, but really only if you’re testing layouts with no need of context. Otherwise, lorem ipsum is like Woodstock talk, saying nothing to say something. Users often look to the UI content for clues on how to perform a task, to provide context, etc., even if you’re just testing to see if they find the button to click to kick off a process. By providing live content at the prototype level, you can provide that context and verify the voice and word choice resonates with users.
  17. As you get started adopting a more human tone with your UI, here are some tips to ease the process. First, learn when to break the grammar rules (this may pain some classically-trained technical writers). Use contractions. (Concerned about L10n? Don’t be, translation vendors can work with contractions (although the translation may result in the more formal version). End sentences with prepositions (it’s OK!). Don’t use “whom”, even if you use it correctly. It takes the user out of the flow to question whether it was used correctly.
  18. Read your content out loud. Does it sound human, real? Or does it sound robotic, technical, stiff?
  19. Don’t be afraid to rewrite. Your first draft will rarely be The One. Avoid repetition, jargon, and complicated noun strings. Simplify your content and look for areas to inject some human tone.
  20. Be genuine. A bunch of exclamation points isn’t human or fun, it’s obnoxious. Imagine a shopping cart experience where everything is EXCITEMENT!! It comes across as Kristen Wiig’s Target cashier from SNL, and probably not the UX you’d want to provide (or have).
  21. Be a good conversationalist. On the flip side, imagine a shopping cart experience that’s brusque or of questionable humor, and you have Dante from Clerks. Be helpful, a good human, one that users will want to engage in conversation again and again.
  22. Most importantly, be empathetic. Focus on the user and their motivation. Look for areas to provide helpful insight and suggestions. If they’re suddenly facing data loss due to user error or a service glitch, it’s probably not the best time to crack a joke.
  23. Start with error messages. Your application is probably already riddled with system messages and prompts automatically generated from code or written by developers. If you’re looking to areas to inject a bit of humanity or moments of delight, those are good candidates to rework.
  24. Use fun images. Take a page from MailChimp’s playbook, and use illustrations to provide levity and make important message prompts more than just strings of text to gloss over.
  25. And don’t forget the user assistance. For a consistent voice, use the same human, friendly tone across all content, from the UI to the Help to the Community blog. Focus on the user and their motivation, not the UI. Include best practices that provide context on how the application can enhance the user’s business processes and suggestions to help ensure their success. Don’t be passive-aggressive and creepy like Clippy.
  26. From the Q&A: Use of Your/My? Try to avoid them, as they can sometimes lead to confusion of who’s who. At a minimum, use one or other consistently to prevent a Jekyll/Hyde situation. Please/Sorry? OK in moderation, but try to use each only when the context calls for it. Routine use can make your application sound needy or overly-apologetic/bumbling.