Google Cast

User Experience with Google Cast

Google Cast is a technology that allows Android and iOS mobile apps and Chrome web apps to “cast” content - like video, audio, and screen sharing (mirroring) - to Cast-ready devices like Google Chromecast.

In the Cast user model, the mobile device or laptop is the sender which controls the playback, and the TV is the receiver which displays the content. All the user interaction and most of the user interface takes place on the sender device rather than on the TV.

Casting relies on the coordination between two or more screens; the sender UI and the receiver UI must work together. For example, if content is paused, the TV should indicate that it is paused, while the mobile device should provide the action to resume playback (i.e. with a Play button).

Considerations

Due to hardware and resource limitations, there are certain restrictions placed on applications supporting Google Cast:

  • The Chromecast is a low-power device with memory, CPU, and GPU limitations, so the receiver application should be as lightweight as possible.
  • Given the nature of the interaction model, tabs, windows or popups cannot be created in the receiver app, and there should be nothing on the receiver device screen requiring input. All interaction with the application must be done through a sender application.
  • The Cast receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.
  • Google Cast supports a single concurrent media stream playback in the <audio> and <video> tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.

Overall design principles

Keep the following in mind as you develop your user interface.

Receiver interface:

  • The receiver should not have any interactive elements, only informational elements to describe the state of the app, errors, etc. User interaction should only take place on the Cast sender (phone, tablet, or Chrome browser), not the Cast receiver (TV).
  • Remember that the action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the receiver display.
  • The UI should use transparency and visual nuance to prevent overpowering the content. The experience should not feel like a “computer” UI.
  • When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content loading state stays on screen and fades into the media playing experience.

Sender interface:

  • The sender supports actions and the receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (e.g. showing the user a play button).
  • Portrait is the preferred orientation when Casting from a mobile sender app. It's the natural orientation for mobile devices and the user can control the app with just one hand (or thumb). While watching videos is usually best in landscape, portrait tends to be easier on the user when casting. Your apps should work well in both orientations.
  • Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.

The easiest way to ensure that your Cast application follows these principles is to review your user interface with the Google Cast Design Checklist.

Brand guidelines

These Google Cast Brand Guidelines set out the additional requirements with which you must comply when using the phrase ‘Google Cast Ready’ in text and/or the Google Cast Ready badge.

You can let others know that your app works with Chromecast by using the “Google Cast Ready” badge or “Google Cast Ready” in text. You do not need pre-approval to use this badge. However, please be sure that your app complies with the Google Cast Developer Terms of Service and the Design Checklist, and that your use of “Google Cast Ready” and the “Google Cast Ready” badge complies with these branding guidelines, or Google may request that you modify or cease your use of the badge.

Google Cast Ready in text

When written in text, “Google Cast Ready” should be capitalized.

Always include a TM symbol on the first or most prominent instance of "Google Cast™ Ready" in text.

When describing a product/app as being Chromecast compatible, use the phrase “Google Cast Ready.” For example, “This product/app was designed to be Google Cast™ Ready” or “This product/app is Google Cast™ Ready.”

In any document or page that uses the “Google Cast Ready” mark or badge, the following attribution must be included at the bottom of the document:

Google Cast Ready and the Google Cast Ready Badge are trademarks of Google Inc.

Google Cast Ready Badge

The “Google Cast Ready” logos are badges that you can use on your website, app store listing, marketing materials, and promotional materials to display compatibility with devices that use the Google Cast protocol.

  • Do not modify the color, proportions, spacing or any other aspect of the badge image.
  • When used alongside logos for other application marketplaces, the Google Cast logo must be of equal or greater size.
  • Don’t make the badge the primary element on your page.
  • Keep some distance between the badge and other logos and icons on your page.
  • When used on white, light, or medium toned background, use a black badge.
  • When used on a black or dark toned background, use the white badge.
  • Don’t use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.

Linking

When used online, the badge must link to one of the following:

  • Google’s list of Google Cast Ready apps and products, currently at chromecast.com/apps.
  • A list of products published by you.
  • A specific product detail page published by you.
  • A list of apps published by you.
  • A specific app detail page published by you, on Google Play, or in the Apple App Store.
Use the following sizes:

Badge file downloads

Use the badge file designated for the location as listed below.

Brazil (Portuguese) Canada (English) Catalonia (Catalan) Denmark (Danish) Finland (Finnish)
France (English) Germany (English) Iceland (English) Italy (English) Japan (Japanese)
Korea (English) Mexico (Spanish) Netherlands (English) Norway (Norwegian) Poland (English)
Portugal (Portuguese) Spain (Spanish) Sweden (Swedish) United Kingdom (English) United States (English)

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.