TV-Navigation

Fernseher bieten eine begrenzte Anzahl von Navigationssteuerelementen für Apps. Um ein effektives Navigationsschema für Ihre TV-App zu erstellen, müssen Sie diese eingeschränkten Steuerelemente sowie die Einschränkungen der Nutzer beim Betrieb Ihrer App verstehen. Achten Sie beim Erstellen Ihrer Android-App für TV besonders darauf, wie der Nutzer bei der Verwendung von Tasten der Fernbedienung anstelle eines Touchscreens navigiert.

Grundprinzip

Die Navigation soll sich natürlich und vertraut anfühlen, ohne die Benutzeroberfläche zu dominieren oder die Aufmerksamkeit vom Inhalt abzulenken. Die folgenden Prinzipien helfen dabei, eine Grundlage für eine einheitliche und intuitive User Experience in allen TV-Apps zu schaffen.

Effizient

Sorgen Sie dafür, dass Sie schnell und einfach auf Inhalte zugreifen können. Nutzer möchten Inhalte schnell und mit minimaler Anzahl von Klicks aufrufen können. Organisieren Sie Ihre Informationen so, dass möglichst wenige Bildschirme erforderlich sind.

Vorhersehbar

Folgen Sie Best Practices und Empfehlungen, um die Navigation für Nutzer vorhersehbar zu gestalten. Erfinden Sie Navigationsmuster nicht unnötig neu, da dies zu Verwirrung und Unvorhersehbarkeit führt.

Intuitiv

Die Navigation sollte so einfach sein, dass sie gängiges Nutzerverhalten nahtlos unterstützt. Es sollte nicht zu kompliziert sein, indem Sie unnötige Navigationsebenen hinzufügen.

Controller

Es gibt verschiedene Arten von Controllern, von einer minimalistischen Fernbedienung bis hin zu komplexen Controllern. Alle Controller haben eine Richtungstasten (Steuerkreuz) sowie eine Auswahl-, Start- und Zurück-Taste. Andere Schaltflächen variieren je nach Modell.

Steuerkreuz
Die primäre Navigationsmethode auf Fernsehern ist das Steuerkreuz, mit dem die Hardwaretasten nach oben, unten, links und rechts bewegt werden können. Das Steuerkreuz verschiebt den Fokus von einem Objekt auf das nächstgelegene Objekt in Richtung der gedrückten Taste.

Schaltfläche „Auswählen“
Wählt das fokussierte Bildschirmelement aus.

Startbildschirmtaste
Der Nutzer wird zum Startbildschirm des Systems weitergeleitet.

Schaltfläche „Zurück“
Bietet Nutzern die Möglichkeit, zur vorherigen Ansicht zurückzukehren.

Schaltfläche „Mikrofon“
Ruft entweder Google Assistant oder die Spracheingabe auf.

Steuerung über das Steuerkreuz

Auf einem Fernseher erfolgt die Navigation entweder über das Steuerkreuz oder die Pfeiltasten. Diese Art der Steuerung begrenzt die Bewegung nach oben, unten, links und rechts. Um eine für Fernseher optimierte App zu erstellen, musst du ein Navigationsschema bereitstellen, mit dem der Nutzer schnell lernen kann, wie er mit diesen eingeschränkten Steuerelementen in deiner App navigieren kann.

Das Android-Framework übernimmt die Richtungsnavigation zwischen Layoutelementen automatisch, sodass du für deine App in der Regel nichts weiter tun musst. Du solltest die Navigation jedoch gründlich mit einem Steuerkreuz testen, um Navigationsprobleme zu erkennen.

Anhand der folgenden Richtlinien kannst du testen, ob das Navigationssystem deiner App mit einem Steuerkreuz auf einem Fernseher funktioniert:

• Nutzer mit einem Steuerkreuz müssen alle auf dem Bildschirm sichtbaren Steuerelemente aufrufen können.
• Wenn du Listen mit Fokus scrollen möchtest, achte darauf, dass die Auf- und Abwärtspfeile des Steuerkreuzes durch die Liste scrollen und mit der Auswahltaste ein Element in der Liste ausgewählt werden kann. Achten Sie darauf, dass Nutzer ein Element in der Liste auswählen können und dass in der Liste auch dann gescrollt wird, wenn ein Element ausgewählt wird.
• Der Wechsel zwischen den Steuerelementen muss einfach und vorhersehbar sein.

Richtungsnavigation ändern

