Interaction Aesthetics

Our latest release introduced a new feature that the design team here is particularly excited about…custom player skins! Now, in addition to our existing styling capabilities, you can replace elements of our players with custom images, providing more fine-grained control over the look and feel of your players. Learn more.

In the following example, I have skinned a number of elements to illustrate the flexibility that custom skins provide. Here is the before and after:

To match the subject matter of the videos, I wanted to give this player an aquatic theme. Using custom skins I was able to easily swap in custom images where I would previously have only been able to change colors.

For example, I was able to make the player chrome (playerChrome-skin) slightly transparent, so that the underwater scene used as a background image would show through. I also used gradients to make the thumbnail background (thumbnail-skin) and playhead (playheadWell-watchedSkin) appear as if they were glowing, which helped to give the player a more luminescent feel.

Here is the live player with callouts highlighting all of the skinned elements:
(note the playerChrome-skin, thumbnail-skin, and playheadWell-watchedSkin discussed above)

For a more detailed overview of how I skinned this player and the images that I used, click here.

You can also visit our Custom Skins Component Reference to get a better understanding of the skinnable elements available in each BEML component.

As always, if you run into issues or questions along the way, feel free to post a question in our Community Forums.

Happy skinning!

 

Comments (0), Tags:

Since launching Brightcove 3, we’ve been committed to continually improving our products to fit our customers’ needs. We’ve conducted over 50 usability sessions and customer interviews since January and each one has directly influenced features and enhancements we’ve built, or plan to build this year. Here’s an overview of our process and some information about how you can get involved:

Who?
You! Usability studies are the best way for us to get input on our products because the feedback comes directly from our customers!

What?
Our usability studies are typically focused on specific features or enhancements that are still in the design phase. Your input helps us define requirements and finalize the designs before we start development. Plus, you get a sneak peak at some of our upcoming features!

When?
We typically run one usability study a month. During that time we try to talk to a wide range of customers so we can tailor our products to best meet all of our customers’ needs.

Where?
From the comfort of your own desk! We talk to customers all over the world, so our usability sessions are usually conducted remotely. However, we love to meet face-to-face, so if you are local to the Boston area we’d be more than happy to conduct a session in person!

Why?
Usability studies guide the overall priority of features and enhancements in our products. Many of the features that we’ve released since November have been the direct result of usability testing and customer interviews. Some examples are quick publish, favorite playlists, and the ability to swap out video files in the Media Module. We’ve also been working on a number of other enhancements that we plan on releasing soon, so stay tuned!

 

Quick publish is the fastest way to get the publishing code for a video. Thanks to feedback from usability studies we recently added the ability to get a direct link to the video!

 

Favorites allow you to bookmark playlists that you edit often and let you drag and drop videos directly into them!

Now you can replace video files with videos already in your account, or upload a new one to use!

How?
Each session lasts about 30 minutes and is spent discussing and observing how you use the feature that we are testing. It’s a quick and easy way to help shape the future of Brightcove!

If you would like to participate in an upcoming study, please send an email to usability@brightcove.com that includes your name, company, and a description of your daily Brightcove tasks.

Have an idea now? Our suggestion box is also a great way to let us know what you think at any time!

We look forward to speaking with you!
The Brightcove Usability Team

 

Comments (0), Tags:

One of the key ingredients for creating a successful brand requires consistency.  Yet when it comes to video, branding the player often gets overlooked.

Maybe you have detailed guidelines that describe exactly how and where your branding should be used or you could just have a logo and color palette.  Either way you can gain value in extending your brand language to your video player.  By following these tips you can help increase your brand awareness and take advantage of the many places your video will appear online.

1.   Add brand consistency by customizing your video Player
Probably the easiest and most effective way to extend your brand is to customize your video player.  This may seem like a no-brainer but you’d be surprised at how many companies just use a generic look and feel.  There are many options here, from simply adding a few accent colors to match your site or completely customizing the player using imagery, color and typography.

Sometimes less is more.  Here’s an example of how changing the default theme and a few colors can give the player a fresh new look.

Or take it a step further and customize all of the colors for a deeper brand experience.

