How To Design Usable Audio & Video Media Players

If you’ve been living under a rock in Bikini Bottom for the past fifteen years then allow me to explain website media. You see, the Internet used to be a place dedicated to text and conversations. Eventually text & images blurred together. But at the turn of the 21st century Internet speeds were still very slow, thus streaming media wasn’t a reliable option.

Fast-forward to modern times and you have access to streaming video services right at your fingertips. Putting aside free video hosting services you can also stream movies and television through companies like Netflix or Amazon Prime.

I want to cover the subject of media players from the user experience perspective. Back just 10 years ago YouTube would have been the largest video streaming network on the planet. Now we have dozens of options located all around the globe, each with their own custom player. In this post you’ll find some tips and suggestions for how to design your own custom media players that entice visitors and draw attention from the crowd.

Ancillary Features are Secondary

Every type of digital interface should have a hierarchy of value. At the top is primary items like play/pause buttons, the scrubber bar, and most likely a duration counter.

Then you have ancillary features, also known as supporting content. These might include subtitles, video quality(SD vs HD), or fullscreen mode. It’s up to you to decide which features are more important that others. For example fullscreen mode is really popular and supported in mostly every site. Would it be wise to consider this secondary to other features?

youtube 2014 video player interface style

The YouTube player is so organized and structured, it’s the paragon of excellence when it comes to video player design. Everything is super easy to understand without much congestion. The button symbols are practically universal yet they do include small popovers to explain the functionality to anyone who’s unfamiliar.

projekktor ui video player open source

The scrubber bar might be a little different on each video player – but it’s still a huge part of the whole design. For example Projekktor is an open source project that just looks stunning. The design is somewhat old-school but it works and runs exactly as expected. There is a clear organization based on which features are necessary and which are just luxury.

Clean & Simple

Perhaps the most obvious yet important design trait is a clean interface. It’s easy to get carried away placing all sorts of extra buttons, sliders, and UI elements into place. Instead why not opt for something a little smoother?

I recommend doing a brief wireframe sketch just to organize your thoughts. Put together a list of required features that will enhance the video player, then figure out how to implement them in a simplistic manner.

vube video player interface ui

A relatively newer streaming site named Vube does exactly this. All of the elements allow super easy interaction. But even more so, they seem to blatantly imply a distinct function. Just by looking at the player it’s relatively simple to comprehend the value of each item.

The goal should be creating an interface that’s soft, easy, and inviting. You definitely want people to use the site, correct? So make sure the interface is easy enough that a small child could understand the process. Granted it might take a while but once they understand it should be very straightforward.

pandora one mini player audio ui

Another very simplistic example is can be found on Vine. This social network was built for mobile users and has stuck with bare simplicity to run smoother on smartphones. In the browser each video just looks like an animated GIF – no controls appear until you hover over the content.

vine video player simple social network

This may or may not be a good idea for every site. Just like all interfaces, the design style truly depends on the website and how content is organized. If you like the very clean and minimalist approach then take a look at Vine’s user interface. It might be the perfect jumping off point for your next project.

Multi-Page Functionality

I can’t say how useful this would be for a streaming player because there have been countless times where I’ve accidentally changed pages by mistake. Of course, this type of functionality would require cookies or some type of dynamic JavaScript code. But it’s one of my favorite solutions which was elegantly built into SoundCloud.

soundcloud multipage audio player web interface

While playing a song you are able to continue searching through the website, viewing profiles, all the typical stuff without losing the song. You can even queue up a playlist and set it going without any interruption. For video streaming websites this would be a little more difficult, but the video doesn’t need to keep playing. Just having the video pause at a certain point would be more than beneficial.

Although this functionality isn’t a popular aspect of streaming it does add real value into the realm of online video. In my honest opinion it’s worth building when applicable.

Content that Matters

Web and mobile video players should borrow ideas from the best desktop media players. People have become familiar with these classical interfaces and the symbols related to each function(triangle for play, square for stop, two rectangles for pause). Users also expect certain functionality like scrubbing to skip between parts or easy-access to fullscreen mode.

When you consider something like an audio player the topic is slightly different. You’ll want to make the song easy to play but it shouldn’t take up a whole lot of room. The only time users want a big music player is when ID3 info can be displayed, such as the artist & album name.

amazon prime video streaming player

Take for example the Amazon Prime instant streaming video player. This incorporates a very large play button along with an accessible scrubber bar. The elapsed time is placed in clear view along with the total video duration. Some of these elements are interactive, others present information. But everything on Amazon’s player is valuable to the user experience.

So when designing a new player for yourself please take a bit of time to analyze the essentials. Ask yourself what type of features you would expect when using the player. It’s all very important to the final result because usability isn’t always interactive – but it is visible.

Closing

After looking through dozens of online examples you should come to the conclusion that audio & video players are simply everywhere. They can be found on hundreds of domains, in almost every social networking app, and embedded into thousands of blog posts. Users are becoming more adept at handling video players and how to interact with them. By sticking with traditional conventions you’ll have a much easier time bridging the gap between all groups and ages.

Tags:
0 shares
Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.

Leave a Reply

Your email address will not be published. Required fields are marked *

25 Sketch Freebies for Web & Graphic Designers