Did you know that by some metrics, mobile video plays are becoming more prevalent than desktop? On top of that, some sites have 80% or more of their viewers coming from mobile devices. And while that shouldn’t come as a shock given the huge sales numbers for every new phone and tablet that comes out, the video industry can sometimes be a bit slow to handle mobile web (UI especially) with the care and attention it deserves. As you saw in our Mobile Autoplay blogpost, JW Player is pushing hard to ensure viewer experience on mobile devices (as well as small desktop players) is just as enjoyable as a large desktop player.
Research, Research, Research!
Whether you’re browsing your favorite site or using the likes of Netflix, Youtube, Amazon Video, Hulu, etc, a lot of the improvements we’re making with our 7.9 release might seem obvious, and we agree! We think that’s because putting in the time to research like we have (along with most of those big name players) leads to the most logical conclusions. And like those big name video players, we recognize the value in attracting and retaining mobile viewers.
With the full JW team collaborating on this project and with input from our customers, we had lots of ideas to help direct us. Our goal was to solve viewer pain points and add more functionality while providing a clean, usable view and experience no matter what device a viewer uses or what size the player is.
This along with the wealth of research we did led us to a few main concepts. We’ll explain in detail below for those that want the in-depth read, and summarize here for those that don’t.
Focus On The Content and Controlbar Space
As a publisher, having your content be seen is priority #1. As a viewer, seeing the content you want to watch is priority #1, and added functionality is priority #2. At JW Player, we agree! Controls and functionality should be easily accessible when you need them, but unobtrusive when you don’t, especially on small screens. By removing opacity and backgrounds behind buttons, bumping things further into corners, moving buttons onto the view from the controlbar, and scaling buttons up and down at various player sizes (while still respecting mobile touch targets), more of the content is visible when the controls are in view.
The simplest way to explain is with some annotated before and afters:
Oh, and we also made it possible to hide the controls on mobile while paused so you can take a screenshot of the content!
Now that you’ve got the backstory, we can jump into the details of and reasoning behind these updates below.
Touch Targets
After some extensive research by our design team, we looked to Google, Apple, and others for their material design studies, specifically focusing on mobile touch targets. What is a touch target? It’s the space on a screen around/under a button you can click or touch when activating the button.
While it’s easy enough to be accurate if you have a pointer/mouse on desktop, finger size varies, and we all know how annoying it can be to accidentally tap the wrong things… By respecting the pixel width of the suggested touch targets (even if the icon itself is smaller than that), we can know exactly how many things we can place on the screen at a given player size, without having to worry about “fat-fingering.” You’ll notice in the screenshot below, we have the controlbar crammed with buttons and they don’t all fit with enough space to be usable.
Player Sizes and Breakpoints
Fortunately, our footprint allows us to dig into our large pool of data and figure out some of the most used player sizes so we can optimize for those. In doing so, we also took at look at Google’s handy device metrics so we could make sure our data lined up with popular phone and tablet resolutions.
Here are some interesting facts!
All plays (desktop and mobile)
10% of the plays we see have a player width at or under 300px. That’s iPhone 4 inline territory.
Another 7.8% are 480px, which is iPhone 4 landscape size.
Mobile plays
Close to 50% are under 400px.
Desktop plays
9% are under 300px.
Once we knew how much room we had for buttons at various player sizes, we realized that not all player sizes were created equal. Having a range of breakpoints allows us to optimize the view and experience across the board. Breakpoints are transitions at certain player sizes where the UI changes to better accommodate that size.
Oh yea, if you like the “transparent” look, we’ll be giving you the option of retaining it at larger player sizes!
UI and UX: Space vs Functionality
When it comes to buttons on the controlbar on small screens, a standard is to hide everything but the essentials. Take for example the iOS fullscreen controls, or a standard HTML5 video player.
Our goal was to keep as many controls accessible to viewers who would want to use them, without getting into a cluttered “fat-finger” situation. One solution that admittedly was a compromise to our first goal of making the content more visible was to move the rewind and next buttons onto the player from the controlbar at certain sizes. While this does cover some of the content (while paused), having more room on the controlbar lets us add a LOT of functionality back.
Even if you don’t use captions and audio tracks, your users will be seeing more of your content.
Check it out!
Take a look at the below player and how the design changes when you resize your window on desktop. You can do the same on mobile by looking at it inline and switching to landscape.
What does this mean for me?
JW Player has a lot of customizability around skins, including the option for a customer to design their own from scratch. While that’s great for those that have the means and desire to have something truly custom, we had something different in mind for those that don’t.
For those that want something that’s usable everywhere, at all sizes, that looks and feels the same across devices, we wanted to provide a great out-of-the-box solution. Giving viewers a consistent look and feel adds familiarity and comfort, and helps with retention. As is a main theme with JW Player, our focus with these UI and U/X updates was on providing a great, consistent experience no matter how you’re viewing the content. If you’ve got a lot of mobile traffic, we think the improvements will make your users a lot more likely to hang around after their first experience, and hopefully return because of how good that experience was.
We’re working on more big changes to our skins for JW8 to really optimize the user experience across player sizes, so keep an eye out for a preview of those down the road, as well as improvements to this first round of updates.