Le récepteur lit le contenu et transmet son état à l'utilisateur. Le destinataire doit répondre immédiatement aux actions effectuées dans l'application émettrice . 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 dans l'application émettrice, le destinataire commence à lire le contenu et supprime l'icône de pause.
Exemples de commentaires reçus via l'interface utilisateur:
- En cours de lecture
- Suspendu
- Position de lecture / recherche
- Mise en mémoire tampon
Interface utilisateur du récepteur
Obligatoire
A Placez la plupart des éléments de l'interface utilisateur dans le quart inférieur de l'écran et veillez à ce qu'il corresponde à celui des autres éléments de l'expérience utilisateur.
B Ne pas présenter d'éléments en tant que commandes interactives. Par exemple, ne reproduisez pas l'UI de l'émetteur dans l'UI du récepteur.
Bonnes pratiques
- Utilisez la transition (fondu), la transparence et la nuance pour adoucir l'effet visuel.
- Tenez compte du fait que les utilisateurs veulent voir autant de contenu que possible. Les utilisateurs mettent souvent en pause le contenu pour l'examiner. Par conséquent, supprimez les interfaces 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 du récepteur inactive
Un écran inactif s'affiche sur le récepteur, lorsqu'il est connecté à un émetteur, mais qu'il ne diffuse pas de contenu.
Obligatoire
A Identifier l'application du récepteur qui est chargée
Bonnes pratiques
- Utilisez l'écran d'inactivité pour promouvoir des contenus ou des fonctionnalités de l'application émettrice.
- Modifiez le contenu toutes les 30 à 60 secondes pour en afficher davantage et éviter les brûlures d'écran.
- Déconnectez-vous de l'application réceptrice et arrêtez-la si elle est inactive pendant cinq minutes. Lorsqu'il est arrêté, l'écran d'accueil du récepteur s'affiche et permet d'éviter les brûlures d'écran.
Android
Boîte de dialogue "Caster" : connectée, mais ne caste pas
Application du récepteur chargée / inactive
iOS
Boîte de dialogue "Caster" : connectée, mais ne caste pas
Application du récepteur chargée / inactive
Chargement de l'application du récepteur
Lorsqu'un utilisateur se connecte à un récepteur, celle-ci doit d'abord se charger pour pouvoir afficher l'état inactif 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 que l'application récepteur est en cours de chargement en affichant l'icône de chargement animée
Android
Connexion de l'expéditeur
Chargement de l'application du récepteur...
iOS
Connexion de l'expéditeur
Chargement de l'application du récepteur...
Chrome
Connexion de l'expéditeur
Chargement de l'application du récepteur...
Chargement du contenu du récepteur
Une fois l'application réceptrice chargée, la diffusion du contenu vers le récepteur peut commencer.
Obligatoire
A Identifiez le contenu en cours de chargement en affichant le titre du contenu ou l'illustration
B Identifiez le chargement du contenu en affichant une icône de chargement animée
Bonnes pratiques
Lorsque vous reprenez la lecture d'un contenu mis en pause, revenez en arrière de 5 à 10 secondes pour que l'utilisateur ne manque rien pendant la transition de l'émetteur au destinataire.
Android
Chargement du contenu de l'expéditeur...
Chargement du contenu du récepteur
iOS
Chargement du contenu de l'expéditeur...
Chargement du contenu du récepteur
Chrome
Chargement du contenu de l'expéditeur...
Chargement du contenu du récepteur
Lecture sur le récepteur
Obligatoire
A Identifier le contenu en cours de lecture au début du contenu
B Identifier la position de lecture lorsque la position est ajustée
C Identifier que le destinataire recherche du contenu lorsque la position de lecture est modifiée, mais n'est pas encore en cours de lecture
Android
Ajustement de la position de lecture de l'expéditeur
Recherche de contenu du destinataire
iOS
Ajustement de la position de lecture de l'expéditeur
Recherche de contenu du destinataire
Chrome
Ajustement de la position de lecture de l'expéditeur
Recherche de contenu du destinataire
Destinataire en veille
Obligatoire
A Identifiez le contenu mis en pause en affichant une icône et la position de lecture en pause
B Identifiez le contenu en pause en affichant le titre ou l'illustration du contenu
C Identifiez l'application réceptrice chargée en affichant le logo de l'application.
Bonnes pratiques
- Les utilisateurs mettent souvent en pause le contenu pour l'examiner. Par conséquent, l'interface utilisateur inutile s'efface lorsqu'elle est mise 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 l'invite explicitement à la lancer, par exemple en la reprise ou en ignorant un élément de la file d'attente.
- Déconnectez-vous de l'application réceptrice et arrêtez-la si elle est inactive pendant 20 minutes. Lorsqu'il est arrêté, l'écran d'accueil du récepteur s'affiche et permet d'éviter les brûlures d'écran. Stockez l'emplacement mis en pause afin que l'utilisateur puisse reprendre la lecture à partir de ce moment-là.
Android
Expéditeur mis en pause
Contenu du récepteur mis en veille
Expéditeur mis en pause
Destinataire en pause après 5 secondes
iOS
Expéditeur mis en pause
Contenu du récepteur mis en veille
Expéditeur mis en pause
Destinataire en pause après 5 secondes
Chrome
Expéditeur mis en pause
Contenu du récepteur mis en veille
Expéditeur mis en pause
Destinataire en pause après 5 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 décalage de lecture.
Obligatoire
A Identifiez que le récepteur est en train d'effectuer une mise en mémoire tampon après quelques secondes en affichant une icône de chargement. Le fait d'attendre quelques secondes pour indiquer que la mise en mémoire tampon empêche l'icône de chargement de la mise en mémoire tampon d'apparaître trop fréquemment dans des conditions de réseau incorrectes
Bonnes pratiques
Identifiez le contenu mis en mémoire tampon si celle-ci se poursuit après cinq secondes.
Android
L'expéditeur indique que le récepteur est en mémoire tampon
Mise en mémoire tampon du contenu du récepteur
iOS
L'expéditeur indique que le récepteur est en mémoire tampon
Mise en mémoire tampon du contenu du récepteur
Chrome
L'expéditeur indique que le récepteur est en mémoire tampon
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 les autres contenus ou fonctionnalités disponibles dans l'application émettrice.
Obligatoire
A Identifiez l'application réceptrice chargée ou inactive en affichant son logo
Bonnes pratiques
- Utilisez l'écran de veille après la lecture pour recommander des contenus ou des fonctionnalités à partir de l'application émettrice, en fonction du contenu diffusé.
- Modifiez le contenu de l'écran de veille toutes les 30 à 60 secondes pour éviter les brûlures d'écran
- Déconnectez-vous de l'application réceptrice et arrêtez-la si elle est inactive pendant cinq minutes. Lorsqu'il est arrêté, l'écran d'accueil du récepteur s'affiche et permet d'éviter les brûlures d'écran.
Android
Application de l'expéditeur inactive
Application du récepteur inactive
Expéditeur déconnecté
Caster l'écran d'accueil
iOS
Application de l'expéditeur inactive
Application du récepteur inactive
Expéditeur déconnecté
Caster l'écran d'accueil
Chrome
Application de l'expéditeur inactive
Application du récepteur inactive
Expéditeur déconnecté
Caster l'écran d'accueil
Les images utilisées dans ce guide de conception sont fournies par la Blender Foundation. Elles sont partagées sous licence Creative Commons ou droits d'auteur.
- Le rêve d'éléphant: (c) droits d'auteur 2006, Blender Foundation / Pays-Bas 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