Quick Tip: Follow the colors and style of your website.  For example if your site primarily uses flat, solid colors and a minimal design try to emulate that with the player.  Similarly if you’re using gradients to add depth, reflect the same styles in your player for stronger consistency.

Learn more about customizing your player:
http://help.brightcove.com/publisher/docs/publishing/styles.cfm


2.   Extend your brand by customizing your Viral Player
Most likely, your video lives on your viewer’s blogs and websites in addition to your own site.  A viral player is the player used when a viewer copies the ‘embed code’ and adds your video to their blog or website.  If you allow viral distribution, it’s really easy for viewers share and help promote your content.  This is a great way to extend your brand reach and increase traffic.

The viral player can be customized individually, just like any other player, and set for use anytime a viewer embeds your video.  Since this content will appear outside of your website, it’s important to make the player look and feel consistent with your brand standards rather than just appearing in a neutral player design.

Quick Tip: Consider the format of your content.  For example if most or all of your videos are shot in widescreen (16:9 ratio) make sure your viral player matches that format for optimal viewing.

Learn more about how to create and use a viral player:
http://help.brightcove.com/publisher/docs/publishing/viral.cfm


3.   Reinforce your brand by using a Logo Overlay
You see them on almost every network TV show, the semi-transparent logo in the bottom right corner, subtly reminding you that your watching FOX or Discovery.  Logo overlays or watermarks were made popular by network television but can help reinforce your brand online and drive traffic back to your website.  These images are really easy to create and can be anchored to any corner of your video.  Each image can have a click-through link associated with it, great for driving traffic to your site or promoting a specific page.

You can also go beyond just using your logo.  Have a new episode coming out next week?  Want to promote a new album launch?  Want to drive traffic to a new contest or promotion?  Try getting creative with the video space but just be careful about taking too much attention away from your content.

Quick Tip: Keep the images small.  About 15% or so of the video size is recommended.

Learn more about how to create a simple logo overlay and add it to your videos:
http://help.brightcove.com/publisher/docs/media/logo-overlay.cfm


4.   Animate your brand by adding a Bumper video
Like the logo overlay, bumpers are used frequently in network television.  A bumper is a short video clip that plays before a video starts.  Think of it like a show’s opening sequence.  Bumpers are a great way to brand a series of content by adding a consistent clip that becomes synonymous with the show. Another option is to add a quick logo animation that plays before your videos to help reinforce your brand.  You can add bumpers to each video individually or to your player so that all videos have the same bumper clip.  Bumpers can be used with any type of content but be careful not to over do it with long intros, which may prevent viewers from watching more videos.

Quick Tip: Don’t have a series to brand or the budget to create logo animations? Try using the video still image.  The video still image appears over the video window before a viewer clicks play – usually a screenshot from the video.  This is a fast and easy option for additional branding in your videos.  You can add the video title or completely brand the image however you want.  Just upload the image in association with your video and it will automatically appear before the video is played.

Learn more about how to use bumper videos:
http://help.brightcove.com/publisher/docs/media/bumpers.cfm


5.   Add more impact by using custom fonts
Most companies have a specific typeface that is used with their brand.  For example at Brightcove we use the typeface Gotham anywhere a graphic font is used and in printed materials.  By default most video players use a system font like Arial, which tends to make the players all look the same.  By using an embedded custom font you can to extend your brand consistency and help differentiate your player from others in the market.  Custom fonts currently require a small amount of development work, but in terms of brand consistency they can be well worth it.

Quick Tip: Strive for readability.  When using a custom fonts make sure your text is easy to scan and read by the viewer.  Another important factor is contrast.  Be careful when using low contrast text and background color combinations, especially since each monitor will render the contrast a bit differently.

Here’s a full list of supported custom fonts and instructions on how to use them with your players:
http://help.brightcove.com/developer/docs/playerapi/beml-fonts.cfm


Putting it all together
When you put these small pieces together you can create a deeply branded video experience that will leave a lasting impression with your viewers and help set you apart from the competition.

 

Comments (1), Tags:

In this installment of design process, I'm going to talk about the quick video publishing feature that we added within the Media Module application.

Read More →

 

Comments (0), Tags:

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.

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.

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.

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.


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

 

Comments (0), Tags: