Le récepteur lit le contenu et reflète son état à l'utilisateur. Le récepteur doit répondre immédiatement aux actions effectuées dans l'application de l'expéditeur . Par exemple, lorsque le contenu est mis en pause sur le récepteur, une icône de pause s'affiche. Lorsque l'utilisateur appuie sur le bouton de lecture de l'application émettrice, le récepteur commence à lire le contenu et supprime l'icône de pause.
Exemples de commentaires sur l'UI du récepteur :
- En cours de lecture
- Suspendue
- Position de lecture / Recherche
- Mise en mémoire tampon
UI du récepteur
Obligatoire
A Placez la plupart des éléments d'UI dans le quart inférieur de l'écran et assurez-vous que cela reste cohérent avec vos autres UX.
B Ne présentez pas les éléments comme des commandes interactives. Par exemple, ne reproduisez pas l'UI de l'expéditeur sur l'UI du récepteur.
Bonnes pratiques
- Utilisez la transition (fondu), la transparence et la nuance pour adoucir l'effet visuel.
- N'oubliez pas que les utilisateurs souhaitent voir le plus de contenu possible. Les utilisateurs mettent souvent en pause le contenu pour l'examiner. Faites donc disparaître les éléments d'interface utilisateur inutiles lorsque cela est possible.
Android
UI de l'expéditeur

UI du récepteur

iOS
UI de l'expéditeur

UI du récepteur

Chrome
UI de l'expéditeur

UI du récepteur

Application réceptrice inactive
Un écran d'inactivité s'affiche sur le récepteur lorsqu'il est connecté à un expéditeur, mais qu'il ne diffuse pas de contenu.
Obligatoire
A Identifiez l'application réceptrice chargée.
Bonnes pratiques
- Utilisez l'écran de veille pour promouvoir du contenu ou des fonctionnalités de l'application émettrice.
- Changez le contenu toutes les 30 à 60 secondes pour afficher plus d'informations et éviter les brûlures d'écran.
- Déconnectez-vous de l'application du récepteur et arrêtez-la si elle est inactive pendant cinq minutes. Lorsque la diffusion est arrêtée, l'écran d'accueil du récepteur s'affiche, ce qui permet d'éviter le marquage de l'écran.
Android
Boîte de dialogue Cast, connecté mais pas en train de caster

Application réceptrice chargée / inactive

iOS
Boîte de dialogue Cast, connecté mais pas en train de caster

Application réceptrice chargée / inactive

Chargement de l'application pour le récepteur
Lorsqu'un utilisateur se connecte à un récepteur, l'application du récepteur doit d'abord se charger avant de pouvoir afficher l'état d'inactivité de l'application ou commencer à lire du contenu.
Obligatoire
A Identifiez l'application réceptrice en cours de chargement en affichant le logo de l'application.
B Identifiez l'application réceptrice en cours de chargement en affichant le spinner de chargement animé.
Android
L'expéditeur se connecte

Chargement de l'application réceptrice

iOS
L'expéditeur se connecte

Chargement de l'application réceptrice

Chrome
L'expéditeur se connecte

Chargement de l'application réceptrice

Chargement du contenu du récepteur
Une fois l'application réceptrice chargée, le contenu peut commencer à être diffusé sur le récepteur.
Obligatoire
A Identifiez le contenu en cours de chargement en affichant le titre ou l'illustration du contenu
B Indiquez que le contenu est en cours de chargement en affichant un indicateur de chargement animé
Bonnes pratiques
Lorsque vous reprenez la lecture d'un contenu mis en pause, revenez en arrière de 5 à 10 secondes pour que le spectateur ne manque rien
lors du transfert de l'expéditeur au récepteur.
Android
Chargement du contenu de l'expéditeur

Chargement du contenu sur le récepteur

iOS
Chargement du contenu de l'expéditeur

Chargement du contenu sur le récepteur

Chrome
Chargement du contenu de l'expéditeur

Chargement du contenu sur le récepteur

Lecture sur le récepteur
Obligatoire
A Identifier le contenu en cours de lecture au démarrage
B Identifier la position de lecture lorsqu'elle est ajustée
C Identifier que le récepteur recherche du contenu lorsque la position de lecture est modifiée, mais que la lecture n'a pas encore commencé
Android
L'expéditeur ajuste la position de lecture

Recherche de contenu par le récepteur

