Expérience utilisateur avec la plate-forme Chromecast

Chromecast permet aux applications Web Android, iOS et Chrome de "diffuser" des contenus, tels que des vidéos, de l'audio et du partage d'écran (duplication), sur des appareils compatibles Cast tels que:

  • Chromecast
  • Téléviseur avec Chromecast Intégré (également appelé "Téléviseur avec Chromecast Intégré")
  • Enceintes avec Chromecast Intégré (également appelées "Enceintes avec Chromecast Intégré")
  • Écrans connectés (écran LCD tactile portable utilisé comme client léger)
  • Tablettes Android

Dans le modèle d'interaction Cast, le téléphone mobile, la tablette ou l'ordinateur portable sont l'expéditeur, qui sert de télécommande pour contrôler la lecture. Le téléviseur, l'écran ou la tablette sur sa station d'accueil est le récepteur qui reçoit les instructions de l'émetteur et affiche le contenu via sa connexion Internet. Toutes les actions de l'utilisateur (tapotements et balayages) peuvent avoir lieu à la fois sur l'appareil émetteur ou sur le récepteur Web.

La diffusion repose sur la coordination entre plusieurs écrans (l'UI de l'émetteur et celle du destinataire), qui doivent fonctionner ensemble. Par exemple, si vous appuyez sur le bouton d'un appareil mobile pour mettre en pause le contenu, le téléviseur doit indiquer qu'il est en pause, tandis que l'appareil mobile doit fournir un bouton de lecture pour reprendre la lecture.

Points à prendre en compte

En raison de limites liées au matériel et aux ressources, certaines restrictions s'appliquent aux applications compatibles Chromecast:

  • L'appareil Cast est un appareil à faible consommation d'énergie, soumis à des limites de mémoire, de processeur et de GPU. L'application Web Receiver doit donc être aussi légère que possible.
  • Pour les modèles d'interaction avec Chromecast et Chromecast Intégré, vous pouvez créer des onglets, des fenêtres ou des pop-ups à la fois dans l'application Web Receiver ou l'application émettrice. Ils peuvent également accepter directement les entrées utilisateur, comme les appuis ou les balayages. Par exemple, l'application Web Receiver sur une tablette ou un écran sur sa station d'accueil peut afficher un bouton de pause et recevoir le geste d'un utilisateur. De cette manière, toutes les actions effectuées sur l'application doivent être déclenchées depuis une application réceptrice Web ou une application émettrice.
  • Les écrans connectés prennent en charge les entrées utilisateur via une application émettrice ou par commande tactile dans l'interface utilisateur.
  • Web Receiver est un navigateur Chrome optimisé pour la lecture des vidéos. Par conséquent, WebGL et Chrome Native Client (NaCL) ne sont pas compatibles pour le moment, tout comme les extensions Chrome.
  • Cast permet de lire un seul flux multimédia simultané dans les balises <audio> et <video>, ou de prendre en charge plusieurs pistes audio à l'aide de l'API WebAudio. Un seul élément vidéo peut être actif à la fois dans le DOM. De plus, la composition vidéo, la manipulation, les transformations, les rotations ou le zoom ne sont pas pris en charge.

Principes généraux de conception

Tenez compte des points suivants lorsque vous développez votre interface utilisateur.

Interface Web du récepteur:

  • Web Receiver peut comporter à la fois des éléments interactifs et d'information pour décrire l'état de l'application, comme la mise en pause ou la lecture, ou les messages d'erreur. L'interaction de l'utilisateur peut avoir lieu sur l'émetteur Cast (téléphone, tablette ou navigateur Chrome) ou sur le récepteur Web (téléviseur, écrans ou tablettes).
  • N'oubliez pas que l'action vidéo se produit au milieu de l'écran du téléviseur et que les éléments de votre interface utilisateur ne doivent pas interférer avec la présentation. Placez les éléments d'interface utilisateur dans le tiers inférieur de l'écran du récepteur Web, en laissant une marge de 10 % en partant des bords de l'écran pour un éventuel surbalayage.
  • Dans la mesure du possible, les transitions d'un état à l'autre doivent être fluides et avoir un rendu cinématographique. Plutôt que de passer brusquement d'un état à l'autre, utilisez des transitions telles que le fondu à l'ouverture et le fondu à la fermeture. Par exemple, l'état de chargement du contenu persiste à l'écran et s'efface en fondu dans l'expérience de lecture du contenu multimédia.

