15 Ways to Animate Your Content with GIFs
•Als PPTX, PDF herunterladen•
6 gefällt mir•2,098 views
The document discusses 15 ways to animate content with GIFs, including using them for steps, comparisons, demos, reactions, and more. It provides examples and tips for each use case, such as keeping GIFs short and at a steady pace. Creation tools for GIFs include Recordit, Licecap, and various Photoshop and screen recording options. In closing, the author asks for questions and feedback on using GIFs for documentation.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (14)
Ähnlich wie 15 Ways to Animate Your Content with GIFs
Ähnlich wie 15 Ways to Animate Your Content with GIFs (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
15 Ways to Animate Your Content with GIFs
- 2. #GIF4docs @fosteronomo 15 Ways to Animate Your Content with Daniel Foster
- 8. #GIF4docs @fosteronomo Why GIF? Creation • Quick to capture • No audio hassle • No aspect ratio concerns Distribution • Goes where images go • No hosting hassle • Relatively lightweight • Device agnostic Consumption • Low friction (0 clicks) • No speakers needed • Motion attracts attention
- 9. #GIF4docs @fosteronomo Use #1: Steps
- 16. #GIF4docs @fosteronomo Use #2: Series of Steps
- 18. #GIF4docs @fosteronomo Use #3: Interactive Elements
- 20. #GIF4docs @fosteronomo Use #4: Cause and Effect
- 25. #GIF4docs @fosteronomo Use #5: Compare Techniques
- 28. #GIF4docs @fosteronomo Use #6: Compare Similar Things
- 30. #GIF4docs @fosteronomo Use #7: Before and After
- 33. #GIF4docs @fosteronomo Use #8: On-boarding / Walkthrough
- 35. #GIF4docs @fosteronomo Use #9: Mini-Demos
- 42. #GIF4docs @fosteronomo Use #10: Teaser
- 45. #GIF4docs @fosteronomo Use #11: Concept Illustration
- 48. #GIF4docs @fosteronomo Use #12: Prototyping
- 50. #GIF4docs @fosteronomo Use #13: Bug Report / Helpdesk Ticket
- 53. #GIF4docs @fosteronomo Use #14: Quick Tip or Answer
- 55. #GIF4docs @fosteronomo Email client support for animated GIF
- 58. #GIF4docs @fosteronomo Use #15: Reaction
- 63. #GIF4docs @fosteronomo Creation Tools GIF-specific • Recordit (Win and OS X) • Licecap (Win and OS X) • Giphy (iOS, OS X, web) • GIF Brewery (OS X) • Cinemagraph Pro (iOS, OS X) • ImgFlip (web) • GifMaker (web) • GIF Studio (Android) Multi-purpose • Snagit 13/4 (Win and OS X) • Camtasia (Win and OS X) • Photoshop (Win and OS X)
- 64. #GIF4docs @fosteronomo Uses Recap 1. Steps 2. Series of Steps 3. Interactive Elements 4. Cause and Effect 5. Compare Techniques 6. Compare Similar Things 7. Before and After 8. On-Boarding/Walkthrough 9. Mini-demos 10. Teaser 11. Concept Illustration 12. Prototyping 13. Bug Report / Helpdesk Ticket 14. Quick Tip or Answer 15. Reaction
- 65. #GIF4docs @fosteronomo Tips Recap • Ideal for 1-4 steps (video for > 4) • Overcome friction • Dimensions: balance clarity, file size, platform constrains • Cropping > scaling • Short duration (<10 sec) • Stately pace • Pause or fade at loop • Platform gotchas: email, PPT, Keynote
- 66. #GIF4docs @fosteronomo Questions and Discussion • … • … • … • … • Anyone using GIF? • What did I miss? • Did you fill out the presentation feedback survey on Sched?
- 67. #GIF4docs @fosteronomo Get in touch! Daniel Foster @fosteronomo d.foster@techsmith.com linkedin.com/in/danielfoster
Hinweis der Redaktion
- Thanks. Introduce self: Worked for TechSmith past 9 years (TechSmith: Snagit, Camtasia, Jing – tools for creating remarkable images and videos); content creation part or all of my job for 12 years, mostly in marketing context but also customer education via blogs and direct customer help via social channels. Currently heading up market strategy for Snagit. Would love to talk with you about your biggest challenges with creating and maintaining visuals in your content. Doing survey about that at our booth; chance to win a Snagit license.
- GIF – that endearing format that seems to be everywhere. But is still underused in more serious settings. http://dsgnme.co/post/100441290570/regolo-typeface-by-t-d-f-rocco-barbaro (G) http://giphy.com/gifs/i-36daysoftype-36daysi-l3V0h7Z7pRP9fbwnS (I)
- When the web was new…it seemed the whole information superhighway was one big construction zone. And GIFs were how you could tell. Banner ads as GIF. Bed bugs of the Internet?
- Google Trends - After declining in popularity for years, GIFs saw a resurgence in 2011 and are now more popular than ever. Why? https://www.google.com/trends/explore#q=gif
- Cinemagraphs came on the scene in a big way in 2011. Emotive, artistic, capture and convey a moment in time with subtle, endless motion. Designer version of GIF. Redeemed aesthetics; showed potential. http://cinemagraphs.com/travel/
- Looping for novelty. Vine: 6-second looping videos that can have audio. Facebook auto-play muted video has made mixed motion and static content normative more than ever. Short, auto-play, looping, silent video…now common across many media. How can you put them to work in your tech comm content? https://www.reddit.com/r/perfectloops/comments/1z0aqi/hmb_while_i_switch_my_ride/
- Versatile format
- Video with narration…perfect for numerous steps, complicated workflow, explanation of why GIF...perfect for 1-4 steps http://docs.helpscout.net/article/593-custom-fields
- Tutorial is a mix of text, static images, and GIF. GIF to illustrate a few steps in a compact space. Expose some interactions that may not be immediately obvious to the user. http://docs.helpscout.net/article/593-custom-fields
- Oracle – About 7 steps…a bit too many to follow / keep in short-term memory. No playback control starts to become a problem. https://docs.oracle.com/cloud/latest/reportingcs_use/BILUG/GUID-C20AF9E2-FAA9-416E-A00E-D52A4542B3F0.htm#BILUG465
- Oracle – Simple action, easy to follow. More short GIFs better than one long one. https://docs.oracle.com/cloud/latest/reportingcs_use/BILUG/GUID-C20AF9E2-FAA9-416E-A00E-D52A4542B3F0.htm#BILUG465
- Google Helpouts – treatment is eye-catching…but small size is too small to clearly see the steps being demonstrated. Cropping is better than scaling. 1:1 pixel clarity is ideal. https://support.google.com/helpouts/answer/6093046?hl=en
- Google Maps – Swedish. But you don’t need to be able to read Swedish to grok this. SUI + GIF …very helpful for bridging the language gap. People for whom your docs are not in their primary language can follow along better. https://support.google.com/maps/answer/1610636?hl=sv&rd=1&co=GENIE.Platform%3DAndroid&oco=1
- eHow: Interspersed text, GIF, text, GIF, etc. Lets you move through at your own pace. Text may be sufficient for reader for some steps; they can reference GIF for details. No need to scrub through like a longer video. Most of these are stop motion: series of photos that show a progression over time in one compact space. http://www.ehow.com/how_2227693_art-piece-using-tree-branches.html
- Help Scout : Show hover state. Collision detection…hover over the red triangle to see who’s editing. GIF shows just how quick this action is and etablishes strong visual connection. http://docs.helpscout.net/article/99-traffic-cop
- Autodesk Maya – Illustrate how one thing changes another. Much clearer with motion than as static image. Isolated essential elements and toggle action…so it’s easy to focus and see impact of the action. https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/Maya/files/GUID-AA669F09-9CDB-4327-BC37-3E4ECD6A0E69-htm.html
- Nvidia – Just two static screenshots shown in sequence. The graphic effects in Crysis 2 with and without certain hardware acceleration features. Perfect approach for comparing visual effects that would be less obvious in a side by side treatment. http://www.geforce.com/whats-new/articles/crysis-2-directx-11-ultra-upgrade
- Premium Beat (platform for sourcing music tracks): GIFs embedded in an educational blog post…diagram visualizing relationship between f-stop and aperture. WordPress and other blogging platforms handle GIF just like images.
- Vivid illustration of relationship between f-stop and depth of field.
- Comparing swings of Hanley Ramirez (top) and Manny Ramirez (bottom). Could use similar approach to show correct/incorrect way to lift a box, stock an end cap, cut an onion. http://www.overthemonster.com/2015/4/22/8450353/hanley-ramirez-manny-ramirez-swing-mechanics-red-sox
- Tasting Table blog – traditional vs newer technique for cutting an onion. Clip speed and cutting to condense the process and highlight the primary differences. Could be a 3-min video or a 5-second GIF paired with some descriptive text. http://www.tastingtable.com/entry_detail/national/14983/How_to_Chop_an_Onion___Ignacio_Mattos_and_David_Tanis.htm
- Compare two things that are very…eerily...similar http://imgur.com/vHDMwVR
- Demonstrate a before-and-after. Wipe transition for a more dramatic reveal or just cut between two still images. http://www.brewerloftconversions.co.uk/bungalowconversions/beforeandaftergallery.html http://www.ehow.com/contributor/debbie_williams/
- Show off your project (tutorials page overhaul or document redesign, for example). Perfect in a PPT deck to share your accomplishments or on your portfolio page. TIPS: LinkedIn doesn’t support GIFs in profiles though it does in the newsfeed. PPT only animates in Slide Show view. Keynote: change .gif extension to .mov first; set playback and looping in movie controls.
- TechSmith Snagit: In-product on-boarding to expose functionality, animated loops, simplified user interface effect…give overview of functionality, tips for best results. Detail at level of workflow, not individual UI elements.
- Adobe Experience Manager - Release notes. Mix of text and screenshots. https://docs.adobe.com/docs/en/aem/6-2/release-notes.html
- Adobe: Release notes – demo a new feature or (in this case) where a feature has moved in the new UI https://docs.adobe.com/docs/en/aem/6-2/release-notes.html
- Intercom docs “Key features explained”: Paired video with GIF. Video for the what, why, business value. Text and images to explain how the features work and how to use them effectively. https://docs.intercom.io/intercom-s-key-features-explained/what-s-included-with-real-time-messaging
- GIF shows one particular feature: three dots – typing indicator – that customers will see in their UI when an agent is responding
- LastPass: Getting Started guide provides overview of key features on one page. Expanding out each section reveals… https://helpdesk.lastpass.com/
- A GIF to show how the feature works, followed by basic written steps and a link to a more in-depth article.
- Mini-demo GIFs are great on social channels, as well. Tease a new feature, design detail, project. No need to worry about audio. Twitter, Facebook, and LinkedIn support posting GIFs in the feed. https://twitter.com/periscopeco/status/686880399751036928
- Engineer on Adobe XD showing iterations of color picker design. Build excitement for new or redesigned features; invite people to see the process https://twitter.com/knownissues/status/732303944035106817.
- Atlassian: Release notes – animated illustrations to show concepts and introduce new features rather than teach steps. https://confluence.atlassian.com/display/Purchasing/Introducing+Atlassian+account
- Motion draws attention; gets a second look for seemingly boring topic https://confluence.atlassian.com/bitbucketserver/bitbucket-server-4-3-release-notes-794211212.html
- Will John Snow, UX designer – created animated GIFs and put them into the Marvel prototyping app to create a very realistic experience. “After numerous iterations of sketching and wireframing, and with my course end date quickly approaching, I decided to make some Material Design mockups of my course project, Fate.” http://willjohnsnow.com/index.php/2015/07/05/animated-prototypes-with-marvel/
- TechSmith Snagit: Especially ideal for reporting an interface bug that has to do with animations or transitions.
- “I love gif for bugs. I used it a ton for text tool bugs. This was a good one because it was hard to track down and the gif made it easy” – Sara Frederixon, software engineer, Snagit
- From co-worker or customer. On workplace social platform or email. Actually faster than typing out the instructions…and easier for the person to follow along. Also good for general knowledge sharing. Motion in a newsfeed or inbox makes you stop and look. Supported on Slack, Yammer, Flowdock. Email support is more complicated...
- GIFs have mixed support on email platforms. Every client supports except Outlook 2007+ and Windows Phone. https://litmus.com/blog/a-guide-to-animated-gifs-in-email
- Outlook desktop clients have 7% of market share…but depends on your audience. Probably 7% is reliable for B2C email. “Since determining the client in which an email is opened requires images to be displayed, the data for some email clients and mobile devices might be over- or under-represented due to automatic image blocking.” https://emailclientmarketshare.com/
- Best practice: When sending by email, choose a first frame that communicates well…for the Outlook desktop client users https://litmus.com/blog/a-guide-to-animated-gifs-in-email
- Reaction: surprise
- Reaction: confusion
- Reaction: extreme interest
- Reaction: celebration
- Support in Snagit coming soon. Visit booth for demo. Authoring platforms: Adobe Robohelp, Xmetal, Madcap Flare support embedding GIF; first frame in editor; animates in preview and in produced html.