App ricevitore non touch

Il destinatario riproduce i contenuti e ne mostra lo stato all'utente. Il destinatario deve rispondere immediatamente alle azioni nell'app del mittente . Ad esempio, quando i contenuti sono in pausa sul ricevitore, viene visualizzata un'icona di pausa e quando l'utente preme la riproduzione sull'app del mittente, quest'ultimo inizia a riprodurre i contenuti e l'icona viene messa in pausa.

Esempi di feedback dell'interfaccia utente del destinatario:

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

UI destinatario

Obbligatorio
A Posiziona la maggior parte degli elementi UI nella parte inferiore dello schermo e mantieni la coerenza con gli altri UX.
B Non presentare elementi come controlli interattivi. Ad esempio, non riprodurre l'UI del mittente sull'interfaccia utente del destinatario.

Best practice

  • Usa le transizioni (dissolvenza), la trasparenza e le sfumature per rendere più fluido l'effetto visivo.
  • Tieni presente che gli utenti vogliono vedere la maggiore quantità possibile di contenuti. Gli utenti mettono spesso in pausa i contenuti per esaminarli, quindi puoi eliminare l'UI non necessaria quando è possibile.

Android

UI mittente

UI del destinatario

iOS

UI mittente

UI del destinatario

Google Chrome

UI mittente

UI mittente

UI del destinatario

 

App del destinatario inattiva

Quando il ricevitore è collegato a un mittente, ma non sta trasmettendo, viene visualizzata una schermata inattiva.

Obbligatorio
A Identifica l'app del destinatario che viene caricata.

Best practice

  • Utilizza la schermata inattiva per promuovere contenuti o funzionalità dell'app del mittente.
  • Modifica i contenuti ogni 30-60 secondi per visualizzare più contenuti ed evitare che lo schermo si bruci.
  • Disconnettiti dall'app del ricevitore e interrompi l'esecuzione per 5 minuti in caso di inattività. Una volta interrotta, viene visualizzata la schermata Home del ricevitore, che ti aiuterà a prevenire le bruciature dello schermo.

Android

Finestra di dialogo Trasmetti, connessa ma non trasmessa

App del ricevitore caricata / inattiva

iOS

Finestra di dialogo Trasmetti, connessa ma non trasmessa

App del ricevitore caricata / inattiva

 

Caricamento app del destinatario

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

Obbligatorio
A Identifica l'app del destinatario in fase di caricamento mostrando il logo dell'app
B Identifica che l'app del destinatario è in fase di caricamento visualizzando la rotellina di caricamento animata

Android

Connessione del mittente

Caricamento dell'app del destinatario in corso...

iOS

Connessione del mittente

Caricamento dell'app del destinatario in corso...

Google Chrome

Connessione del mittente

Connessione del mittente

Caricamento dell'app del destinatario in corso...

 

Caricamento dei contenuti del destinatario

Una volta caricata l'app del ricevitore, i contenuti possono iniziare a trasmettere in streaming al ricevitore.

Obbligatorio
A Identifica i contenuti caricati caricando un titolo o un'opera d'arte
B Identifica che i contenuti vengono caricati visualizzando una rotellina di caricamento animata

Best practice
Quando riprendi i contenuti in pausa, riavvolgi la riproduzione 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 in corso...

iOS

Caricamento dei contenuti del mittente

Caricamento dei contenuti del destinatario in corso...

Google Chrome

Caricamento dei contenuti del mittente

Caricamento dei contenuti del destinatario in corso...

 

Riproduzione destinatario

Obbligatorio
A Identifica i contenuti in riproduzione all'avvio dei contenuti
B Identifica la posizione di riproduzione quando viene regolata la posizione
C Individua che il destinatario stia 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

Google Chrome

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del destinatario

 

Destinatario in pausa

Obbligatorio
A Identifica i contenuti in pausa mostrando un'icona e una posizione di riproduzione in pausa
B identifica i contenuti in pausa visualizzando il titolo o la grafica del contenuto
C identifica l'app del destinatario che viene caricata tramite un logo dell'app

Best practice

  • Gli utenti mettono spesso in pausa i contenuti per esaminarli, pertanto la UI non necessaria scomparirà quando viene messa in pausa per alcuni secondi mostrando un'icona di pausa.
  • Disconnettiti dall'app del ricevitore e interrompi l'esecuzione per 20 minuti in caso di inattività. Una volta interrotta, viene visualizzata la schermata Home del ricevitore, che ti aiuterà a prevenire le bruciature dello schermo. Archivia la posizione in pausa in modo che l'utente possa riprendere la riproduzione da quel momento in poi.

Android

Mittente in pausa

Contenuti del destinatario in pausa

Mittente in pausa

Ricevitore in pausa, dopo 5 secondi

iOS

Mittente in pausa

Contenuti del destinatario in pausa

Mittente in pausa

Ricevitore in pausa, dopo 5 secondi

Google Chrome

Mittente in pausa

Contenuti del destinatario in pausa

Mittente in pausa

Ricevitore in pausa, dopo 5 secondi

 

Buffering del destinatario

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

Obbligatorio
A Identifica che il ricevitore sta eseguendo il buffering dopo alcuni secondi visualizzando una rotellina di buffering. Attendi qualche secondo per indicare che il buffering impedisce la visualizzazione eccessiva della rotellina di buffering in cattive condizioni della rete

Best practice
Identifica i contenuti di cui viene eseguito il buffering se il buffering continua dopo 5 secondi.

Android

Il mittente indica il buffering del destinatario

Buffering dei contenuti del destinatario

iOS

Il mittente indica il buffering del destinatario

Buffering dei contenuti del destinatario

Google Chrome

Il mittente indica il buffering del destinatario

Buffering dei contenuti del destinatario

 

Il destinatario interrompe la trasmissione

Quando la riproduzione si interrompe o scade, l'UI del destinatario dovrebbe promuovere altri contenuti o funzionalità disponibili nell'app del mittente.

Obbligatorio
A Identifica quale app del destinatario è caricata o inattiva mostrando il logo di un'app

Best practice

  • Usa la schermata inattiva dopo la riproduzione per consigliare contenuti o funzionalità dell'app del mittente, in base a ciò che è stato appena trasmesso
  • Modifica i contenuti dello schermo inattivo ogni 30-60 secondi per evitare bruciature dello schermo
  • Disconnettiti dall'app del ricevitore e interrompi l'esecuzione per 5 minuti in caso di inattività. Una volta interrotta, viene visualizzata la schermata Home del ricevitore, che ti aiuterà a prevenire le bruciature dello schermo.

Android

App mittente inattiva

App del destinatario inattiva

Mittente disconnesso

Schermata Home di Google Cast

iOS

App mittente inattiva

App del destinatario inattiva

Mittente disconnesso

Schermata Home di Google Cast

Google Chrome

App mittente inattiva

App mittente inattiva

App del destinatario inattiva

Mittente disconnesso

Mittente disconnesso

Schermata Home di Google Cast

 

 

Le immagini utilizzate in questa guida alla progettazione sono concesse in omaggio dalla Blender Foundation, condivise ai sensi del copyright o della licenza Creative Commons.

  • Elephant's Dream: (c) copyright 2006, Blender Foundation / Paesi Bassi Media Art Institute/ www.Elephantsdream.org
  • Sintel: (c) Fondazione Blender Copyright | www.sintel.org
  • Tears of Steel: (CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org