There’s no doubt about it—online video has arrived. According to eMarketer, comScore reported that US Internet users viewed 12.7 billion online videos during November 2008 alone, and that more than 77% of US Internet users (146 million) watched an average of 87 videos per viewer. They also predict the trend continuing with online video viewing reaching 88% of US Internet users by 2012.

Given the recent explosion of online video, we thought it would be helpful to cover some best practices for implementing video viewing on your site. While powerhouse sites such as YouTube and Hulu have very likely already trained your users on what to expect, keeping a clear checklist of usability standards of your own will ensure your users get the most intuitive viewing experience possible.

Screen Size and Placement

• Widescreen is emerging as the convention with 640×360 dimensions being the most common. This offers a good balance of being big enough for users to see easily, but not so big that image quality suffers.
• When placing the video, consider the opportunity costs. Video in the upper left is a natural location and leaves room on the right for utility links for related videos and also advertising. A centered layout employed by Hulu allows for comfortable extended viewing.
• To provide intuitive access to the content, ensure the video is not below or split by the fold. A large play button overlaying the video is also helpful for indicating a playable video.

Control Bar

• Users will expect the control bar itself to appear directly below the video. Control bars that appear upon mouse-over are increasingly common, but users who aren’t as familiar with watching video will find this less intuitive.
• If the video automatically plays, ensure that the pause button is clear and easy for users to find.
• Controls for audio volume are generally identified by icons that show a slider bar on mouse-over. Be sure that the icon for audio controls is not so abstract that it users overlook it.
• In choosing an audio control layout, consider the tradeoff—Vertically aligned bars give a natural sense of raising or lowering volume, while horizontal lets you control volume without covering actual video content. While Hulu has a horizontal alignment, vertical alignment is more conventional across the web.
• A timer that shows the total length of the video and time viewed so far allows users to get a sense of how long the video is, helping them decide if they’d like to invest the time in viewing the video.
• Timeline navigation allows users to choose where in the video they want to skip to. Offering a display of the exact time on the timeline when the user mouses over allows for intuitive navigation.

Buffer Display

• Connection speeds vary and a good way of handling this is offering a memory buffer. Taking it a step further and showing how much video is buffered lets users know for example that if they pause for a few seconds, they can watch the rest of the video without it slowing down or freezing up.
• Youtube does a great job of graphically displaying how much has buffered, so even if a user doesn’t know what buffering is, they can get a sense of the video loading properly.

Embedding Advertising

• 15-30 second ad before and during natural breaks in the content is generally accepted, but can become annoying if it’s the exact same ad over and over. Short videos (under 90 seconds) with 30 second ads in front of them are also frustrating to users.
• Ensure that the audio level of the ad matches the audio level of the content. A surprising loud ad can be counterproductive in promoting a product.
• Offer a time until content display to let the user know they only have a few seconds before they get to the desired content.
• While the effectiveness of overlay ads at bottom of screen while running is debatable, users simply find them distracting and diminish their experience.
• Placing static ads near the video player related to the in video content is a great way to reinforce awareness of the ad without impacting viewing experience.

This entry was posted on Monday, June 8th, 2009 at 1:31 pm and is filed under Web Usability Best Practices. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.