browse browse contact us contact us

Animation UI/UX

Show and Tell: Video Content As a Part of User Experience

A deep dive into video types, what video uniquely does for user experience, and the hidden production problems that will sink your project if you're not prepared.

There’s a moment every designer knows. You’re looking at a landing page—beautiful grid, clean type, gorgeous photography—and something feels missing. The page is correct. It just isn’t alive.

That’s the problem video solves. Not in a “we need more content” way. In a deeply human way.

Before we had language, we read motion. A rustle in the grass. A flicker at the edge of vision. Our nervous systems are ancient, and they still respond to movement before they respond to anything else. When you put video on a page, you’re speaking a language the brain was wired for long before anyone invented the scroll.

Most teams, however, still treat video as decoration. A hero section needs something, so: video. A product page feels thin, so: video. This is the design equivalent of putting a soundtrack on a bad film. The motion draws attention, but then attention has nowhere to go.

So, when does it even make sense to use videos in your design process? What kinds are there? Let’s dive in.

The Honest Taxonomy

Not all video is created equal, and conflating types is how budgets get wasted. Let’s be precise.

Welcome and Introduction Videos

The firm handshake of the digital world. Used right, they give a human face to an abstract company. Used wrong, they’re an obstacle between a visitor and the information they actually came for. The test: does this video make someone more likely to stay, or is it something they wait out?

Educational website concept video

Promotional Videos 

Those have TV in their DNA—the 30-second spot, the movie trailer. The goal is emotion first, information second. They live or die on craft. A mid-tier promotional video is worse than no video at all, because it signals mid-tier thinking about everything.

Promo materials for a financial platform 

Product Videos 

The workhorses. E-commerce figured this out early: people who watch a product video convert at dramatically higher rates than those who don’t. The reason is obvious in retrospect—we evolved to understand objects by handling them, turning them, watching them in use. A video approximates that in a way a photograph cannot.

Spylt website video

Background Videos 

The most misunderstood kind. A full-screen video background is a statement about atmosphere. Done well (think: a watchmaker’s hands, unhurried and precise; or a chef’s kitchen at 6am, all steam and intention), it places the visitor somewhere. Done poorly, it’s visual noise that slows your load time and fights your type for attention.

Background videos used in e-commerce

Explainer Videos 

The best explainers are acts of compression: they take something genuinely complex—a fintech product, a healthcare workflow, a B2B SaaS platform—and make it legible in 90 seconds. The discipline required to do this well is the same discipline required to do anything well: ruthless editing, clear hierarchy, no word or frame that doesn’t earn its place.

OffCents explainer video

Testimonial Videos 

These live and die on authenticity. The moment a testimonial feels scripted, it inverts—it becomes evidence of inauthenticity rather than proof of trust. Real people, imperfect lighting, actual sentences: these are features, not bugs.

How It’s Actually Made

The type of video you make should follow from what you need it to do. This sounds obvious. It is apparently not that obvious, given how many animation studios produce beautiful motion graphics for brands that needed something that felt real, and vice versa.

Live action carries the weight of the real. The camera doesn’t invent—it witnesses: faces, spaces, textures, machines in motion. When that reality includes people, mirror neurons fire, association forms. But even without a face in frame, real footage grounds your brand promise in something the audience can trust exists.

Live action video used in design for The Little Campus

Screencasts are the most honest format for software. Show the thing working. Actually working, not a carefully rehearsed demo with no edge cases. The confidence of showing real product is its own form of persuasion.

Screencast video example

Animation buys you something live action cannot: the ability to show what a camera can’t reach. Some things have no image—a security protocol, a molecule binding to a receptor, money moving through a financial system. They exist, they matter, but they’re invisible by nature. Animation isn’t a stylistic choice in these cases. It’s the only way to be accurate.

Cartoon style animation for Pencils of Promise

Motion graphics are a scalpel, not a paintbrush. Used to emphasize a statistic, to transition between ideas, to give rhythm to a narrative—excellent. Used as a substitute for having something to say—immediately detectable.

Personalized music app motion graphics

