Nicht-Touch-Receiver-App

Der Empfänger gibt Inhalte wieder und spiegelt deren Status für den Nutzer wider. Der Empfänger muss sofort auf Aktionen in der Sender-App reagieren . Wenn zum Beispiel Inhalte auf dem Empfänger pausiert werden, wird ein Pausensymbol angezeigt. Wenn der Nutzer in der Sender-App auf „Wiedergabe“ tippt, beginnt der Empfänger mit der Wiedergabe des Inhalts und entfernt das Pausensymbol.

Beispiele für Feedback zur Benutzeroberfläche des Empfängers:

  • Läuft gerade
  • Pausiert
  • Wiedergabeposition / Suche
  • Zwischenspeichern

  Empfänger-UI

Erforderlich
  A   Platziere die meisten UI-Elemente in der unteren Hälfte des Bildschirms und achte darauf, dass sie mit denen deiner anderen UX-Designs übereinstimmen.
  B   Präsentieren Sie Elemente nicht als interaktive Steuerelemente. Reproduzieren Sie beispielsweise die Absender-UI nicht auf der Empfänger-UI.

Best Practices

  • Verwenden Sie Übergänge (Ausblendung), Transparenz und Nuancen, um den visuellen Effekt abzuschwächen.
  • Bedenken Sie, dass die Nutzenden so viel des Inhalts wie möglich sehen möchten. Nutzer halten Inhalte häufig an, um sie zu untersuchen. Daher sollten Sie unnötige UI-Elemente nach Möglichkeit ausblenden.

Android

Absender-UI

Empfänger-UI

iOS

Absender-UI

Empfänger-UI

Chrome

Absender-UI

Absender-UI

Empfänger-UI

 

  Empfänger-App inaktiv

Auf dem Empfänger wird ein inaktiver Bildschirm angezeigt, wenn er mit einem Sender verbunden ist, aber keine Übertragung durchführt.

Erforderlich
  A   Ermitteln, welche Empfänger-App geladen wird

Best Practices

  • Verwenden Sie den inaktiven Bildschirm, um Inhalte oder Funktionen der Sender-App zu bewerben.
  • Ändere den Inhalt alle 30 bis 60 Sekunden, um mehr anzuzeigen und ein Überbrennen des Bildschirms zu verhindern.
  • Trennen Sie die Verbindung zur Empfänger-App und beenden Sie deren Ausführung nach 5 Minuten Inaktivität. Wenn das Gerät angehalten wird, erscheint der Startbildschirm des Empfängers, um ein Einbrennen des Bildschirms zu verhindern.

Android

Dialogfeld streamen, verbunden, aber nicht gestreamt

Receiver-App geladen / inaktiv

iOS

Dialogfeld streamen, verbunden, aber nicht gestreamt

Receiver-App geladen / inaktiv

 

  Empfänger-App wird geladen

Wenn ein Nutzer eine Verbindung zu einem Empfänger herstellt, muss diese zuerst geladen werden, bevor sie den Inaktivitätsstatus der App anzeigen oder mit der Wiedergabe von Inhalten beginnen kann.

Erforderlich
A Anhand des App-Logos ermitteln, welche Empfänger-App geladen wird
B Angeben, dass die Empfänger-App geladen wird, indem das animierte Ladesymbol angezeigt wird

Android

Sender, der eine Verbindung herstellt

Empfänger-App wird geladen

iOS

Sender, der eine Verbindung herstellt

Empfänger-App wird geladen

Chrome

Sender, der eine Verbindung herstellt

Sender, der eine Verbindung herstellt

Empfänger-App wird geladen

 

  Inhalte des Empfängers werden geladen

Sobald die Empfänger-App geladen wurde, können die Inhalte zum Empfänger gestreamt werden.

Erforderlich
A Anhand des Inhaltstitels oder der Artwork ermitteln, welche Inhalte geladen werden
B Angeben, dass Inhalte geladen werden, indem ein animiertes Ladesymbol angezeigt wird

Best Practices
Wenn du pausierte Inhalte wieder aktivierst, solltest du die Wiedergabe 5 bis 10 Sekunden zurückspulen, damit der Zuschauer beim Übergang von Sender zu Empfänger nichts versäumt.

Android

Inhalt des Absenders wird geladen

Inhalte des Empfängers werden geladen

iOS

Inhalt des Absenders wird geladen

Inhalte des Empfängers werden geladen

Chrome

Inhalt des Absenders wird geladen

Inhalte des Empfängers werden geladen

 

  Empfängerwiedergabe

Erforderlich
A Erkennen, was beim Start des Inhalts abgespielt wird
B Wiedergabeposition ermitteln, wenn Position angepasst wird
C Angeben, dass der Empfänger Inhalte sucht, wenn sich die Wiedergabeposition ändert, aber noch nicht abgespielt wird

Android

Sender passt Wiedergabeposition an

