App ricevitore non touch

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

Esempi di feedback sull'interfaccia utente del destinatario:

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

  UI del destinatario

Obbligatorio
  A   Posiziona la maggior parte degli elementi UI all'interno del quarto inferiore dello schermo e mantienilo coerente con le altre UX.
  B   Non presentare elementi come controlli interattivi. Ad esempio, non riprodurre l'UI del mittente su quella del destinatario.

Best practice

  • Usa la transizione (dissolvenza), la trasparenza e le sfumature per attenuare l'effetto visivo.
  • Tieni presente che gli utenti vogliono vedere quanti più contenuti possibile. Gli utenti mettono spesso in pausa i contenuti per esaminarli, quindi l'UI non necessaria sbiadisce quando possibile.

Android

UI mittente

UI ricevitore

iOS

UI mittente

UI ricevitore

Chrome

UI mittente

UI mittente

UI ricevitore

 

  App del ricevitore inattiva

Quando il destinatario è connesso a un mittente ma non sta trasmettendo, viene visualizzata una schermata inattiva sul destinatario.

Obbligatorio
  A   Identifica quale app del destinatario è stata caricata

Best practice

  • Usa lo schermo inattivo per promuovere contenuti o funzionalità dell'app del mittente.
  • Cambia i contenuti ogni 30-60 secondi per visualizzarli di più e evitare la bruciatura dello schermo.
  • Disconnettiti dall'app del destinatario e interrompi l'esecuzione se è inattiva per 5 minuti. Quando il dispositivo è fermo, viene visualizzata la schermata Home del ricevitore, che aiuta a prevenire la bruciatura dello schermo.

Android

Finestra di dialogo Trasmetti, connessione ma non trasmissione

App ricevitore caricata / inattiva

iOS

Finestra di dialogo Trasmetti, connessione ma non trasmissione

App ricevitore caricata / inattiva

 

  Caricamento dell'app del destinatario

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

Obbligatorio
A Identifica quale app del destinatario viene caricata visualizzando il logo dell'app
B Identifica che l'app del destinatario è in fase di caricamento visualizzando l'icona di caricamento animata

Android

Connessione del mittente in corso...

Caricamento dell'app del ricevitore in corso...

iOS

Connessione del mittente in corso...

Caricamento dell'app del ricevitore in corso...

Chrome

Connessione del mittente in corso...

Connessione del mittente in corso...

Caricamento dell'app del ricevitore in corso...

 

  Caricamento dei contenuti del destinatario

Una volta caricata l'app del destinatario, i contenuti possono iniziare a essere trasmessi in streaming al destinatario.

Obbligatorio
A Identifica i contenuti caricati visualizzando il titolo dei contenuti o l'artwork
B Identifica che i contenuti sono in fase di caricamento visualizzando una rotellina di caricamento animata

Best practice
Quando riprendi i 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 ricevitore

iOS

Caricamento dei contenuti del mittente

Caricamento dei contenuti del ricevitore

Chrome

Caricamento dei contenuti del mittente

Caricamento dei contenuti del ricevitore

 

  Riproduzione del ricevitore

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

Android

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del ricevitore

iOS

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del ricevitore

Chrome

Mittente che regola la posizione di riproduzione

Ricerca di contenuti del ricevitore

 

  Ricevitore in pausa

Obbligatorio
A Identifica che i contenuti sono in pausa visualizzando un'icona di pausa e la posizione di riproduzione
B Identifica quali contenuti sono in pausa visualizzando il titolo o l'artwork dei contenuti
C Identifica l'app del destinatario caricata mostrando il logo di un'app

Best practice

  • Gli utenti mettono spesso in pausa i contenuti per esaminarli, pertanto l'interfaccia utente non necessaria scompare dopo alcuni secondi dalla visualizzazione di un'icona di pausa.
  • L'app del destinatario non deve continuare la riproduzione dei contenuti, a meno che l'utente non abbia richiesto esplicitamente di iniziare la riproduzione, ad esempio riprendere o saltare un elemento in coda.
  • Disconnettiti dall'app del destinatario e interrompi l'esecuzione se è inattiva per 20 minuti. Quando il dispositivo è fermo, viene visualizzata la schermata Home del ricevitore, che aiuta a prevenire la bruciatura dello schermo. Memorizza la posizione in pausa per consentire all'utente di riprendere la riproduzione da quel punto in un secondo momento.

Android

Mittente in pausa

Contenuti del ricevitore in pausa

Mittente in pausa

Ricevitore in pausa, dopo 5 secondi

iOS

Mittente in pausa

Contenuti del ricevitore in pausa

Mittente in pausa

Ricevitore in pausa, dopo 5 secondi

Chrome

Mittente in pausa

Contenuti del ricevitore in pausa

Mittente in pausa

Ricevitore in pausa, dopo 5 secondi

 

  buffering del destinatario

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 eseguendo il buffering dopo alcuni secondi visualizzando un'icona a forma di rotellina di buffering. Attendi qualche secondo per indicare che il buffering impedisce la visualizzazione troppo frequente della rotellina di buffering in condizioni di rete non valide

Best practice
Identifica quali contenuti vengono sottoposti a buffering se il buffering continua dopo 5 secondi.

Android

Il mittente indica il buffering del destinatario

buffering dei contenuti del ricevitore

iOS

Il mittente indica il buffering del destinatario

buffering dei contenuti del ricevitore

Chrome

Il mittente indica il buffering del destinatario

buffering dei contenuti del ricevitore

 

  Il ricevitore interrompe la trasmissione

Quando la riproduzione si interrompe o si verifica un timeout, l'UI del destinatario deve promuovere altri contenuti o funzionalità disponibili nell'app del mittente.

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

Best practice

  • Usa la schermata inattiva dopo la riproduzione per consigliare contenuti o funzionalità dall'app del mittente, in base ai contenuti appena trasmessi
  • Cambia il contenuto dello schermo inattivo ogni 30-60 secondi per evitare la bruciatura dello schermo
  • Disconnettiti dall'app del destinatario e interrompi l'esecuzione se è inattiva per 5 minuti. Quando il dispositivo è fermo, viene visualizzata la schermata Home del ricevitore, che aiuta a prevenire la bruciatura dello schermo.

Android

App mittente inattiva

App ricevitore inattiva

Mittente disconnesso

Trasmetti schermata Home

iOS

App mittente inattiva

App ricevitore inattiva

Mittente disconnesso

Trasmetti schermata Home

Chrome

App mittente inattiva

App mittente inattiva

App ricevitore inattiva

Mittente disconnesso

Mittente disconnesso

Trasmetti schermata Home

 

 

Le immagini utilizzate in questa guida alla progettazione sono gentilmente concesse da Blender Foundation e sono condivise dietro copyright o licenza Creative Commons.

  • Il sogno degli elefanti: (c) copyright 2006, Blender Foundation / Paesi Bassi Media Art Institute/ www.elephantsdream.org
  • Sintel: (c) copyright Blender Foundation | www.sintel.org
  • Lacrime d'acciaio: (CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org