Click here to see your recently viewed pages and most viewed pages.
Hide

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 a 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 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 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 for app developers outline the additional requirements you must comply with when using ‘Google Cast’ in text and/or the Google Cast badge. If you are looking for Google Cast Brand Guidelines for devices, please fill out this form to access device-specific guidelines.

You can let others know that your app works with Google Cast by using “Google Cast-enabled” in text and/or the “Google Cast” badge. You do not need pre-approval to use this badge. However, please be sure that your app complies with the Google Cast SDK Additional Developer Terms of Service and the Design Checklist, and that your use of “Google Cast-enabled” and the “Google Cast” badge complies with our branding 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.

Google Cast in text

  • When describing an app (not product) as being Google Cast compatible, use the phrase “Google Cast-enabled” (for example, “This app is Google Cast-enabled”).
  • When describing a Google Cast compatible product (e.g., Speakers or TV) use “Google Cast built-in” or just Google Cast (e.g., “Google Cast Speakers”)
  • When written in text, “Google Cast” should be capitalized.
  • Always include a TM symbol on the first or most prominent instance of Google Cast™ in text. After the first instance, it is no longer needed.
  • In any marketing asset that uses “Google Cast” in text or the badge, must include the following legal attribution: Google Cast and the Google Cast badge are trademarks of Google Inc.
  • Do not put Google Cast in the title of the app (i.e. XYZ Google Cast App).

Google Cast messaging

[Content Partner App] is a Google Cast-enabled app so you can cast your favorite entertainment from your mobile device to your TV.

Google Cast badge

The “Google Cast” 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 ingredient technologies (e.g., Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast 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.

Linking

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

  • Google’s list of Google Cast-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.

Google Cast badge assets