Mobile Video: 3 Ways to Improve the User Experience

Jeroen Wijering is the creator of the incredibly successful JW Player, which has generated millions of downloads since its release in 2005. In 2007 he co-founded LongTail Video, focusing on a full-fledged online video platform that includes encoding, delivery, syndication and advertising.

With the Android and iOS platforms growing like weeds, online publishers are scrambling to “mobilize” their video players. Because Apple’s iOS doesn’t run Flash, most of these publishers turn to the HTML5 <video> tag for delivering their clips to mobile devices.

While universalizing mobile video is a critical first step (better to have your videos play than not), it only marks the beginning of the process. The mobile user experience (UX) model is vastly different from that of the desktop browser, which means additional work is needed in areas such as interface, streaming and advertising. These UX differences hold several implications for video players.

Touch vs. Mouse

The most obvious difference is user input. A mouse controls desktop video players, whereas both iOS and Android rely on capacitive touchscreens. Since a fingertip is both bigger and more difficult to position than a mouse cursor, buttons on mobile video players must be larger than their desktop equivalents.

When using a mouse, there is the so-called “mouse-over” state — when the mouse is positioned over a button, but not clicked. Some video players rely on this tool to pop up a volume slider or selection menu. However, the tool is not available on touch devices, so mobile players cannot rely on it.

On the other hand, touch devices do allow users to control applications by sliding one or more fingers across the screen. This type of interaction (found in features like gestures and multi-touch) is relatively new and still unexplored, but could become widely used over time. Some basic gestures, like sliding over a webpage or scrolling through a playlist, are already widely recognized today.

Full-Screen vs. Windowed

Another key differentiator is screen size. Mobile screens are three or four inches in diameter, a big leap from 14-inch laptops or 20-inch desktop monitors. Therefore, on both Android and iPhone, videos are usually played back in full-screen, instead of a smaller window within an HTML page. This means that visual interaction with other parts of the page — including companion ads that pop up — is lost on mobile devices. Publishers should not rely on this advertising model.

In full-screen mode, both Android and iOS expose only system-provided video controls like pause and seeking. Important online video components such as additional share buttons and overlay ads are simply not possible. Therefore, any custom controls or graphics are best displayed before the video is started and/or after it has ended.

On-the-Go vs. At-the-Desk

Mobile devices are frequently used on-the-go, meaning their Internet connection may be poor and unreliable. Connection speed can change dramatically, even within a single video playback session, for example, when a user switches from 3G to Wi-Fi. Therefore, iOS devices support a specific type of video streaming that continuously adapts video quality to the available bandwidth connection: HTTP live streaming. It is highly recommended to use this functionality for mobile video playback.

Unfortunately, Android only supports this type of streaming as of version 3.0. To ensure optimal video quality, players can offer an up-front video quality selection. As Android manufacturers migrate from the 2.x to the 3.x platform, HTTP live streaming can — and should — replace this manual quality selector.

An additional “watch later” tool is convenient for mobile players. Users who are casually browsing on a mobile device can tag a video to save for later viewing. The publisher will then remind the user about the video at a later point. Publishers can implement “watch later” functionality using cookies, logins or one of the emerging services dedicated to this functionality.

In sum, the vast differences between desktops/laptops and mobile devices require a major redesign of existing video players. But things don’t stop at the player. The surrounding website needs optimization as well, with less content, fewer sidebars, less clutter and more focus on the video itself.

Mobilizing your video is not about swapping Flash for HTML5. Instead it’s about adapting your content to the device and facilitating a unique and interactive type of user experience. Mobile video consumption is exploding, but it’s also still evolving, as are the platforms that serve the content to consumers. By going above and beyond the bare minimum now, you’ll be well positioned as mobile continues to grow.

Images courtesy of iStockphoto, PashaIgnatov, and Flickr, Luca Zappa.

More About: Mobile 2.0, mobile development, video

For more Dev & Design coverage: