The Power of Animated Gifs

Animated gifs are more than just funny reaction images, they can also be a powerful tool in development and improve client relationships.

Collective Idea loves animated gifs.

fangirl.gif

Our Slack channels have Giphy and RightGIF integrations, and a few of us have a large collection of reaction gifs in gifwit. We have a lot of fun with gifs, and reaction gifs find their way into most methods of communication we use on a daily basis.

Animated Gifs as a Development Tool

We found another use for animated gifs that has proven to be a powerful tool in development. In order to proactively communicate and show our progress to clients sooner in the process, we started screen capturing features into animated gifs and posting them into our pull requests or user stories. It had an immediate positive impact on our relationship with our clients and had many side effects that were unexpectedly awesome. Now, many of our project teams use animated gifs to capture progress, demo new features in pull requests, and document features.

On our cron monitoring service Dead Man’s Snitch, we recently added a Code Language Switcher to improve display of code in the docs.

dms.gif

The animated gif was created to facilitate communication and a feedback loop early in the process, allowing the team to collaborate on the direction the feature was heading.

Awesome Side Effects

hello.gif

Creating animated gifs of features had several unexpectedly awesome side effects on our development process.

Our Shipped Code Quality Improved

When implementing a feature, our tendency as developers is to click through only the portion of the feature we are working on at the time. This allows us to code efficiently while working through each piece of a feature. Unfortunately, it can result in each piece of the feature working independently, but the full feature fails to work cohesively.

broken-ship.gif

By screen capturing ourselves clicking through the feature start to finish, we are able to pinpoint and rectify flow issues and bugs before we ship a feature. This means that we are catching the issues and not our clients or their users.

millenium-falcon.gif

Team Hive Mind

When working on a team, it can be easy to get siloed into a specific part of the application or a specific type of problem space. Animated gifs on pull requests allow all members of the team to understand how the feature should work, where in the application the feature exists, and how to use the feature.

hedgehog-hive-mind.gif

It means that any developers that are code reviewing the feature do not necessarily need to be intimately familiar with the codebase or product to be able to comment on the functionality or flow of the feature in the gif.

get-reference.gif

Developer Handoff and Documentation

The animated gifs serve as documentation for a completed feature. It’s a visual representation of a feature and how it works. It can serve as a reference point or training material for future developers or clients.

If a developer needs to handoff feature development, they can use an in-progress gif to understand where the feature stands and what is left to complete. The gif is a concrete base to continue to build from or improve on. Any changes that need to be made can reference the gif so the improvements can be visualized more clearly by both client and developer.

Client Relationships

Animated gifs are a wonderful way to show your client how a feature works and interacts within their system before it is shipped.

The gifs gave our clients confidence.

selffive.gif

They had visual proof of the work we had completed. They could see that we had made progress and that the work they requested is getting done.

progress-bar.gif

They were confident that the work we were doing was in alignment with their expectations.

hedgehog-on-course.gif

And, when the work we were doing was misaligned, they had the opportunity to course correct with us before the work ever reached their users.

hedgehog-course-correct.gif


Want to adopt using animated gifs for your team? Many of us use LiceCap as our screen capture software. There are other options, find one you like! Happy screen capturing!

Photo of Laura Mosher

Laura is enthusiastic about learning new languages, concepts, and tools in the software development industry. When she’s not working to build software solutions for clients, she’s developing and maintaining Collective Idea’s internship program.

Comments

Add a Comment

Hmm...that didn't work.

Something went wrong while adding your comment. If you don't mind, please try submitting it again.

Comment Added!

Your comment has been added to this post. Please refresh this page to view it.

Optional. If added, we will display a link to the website in your comment.
Optional. Never shared or displayed in your comment.
  1. February 15, 2018 at 7:49 AM

    Everyone loves animated gifs, this is a unique way to express your thoughts and feelings. and more effective rather than other simple massages.