Interface expéditeur:

  • L'expéditeur accepte les actions de l'utilisateur, et Web Receiver affiche les informations d'état. Par exemple, si le contenu est mis en pause, le téléviseur doit l'indiquer, tandis que l'appareil mobile indique qu'il est prêt à commencer la lecture (en montrant à l'utilisateur un bouton de lecture, par exemple).
  • Sur Internet, la vitesse est primordiale. Les utilisateurs doivent pouvoir localiser rapidement la commande de diffusion et voir le contenu se lancer immédiatement sur le grand écran. Lors du chargement du contenu, affichez des indicateurs de chargement animés et utilisez des transitions pour accélérer le chargement.

Le moyen le plus simple de vous assurer que votre application Cast respecte ces principes consiste à examiner votre interface utilisateur à l'aide de la checklist de conception Cast et à tester vos applications Cast.

Consignes relatives à la marque

Les consignes suivantes relatives à la marque Chromecast s'adressent aux développeurs d'applications. Elles mettent en avant les exigences supplémentaires que vous devez respecter pour décrire votre application sous forme de texte. Pour connaître les consignes relatives à la marque concernant les appareils Cast, consultez le portail marketing pour les partenaires. Vous pouvez indiquer aux autres utilisateurs que votre application fonctionne avec Chromecast Intégré en utilisant le terme "compatible Chromecast". Assurez-vous toutefois que votre application respecte les Conditions d'utilisation supplémentaires du SDK Cast pour les développeurs et la checklist de conception, et que votre utilisation de la compatibilité Chromecast est conforme à nos consignes relatives à la marque.

Vous pouvez également utiliser un badge Chromecast à condition que votre application ou votre appareil respectent nos consignes concernant les badges. Google se réserve le droit de vous demander de modifier ou de cesser d'utiliser le badge si celui-ci ne respecte pas les consignes relatives à la marque.

Utilisation de "Chromecast" dans le texte

  • Lorsque vous décrivez qu'une application (et non un produit matériel) est compatible Cast, utilisez l'expression "compatible Chromecast". Par exemple: "Cette application est compatible Chromecast".
  • Lorsque vous décrivez un produit tiers compatible avec Cast, utilisez "Téléviseur avec Chromecast Intégré", "Enceinte avec Chromecast Intégré" ou simplement "Chromecast Intégré".
  • Lorsqu'il est écrit, "Chromecast" doit commencer par une majuscule, tandis que "intégré" doit être écrit en minuscules.
  • Tout support marketing qui utilise le terme "Chromecast" dans le texte ou dans le badge/logo, vous devez inclure l'attribution légale suivante: Chromecast est une marque de Google LLC.
  • Ne placez pas Chromecast dans le titre de l'application (par exemple, "Application Chromecast XYZ").

Messages des applications compatibles Chromecast

Pour promouvoir votre application, procédez comme suit:

  • "XYZ est une application compatible Chromecast qui vous permet de diffuser en streaming vos divertissements préférés sur votre téléviseur depuis votre appareil mobile."
  • "L'application XYZ est désormais disponible sur les téléviseurs avec Chromecast Intégré."
  • "L'application XYZ est désormais disponible pour tous les produits Chromecast, y compris Chromecast, Chromecast Audio, ainsi que les téléviseurs et les enceintes avec Chromecast Intégré."
  • "L'application XYZ est compatible Chromecast et vous permet de profiter de vos émissions, films, musiques et jeux préférés sur votre téléviseur avec Chromecast Intégré."
  • "L'application XYZ est désormais compatible avec Chromecast, ce qui permet aux utilisateurs de diffuser du contenu en streaming depuis leur téléphone sur leur téléviseur avec Chromecast Intégré."

Badge Chromecast

Vous pouvez utiliser les badges "Chromecast" sur votre site Web, votre fiche sur les plates-formes de téléchargement d'applications, vos supports marketing et vos supports promotionnels afin d'afficher la compatibilité avec les appareils qui utilisent le protocole Cast.

  • Ne modifiez pas la couleur, les proportions, l'espacement ni aucun autre aspect de l'image du badge.
  • Lorsqu'il est utilisé à côté des logos d'autres technologies utilisées (par exemple, Bluetooth, Spotify Connect, AirPlay, etc.), le badge Chromecast doit être de taille égale ou supérieure.
  • Ne faites pas du badge l'élément principal de votre page.
  • Maintenez une certaine distance entre le badge et les autres logos et icônes de votre page.
  • Sur un arrière-plan blanc, clair ou moyen, utilisez un badge noir.
  • Sur un arrière-plan noir ou foncé, utilisez le badge blanc.
  • N'utilisez pas le badge sur une page qui contient ou affiche du contenu réservé aux adultes, encourage les jeux d'argent et de hasard, encourage la violence, contient une incitation à la haine, implique la vente de tabac ou d'alcool à des personnes de moins de 21 ans, enfreint d'autres lois ou réglementations en vigueur ou est autrement répréhensible.

Association du badge

Lorsqu'il est utilisé en ligne, le badge Chromecast doit être associé à l'un des liens suivants:

  • Liste des applications et produits compatibles Chromecast de Google, actuellement disponible à l'adresse g.co/castapps.
  • Une liste des produits que vous avez publiés.
  • Une page d'informations détaillées sur un produit spécifique que vous avez publiée
  • Une liste des applications que vous avez publiées
  • Une page d'informations spécifique de l'application que vous avez publiée sur Google Play ou sur l'App Store d'Apple

Télécharger les éléments du badge Chromecast

Le bundle à télécharger comprend les formats Portable Network Graphics (.png), Adobe Illustrator (.ai) et Enapsulated Postscript (.eps).

Aperçu des badges Chromecast

Logo bleu et texte blanc sur fond noir
Logo blanc et texte blanc sur fond noir
Logo bleu et texte gris sur fond blanc