Why Invest in Animated Website Visuals: The Show Don't Tell Principle
Why Invest in Animated Website Visuals: The Show Don't Tell Principle

It's advice that every aspiring writer comes across at some point in their career:

"Show, don't tell!"

Telling happens when the author relies too much on instructing the reader how to feel, or how to interpret the scene. They'll write something like:

Taylor became angry at her brother's mockery.

Instead of something richer, such as:

Taylor's lip began to curl as her brother impersonated her.

We sometimes forget that the people reading our messages are actually very good at interpreting context and reading between the lines. It's part of human nature. In the example above, the common narrative of "siblings annoying each other" is activated, allowing you to understand the anger and mockery in the sentence without having to be told outright.

This subtle principle is an important ingredient in quality storytelling.

Your Website Is Part of Your Story

It's also part of your sales pitch. If you sell stuff online, it's your storefront and cash register. You can't afford not to stand out.

Lucky for you, you're not just restricted to text, unlike many aspiring writers. With a website, it's a lot easier to "show." Any site worth its salt will make use of high-quality visuals to complement text. Indeed, rates can increase by double digits with the proper use of imagery. In 2013, reported, "posts with images produce a 650% higher engagement rate."

This isn't exactly new news. And thanks to the high-speed internet reality of 2017, a lot of companies are now using the power of video content to do things that images can only dream of!

Animated Website Visuals: The Balance Between Cost and Quality

Simply having images these days isn't enough; they've got to be **good***.* Videos need not be a Hollywood productions to be effective, but they'll still cost way more than a nice picture.

The middle ground is a moving picture. Not quite a video, but not static either. This is a great opportunity to show versus tell: check out yumearth.com to see for yourself. (Be sure to scroll down to see a variety of animations hard at work!)

Website Animations Signal Quality and Professionalism

When done correctly, web animations will show your customers that you've taken care with your site. It's the same idea behind restaurants (or storefronts) that look classy and ones that don't: You make judgements on the quality of the product based on the buying context.

You'll find a lot of sites and marketing efforts using buzzwords and making promises about quality, just like how there are hundreds of "world-famous" this and that restaurants in every city.

Don't tell people you're good. Show them.

Website Animations Improve the User Experience (UX) and Conversion

Your animations don't need to be big flashy items on the home page. They could exist as intriguing loading transitions or as something that happens when a button is pressed. Providing the customer with immediate visual feedback when something goes right (or wrong) can be essential to moving them further down your sales funnel or keeping them from leaving the site in frustration.

The folks over at ConversionXL have put together a great list of examples of how animation works well for user experience.

We Won't Tell You What to Do...

But hopefully the points above have shown that:

  • Visuals are absolutely imperative for any kind of online communication
  • Images are the bare minimum
  • Video is extraordinarily powerful, yet expensive
  • Website animations strike a very nice middle ground between captivation, utility and cost

If you have any questions about animations or visual communication of any sort, we'd be delighted to chat!

selected projects
selected projects
selected projects
Big ideas. Bigger results. Let’s make it happen. Get an instant quote today.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step {Current Slide}/{Max Slides}

Project Details

Start by telling us about your project.
This field is empty
Enter a valid email
Select one option
Next Slide

Key Project Requirements

Tell us about the essential features and requirements for your project.
This field is empty
Select one option
Next Slide

Timeline & Budget

Tell us about your project's timeline and budget.
This field is empty
Select one option
Next Slide

Additional Information

Anything else you'd like to add?
This field is empty
Select one option
End
Thank you! Your submission has been received! A representative will be in touch within 24 hours.
Oops! Something went wrong while submitting the form.