Appli de réception non tactile

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 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

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 émettrice inactive

Application réceptrice inactive

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

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