Media players

Best practices

In the following section we present some general best practices, that is good to keep in mind when designing pages that includes media players.

Don’t let a media player stand alone

You should avoid having a video being the only way the user is able to receive specific information. There are several reasons why this is important to keep in mind.

Users are different. Some like to consume content via text, some like it via video and some via audio. Therefore there is no guarantee, that a user will even watch the video you provide on your page, thus it is a good idea to cater to different preferences.

From an accessibility perspective, video isn’t always preferred. Even though you can do your best, and you should, to make the video accessible - text is still easier to consume, especially if you use a screenreader. In order to ensure you video is as accessible as possible, it is important to use captions and full transcripts of the video

 

The user should be in control

The user should actively choose if, and when, they would like to watch a video - and whether or not it should be with sound. The user should not land on a page and be surprised by a video playing without their consent, as this, in most cases, creates a bad user experience. Video or audio that automatically plays often lead the user to stressfully trying to figure out how to stop it as fast as possible. In a medical setting, avoiding this, is even more important. The user should not be put in a situation where they sit in a public setting and some vulnerable content plays out loud without them being prepared.

 

Provide a next step

Make sure that your media player isn’t a dead end for your user. Instead provide a natural next step either via an CTA or related content that could continue feeding the user with information about the topic they are exploring. When using external providers, as YouTube or Vimeo, do what you can to control the suggested next videos to watch. You don’t want the user to be presented with inappropriate videos, that does not relate to what the user is currently seeking information about. Instead it is a good idea to use the last 30 seconds for your video to provide some pictures with link to your other videos that might be interesting to watch for your user. Alternatively you can also turn of suggested videos, and instead invite the user to continue exploring your webpage for different content formats or related video provided there.

 

Align expectations

Users are often impatient. And consuming videos / audio can often feel, or even be, time consuming. Especially if you as a user don’t know what you will get out of watching the video. It is frustrating as a user to wait for some specific information or an answer to a specific question, that never ends up being a part of the video / audio they have just spent several minutes consuming. Therefore it is helpful to provide the user with some initial text where you explain what kind of information they will find in the video / audio, and what they can expect to get out of it.

 

---

Behavior

Different behavior can be best suited for different scenarios. In this section we present some of the common decisions you have to make when designing the behavior of your media players.

 

Autoplay play vs. pressing play

In the previous section we emphasised why autoplay can be a bad user experience, the main reason being, that the user gets surprised and loose control. However, there are some scenarios where autoplay can be justified. Let’s take a look at the pros and cons of both behaviors.

 

Never autoplay sound


The problem with autoplay is often the sound. Users gets surprised or embarrassed, if the sound suddenly blast from their phone, especially if they are in public. Therefore, you should never use autoplay with sound on.

 

Autoplay can make your content easier to consume

Autoplay without sound can make your content easier to consume, as the user don’t need to do any extra interactions. In a way you could say that the user gets some kind of idea about what the video is about and what they can expect, and then have the choice to stop up and watch it, or simply keep scrolling, without being too disturbed in their flow. In a Coloplast setting autoplay can therefore be good for showcasing a product or other simple videos, that doesn’t distract the user too much in consuming the rest of the content.

 

Use the play button to give the user control


More complex or longer videos, where the video is the main content of the page, it is often a good idea to use a play button. The user should be ready and not have to start the video over, because they weren’t paying attention for the first part of the video. It should be an active choice and the user should always have a feeling of being in control.

 

Inline video vs. overlay video

Inline videos 


Inline videos are the ones that are placed directly in the content and plays within the main content area. Inline videos are best suited for videos that are not the main content of the webpage, but additional content to a webpage. With inline videos users, are able to see a video, but also experience the rest of the webpages content, like pictures, text etc. Therefore inline videos are good for product videos, where it doesn’t require the users full attentions, but can be a part of a users full experience or impression of a product.

Overlay videos 


Overlay videos are videos that play on top of the webpage, where the rest of the page gets a backdrop, so the video is the only thing in focus. Overlay videos are best suited for videos that should be the main focus of the page. It allows the video to use more space and helps the user give the video their full attention. Examples of this could be learning videos, explainer videos etc.

 

---

Additional guidelines

Vimeo vs. YouTube

There are pros and cons to using YouTube and Vimeo for embedding videos on your website. Whether you should choose the one or the other, depends on purpose and goal of your video. Here we have listed some pros and cons about both of the two popular providers.

On page or open in external providers

Keep the user on your site, so they don’t get lost


When you want to include either video or audio on you website, you have the option to either embed it directly on a page, or direct the user to an external provider. Overall we want to keep our users on our site, if it makes sense of course. If we need to direct them to an internal provider, it is important to make this clear and be transparent, so the user the aware of what is happening. The reason to why we would want to keep our user on our website, is to create a smooth content flow, where the user can go from reading, to watching a video, to explore related content. If we direct the user to other sites or providers, they might have a hard time finding their way back, which can cause a frustrating user experience.

 

Make sure users can listen to podcasts on the go


When it comes to podcast, most users want to listen to them on the go. Therefore it is a good idea to make sure that they are able to lock their screen and continue listening. This might mean opening the podcast in an external provider that supports this, if it is not possible to support it in your own solution.

---

Articles

When is Autoplay OK? - The Hipper Element
Exploring different ways to embed video on webpages: Pros and cons - Medium
Video usability - NN group
Comparison of YouTube and Vimeo - Medium
YouTube vs. Vimeo: Which is better for embedding video on you website — Nuve