Ana sayfa general UX Thoughts on Using Video as a Background

UX Thoughts on Using Video as a Background



Utilizing movies as background – a design pattern that emerged a few years in the past – continues to be the topic of a lot debate amongst designers.
On the one hand, it grabs the eye of on-line customers who’ve very restricted consideration to start with; capable of run within the background with out being intrusive; and offers web site guests extra impetus to have interaction.

The UX Designer Toolbox
Limitless Downloads: 500,000+ Wireframe Templates, UX Templates, UI Kits & Design Belongings


However, naysayers say this method sacrifices usability within the title of aesthetic enchantment. It’s harking back to the time when GIFs and flash flooded homepages – a pattern that may solely look over-the-top and cheesy in in the present day’s requirements.
I, nonetheless, imagine that utilizing movies as background provides a extra dynamic, livelier dimension to its UX that may finally result in longer engagement. That’s, if and solely whether it is carried out correctly. Let me delve into this additional.
video background on homepage
The video background on Smith‘s homepage.

Two Sides Of The Coin

There are deserves to each side, and it’s a matter of contemplating which one would weigh extra by way of the worth it could give to your web site.

Benefits of Video Backgrounds

Visually Interesting:
A video background stands out amongst a crowd of static homepages. Its first benefit then lies on its skill to draw extra guests and have them have interaction longer, because of its uniqueness.
With movies, your web site gives the look of being technologically ahead, seeing because the design shouldn’t be accessible in all places. Placing your finest foot ahead in these very important few seconds upon touchdown in your web page helps in incomes your customer’s belief – an important component in motivating them to additional have interaction.
Conveys Advanced Merchandise/Providers:
Some manufacturers profit from experiential advertising – that’s, immersing the patron in a constructive emotional expertise that they’ll affiliate with the model.
Video backgrounds assist obtain this. When a product or a service would profit extra from experiential advertising, video backgrounds work nicely in giving guests front-row tickets in experiencing the model’s message.
Furthermore, advanced merchandise that would want extra explaining can even use video backgrounds.
Understand that guests would like an informative video over informative textual content. A brief, looping video on what your service is about or panning pictures displaying the ins and outs of your web site are a few issues you are able to do to simply current your product.
Boosts search engine optimisation:
In case your video is cross-posted on a number of sharing platforms, it could enhance the search engine optimisation worth of your web site. The extra views your video rakes in, the extra it helps enhance your rankings on search engines like google and yahoo, particularly in case your guests discover your video adequate to proceed sharing it.
Including a transcript that features the appropriate set of focused key phrases would additionally assist search engines like google and yahoo uncover and browse your video content material higher.
video background on homepage
The video background on Customary Movie‘s homepage.

Disadvantages of Video Backgrounds

Slower Loading Time:
Movies, given the character of the file format, are likely to decelerate the loading time of a webpage. Sure, there are methods to mitigate this impact by optimizing the video in a means that makes it carry out quicker (extra on this later). Nonetheless, versus pictures, movies will all the time load slower.
The issue with that is that guests have a tendency to go away web sites that don’t load shortly. Bear in mind, the eye spans of human beings at the moment are shorter than that of a goldfish.
Not Cellular-Pleasant:
Cellular browsers, be it on iOS or Android, don’t mechanically play movies. These working programs have this characteristic blocked. Even should you set a set off component that may play the video when customers contact a specific space, it’s going to nonetheless not be efficient. It will come surprising and customers don’t reply nicely to non-intuitive design.
Furthermore, loads of cell customers are nonetheless on restricted information plans. When video performs, extra bandwidth is used, thereby utilizing extra of their information. They may go away your web site if they are going to solely get these dangerous experiences.
Too Many Parts on the Web page:
When you’ve a homepage with a background video that fills the whole lot above the fold plus barely-decipherable textual content, guests can have a tough time getting your message.
Larger shouldn’t be all the time higher, as too many components will get distracting. As a substitute of catching their feelings and guiding them in direction of seeing what the model has to supply, their consideration can be extra drawn to how complicated your web site is.
video background on Hurtigruten homepage
The video background on Hurtigruten‘s homepage.

Video Backgrounds Executed Proper

Let me get this on the market: Video backgrounds are usually not for everyone. For those who merely wish to comply with a pattern as a result of it seems “cool” or it’s the “in factor,” then you’re doing all your purchasers and your web site guests a disservice.
But when after weighing the professionals and cons and you continue to imagine video backgrounds are for you, guarantee that they do the next:
Aligns with Your Model:
Do not forget that movies are the medium through which your model will ship its message and persona. Therefore, its subject material ought to assist what the model has to supply. For instance, the colour palette and tone of the video must be in line with the general web site theme and persona.
Performs Properly:
Creating movies is a useful resource by itself. Will probably be a waste of it doesn’t carry out nicely. Right here are some things to take a look at:

  • Excessive-quality – no matter size or dimension of video, it ought to all the time be of top quality (i.e. content-wise). Web site guests can have no alternative however to look at your video upon touchdown in your web page; make sure that it’s value viewing.
  • Compress – a video that buffers breaks the expertise for guests. Additionally, it makes them really feel like the web site is loading sluggish. Strive going for 720p video with 24 or 25 frames per second. Take a look at your bitrates between 750okay and 1250okay.
  • Overlay – this may also help treatment a lower-quality video or a high-quality video that’s too large to stream seamlessly. Overlays may also help disguise some imperfections, given the appropriate colour or sample. Place the div immediately after your video. It’s also possible to use the ::after pseudo-element. Be sure customers can nonetheless proper click on on the video for controls.

Solely Acts as a Background:
Video backgrounds are backgrounds. They don’t seem to be the point of interest of the web site. Go for a subtler strategy to restrict person distraction.

  • Much less motion – use smoother transitions that aren’t distracting to the eyes. Keep away from quick panning or shaky filming.
  • Contrasting textual content colours – if you will place textual content over your video, enhance its legibility by utilizing the appropriate colour distinction or shadow. It’s also possible to tweak your video by reducing its depth.
  • Silent video – the best method to drive off guests is to have sound on autoplay. Take away the audio or mute it.

Brief with Restricted Loop:
This isn’t a feature-length film. Lengthy movies imply extra video to obtain and slower loading time – two issues customers hate experiencing.
Restrict your movies to 10 to 15 seconds. At most, 30-40 seconds. Preferrred dimension can be beneath 6MB. For those who do not need the sources to shoot movies in-house, yow will discover inventory footages on-line that loop seamlessly.
Loops shouldn’t be infinite. This solely eats up CPU utilization of your person and once more, decelerate your web site’s loading time. If in case you have an extended video, take away the loop possibility and let it play as soon as. For shorter movies, write some JavaScript that may cease the loop after a sure period of time.
Considers Cellular Customers:
Understand that 56% of on-line visitors comes from cell customers. Although cell browsers don’t play video, you continue to should cater to this viewers. At present, there is no such thing as a workaround this, so the fallback plan is to easily disable video background on cell and change it with a background picture.
Like I discussed above, utilizing video backgrounds shouldn’t be for everybody. Even should you do suppose your web site would profit from this, you continue to should ensure that you are able to do it proper. To be sure you’re doing it proper, all the time do break up testing earlier than rolling it out to all the web site – design alternate pages, promote, and observe how customers reply. When carried out nicely, you’ll be able to make sure you reap the rewards.



Please enter your comment!
Please enter your name here