App ricevitore non touch

Il ricevitore riproduce i contenuti e ne riflette lo stato per l'utente. Il destinatario deve rispondere immediatamente alle azioni nell'app del mittente . Ad esempio, quando i contenuti vengono messi in pausa sul ricevitore, viene visualizzata un'icona di pausa e quando l'utente preme Riproduci sull'app mittente, il ricevitore inizia a riprodurre i contenuti e rimuove l'icona di pausa.

Esempi di feedback dell'interfaccia utente del ricevitore:

  • In riproduzione
  • In pausa
  • Posizione di riproduzione / ricerca
  • Buffering

  UI del ricevitore

Obbligatorio
  A   Posiziona la maggior parte degli elementi dell'interfaccia utente nel quarto inferiore dello schermo e mantienili coerenti con le altre UX.
  B   Non presentare gli elementi come controlli interattivi. Ad esempio, non riprodurre l'interfaccia utente del mittente nell'interfaccia utente del destinatario.

Best practice

  • Utilizza la transizione (dissolvenza), la trasparenza e la sfumatura per attenuare l'effetto visivo.
  • Tieni presente che gli utenti vogliono vedere la maggior parte dei contenuti possibile. Gli utenti spesso mettono in pausa i contenuti per esaminarli, quindi nascondi la UI non necessaria, se possibile.

Android

UI mittente

UI del ricevitore

iOS

UI mittente

UI del ricevitore

Chrome

UI mittente

UI mittente

UI del ricevitore

 

  App ricevitore inattiva

Sul ricevitore viene visualizzata una schermata inattiva quando il ricevitore è connesso a un mittente ma non trasmette.

Obbligatorio
  A   Identifica l'app ricevitore caricata

Best practice

  • Utilizza la schermata inattiva per promuovere contenuti o funzionalità dell'app mittente.
  • Cambia i contenuti ogni 30-60 secondi per visualizzarne di più ed evitare il burn-in dello schermo.
  • Disconnettiti dall'app ricevitore e interrompine l'esecuzione se è inattiva per 5 minuti. Quando viene interrotta, viene visualizzata la schermata Home del ricevitore, che contribuisce a evitare il burn-in dello schermo.

Android

Finestra di dialogo Trasmetti, connesso ma non trasmette

App ricevitore caricata / inattiva

iOS

Finestra di dialogo Trasmetti, connesso ma non trasmette

App ricevitore caricata / inattiva

 

  Caricamento dell'app ricevitore

Quando un utente si connette a un ricevitore, l'app del ricevitore deve essere caricata prima di poter visualizzare lo stato di inattività dell'app o iniziare a riprodurre i contenuti.

Obbligatorio
  A   Identifica l'app ricevitore in fase di caricamento visualizzando il logo dell'app
  B   Identifica l'app ricevitore in fase di caricamento visualizzando l'indicatore di caricamento animato

Android

Connessione del mittente

Caricamento dell'app ricevitore

iOS

Connessione del mittente

Caricamento dell'app ricevitore

Chrome

Connessione del mittente

Connessione del mittente

Caricamento dell'app ricevitore

 

  Caricamento dei contenuti del ricevitore

Una volta caricata l'app ricevitore, lo streaming dei contenuti può iniziare sul ricevitore.

Obbligatorio
  A   Identifica i contenuti in fase di caricamento visualizzando il titolo o la copertina dei contenuti
  B   Indica che i contenuti sono in fase di caricamento visualizzando un indicatore di caricamento animato

Best practice
Quando riprendi la riproduzione dei contenuti in pausa, riavvolgi la riproduzione di 5-10 secondi in modo che lo spettatore non perda nulla durante la transizione dal mittente al destinatario.

Android

Caricamento dei contenuti del mittente

Caricamento dei contenuti del destinatario

iOS

Caricamento dei contenuti del mittente

Caricamento dei contenuti del destinatario

Chrome

Caricamento dei contenuti del mittente

Caricamento dei contenuti del destinatario

 

  Riproduzione sul ricevitore

Obbligatorio
  A   Identifica cosa viene riprodotto all'inizio dei contenuti
  B   Identifica la posizione di riproduzione quando viene regolata
  C   Identifica che il ricevitore sta cercando contenuti quando la posizione di riproduzione viene modificata, ma non è ancora in riproduzione

