Non-Touch Receiver App

The receiver plays content and reflects its state to the user. The receiver must respond immediately to actions in the sender app . For example, when content is paused on the receiver, it displays a pause icon and when the user presses play on the sender app, the receiver starts playing the content and removes the pause icon.

Examples of receiver UI feedback:

  • Playing
  • Paused
  • Playback position / seeking
  • Buffering

  Receiver UI

Required
  A   Place most UI elements within the lower 1/4 of the screen and keep it consistent with your other UX's.
  B   Do not present elements as interactive controls. For example, do not reproduce the sender UI on the receiver UI.

Best practices

  • Use transition (fade), transparency, and nuance to soften the visual effect.
  • Consider the fact that users want to see as much of the content as possible. Users will often pause content to examine it, so fade away unnecessary UI when possible.

Android

Sender UI

Receiver UI

iOS

Sender UI

Receiver UI

Chrome

Sender UI

Receiver UI

 

  Receiver app idle

An idle screen is displayed on the receiver, when the receiver is connected to a sender but not casting.

Required
  A   Identify which receiver app is loaded

Best practices

  • Use the idle screen to promote content or features from the sender app.
  • Change the content every 30-60 seconds to display more and prevent screen burn.
  • Disconnect from the receiver app and stop it from running if idle for 5 minutes or less. When stopped, the receiver home screen appears and will help prevent screen burn.

Android

Cast dialog, connected but not casting

Receiver app loaded / idle

iOS

Cast dialog, connected but not casting

Receiver app loaded / idle

 

  Receiver app loading

When a user connects to a receiver, the receiver app must first load before it can display the app idle state or begin playing content.

Required
  A   Identify which receiver app is loading by displaying the app logo
  B   Identify that the receiver app is loading by displaying the animated loading spinner

Android

Sender connecting

Receiver app loading

iOS

Sender connecting

Receiver app loading

Chrome

Sender connecting

Receiver app loading

 

  Receiver content loading

Once the receiver app has loaded, content can begin streaming to the receiver.

Required
  A   Identify what content is being loaded by displaying the content title or artwork
  B   Identify that content is loading by displaying an animated loading spinner

Best practices
When resuming paused content, rewind playback 5-10 seconds so the viewer doesn't miss anything during the transition from sender to receiver.

Android

Sender content loading

Receiver content loading

iOS

Sender content loading

Receiver content loading

Chrome

Sender content loading

Receiver content loading

 

  Receiver playback

Required
  A   Identify what is playing when content starts
  B   Identify playback position when position is adjusted
  C   Identify that the receiver is seeking content when the playback position is changed, but not yet playing

Android

Sender adjusting play position

Receiver content seeking

iOS

Sender adjusting play position

Receiver content seeking

Chrome

Sender adjusting play position

Receiver content seeking

 

  Receiver paused

Required
  A   Identify that content is paused by displaying a paused icon and playback position
  B   Identify what content is paused by displaying content title or artwork
  C   Identify which receiver app is loaded by displaying an app logo

Best practices

  • Users will often pause content to examine it, so have unnecessary UI fade away when paused for a few seconds by displaying a pause icon.
  • Disconnect from the receiver app and stop it from running if idle for 20 minutes or less. When stopped, the receiver home screen appears and will help prevent screen burn. Store the paused location so that the user can resume playback from that point at a later time.

Android

Sender paused

Receiver content paused

Sender paused

Receiver paused, after 5 seconds

iOS

Sender paused

Receiver content paused

Sender paused

Receiver paused, after 5 seconds

Chrome

Sender paused

Receiver content paused

Sender paused

Receiver paused, after 5 seconds

 

  Receiver buffering

Buffering on the receiver happens when network latency or other factors cause a delay in playback.

Required
  A   Identify that the receiver is buffering after a few seconds by displaying a buffering spinner. Waiting a few seconds to indicate buffering will prevent the buffering spinner from appearing too frequently under bad network conditions

Best practices
Identify what content is buffering if buffering continues after 5 seconds.

Android

Sender indicates receiver buffering

Receiver content buffering

iOS

Sender indicates receiver buffering

Receiver content buffering

Chrome

Sender indicates receiver buffering

Receiver content buffering

 

  Receiver stops cast

When playback stops or times out, the receiver UI should promote other content or features available in the sender app.

Required
  A   Identify which receiver app is loaded or idle by displaying an app logo

Best practices

  • Use the idle screen after playback to recommend content or features from the sender app, based on what was just cast
  • Change the idle screen content every 30-60 seconds to prevent screen burn
  • Disconnect from the receiver app and stop it from running if idle for 5 minutes or less. When stopped, the receiver home screen appears and will help prevent screen burn.

Android

Sender app idle

Receiver app idle

Sender disconnected

Cast home screen

iOS

Sender app idle

Receiver app idle

Sender disconnected

Cast home screen

Chrome

Sender app idle

Receiver app idle

Sender disconnected

Cast home screen

 

 

Images used in this design guide are courtesy of the Blender Foundation, shared under copyright or Creative Commons license.

  • Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
  • Sintel: (c) copyright Blender Foundation | www.sintel.org
  • Tears of Steel: (CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org