User Experience with the Chromecast Platform

Chromecast is a technology that allows Android, iOS, and Chrome web apps to "stream" content — like video, audio and screen sharing (mirroring) — to Cast-ready devices like:

  • Chromecast
  • Chromecast audio
  • Chromecast built-in TV
    (also known as TV with Chromecast built-in)
  • Chromecast built-in Speakers
    (also known as Speakers with Chromecast built-in)

In the Cast interaction model, the mobile phone, tablet or laptop is the sender which acts as a remote control to control the playback, and the TV is the receiver​ which receives instructions from the sender and displays the content from the receiver's Internet connection. All the user action (taps and swipes) 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 — they must work together. For example, if you press a button on a mobile device to pause the content, the TV should indicate that it is paused, while the mobile device should provide a play button to resume playback.

Be sure to review the Cast Games UX Guidelines for best practices when designing a game for Cast.

Considerations

Due to hardware and resource limitations, there are certain restrictions placed on Chromecast-enabled applications:

  • The Cast device 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 Cast interaction model, tabs, windows or popups cannot be created in the receiver app, nor can the receiver app directly accept user input, such as taps or swipes. For example, the receiver app can display a pause button, but cannot receive a user's tap — instead, the user must tap on the sender's pause button. In this way, all actions on the application must be triggered from 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.
  • 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, such as paused or playing, or error messages. User interaction should only take place on the Cast sender (phone, tablet, or Chrome browser), not the Cast receiver (TV).
  • Remember that the video 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, leaving a 10% margin from the edges of the screen for possible overscan.
  • 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 lingers on-screen and fades into the media playing experience.

Sender interface:

  • The sender supports user 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 (for example, showing the user a play button).
  • Portrait is the preferred orientation for a sender app on a mobile phone. It's the natural orientation for a phone 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 for the user to control the video on the TV. Your sender app should also work well in landscape orientation for tablets and laptops.
  • 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 Cast Design Checklist and test your Cast applications.

Brand guidelines

The following Chromecast brand guidelines are for app developers and focus on the additional requirements you must comply with to describe your app in text. If you are looking for brand guidelines for Cast devices, please fill out this form to access device-specific guidelines.

You can let others know that your app works with Chromecast built-in by using the term "Chromecast-enabled". However, please be sure that your app complies with the Cast SDK Additional Developer Terms of Service and the Design Checklist, and that your use of "Chromecast-enabled".

You can similarly use a Chromecast badge as long as your app or device complies with our badging guidelines. Google reserves the right to request that you modify or cease your use of the badge if it does not comply with the brand guidelines.

Using "Chromecast" in text

  • When describing an app (not a hardware product) as being Cast-enabled, use the phrase "Chromecast-enabled". For example: "This app is Chromecast-enabled".
  • When describing a Cast compatible third-party hardware product, use "Chromecast built-in TV", "Chromecast built-in Speaker" or just "Chromecast built-in".
  • When written in text, "Chromecast" should be capitalized, and "built-in" should be lowercased.
  • In any marketing asset that uses "Chromecast" in text or the badge/logo, you must include the following legal attribution: Chromecast is a trademark of Google Inc.
  • Do not put Chromecast in the title of the app (such as XYZ Chromecast App).

Chromecast-enabled app messaging

You can promote your app as follows:

  • "[XYZ] is a Chromecast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV."
  • "The [XYZ] app is now available for TVs with Chromecast built-in."
  • "The [XYZ] app is now available for all Chromecast products including Chromecast, Chromecast Audio, and TVs and speakers with Chromecast built-in."
  • "The [XYZ] app is Chromecast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV with Chromecast built-in."
  • "The [XYZ] app now has Chromecast support, allowing users to stream content from their phone to their TV with Chromecast built-in."

Chromecast badge

You can use the "Chromecast" badges on your website, app store listing, marketing materials and promotional materials to display compatibility with devices that use the Cast protocol.

  • Do not modify the color, proportions, spacing or any other aspect of the badge image.
  • When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Chromecast badge 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.

Badge linking

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

  • Google's list of Chromecast-enabled apps and products, currently at g.co/castapps.
  • 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.

Download Chromecast badge assets