The Dollars and Sense of Visuals in Content: Original Research & Innovative Approaches
•Download as PPTX, PDF•
1 like•66 views
Why not just skip the screenshots and avoid the videos when it comes to user documents and other technical content? This talk shares research that shows you can't afford NOT to include visuals in your technical content, along with an innovative approach that helps make it practical to include and maintain those visuals. Credit: some parts of this presentation were contributed by Anton Bollen and Ryan Knott.
Recommended
Recommended
More Related Content
Similar to The Dollars and Sense of Visuals in Content: Original Research & Innovative Approaches
Similar to The Dollars and Sense of Visuals in Content: Original Research & Innovative Approaches (20)
Recently uploaded
Recently uploaded (20)
The Dollars and Sense of Visuals in Content: Original Research & Innovative Approaches
- 1. @fosteronomo | #ValueofVisuals #stc19 The Dollars & Sense of Visuals in Content: Original Research & Innovative Approaches Daniel Foster, Snagit strategy manager, TechSmith
- 2. @fosteronomo | #ValueofVisuals #stc19 Daniel Foster Snagit Strategy Manager Former Marketing Writer Okemos, Michigan
- 3. @fosteronomo | #ValueofVisuals #stc19
- 4. @fosteronomo | #ValueofVisuals #stc19 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac sem neque. Nulla in pulvinar risus. Vivamus non elit id magna tincidunt aliquet. Sed ut massa fringilla, tempor urna et, tempus turpis. Aliquam dapibus ac leo non pharetra. Donec finibus eros. Duis mattis eleifend sollicitudin. Nulla intnon pretium ultricies Don’t settle. imperdietus. Curabitur porta in lacus non efficitur. Mauris vel sollicitudin dolor. Mauris ultrices ipsum nulla. Nulla facilisi. Praesent at nisi rutrum, tristique est nec, molestie elit. Vitae rutrum et, fringilla nec sem. Aenean viverra et justo vehicula tincidunt. Curabitur semper nulla in tortor vehicula, in ornare ex maximus. Morbi sit amet quam non ex pellentesque hendrerit. Donec ullamcorper non ante a mollis. In fermentum turpis dui. Donec placerat ante condimentum metus pharetra sodales. Praesent a est mauris. Duis congue
- 5. @fosteronomo | #ValueofVisuals #stc19 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac sem neque. Nulla in pulvinar risus. Vivamus non elit id magna tincidunt aliquet. Sed ut massa fringilla, tempor urna et, tempus turpis. Aliquam dapibus ac leo non pharetra. Donec finibus eros. Duis mattis eleifend sollicitudin. Nulla intnon pretium ultricies Don’t settle. imperdietus. Curabitur porta in lacus non efficitur. Mauris vel sollicitudin dolor. Mauris ultrices ipsum nulla. Nulla facilisi. Praesent at nisi rutrum, tristique est nec, molestie elit. Vitae rutrum et, fringilla nec sem. Aenean viverra et justo vehicula tincidunt. Curabitur semper nulla in tortor vehicula, in ornare ex maximus. Morbi sit amet quam non ex pellentesque hendrerit. Donec ullamcorper non ante a mollis. In fermentum turpis dui. Donec placerat ante condimentum metus pharetra sodales. Praesent a est mauris. Duis congue
- 6. @fosteronomo | #ValueofVisuals #stc19 Visuals matter. Get creative.
- 7. @fosteronomo | #ValueofVisuals #stc19 Do visuals matter?
- 8. @fosteronomo | #ValueofVisuals #stc19 New Research: The Value of Visuals
- 9. @fosteronomo | #ValueofVisuals #stc19 Methodology
- 10. @fosteronomo | #ValueofVisuals #stc19 Opinion survey 4,500 workers Communication Wants & Needs
- 11. @fosteronomo | #ValueofVisuals #stc19 Scientific study 125 workers Upload post Download software Fill expense form Text-only Text + screenshots Video w/ voiceover T A S K INSTRUCTIONS 💡 💡 💡 💡 💡 💡 💡 💡 💡
- 12. @fosteronomo | #ValueofVisuals #stc19 Scientific study 125 workers Upload post Download software Fill expense form Text-only Text + screenshots Video w/ voiceover T A S K INSTRUCTIONS 💡🐘 💡🐘 💡🐘 💡🐘 💡🐘 💡🐘 💡🐘 💡🐘 💡🐘
- 13. @fosteronomo | #ValueofVisuals #stc19 Scientific study 125 workers Upload post Download software Fill expense form Text-only Text + screenshots Video w/ voiceover T A S K INSTRUCTIONS 💡🐘🚀 💡🐘🚀 💡🐘🚀 💡🐘🚀 💡🐘🚀 💡🐘🚀 💡🐘🚀 💡🐘🚀 💡🐘🚀
- 14. @fosteronomo | #ValueofVisuals #stc19 Economic modeling Scientific study results Economic data x $$$
- 15. @fosteronomo | #ValueofVisuals #stc19 3 Big Findings
- 16. @fosteronomo | #ValueofVisuals #stc19 Finding 1: People prefer visual forms of communication. (but most workplaces fail at this)
- 17. @fosteronomo | #ValueofVisuals #stc19
- 18. @fosteronomo | #ValueofVisuals #stc19 Millennials • Also known as workers under 40. • Also also known as the world’s largest demographic. • Also also also known as the largest portion of today’s workforce.
- 19. @fosteronomo | #ValueofVisuals #stc19
- 20. @fosteronomo | #ValueofVisuals #stc19 What about everyone else?
- 21. @fosteronomo | #ValueofVisuals #stc19
- 22. @fosteronomo | #ValueofVisuals #stc19 Finding 2: Visual content helps people perform better.
- 23. @fosteronomo | #ValueofVisuals #stc19
- 24. @fosteronomo | #ValueofVisuals #stc19
- 25. @fosteronomo | #ValueofVisuals #stc19 Finding 3: Visual content saves companies money.
- 26. @fosteronomo | #ValueofVisuals #stc19
- 27. @fosteronomo | #ValueofVisuals #stc19
- 28. @fosteronomo | #ValueofVisuals #stc19
- 29. @fosteronomo | #ValueofVisuals #stc19 …this isn’t an issue that is going to go away. As humans, we will always have a more visceral reaction to visuals than text. —Dr. Alastair Goode, PhD in Cognitive Science “ ”
- 30. @fosteronomo | #ValueofVisuals #stc19 Visuals matter.
- 31. @fosteronomo | #ValueofVisuals #stc19 Yes, okay. But...
- 32. @fosteronomo | #ValueofVisuals #stc19
- 33. @fosteronomo | #ValueofVisuals #stc19
- 34. @fosteronomo | #ValueofVisuals #stc19
- 35. @fosteronomo | #ValueofVisuals #stc19 A representation of an interface (or other visual content) that focuses on the essentials by stripping away temporarily or contextually unimportant elements. Simplified User Interface graphic Pronounced “sue-ee”
- 36. @fosteronomo | #ValueofVisuals #stc19 Before. After.
- 37. @fosteronomo | #ValueofVisuals #stc19 Don‘t believe me? Let‘s play...
- 38. @fosteronomo | #ValueofVisuals #stc19 Finder (Mac) and Explorer (Windows)
- 39. @fosteronomo | #ValueofVisuals #stc19 YouTube
- 40. @fosteronomo | #ValueofVisuals #stc19 Outlook (Mac)
- 41. @fosteronomo | #ValueofVisuals #stc19 Looking great. But where is the value*? *for technical communicators.
- 42. @fosteronomo | #ValueofVisuals #stc19 Pairing SUI with text is essential for complete instructions. How to transfer images from your device 1. Connect your computer and mobile device to the same network. 2. In the software, select File > Connect Mobile Device. Classic Screenshot Simplified Graphic
- 43. @fosteronomo | #ValueofVisuals #stc19 future-proof content Benefits of SUI graphics cut localization costs boost content effectiveness comply with privacy regs
- 44. @fosteronomo | #ValueofVisuals #stc19 How can you use SUI?
- 45. @fosteronomo | #ValueofVisuals #stc19 Use SUI graphics to… introduce a concept
- 46. @fosteronomo | #ValueofVisuals #stc19 Use SUI graphics to… show a state
- 47. @fosteronomo | #ValueofVisuals #stc19 Use SUI graphics to… avoid parity problems
- 48. @fosteronomo | #ValueofVisuals #stc19 Use SUI graphics to… show an interaction
- 49. @fosteronomo | #ValueofVisuals #stc19 Use SUI graphics to… reduce visual noise
- 50. @fosteronomo | #ValueofVisuals #stc19 Source: www.konversionskraft.de Eyetracking : Where are viewers looking?
- 51. @fosteronomo | #ValueofVisuals #stc19 Eyetracking : Where are viewers looking?
- 52. @fosteronomo | #ValueofVisuals #stc19 Eyetracking : Where are viewers looking?
- 53. @fosteronomo | #ValueofVisuals #stc19 Predictive eyetracking powered by machine learning: www.expoze.io
- 54. @fosteronomo | #ValueofVisuals #stc19 How is TechSmith using simplified graphics? TechSmith User Assistance Team
- 55. @fosteronomo | #ValueofVisuals #stc19 In-Product Tip for Snagit‘s Panoramic Capture Classic Approach: Screenshots or Screen recording New Approach: SUI Graphic or Animation
- 56. @fosteronomo | #ValueofVisuals #stc19 In-Product Tip for Snagit‘s Panoramic Capture
- 57. @fosteronomo | #ValueofVisuals #stc19 Version 13 (2016) Version 2018 Version 2019 In-Product Tip for Snagit‘s Panoramic Capture
- 58. @fosteronomo | #ValueofVisuals #stc19 future-proof content Benefits of SUI graphics cut localization costs boost content effectiveness comply with privacy regs
- 59. @fosteronomo | #ValueofVisuals #stc19
- 60. @fosteronomo | #ValueofVisuals #stc19
- 61. @fosteronomo | #ValueofVisuals #stc19 Note:
- 62. @fosteronomo | #ValueofVisuals #stc19 future-proof content Benefits of SUI graphics cut localization costs boost content effectiveness comply with privacy regs
- 63. @fosteronomo | #ValueofVisuals #stc19 Ok.
- 64. @fosteronomo | #ValueofVisuals #stc19 How to create simplified graphics?
- 65. @fosteronomo | #ValueofVisuals #stc19 Design tips Colors: complement but contrast Simplification: remove clutter, leave cues
- 66. @fosteronomo | #ValueofVisuals #stc19 Source: Microsoft Edge
- 67. @fosteronomo | #ValueofVisuals #stc19 Two ways to create SUI images…. manually automatically
- 68. @fosteronomo | #ValueofVisuals #stc19
- 69. @fosteronomo | #ValueofVisuals #stc19
- 70. @fosteronomo | #ValueofVisuals #stc19
- 71. @fosteronomo | #ValueofVisuals #stc19 Creating simplified animations and videos
- 72. @fosteronomo | #ValueofVisuals #stc19 Simplified Animation Simplified screenshot of each step Dialog Cursor Multitrack Video Editor
- 73. @fosteronomo | #ValueofVisuals #stc19 Simplified Animation Simplified screenshot of each step Dialog Cursor
- 74. @fosteronomo | #ValueofVisuals #stc19 Simplified Animation Dialog Cursor
- 75. @fosteronomo | #ValueofVisuals #stc19 Simplified Animation Cursor
- 76. @fosteronomo | #ValueofVisuals #stc19 Simplified Animation
- 77. @fosteronomo | #ValueofVisuals #stc19 Simplified Animations and Videos
- 78. @fosteronomo | #ValueofVisuals #stc19 Visuals matter. Get creative.
- 79. @fosteronomo | #ValueofVisuals #stc19 Email me for free resources: d.foster@techsmith.com Please post feedback in AttendeeHub app.
Editor's Notes
- Who is TechSmith: Snagit and Camtasia people. #1 and #8 most used software tools in technical communication according to Content Wrangler survey. Millions of people use our products to create remarkable images, videos, and GIFs. Any of you? Creating rich visual content is easier than ever and yet…
- Many technical content teams battle for time and resources to create and maintain those visuals. Some teams have stripped out all visuals and help content is now a wall of text.
- Let’s not settle for this. Why?
- Two takeaways from my talk today. First I’ll share new independently conducted research that proves why you can’t afford NOT to include visuals in your content. Next, I’ll show one new creative approach that can help you AFFORD to include visuals in your content.
- Only fair to ask. Turns out there’s a lack of solid data to answer this question. So we hired an independent firm to conduct original research to answer it.
- Gave them the reigns to preserve objectivity. The results could have turned out very different but we took that risk. Project had 3 parts…
- Large number of workers across a number of global regions Topics included: Communication methods used at home vs. at work Opinions on what types of communication work best for them Work-based training
- 125 office workers assigned three everyday tasks…using instructions communicated in one of three formats. Three Tasks: Uploading a post to a website • Downloading new software • Filling in an expenses form …Three types of instructions: A text-only email, An email with text and annotated screenshots, A video walkthrough of the task with voiceover. A doctor measured how each method of communication affected three outcomes: understanding…
- And recall
- And speed
- Based on the results of the scientific study + economic data (such as GDP, average amount of time workers spend consuming content, and average worker productivity) to measure potential productivity gains globally and in each of the surveyed regions
- The oldest millennials are 37 years old. Passed baby boomers as biggest generation. Majority of your coworkers, or will be soon. No longer the “new kids on the block.” Millennials are our workforce. And, don’t forget that Gen Z — an even more connected and digital demographic — is fast on their heels.
- So let’s look at those numbers again…with that frame of reference in mind. These are the preferences of a growing number of your employees, co-workers, customers.
- Why does preference matter? Audience/customer has choices and influence. 1) May simply dismiss your content; google for something better; complain it’s hard to use. 2) May impact perception/satisfaction of your brand. Content is key to customer experience. Unattractive/unengaging content = unattractive product or service.
- Retention of information; task completion improves. Think about impact on your customers: better retention means fewer repeat calls/tickets/searches. Better task completion means getting it right the first time, fewer errors, less frustration and more customer success. NOTICE: text is not the enemy. Good writing matters. A lot. Text + visuals is more powerful than either alone.
- Quantified in terms of workplace communication…
- 33 minutes per week…25 hours per year
- Equivalent of serious money…and increased effective headcount.
- “With our propensity for visualization, it is no surprise that GIFs, emojis, and short videos have become so popular recently. It also means that people are becoming more accustomed to absorbing information visually than ever before.”
- Data makes the case for including visuals in your content: people prefer visuals, perform tasks better with visuals, and there can be economic incentives to include them….
- BUT…in reality, so many challenges. Updating visuals when UI changes every week, localizing visuals, dealing with differences between platforms or versions, dealing with a complex or bloated UI, redacting customer data. Guess what…tech comm isn’t the only group with these problems.
- Seeing visuals like this in your inbox? More brands and content teams are creating content that includes simplified graphics. Marketing teams often lead the way…high end apps and graphic design expertise.
- Making its way into in-product onboarding (static and animations), what’s new content…
- and documentation… (Same images: English, French, Japanese)
- Treatment has been around for some time but name is still becoming established…
- And this is what it looks like. All irrelevant text blocks and elements are converted to simple shapes. Unimportant information is being covered up, and well…. Simplified And even though things look different, you can still recognize the application. And this works!
- Let‘s play Guess That App!
- Let’s start with an easy one! What are these?
- And this one?
- OK. (we pause for a second ) < this works .
- Because Screenshots can still be cluttered, overwhelming and distracting. But when you reduce something more complex to something so simple, it actually allows you to highlight a particular feature by simply exposing it. The SUI graphic on the right side is much more focused and it only shows the necessary information – File > Connect Mobile device. For.a user, this can be much easier to understand. Very important: Since the visual component is simplified, you as a TC need to provide enough context. That‘s why it‘s good to pair the graphic with h good text or audio that provides the right information. Tthe graphic is heping the user to orient themselves and provides context.,
- SUI actually offers 4 significant benefits for content teams… focus viewer attention/remove distracting elements, change-resistant/extend shelf life, remove or reduce text requiring localization, redact or obfuscate PII / proprietary information. (Demo instance problem) [DO POLL by SHOW of HANDS? Which of these issues do you deal with most?] Great…but when does it make sense to use SUI?
- In SUI community, some teams sharing that they started with tech support articles for product that are updated frequently.
- When learners are new to an interface or concept. SUI allows you to remove complexity and reduce cognitive load. Great for communicating a workflow, idea, or concept.
- When the process to stage or create example content is complex or time-consuming. For example: Staging a chat conversation between multiple users, Processes that involve multiple computers/devices/users, Specific states or use cases that you can’t easily set up in your products or services (ex. Storage full state / form fill with auto-suggest). Source: https://microsoftedgetips.microsoft.com/en-us/1/44?source=menu
- Example from Snagit 2019 help article. Simplify lets one image work for both platforms, even though menu items are different. Less likely to cause user confusion/distraction. KEY POINT: won’t need to be updated as menu items change. If anything else around the focal text changed…would need to re-take screenshot. Open app, stage content, do any cropping or edits, place back into docs. Simplify can be elegant solution to this problem in many instances.
- Are you familar with eyetracking and heatmapping? (gauge response) #It‘s usually used in advertising and marketing to make sure consumers are seeing the right message.
- Remember this screenshot? We applied machine-generated eyetracking to it, and this is the result:
- Explain this…. Distracting hotkeys. The trace on the left indicates that the user has to scan. Screenshot on the right. Very clear: File > Send mobile Device.
- Less visual noise. Try it yourself. machine learning, We hope to test and validate this further.
- Saw one example earlier from our written docs.
- Let me show you another real example. As part of our onboarding, we wanted to explain a special scrolling capture feature in Snagit called Panoramic capture. There is a tooltip in the product; and most of us would probably show a classic screenshot or in this case, a screen recording. There is nothing wrong with it. It conveys the information and hopefully helps the viewer to use the feature. But it is also a bit difficult to understand because there is so much else going on in the graphic. So my colleagues opted to use a SUI graphic instead. I think the graphic looks a lot cleaner, The general workflow, and all important options and buttons are clearly visible, and for the user relatable. They were able to display additional information without feeling too cluttered.
- Aside from the benefit for the user: We could use the same animation with very minor adjustments for our German version. And Windows.
- And we used the same graphic across the last three versions without having to update them.
- Another example from Camtasia user assistance. First-time user does not see empty state. Instead, we load SUI-style animation with voiceover on the timeline. Displays inside blue box area in Camtasia video editor.
- Camtasia Getting Started project…orientation to UI…high-level overview.
- The interface is very pared down! Just the key elements being taught are included.
- How to create simplified graphics? Start with some high-level design principles...
- COLOR: complementary color scheme for visual elements in the UI. Neutral colors (e.g., shades of grey) for text/menu elements. Use color contrast wisely. If something needs to stand out, allow it to. If it doesn’t, consider toning down the opacity or intensity of the color so it draws less attention. Save highlight or high-contrast colors for callouts, frames, or other elements that draw attention to the important action or elements in an image. SIMPLIFY: Remove “visual noise” that can distract the user. No need to replace every visual element exactly…e.g., 10-line paragraph of text does not have to be represented by 10 rectangles. Three might suffice. But do keep enough details/visual elements for the UI to still be recognizable to the user. Don’t simplify too much. Use visual anchors such as icons, titles, and menu labels to provide context. And use effect strategically to focus attention on what’s necessary for instruction.
- Microsoft Edge example – maybe taking the effect too far. 0 text in the animations can be disorienting... But again, one graphic animation for each of their languages. Just imagine that.
- Dedicated tools in Snagit 2019 for creating simplified graphics. Tool is called “Simplify”
- Automatic option parses contents of screenshot and simplifies it: generates right color palette, identifies text and objects using computer vision, applies objects to canvas. Also includes tools for enhancing auto-generated objects or creating from scratch.
- And here is how to create a simplified animation, summarized. This process is more manual. This is the animation we‘ll create: the cursor clicks through several slides and the main window changes, before opening the dropdown menu
- So to do this, you will need. Screenshots of each step, That menu dialog mouse cursor graphic
- Simplified screenshots go on timeline. Set duration of each: how long visible.
- Preview shows how the layers work. Top layer on timeline is viewed as top layer in video. Add dialog
- Add cursor
- Animate cursor to slide around the screen. Tip: animate a “dip“ in the cursor size to simulate click.
- In conclusion…
- Email me – I‘ll send links to the Value of Visuals PDF, SUI guide, and SUI community on Slack.