Das Android-Framework wendet automatisch ein Richtungsnavigationsschema an, das auf der relativen Position der fokussierbaren Elemente in Ihren Layouts basiert. Testen Sie das generierte Navigationsschema in Ihrer App mit einem Steuerkreuz. Wenn Sie nach dem Testen entscheiden, dass Nutzer auf eine bestimmte Weise durch Ihre Layouts navigieren sollen, können Sie eine explizite Richtungsnavigation für Ihre Steuerelemente einrichten.

Das folgende Codebeispiel zeigt, wie das nächste Steuerelement definiert wird, das den Fokus für ein TextView-Layoutobjekt erhalten soll:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

In der folgenden Tabelle sind alle verfügbaren Navigationsattribute für Widgets auf der Android-Benutzeroberfläche aufgeführt:

Attribut	Funktion
nextFocusDown	Definiert die nächste Ansicht, die hervorgehoben werden soll, wenn der Nutzer nach unten navigiert.
nextFocusLeft	Definiert die nächste Ansicht, die hervorgehoben werden soll, wenn der Nutzer nach links navigiert.
nextFocusRight	Definiert die nächste Ansicht, die hervorgehoben werden soll, wenn der Nutzer nach rechts navigiert.
nextFocusUp	Definiert die nächste Ansicht, die hervorgehoben werden soll, wenn der Nutzer nach oben navigiert.

Wenn Sie eines dieser expliziten Navigationsattribute verwenden möchten, setzen Sie den Wert auf den android:id eines anderen Widgets im Layout. Richten Sie die Navigationsreihenfolge als Schleife ein, damit das letzte Steuerelement den Fokus wieder auf das erste Steuerelement lenkt.

Für einen klaren Fokus und eine klare Auswahl sorgen

Der Erfolg des Navigationsschemas einer App auf Fernsehern hängt davon ab, wie einfach es für Nutzer ist, zu erkennen, welches Benutzeroberflächenelement im Fokus ist. Wenn du das fokussierte Element nicht eindeutig benennst und somit auf welches Element ein Nutzer eine Aktion ausführen kannst, kann er schnell frustriert sein und die App verlassen. Aus dem gleichen Grund ist es wichtig, immer ein Element im Fokus zu haben, mit dem Nutzer sofort nach dem Start oder bei Inaktivität der App eine Aktion ausführen können.

Verwende beim Layout und bei der Implementierung deiner App Farbe, Größe, Animation oder eine Kombination dieser Attribute, damit Nutzer auf einen Blick erkennen können, welche Aktionen sie als Nächstes ausführen können. Verwenden Sie ein einheitliches Schema, um den Fokus in Ihrer Anwendung anzugeben.

Android bietet Ressourcen von „Drawable State Listen“, mit denen Hervorhebungen für fokussierte und ausgewählte Steuerelemente implementiert werden können. Im folgenden Codebeispiel wird gezeigt, wie Sie das visuelle Verhalten für eine Schaltfläche aktivieren, um anzuzeigen, dass ein Nutzer das Steuerelement aufgerufen und dann ausgewählt hat:

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

Mit dem folgenden Layout-XML-Beispielcode wird das vorherige Drawable für die Statusliste auf ein Button angewendet:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

Achten Sie auf einen ausreichenden Abstand zwischen den fokussierbaren und auswählbaren Steuerelementen, damit die Spitzlichter um sie herum deutlich zu sehen sind.

Navigation über die Schaltfläche „Zurück“

Damit die Apps auf der Plattform einheitlich sind, muss das Verhalten der Schaltfläche „Zurück“ diesen Richtlinien entsprechen.

Vorhersehbares Verhalten der Schaltfläche „Zurück“ verwenden

Wenn der Nutzer die Zurück-Taste der Fernbedienung drückt, wird er zum vorherigen Ziel weitergeleitet, um eine einfache und vorhersehbare Navigation zu ermöglichen.

Wenn der Nutzer von einem Menüpunkt zu einer Karte in der Mitte der Seite wechselt und dann die Schaltfläche „Zurück“ drückt, hängt das Ergebnis davon ab, ob die App die obere oder die linke Navigationsleiste verwendet:

• App verwendet obere Navigation:Sie leiten den Nutzer zurück zum Anfang der Seite, indem er schnell scrollt und den Fokus auf das Menü setzt.
• App verwendet linke Navigationsleiste:Aktivieren Sie das Menü auf der linken Seite und legen Sie den Fokus auf den aktuell aktiven Menüpunkt.

