Design Process: Seamless Sharing

As part of a new series on our design process, I'm going to discuss some of the thoughts and decisions behind the features we released with Brightcove 3. This first installment will cover the new sharing menu in our video players.

Viewers can now use the video player menu to share the video they are watching by sending it via e-mail, copying the direct link, or embedding the video on their Web site or blog. The previous menu had worked very well, providing easy access to share videos, but we felt that we could improve on the experience.

During the design process, we ran a number of quick usability tests to observe how people interacted with the sharing controls. These experiments highlighted the importance of minimizing disruptions to the video experience when the user performed simple tasks like sharing or looking for new videos.

Contextual discovery

Our initial goal was to add related videos contextually in the menu, increasing the discovery of content within any video experience. In addition to displaying related videos, we felt it would be valuable to allow videos to be organized by 'Newest' and 'Most Viewed,' giving the end user more control to find new content to watch. We found that the best experience surfaced these videos automatically at the end of a video—logically the time when someone would look for other content to watch. Viewers can also access related content anytime using the 'menu' button.

To give publishers the most flexibility, each set of videos, 'Related', 'Newest', and 'Most Viewed' can be turned on or off individually allowing control over how the content is surfaced.

1_related_videos

Users can scroll through related videos.

Seamless experience

One of the features we wanted to preserve from the previous menu was the ability to have a seamless playback experience even when the user interacts with the player menu. We've found that pausing the video automatically when the user does something like grab the link to send to a friend disruptions the experience. Now, anytime someone clicks on any of the sharing controls or 'Menu' button, the video zooms back in the video window but keeps playing. In the new menu, users can also browse related content while continuing to watch the currently playing video.

2_get_link

Small user actions, such as grabbing a link to the video, do not interrupt video playback.

One of the design challenges with the menu system is providing the best user experience even when the video size is very small or reduced in height for 16:9 widescreen content. For example, to accommodate e-mail sharing, especially for widescreen videos, we maximized the vertical real estate by adding the entry field labels inside the fields. When you click into the field the text goes away allowing you to type.

3_email_multiple_sizes

Labels sit inside the fields themselves to preserve video real estate.

Easier Viral Posting

Another area we felt we could improve in Brightcove 3 was the process of embedding a video into a Web site or blog. In the previous menu, a viewer had to copy the code manually by viewing the source. Posting directly to a blog was possible, but accessible only from the 'Menu' button. To simplify things, we combined both steps into a drop-down menu accessible from the 'Get Code' button. Now users can copy the embed code or post to a blog in one quick step.

4_get_code

Copying embed code and posting to a blog, now in one easy step.