TV-Geräte bieten nur eine begrenzte Anzahl von Navigationssteuerelementen für Apps. Um ein effektives Navigationsschema für Ihre TV-App zu erstellen, müssen Sie diese begrenzten Steuerelemente sowie die Einschränkungen der Nutzer bei der Bedienung Ihrer App kennen. Achten Sie beim Entwickeln Ihrer Android-App für TV besonders darauf, wie der Nutzer mit den Tasten der Fernbedienung anstelle eines Touchscreens navigiert.
Grundsätze
Die Navigation soll sich natürlich und vertraut anfühlen, ohne die Benutzeroberfläche zu dominieren oder die Aufmerksamkeit von den Inhalten abzulenken. Die folgenden Grundsätze helfen dabei, eine Grundlage für eine einheitliche und intuitive Nutzererfahrung in allen TV-Apps zu schaffen.
Vereinfachen Sie den Zugriff auf Inhalte. Nutzer möchten schnell auf Inhalte zugreifen und dabei so wenige Klicks wie möglich ausführen. Organisieren Sie Ihre Informationen so, dass möglichst wenige Bildschirme erforderlich sind.
Folgen Sie Best Practices und Empfehlungen, um die Navigation vorhersehbar für Nutzer zu gestalten. Erfinden Sie Navigationsmuster unnötig neu, da dies zu Verwirrung und Unvorhersehbarkeit führt.
Vereinfachen Sie die Navigation so weit, dass weit verbreitete Nutzer Verhaltensweisen nahtlos unterstützt werden. Vermeiden Sie unnötige Komplexität, indem Sie keine zusätzlichen Navigationsebenen hinzufügen.
Controller
Controller gibt es in verschiedenen Ausführungen, von minimalistischen Fernbedienungen bis hin zu komplexen Gamecontrollern. Alle Controller haben ein Steuerkreuz (D-Pad) sowie die Tasten „Auswählen“, „Startbildschirm“ und „Zurück“. Andere Tasten variieren je nach Modell.
Steuerkreuz (D-Pad)
Die primäre Navigationsmethode auf dem Fernseher ist das Steuerkreuz (D-Pad) mit den Richtungstasten „Nach oben“, „Nach unten“, „Nach links“ und „Nach rechts“.
Mit dem Steuerkreuz (D-Pad) wird der Fokus von einem Objekt auf das nächste Objekt in Richtung der gedrückten Taste verschoben.
Taste „Auswählen“
Wählt das fokussierte Element auf dem Bildschirm aus.
Taste „Startbildschirm“
Führt den Nutzer zum Startbildschirm des Systems.
Taste „Zurück“
Ermöglicht es Nutzern, zur vorherigen Ansicht zurückzukehren.
Mikrofontaste
Ruft entweder Google Assistant oder die Spracheingabe auf.
Navigation mit dem Steuerkreuz (D-Pad)
Auf einem TV-Gerät navigieren Nutzer entweder mit einem Steuerkreuz (D-Pad) oder mit den Pfeiltasten. Diese Art der Steuerung beschränkt die Bewegung auf „Nach oben“, „Nach unten“, „Nach links“ und „Nach rechts“. Um eine gute für TV optimierte App zu entwickeln, müssen Sie ein Navigationsschema bereitstellen, mit dem Nutzer schnell lernen können, wie sie mit diesen begrenzten Steuerelementen in Ihrer App navigieren.
Das Android-Framework verarbeitet die Richtungsnavigation zwischen Layout-Elementen automatisch. In der Regel müssen Sie also nichts weiter für Ihre App tun. Sie sollten die Navigation jedoch gründlich mit einem Steuerkreuz (D-Pad) testen, um eventuelle Probleme zu erkennen.
Folgen Sie dieser Anleitung, um zu testen, ob das Navigationssystem Ihrer App gut mit einem Steuerkreuz (D-Pad) auf einem TV-Gerät funktioniert:
- Achten Sie darauf, dass ein Nutzer mit einem Steuerkreuz (D-Pad) zu allen sichtbaren Steuerelementen auf dem Bildschirm navigieren kann.
- Bei scrollenden Listen mit Fokus müssen die Tasten „Nach oben“ und „Nach unten“ des Steuerkreuzes (D-Pad) die Liste scrollen und mit der Taste „Auswählen“ muss ein Element in der Liste ausgewählt werden können. Prüfen Sie, ob Nutzer ein Element in der Liste auswählen können und ob die Liste auch dann scrollt, wenn ein Element ausgewählt ist.
- Achten Sie darauf, dass der Wechsel zwischen den Steuerelementen einfach und vorhersehbar ist.
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 (D-Pad). Wenn Sie nach dem Testen feststellen, 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 Sie das nächste Steuerelement definieren, 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 Android-Widgets der Benutzeroberfläche aufgeführt:
| Attribut | Funktion |
|---|---|
nextFocusDown |
Definiert die nächste Ansicht, die den Fokus erhalten soll, wenn der Nutzer nach unten navigiert. |
nextFocusLeft |
Definiert die nächste Ansicht, die den Fokus erhalten soll, wenn der Nutzer nach links navigiert. |
nextFocusRight |
Definiert die nächste Ansicht, die den Fokus erhalten soll, wenn der Nutzer nach rechts navigiert. |
nextFocusUp |
Definiert die nächste Ansicht, die den Fokus erhalten soll, wenn der Nutzer nach oben navigiert. |
Wenn Sie eines dieser expliziten Navigationsattribute verwenden möchten, legen Sie den Wert auf die android:id eines anderen Widgets im Layout fest. Richten Sie die Navigationsreihenfolge als Schleife ein, sodass der Fokus vom letzten Steuerelement wieder zum ersten zurückkehrt.
Klare Fokussierung und Auswahl
Der Erfolg eines Navigationsschemas für TV-Geräte hängt davon ab, ob ein Nutzer schnell erkennen kann, welches Element der Benutzeroberfläche im Vordergrund ist. Wenn Sie nicht klar angeben, welches Element fokussiert ist und auf welches Element ein Nutzer also eine Aktion ausführen kann, kann er schnell frustriert sein und Ihre App verlassen. Aus demselben Grund ist es wichtig, dass immer ein Element fokussiert ist, auf das ein Nutzer sofort nach dem Starten Ihrer App oder jederzeit, wenn sie im Leerlauf ist, eine Aktion ausführen kann.
Verwenden Sie im Layout und in der Implementierung Ihrer App Farbe, Größe, Animation oder eine Kombination dieser Attribute, um Nutzern zu helfen, zu erkennen, welche Aktionen sie als Nächstes ausführen können. Verwenden Sie ein einheitliches Schema, um den Fokus in Ihrer gesamten Anwendung anzugeben.
Android bietet Drawable-Zustandslistenressourcen um fokussierte und ausgewählte Steuerelemente hervorzuheben. Das folgende Codebeispiel zeigt, wie Sie das visuelle Verhalten für einen Button aktivieren, um anzugeben, dass ein Nutzer zum Steuerelement navigiert und es dann ausgewählt hat:
<!-- res/drawable/button.xml --> <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>
Im folgenden XML-Beispielcode für das Layout wird die vorherige Drawable-Zustandsliste auf einen Button angewendet:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Achten Sie darauf, dass die fokussierbaren und auswählbaren Steuerelemente ausreichend Abstand haben, damit die Hervorhebungen um sie herum gut sichtbar sind.
Navigation mit der Taste „Zurück“
Um die Konsistenz zwischen Apps auf der Plattform zu gewährleisten, muss das Verhalten der Taste „Zurück“ diesen Richtlinien entsprechen.
Vorhersehbares Verhalten der Taste „Zurück“
Um eine einfache und vorhersehbare Navigation zu ermöglichen, sollten Sie den Nutzer zum vorherigen Ziel führen, wenn er auf der Fernbedienung auf die Taste „Zurück“ drückt.
Wenn der Nutzer von einem Menüelement zu einer Karte in der Mitte der Seite navigiert und dann auf die Taste „Zurück“ drückt, hängt das Ergebnis davon ab, ob die App die obere oder die seitliche Navigation verwendet:
- App verwendet die obere Navigation:Der Nutzer wird schnell zum Anfang der Seite zurückgescrollt und der Fokus wird auf das Menü gelegt.
- App verwendet die seitliche Navigation:Das Menü auf der linken Seite wird aktiviert und der Fokus wird auf das aktuell aktive Menüelement gelegt.
Achten Sie darauf, dass der Button „Zurück“ nicht durch Bestätigungsbildschirme blockiert wird oder Teil einer Endlosschleife ist.
Nicht.
Vermeiden Sie Blockierungen beim Beenden. Ermöglichen Sie Nutzern, die App ohne
Bestätigung zu beenden.
Nicht.
Vermeiden Sie Endlosschleifen beim Schließen und Öffnen des
Menüs. Idealerweise wird die App beendet, wenn der Nutzer auf die Taste „Zurück“ drückt. Zeigen Sie im Menü nur dann eine Schaltfläche zum Beenden an, wenn es sich um einen Sonderfall handelt, z. B. bei einem Kinderprofil.
Keine Schaltfläche „Nach oben“ oder „Zurück“ anzeigen
Anders als bei Mobilgeräten wird die Taste „Zurück“ auf der Fernbedienung verwendet, um auf einem Fernseher zurück zu navigieren. Es ist nicht erforderlich, eine virtuelle Schaltfläche „Zurück“ auf dem Bildschirm anzuzeigen:
Nicht.
Bei Bedarf eine Schaltfläche „Abbrechen“ anzeigen
Wenn die einzigen sichtbaren Aktionen Bestätigungs-, destruktive oder Kaufaktionen sind, ist es empfehlenswert, eine Schaltfläche Abbrechen einzufügen, mit der Nutzer zum vorherigen Ziel zurückkehren können:
Ja.
Zurück-Navigation implementieren
Das Android-Framework verarbeitet die Zurück-Navigation im Allgemeinen gut, ebenso wie das Steuerkreuz (D-Pad). Wenn Sie die Navigationskomponente verwenden, können Sie eine Vielzahl von Navigationsdiagrammen unterstützen. Gelegentlich müssen Sie möglicherweise ein benutzerdefiniertes Verhalten implementieren, z. B. dass die Taste „Zurück“ den Fokus auf den Anfang einer langen Liste zurücksetzt.
ComponentActivity, die Basisklasse für FragmentActivity und AppCompatActivity, ermöglicht es Ihnen, das Verhalten der Taste „Zurück“ mit dem zugehörigen OnBackPressedDispatcher zu steuern. Sie können ihn mit getOnBackPressedDispatcher() abrufen.
Weitere Informationen finden Sie unter Benutzerdefinierte Zurück-Navigation.
Wiedergabesteuerung auf dem Fernseher
Die Videowiedergabe ist eine der wichtigsten Funktionen auf dem Fernseher. Es ist wichtig, dass sich Videoplayer in Apps auf Android TV gleich verhalten. Weitere Informationen finden Sie in den Wiedergabesteuerungsrichtlinien für den Fernseher.
Navigation auf dem Tab „Live“
Apps mit einem Live-TV-Feed auf dem Tab „Live“ müssen nicht nur die Qualitätsanforderungen für TV-Apps erfüllen, sondern auch die Anforderungen für eine reibungslose Wiedergabe und direktes Zurückkehren zum Tab „Live“ (direct-back), wie in den folgenden Abschnitten beschrieben.
Reibungslose Wiedergabe
Die reibungslose Wiedergabe gilt für das In-App-Verhalten nach einem beliebigen Deeplink zu einem Live- oder linearen Kanal von Google TV und Android TV.
Wenn ein Nutzer auf einen Deeplink klickt, gelten die folgenden Regeln:
- Keine Verzögerungen:Nutzer müssen direkt zur Kanalwiedergabe weitergeleitet werden, ohne dass blockierende oder verzögernde Bildschirme angezeigt werden, z. B. Anmelde- oder Registrierungsabläufe oder Branding-Videos.
- Ausnahme bei Kaltstart:Wenn der Deeplink das Laden der Ziel-App bei einem Kaltstart initiiert, ist die Verzögerung beim Start zulässig. In diesem Fall sind auch Branding-Videos oder Animationen beim Start der App zulässig.
- Ausnahme bei Ladeverzögerung:Wenn das Abstimmen auf den Kanal einige Sekunden dauert, ist die Anzeige von Branding zulässig. Die Dauer darf nur so lange sein, wie das Laden des Kanals dauert.
Wenn der Nutzer abgemeldet ist oder kein Abo hat, können Sie die Wiedergabe für einen kostenpflichtigen Kanal blockieren, um einen Anmelde- oder Registrierungsablauf abzuschließen.
Direktes Zurückkehren zum Tab „Live“ (direct-back)
Wenn Nutzer eine App über einen Deeplink auf dem Tab „Live“ starten und dann auf die Taste „Zurück“ drücken, müssen sie mit einem einzigen Druck auf die Taste „Zurück“ zum Tab „Live“ zurückkehren, unabhängig davon, wie viel Zeit vergangen ist. Dieses Verhalten ist für alle Deeplinks auf dem Tab „Live“ auf Google TV und Android TV erforderlich.
Deeplinks auf dem Tab „Live“ werden durch einen angehängten Deeplink-Parameter unterschieden: ?exit_on_back=[true|false]. Apps müssen diesen Parameter parsen, um zu ermitteln, ob die App vom Tab „Live“ aus gestartet wurde. Wenn exit_on_back auf true gesetzt ist, müssen Apps das Verhalten für das direkte Zurückkehren zum Tab „Live“ implementieren.
Wenn der Nutzer nach dem Deeplink als Erstes eine andere Taste als die Taste „Zurück“ drückt, gilt die Anforderung für das direkte Zurückkehren zum Tab „Live“ nicht. In diesem Fall ist nur das Standardverhalten der Taste „Zurück“ erforderlich.
Angenommen, der Nutzer drückt nach dem Aufrufen eines Deeplinks die Taste „Auswählen“ des Steuerkreuzes (D-Pad), wodurch ein Overlay mit Steuerelementen angezeigt wird. Der Nutzer wartet, bis das Overlay verschwindet, und drückt dann auf die Taste „Zurück“. Da die erste Taste, die nach dem Aufrufen des Deeplinks gedrückt wurde, die Taste „Auswählen“ des Steuerkreuzes (D-Pad) war, gilt die Anforderung für das direkte Zurückkehren zum Tab „Live“ nicht. Stattdessen gilt die normale Back-Stack-Logik der App.
Wiederholtes Drücken des Buttons „Zurück“ muss den Nutzer zum Stammverzeichnis der App und dann zurück zu Google TV oder Android TV führen, ohne dass Endlosschleifen entstehen. Weitere Informationen finden Sie im Abschnitt Vorhersehbares Verhalten der Taste „Zurück“.
Navigationsarchitektur
Eine gut definierte Navigationsarchitektur hilft Nutzern zu verstehen, wo sie sich in Ihrer App befinden und wie sie auf verschiedene Inhalte zugreifen können. Berücksichtigen Sie die folgenden Aspekte des Navigationsdesigns.
Festes Startziel
Der erste Bildschirm, den der Nutzer sieht, wenn er die App über den Launcher startet, ist auch der letzte Bildschirm, den er sieht, wenn er nach dem Drücken der Taste „Zurück“ zum Launcher zurückkehrt.
Deeplinks simulieren die manuelle Navigation
Unabhängig davon, ob Nutzer Deeplinks verwenden oder manuell zu einem bestimmten Ziel navigieren, können sie mit dem Button „Zurück“ durch die Ziele zurück zum Startziel navigieren.
Deeplinks in einer App von einer anderen App aus simulieren die manuelle Navigation. Wenn der Nutzer beispielsweise direkt von Google TV zu einer Detailseite in der Moviestar-App wechselt und dann auf den Button „Zurück“ drückt, wird er zur Startseite der Moviestar-App weitergeleitet.
Klarer Pfad zu allen fokussierbaren Elementen
Ermöglichen Sie Nutzern, mit einer klaren Richtung in Ihrer Benutzeroberfläche zu navigieren. Wenn es keinen direkten Pfad zu einem Steuerelement gibt, sollten Sie es verschieben.
Ja.
Platzieren Sie Steuerelemente wie die hier gezeigte Suchaktion an Stellen, die sich nicht mit anderen anklickbaren Elementen überschneiden.
Nicht.
Vermeiden Sie Layouts, die Steuerelemente an schwer erreichbaren Stellen enthalten. Die hier gezeigte Suchaktion ist möglicherweise schwer mit dem Steuerkreuz (D-Pad) zu erreichen.
Achsen
Gestalten Sie Ihr Layout so, dass sowohl die horizontale als auch die vertikale Achse genutzt werden. Weisen Sie jeder Richtung eine bestimmte Funktion zu, damit Sie schnell durch große Hierarchien navigieren können.
Ja.
Kategorien können auf der vertikalen Achse durchlaufen werden und Elemente in jeder
Kategorie können auf der horizontalen Achse durchsucht werden.
Nicht.
Vermeiden Sie komplexe und verschachtelte Layout-Hierarchien.