360-degree and immersive video is still early-stage in most interfaces, but its application is clarifying. Booking a hotel room. Buying a piece of furniture. Choosing a wedding venue. Any decision where physical space is the thing being sold—this format will eventually become table stakes.

What Video Actually Does

Video does four things exceptionally well. Everything else is secondary.

It compresses time. A 90-second video can transfer more nuanced understanding than five minutes of reading. Not because people are lazy, but because video uses parallel channels. Your eyes see, your ears hear, your pattern-recognition engine reads motion. All simultaneously. Reading is serial. Video is parallel. For dense or unfamiliar information, the advantage is significant.

It sets atmosphere faster than anything. Faster than copy. Faster than photography. Faster than any static design element. The first three seconds of a well-chosen video background tell you more about a brand than three paragraphs of “About Us” text. This isn’t a feature to use carelessly—it’s a precision instrument.

It makes emotion legible. We trust faces. We respond to human voice. We feel pace and tension in music. Video is the only medium that can deploy all of these simultaneously, and emotion is a necessary part of it.

It demonstrates without abstracting. A photograph of a product is an abstraction. A video of someone using the product is a demonstration. The difference in cognitive load—the work a potential customer has to do to imagine themselves using the thing—is enormous. Reduce that work, and conversion follows.

Planetoño website animation

The Parts Nobody Talks About (Until It’s Too Late)

Everyone wants to talk about the magic. Fewer people want to talk about the part where the magic breaks. These are the issues that don’t show up in video strategy decks, but show up immediately in production.

Load Time Is a Design Problem

A video that takes four seconds to load on a mid-range mobile device in a 4G environment has already lost a portion of your audience before they’ve seen a single frame. The decision to include video is also a decision to invest in how it’s served: CDN infrastructure, adaptive bitrate streaming, careful compression, lazy loading. If your team doesn’t have a plan for this, the video will hurt more than it helps.

Hyperion website and its smooth mobile adaptation

Autoplay Is a Trust Issue

Sound that plays without warning is one of the most universally despised UX patterns in existence. The instinct to autoplay (louder! faster! make an impression!) is understandable. The effect is the opposite of the intention. A visitor who immediately scrambles to mute your site is a visitor who is now thinking about their annoyance rather than your message. Muted autoplay is a more defensible choice. Opt-in play is often the best choice.

Contrast Doesn’t Forgive

A beautiful video background behind reversed white type looks stunning on the designer’s calibrated display at the right moment in the footage. On a phone in sunlight, at the wrong frame, it becomes illegible. Overlay gradients, text shadows, dedicated text zones, reduced-opacity overlays—these are the actual craft of integrating video into layouts that have to work in the real world.

Some People Will Never Watch It

People in meetings. People with hearing disabilities. People in cultures or contexts where video feels intrusive. Those who are simply not video people. Video should never be the only path to understanding your product. It should be the best path for those who take it—and a door that sits alongside other doors, not in front of them.

The Question Worth Asking

Before any brief that includes video, there’s one question that separates the work that lands from the work that doesn’t:

What would be lost if this were a photograph instead?

If the answer is nothing—if the information, the atmosphere, the emotion could all be achieved with a still image—reconsider. Video is not inherently superior to other media. It is superior when motion is the point, when time is the medium, when sequence or demonstration or life-in-action is what you’re actually selling.

When it is, there is nothing better.

The frame is just the beginning. What happens inside it—that’s the whole game.

Recommended Reading

Good design thinking doesn’t stop at one article. Check out other think pieces in our blog:

UX Design: Types of Interactive Content Amplifying Engagement

Videos as Instructional Content: User Behaviors and UX Guidelines

Step by Step Guide to Custom Promo Video Design

5 Reasons to Make Animated Video for Your Product

Photo Content in User Interfaces: 7 Basic Ways to Use

Web Design: 5 Basic Types of Images for Web Content

3C of Interface Design: Color. Contrast. Content

Don’t Stay Still. Why Brand Needs an Animated Logo

Welcome to check designs by Tubik on Dribbble and Behance; explore the gallery of 2D and 3D art by Tubik Arts on Dribbble

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

    More articles

    Let’s collaborate

    Want to work on the project together? Contact us and let’s discuss it.

    contact us