Designing Amazon Fling UX
Amazon Fling allows you to send media sources from your mobile application to the Amazon Fire TV. Your app on the mobile device is the controller, while the app that plays your content on the Fire TV is the player.
This document describes the UX design guidelines and recommendations for controller applications.
User Interface Design Guidelines
The goals of these guidelines are to provide a consistent user experience across all applications and platforms using Amazon Fling and improve discoverability of the operation.
Controller app:
- The Amazon Fling button should be easily discoverable and accessible to the user.
- The Amazon Fling button should reflect the state of discovery of and connection to the Amazon Fire TVs - these states are as follows:
- No Fire TVs available in the network
- Fire TVs discovered
- Connected to a Fire TV
- Interface should show the playback state and basic remote controls. The recommended playback control icons should be used to render the control buttons
- Please refer to the recommended icon archive.
Controller App Operation
For your controller app to work, the mobile device and the Amazon Fire TV must be on the same Wi-Fi network. The mobile application is responsible to show whether there are Fire TVs available on the network. If there are Fire TVs available on the network, your application allows the user to pick the desired Fire TV from the list of available Fire TVs. Once the user selects the Fire TV to play the media on, your app retrieves the current state of that Fire TV and presents it to the user. At this point, the user is able to start playing back on this Fire TV and control the playback on the Fire TV.
The screenshots below are from the iOS FlingSample application in our SDK, and are as close to the Android FlingSample app as possible.
Amazon Fire TV Discovery State Visualization
| No Fire TV Discovered | At Least 1 Fire TV Discovered | Connected to a Fire TV |
|---|---|---|
|
|
|
The table above shows how the Amazon Fling button should be rendered for different states of the Amazon Fire TV discovery process. The table below references icons that are available in the recommended icon archive.
| Discovery State | Icon Representation |
|---|---|
| No Fire TVs discovered | No icon |
| At least one Fire TV discovered | 
|
| Connected to the Fire TV | 
|
Primary Use Cases
This functionality supports the following primary use cases:
- Connect to Amazon Fire TV and then start playback
- Continue playback on the Fire TV
- Control playback on the Fire TV
Connect to Amazon Fire TV and Start Playback
In this use case, the controller first connects to the Fire TV and then sends the media URL to the Fire TV to render.
Continue Local Playback on Amazon Fire TV
In this sequence, the controller streams the media and plays it locally. During the playback, the user picks a Fire TV to send the media URL to. The controller should play on one device only (e.g. show the video thumbnail on the mobile device) and indicate that remote playback is in progress by showing the connected Amazon Fling button.
Control Playback on the Amazon Fire TV
Your controller app may follow the shown UI guidelines for visualizing playback control. The icons are available in the recommended icon archive.
Big Buck Bunny is copyright 2008, Blender Foundation / www.bigbuckbunny.org and is licensed under the Creative Commons Attribution License 3.0. Elephants Dream is copyright 2006, Blender Foundation/ Netherlands Media Art Institute/www.elephantsdream.org and is licensed under the Creative Commons Attribution License 2.5.
Last updated: Jan 01, 2017