Achten Sie darauf, dass die Schaltfläche „Zurück“ nicht von Bestätigungsbildschirmen verdeckt wird oder Teil einer Endlosschleife ist.

Das sollten Sie nicht tun.
Vermeiden Sie Exit-Gating. Nutzer dürfen die App ohne Bestätigung verlassen.

Das sollten Sie nicht tun.
Begeben Sie sich niemals in eine Endlosschleife, durch die das Menü geschlossen und geöffnet wird. Idealerweise schließt die Schaltfläche „Zurück“ die App. Die entsprechende Schaltfläche sollte im Menü nur angezeigt werden, wenn es sich um einen Sonderfall handelt, z. B. bei einem Kinderprofil.

Keine Aufwärts- oder Zurück-Schaltfläche anzeigen

Anders als auf Handheld-Geräten können Sie auf einem Fernseher mit der Zurück-Taste auf der Fernbedienung zurück navigieren. Es ist nicht notwendig, eine virtuelle Zurück-Schaltfläche auf dem Bildschirm anzuzeigen:

Das sollten Sie nicht tun.

Bei Bedarf eine Schaltfläche „Abbrechen“ anzeigen

Wenn die einzigen sichtbaren Aktionen Bestätigungs-, Destruktiv- oder Kaufaktionen sind, empfiehlt es sich, eine Abbrechen-Schaltfläche zu verwenden, die zum vorherigen Ziel zurückkehren:

Richtig.

Zurücknavigation implementieren

Das Android-Framework unterstützt die Zurück-Navigation genauso gut wie das Steuerkreuz. Wenn Sie die Navigationskomponente verwenden, können Sie eine Vielzahl von Navigationsdiagrammen unterstützen. Von Zeit zu Zeit kann es erforderlich sein, ein benutzerdefiniertes Verhalten zu implementieren, z. B. wenn die Schaltfläche „Zurück“ den Fokus auf den Anfang einer langen Liste zurücksetzt.

Mit ComponentActivity, der Basisklasse für FragmentActivity und AppCompatActivity, können Sie das Verhalten der Zurück-Schaltfläche mithilfe der zugehörigen OnBackPressedDispatcher steuern, die Sie durch Aufrufen von getOnBackPressedDispatcher() abrufen können.

Weitere Informationen finden Sie unter Benutzerdefinierte Rückwärtsnavigation bereitstellen.

Wiedergabesteuerung auf dem Fernseher

Die Videowiedergabe ist eine der wichtigsten Funktionen auf dem Fernseher. Es ist wichtig, dass sich Videoplayer in Apps bei Android TV gleich verhalten. Weitere Informationen findest du in den Richtlinien für die Wiedergabesteuerung auf Fernsehern.

Navigation auf dem Live-Tab

Apps mit einem auf dem Tab „Live“ integrierten Live-TV-Feed müssen nicht nur die Qualitätsanforderungen für TV-Apps erfüllen, sondern auch die Anforderungen für eine reibungslose Wiedergabe und direkte Wiedergabe erfüllen, wie in den folgenden Abschnitten beschrieben.

Reibungslose Wiedergabe

Die reibungslose Wiedergabe gilt für das In-App-Verhalten nach jedem Deeplink für Live-/Linear-Kanäle von Google TV und Android TV.

Nutzer, die in Google TV und Android TV auf einen Deeplink für einen Live- oder linearen Kanal klicken, müssen direkt zur Kanalwiedergabe weitergeleitet werden, ohne dass Bildschirme der Ziel-App blockiert oder verzögert werden. Anmeldeabläufe, Anmeldeabläufe, Branding-Videos und andere Verzögerungen sind nicht zulässig.

Wenn der Deeplink jedoch das Laden der Ziel-App bei einem Kaltstart initiiert, ist diese Startverzögerung vor der Wiedergabe zulässig. In diesem Fall ist auch ein Branding-Video oder eine Animation beim Starten der App zulässig. Ein derartiger Kaltstart tritt wahrscheinlich nicht mehr als einmal pro Sitzung auf.

Wenn die Wiedergabe des Deeplink-Kanals einige Sekunden dauert, ist das Anzeigen des Kanal- und/oder Dienst-Brandings zulässig. Seine Dauer sollte jedoch nur so lang sein, wie es zum Laden des Kanals dauert (und ähnlich wie die durchschnittlichen Kanalladezeiten innerhalb der Anwendung).