Suche nach Inhalten auf dem Empfänger

iOS

Sender passt Wiedergabeposition an

Suche nach Inhalten auf dem Empfänger

Chrome

Sender passt Wiedergabeposition an

Suche nach Inhalten auf dem Empfänger

 

  Empfänger pausiert

Erforderlich
A Kennzeichnen Sie durch Anzeige eines pausierten Symbols und einer Wiedergabeposition, dass die Inhalte pausiert wurden.
B Anzuzeigen, welche Inhalte pausiert wurden, indem Sie den Titel oder das Artwork des Inhalts anzeigen
C Anhand eines App-Logos erkennen, welche Empfänger-App geladen wird

Best Practices

  • Nutzer pausieren Inhalte häufig, um sie zu untersuchen. Daher werden unnötige UI-Elemente ausgeblendet, wenn sie für einige Sekunden pausiert werden, indem ein Pausensymbol angezeigt wird.
  • Die Empfänger-App sollte die Wiedergabe von Inhalten nur dann fortsetzen, wenn der Nutzer explizit darum bittet, die Wiedergabe zu starten, also z. B. ein Element in der Wiedergabeliste fortzusetzen oder zu überspringen.
  • Trennen Sie die Verbindung zur Empfänger-App und beenden Sie deren Ausführung nach 20 Minuten Inaktivität. Wenn das Gerät angehalten wird, erscheint der Startbildschirm des Empfängers, um ein Einbrennen des Bildschirms zu verhindern. Speichere den pausierten Ort, damit der Nutzer die Wiedergabe an diesem Punkt später fortsetzen kann.

Android

Absender pausiert

Receiver-Inhalte pausiert

Absender pausiert

Empfänger pausiert, nach 5 Sekunden

iOS

Absender pausiert

Receiver-Inhalte pausiert

Absender pausiert

Empfänger pausiert, nach 5 Sekunden

Chrome

Absender pausiert

Receiver-Inhalte pausiert

Absender pausiert

Empfänger pausiert, nach 5 Sekunden

 

  Empfängerpufferung

Die Zwischenspeicherung erfolgt beim Empfänger, wenn Netzwerklatenz oder andere Faktoren zu einer Verzögerung bei der Wiedergabe führen.

Erforderlich
  A   Geben Sie an, dass der Empfänger nach einigen Sekunden eine Zwischenspeicherung ausführt. Dazu wird ein rotierendes Ladesymbol angezeigt. Wenn Sie einige Sekunden auf die Pufferung warten, wird das rotierende Ladesymbol unter schlechten Netzwerkbedingungen nicht zu häufig angezeigt.

Best Practices
Ermitteln Sie, welcher Inhalt zwischengespeichert wird, wenn die Zwischenspeicherung nach 5 Sekunden fortgesetzt wird.

Android

Sender gibt Empfängerpufferung an

Zwischenspeichern von Empfängerinhalten

iOS

Sender gibt Empfängerpufferung an

Zwischenspeichern von Empfängerinhalten

Chrome

Sender gibt Empfängerpufferung an

Zwischenspeichern von Empfängerinhalten

 

  Empfänger beendet das Streaming

Wenn die Wiedergabe beendet oder eine Zeitüberschreitung auftritt, sollten in der Benutzeroberfläche des Empfängers andere Inhalte oder Funktionen beworben werden, die in der Sender-App verfügbar sind.

Erforderlich
  A   Anhand des App-Logos können Sie ermitteln, welche Empfänger-App geladen oder inaktiv ist.

Best Practices

  • Nach der Wiedergabe auf dem inaktiven Bildschirm Inhalte oder Funktionen der Sender-App empfehlen, basierend auf den gerade gestreamten Inhalten
  • Den Inhalt des inaktiven Bildschirms alle 30 bis 60 Sekunden ändern, um ein Einbrennen des Bildschirms zu verhindern
  • Trennen Sie die Verbindung zur Empfänger-App und beenden Sie deren Ausführung nach 5 Minuten Inaktivität. Wenn das Gerät angehalten wird, erscheint der Startbildschirm des Empfängers, um ein Einbrennen des Bildschirms zu verhindern.

Android

Sender-App inaktiv

Receiver-App inaktiv

Absenderverbindung getrennt

Startbildschirm streamen

iOS

Sender-App inaktiv

Receiver-App inaktiv

Absenderverbindung getrennt

Startbildschirm streamen

Chrome

Sender-App inaktiv

Sender-App inaktiv

Receiver-App inaktiv

Absenderverbindung getrennt

Absenderverbindung getrennt

Startbildschirm streamen

 

 

In diesem Designleitfaden verwendete Bilder wurden mit freundlicher Genehmigung der Blender Foundation bereitgestellt und unter Copyright-Lizenz oder Creative Commons-Lizenz geteilt.

  • Elefant's Dream: (c) Copyright 2006, Blender Foundation / Niederländisch 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