SlideShare ist ein Scribd-Unternehmen logo
1 von 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!

Weitere ähnliche Inhalte

Andere mochten auch

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
 

Andere mochten auch (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(サイレントボイス)とは
 

Kürzlich hochgeladen

Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Excelmac1
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja VipCall Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja VipCall Girls Lucknow
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一Fs
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMartaLoveguard
 
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一Fs
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一Fs
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012rehmti665
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITMgdsc13
 
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Dana Luther
 

Kürzlich hochgeladen (20)

young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja VipCall Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptx
 
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITM
 
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
 

Hinweis der Redaktion

  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.