Wenn der Nutzer abgemeldet oder nicht abonniert ist, kannst du die Wiedergabe für einen kostenpflichtigen Kanal blockieren, um einen Anmelde- oder Registrierungsvorgang abzuschließen.

Direkt zurück

Wenn Nutzer eine App über einen Deeplink auf dem Tab „Live“ starten und dann auf die Schaltfläche „Zurück“ klicken, müssen sie durch einmaliges Zurückdrücken zum Tab „Live“ zurückgeleitet werden, unabhängig davon, wie viel Zeit vergangen ist. Dieses Direct-Back-Verhalten ist für alle Deeplinks auf dem Live-Tab bei Google TV und Android TV erforderlich.

Deeplinks auf Live-Tabs unterscheiden sich durch einen angehängten Deeplink-Parameter: ?exit_on_back=[true|false]. Apps müssen diesen Parameter parsen, um festzustellen, ob sie über den Tab „Live“ gestartet wurden. Wenn exit_on_back den Wert true hat, müssen Apps das Direct-Back-Verhalten implementieren.

Hinweis: Wenn der Nutzer beim ersten Drücken nach dem Deeplink eine andere Schaltfläche als die Schaltfläche „Zurück“ drückt, gilt die Direkt-Zurück-Anforderung nicht. Stattdessen ist nur das standardmäßige Verhalten der Schaltfläche „Zurück“ erforderlich.

Angenommen, der Nutzer drückt nach einem Deeplink auf die Auswahlschaltfläche des Steuerkreuzes, wodurch ein Steuerelemente-Overlay eingeblendet wird. Der Nutzer wartet, bis das Overlay verschwindet, und drückt dann die Schaltfläche „Zurück“. Da die erste Schaltfläche, die nach dem Klicken auf den Deeplink gedrückt wurde, die Auswahlschaltfläche des Steuerkreuzes war, gilt die Anforderung „Direkt zurück“ nicht. Stattdessen gilt die normale App-Back-Stack-Logik.

Wenn der Nutzer wiederholt auf die Schaltfläche „Zurück“ drückt, muss er ohne Endlosschleifen zum Stammverzeichnis der App und dann zurück zu Google TV oder Android TV geleitet werden. Weitere Informationen finden Sie im Abschnitt Vorhersehbares Verhalten der Schaltfläche „Zurück“.

Navigationsarchitektur

Festes Startziel

Der erste Bildschirm, den der Nutzer sieht, wenn er die App aus dem Launcher startet, ist auch der letzte Bildschirm, den der Nutzer sieht, wenn er nach dem Klicken auf die Schaltfläche „Zurück“ zum Launcher zurückkehrt.

Mit Deeplinks wird die manuelle Navigation simuliert.

Unabhängig davon, ob Nutzer Deeplinks zu einem bestimmten Ziel verwenden oder manuell zu einem bestimmten Ziel navigieren, können sie die Schaltfläche „Zurück“ verwenden, um durch die Ziele zurück zum Startziel zu gelangen.

Wenn Sie von einer anderen App aus Deeplinks zu einer App erstellen, wird die manuelle Navigation simuliert. Wenn der Nutzer beispielsweise von Google TV direkt zu einer Detailseite in der Moviestar-App geht und dann auf die Schaltfläche „Zurück“ drückt, wird er zur Startseite der Moviestar-App weitergeleitet.

Klarer Pfad zu allen fokussierbaren Elementen

Ermöglichen Sie Nutzern die Navigation auf der Benutzeroberfläche mit einer klaren Richtung. Wenn es nicht den richtigen Weg zu einer Kontrolle gibt, sollten Sie sie verlegen.

Richtig.
Platzieren Sie Steuerelemente wie die hier gezeigte Suchaktion an Stellen, die sich nicht mit anderen anklickbaren Elementen überschneiden.

Das sollten Sie nicht tun.
Vermeiden Sie Layouts mit Steuerelementen an schwer zugänglichen Stellen. Es ist nicht einfach, die hier gezeigte Suchaktion über das Steuerkreuz zu erreichen.

Achsen

Entwerfen Sie Ihr Layout, indem Sie sowohl horizontale als auch vertikale Achsen nutzen. Weisen Sie jeder Richtung eine bestimmte Funktion zu, um das Navigieren in großen Hierarchien zu beschleunigen.

Richtig.
Kategorien können auf der vertikalen Achse durchlaufen werden und Elemente innerhalb jeder Kategorie auf der horizontalen Achse.

Das sollten Sie nicht tun.
Vermeiden Sie komplexe und verschachtelte Layouthierarchien.