App receptor sem toque

O receptor reproduz o conteúdo e reflete o estado dele para o usuário. O destinatário precisa responder imediatamente às ações no app remetente . Por exemplo, quando o conteúdo é pausado no receptor, ele exibe um ícone de pausa e, quando o usuário pressiona "Reproduzir" no app remetente, o receptor começa a reproduzir o conteúdo e remove o ícone de pausa.

Exemplos de feedback da IU do receptor:

  • Em exibição
  • Pausado
  • Posição da reprodução / busca
  • Armazenando em buffer

IU de receptor

Obrigatório
A Coloque a maioria dos elementos de IU na metade inferior da tela e mantenha a consistência com as outras UX.
B não apresente elementos como controles interativos. Por exemplo, não reproduza a IU do remetente na IU do receptor.

Práticas recomendadas

  • Use transição (esmaecimento), transparência e nuances para suavizar o efeito visual.
  • Considere o fato de que os usuários querem ver o máximo de conteúdo possível. Os usuários geralmente pausam o conteúdo para analisá-lo, então esmaeça a IU desnecessária sempre que possível.

Android

IU do remetente

IU do receptor

iOS

IU do remetente

IU do receptor

Chrome

IU do remetente

IU do receptor

 

App receptor inativo

Uma tela inativa aparece no receptor quando ele está conectado a um remetente, mas não em transmissão.

Obrigatório
A Identificar qual app receptor está carregado

Práticas recomendadas

  • Use a tela inativa para promover conteúdo ou recursos do app remetente.
  • Mude o conteúdo a cada 30 a 60 segundos para mostrar mais e evitar que a tela seja queimada.
  • Desconecte-se do app receptor e interrompa sua execução se ele ficar inativo por cinco minutos ou menos. Quando interrompida, a tela inicial do receptor aparece e ajuda a prevenir a queima de tela.

Android

Caixa de diálogo de transmissão, conectada, mas não transmitida

App receptor carregado / inativo

iOS

Caixa de diálogo de transmissão, conectada, mas não transmitida

App receptor carregado / inativo

 

Carregamento de app receptor

Quando um usuário se conecta a um receptor, o app receptor precisa ser carregado antes de exibir o estado inativo ou começar a reproduzir conteúdo.

Obrigatório
A Identificar qual app receptor está carregando exibindo o logotipo do app
B Identificar se o app receptor está carregando exibindo o ícone de carregamento animado

Android

Conexão do remetente

Carregamento do app receptor

iOS

Conexão do remetente

Carregamento do app receptor

Chrome

Conexão do remetente

Carregamento do app receptor

 

Carregamento de conteúdo no receptor

Depois que o app receptor for carregado, o conteúdo poderá começar a ser transmitido para ele.

Obrigatório
A Identifique o conteúdo que está sendo carregado mostrando o título ou a arte do conteúdo
B identifique o conteúdo ao carregar exibindo um ícone de carregamento animado

Práticas recomendadas
Ao retomar o conteúdo pausado, retroceda de 5 a 10 segundos para que o espectador não perca nada durante a transição do remetente para o receptor.

Android

Carregando o conteúdo do remetente

Carregando conteúdo do destinatário

iOS

Carregando o conteúdo do remetente

Carregando conteúdo do destinatário

Chrome

Carregando o conteúdo do remetente

Carregando conteúdo do destinatário

 

Reprodução de receptor

Obrigatório
A Identificar o que está tocando quando o conteúdo começa
B Identificar a posição da reprodução quando a posição é ajustada
C Identificar se o receptor está buscando conteúdo quando a posição da reprodução é alterada, mas ainda não está tocando

Android

Remetente ajustando a posição de reprodução

Busca de conteúdo do receptor

iOS

Remetente ajustando a posição de reprodução

Busca de conteúdo do receptor

Chrome

Remetente ajustando a posição de reprodução

Busca de conteúdo do receptor

 

Receptor pausado

Obrigatório
A Identificar o conteúdo pausado exibindo um ícone pausado e uma posição de reprodução
B Identificar qual conteúdo é pausado ao exibir o título ou a arte do conteúdo
C Identificar o app receptor que é carregado exibindo um logotipo do app

Práticas recomendadas

  • Os usuários geralmente pausam o conteúdo para analisá-lo, portanto, faça com que a IU desapareça de forma desnecessária quando for pausada por alguns segundos exibindo um ícone de pausa.
  • Desconecte-se do app receptor e interrompa sua execução em caso de inatividade por 20 minutos. Quando interrompida, a tela inicial do receptor aparece e ajuda a prevenir a queima de tela. Armazene o local pausado para que o usuário possa retomar a reprodução desse ponto posteriormente.

Android

Remetente pausado

Conteúdo do destinatário pausado

Remetente pausado

Receptor pausado, após cinco segundos

iOS

Remetente pausado

Conteúdo do destinatário pausado

Remetente pausado

Receptor pausado, após cinco segundos

Chrome

Remetente pausado

Conteúdo do destinatário pausado

Remetente pausado

Receptor pausado, após cinco segundos

 

Armazenamento em buffer do receptor

O armazenamento em buffer no receptor acontece quando a latência da rede ou outros fatores causam um atraso na reprodução.

Obrigatório
A Identificar se o receptor está sendo armazenado em buffer após alguns segundos exibindo um ícone de carregamento do buffer. Esperar alguns segundos para indicar o armazenamento em buffer impedirá que o ícone de carregamento do buffer apareça com muita frequência em condições ruins de rede.

Práticas recomendadas
Identifique qual conteúdo está sendo armazenado em buffer se o armazenamento em buffer continuar após cinco segundos.

Android

O remetente indica o armazenamento em buffer do receptor

Buffer de conteúdo do receptor

iOS

O remetente indica o armazenamento em buffer do receptor

Buffer de conteúdo do receptor

Chrome

O remetente indica o armazenamento em buffer do receptor

Buffer de conteúdo do receptor

 

O destinatário interrompe a transmissão

Quando a reprodução é interrompida ou expira, a IU do receptor precisa promover outros conteúdos ou recursos disponíveis no app remetente.

Obrigatório
A Identificar qual app receptor está carregado ou inativo mostrando um logotipo do app

Práticas recomendadas

  • Use a tela inativa após a reprodução para recomendar conteúdo ou recursos do app remetente com base no que foi transmitido.
  • Mude o conteúdo da tela inativa a cada 30 a 60 segundos para evitar que ela queime
  • Desconecte-se do app receptor e interrompa sua execução se ele ficar inativo por cinco minutos. Quando interrompida, a tela inicial do receptor aparece e ajuda a prevenir a queima de tela.

Android

App de remetente inativo

App do receptor inativo

Remetente desconectado

Transmitir tela inicial

iOS

App de remetente inativo

App do receptor inativo

Remetente desconectado

Transmitir tela inicial

Chrome

App de remetente inativo

App do receptor inativo

Remetente desconectado

Transmitir tela inicial

 

 

As imagens usadas neste guia de design são cortesia da Blender Foundation, compartilhada sob as licenças de direitos autorais ou Creative Commons.

  • Elephant's Dream: (c) direitos autorais de 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
  • Sintel: (c) copyright Blender Foundation | www.sintel.org
  • Lágrimas de aço: (CC) Fundação Blender | mango.blender.org
  • Big Buck Bunny: (c) direitos autorais 2008, Blender Foundation / www.bigbuckbunny.org