Android

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del destinatario

iOS

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del destinatario

Chrome

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del destinatario

 

  Ricevitore in pausa

Obbligatorio
  A   Indica che i contenuti sono in pausa visualizzando un'icona di pausa e la posizione di riproduzione
  B   Indica quali contenuti sono in pausa visualizzando il titolo o la copertina
  C   Indica quale app ricevitore è caricata visualizzando un logo dell'app

Best practice

  • Gli utenti spesso mettono in pausa i contenuti per esaminarli, quindi fai scomparire l'interfaccia utente non necessaria quando la riproduzione viene messa in pausa per qualche secondo visualizzando un'icona di pausa.
  • L'app ricevitore non deve continuare la riproduzione dei contenuti a meno che non ci sia una richiesta esplicita da parte dell'utente di avviare la riproduzione, ad esempio riprendere o saltare un elemento della coda.
  • Disconnettersi dall'app ricevitore e interromperne l'esecuzione se è inattiva per 20 minuti. Quando viene interrotta, viene visualizzata la schermata Home del ricevitore, che contribuisce a evitare il burn-in dello schermo. Memorizza la posizione in cui è stata messa in pausa la riproduzione in modo che l'utente possa riprenderla da quel punto in un secondo momento.

Android

Mittente messo in pausa

Contenuti del destinatario messi in pausa

Mittente messo in pausa

Ricevitore in pausa, dopo 5 secondi

iOS

Mittente messo in pausa

Contenuti del destinatario messi in pausa

Mittente messo in pausa

Ricevitore in pausa, dopo 5 secondi

Chrome

Mittente messo in pausa

Contenuti del destinatario messi in pausa

Mittente messo in pausa

Ricevitore in pausa, dopo 5 secondi

 

  Buffering del ricevitore

Il buffering sul ricevitore si verifica quando la latenza di rete o altri fattori causano un ritardo nella riproduzione.

Obbligatorio
  A   Identifica che il destinatario sta memorizzando nel buffer dopo alcuni secondi visualizzando un indicatore di caricamento. L'attesa di alcuni secondi per indicare il buffering impedirà la visualizzazione troppo frequente dell'indicatore di buffering in condizioni di rete non ottimali.

Best practice
Identifica i contenuti in buffering se il buffering continua dopo 5 secondi.

Android

Il mittente indica il buffering del ricevitore

Buffer dei contenuti del destinatario

iOS

Il mittente indica il buffering del ricevitore

Buffer dei contenuti del destinatario

Chrome

Il mittente indica il buffering del ricevitore

Buffer dei contenuti del destinatario

 

  Il ricevitore interrompe la trasmissione

Quando la riproduzione si interrompe o scade il timeout, la UI del ricevitore deve promuovere altri contenuti o funzionalità disponibili nell'app mittente.

Obbligatorio
  Un   Identifica quale app ricevitore è caricata o inattiva mostrando un logo dell'app

Best practice

  • Utilizzare la schermata inattiva dopo la riproduzione per consigliare contenuti o funzionalità dell'app mittente, in base a ciò che è stato appena trasmesso
  • Modifica i contenuti della schermata inattiva ogni 30-60 secondi per evitare il burn-in dello schermo
  • Disconnettiti dall'app ricevitore e interrompine l'esecuzione se è inattiva per 5 minuti. Quando viene interrotta, viene visualizzata la schermata Home del ricevitore, che contribuisce a evitare il burn-in dello schermo.

Android

App mittente inattiva

App ricevitore inattiva

Mittente disconnesso

Trasmettere la schermata Home

iOS

App mittente inattiva

App ricevitore inattiva

Mittente disconnesso

Trasmettere la schermata Home

Chrome

App mittente inattiva

App mittente inattiva

App ricevitore inattiva

Mittente disconnesso

Mittente disconnesso

Trasmettere la schermata Home

 

 

Le immagini utilizzate in questa guida alla progettazione sono fornite per gentile concessione della Blender Foundation e condivise con licenza Creative Commons o di copyright.

  • 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