iOS
L'expéditeur ajuste la position de lecture

Recherche de contenu par le récepteur

Chrome
L'expéditeur ajuste la position de lecture

Recherche de contenu par le récepteur

Réception suspendue
Obligatoire
A Indiquez que le contenu est en pause en affichant une icône de pause et la position de lecture.
B Indiquez le contenu en pause en affichant le titre ou la pochette du contenu.
C Indiquez l'application réceptrice chargée en affichant le logo de l'application.
Bonnes pratiques
- Les utilisateurs mettent souvent le contenu en pause pour l'examiner. Faites donc disparaître les éléments d'interface utilisateur inutiles lorsque le contenu est en pause pendant quelques secondes en affichant une icône de pause.
- L'application réceptrice ne doit pas poursuivre la lecture du contenu, sauf si l'utilisateur en fait explicitement la demande (par exemple, en demandant de reprendre la lecture ou de passer à l'élément suivant de la file d'attente).
- Déconnectez-vous de l'application réceptrice et arrêtez-la si elle est inactive pendant 20 minutes. Lorsque la diffusion est arrêtée, l'écran d'accueil du récepteur s'affiche, ce qui permet d'éviter le marquage de l'écran. Stockez la position de lecture mise en pause afin que l'utilisateur puisse la reprendre à ce moment-là ultérieurement.
Android
Mise en veille par l'expéditeur

Contenu mis en pause sur le récepteur

Mise en veille par l'expéditeur

Le destinataire a mis en pause la diffusion après cinq secondes.

iOS
Mise en veille par l'expéditeur

Contenu mis en pause sur le récepteur

Mise en veille par l'expéditeur

Le destinataire a mis en pause la diffusion après cinq secondes.

Chrome
Mise en veille par l'expéditeur

Contenu mis en pause sur le récepteur

Mise en veille par l'expéditeur

Le destinataire a mis en pause la diffusion après cinq secondes.

Mise en mémoire tampon du récepteur
La mise en mémoire tampon sur le récepteur se produit lorsque la latence du réseau ou d'autres facteurs entraînent un retard dans la lecture.
Obligatoire
A Identifiez que le récepteur est en mémoire tampon après quelques secondes en affichant un indicateur de mise en mémoire tampon. Attendre quelques secondes pour indiquer la mise en mémoire tampon empêchera le spinner de mise en mémoire tampon d'apparaître trop fréquemment en cas de mauvaises conditions réseau.
Bonnes pratiques
Identifiez le contenu qui est mis en mémoire tampon si la mise en mémoire tampon se poursuit au-delà de cinq secondes.
Android
L'expéditeur indique la mise en mémoire tampon du récepteur

Mise en mémoire tampon du contenu du récepteur

iOS
L'expéditeur indique la mise en mémoire tampon du récepteur

Mise en mémoire tampon du contenu du récepteur

Chrome
L'expéditeur indique la mise en mémoire tampon du récepteur

Mise en mémoire tampon du contenu du récepteur

Le récepteur arrête la diffusion
Lorsque la lecture s'arrête ou expire, l'UI du récepteur doit promouvoir d'autres contenus ou fonctionnalités disponibles dans l'application émettrice.
Obligatoire
A identifie l'application réceptrice chargée ou inactive en affichant le logo de l'application.
Bonnes pratiques
- Utilisez l'écran d'inactivité après la lecture pour recommander du contenu ou des fonctionnalités de l'application émettrice, en fonction de ce qui vient d'être casté.
- Changez le contenu de l'écran inactif toutes les 30 à 60 secondes pour éviter le marquage de l'écran.
- Déconnectez-vous de l'application du récepteur et arrêtez-la si elle est inactive pendant cinq minutes. Lorsque la diffusion est arrêtée, l'écran d'accueil du récepteur s'affiche, ce qui permet d'éviter le marquage de l'écran.
Android
Application émettrice inactive

Application réceptrice inactive

L'expéditeur s'est déconnecté

Caster l'écran d'accueil

iOS
Application émettrice inactive

Application réceptrice inactive

L'expéditeur s'est déconnecté

Caster l'écran d'accueil

Chrome
Application émettrice inactive

Application réceptrice inactive

L'expéditeur s'est déconnecté

Caster l'écran d'accueil

Les images utilisées dans ce guide de conception sont fournies par la Blender Foundation et partagées sous licence de droits d'auteur ou Creative Commons.
- 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