TV-Geräte bieten nur eine begrenzte Anzahl von Steuerelementen für Apps. Damit Sie ein effektives Navigationsschema für Ihre TV-App entwickeln können, müssen Sie diese eingeschränkten Steuerelemente sowie die Einschränkungen der Nutzer beim Bedienen der App kennen. Achten Sie beim Erstellen Ihrer Android-App für TV besonders darauf, wie Nutzer navigieren, wenn Sie die Tasten der Fernbedienung anstelle eines Touchscreens verwenden.
Grundprinzip
Ziel ist es, dass die Navigation natürlich und vertraut wirkt, ohne die Benutzeroberfläche zu dominieren oder die Aufmerksamkeit vom Inhalt abzulenken. Die folgenden Prinzipien helfen dabei, die Grundlage für eine einheitliche und intuitive Nutzung in allen TV-Apps zu schaffen.
Sorgen Sie dafür, dass Sie schnell und einfach zu Inhalten gelangen. Nutzer möchten mit nur wenigen Klicks schnell auf Inhalte zugreifen können. Organisieren Sie Ihre Informationen so, dass möglichst wenige Bildschirme nötig sind.
Befolgen Sie Best Practices und Empfehlungen, um die Navigation für Nutzer vorhersehbar zu machen. Sie sollten Navigationsmuster nicht unnötig neu erfinden, da dies zu Verwirrung und Unvorhersehbarkeit führen kann.
Gestalten Sie die Navigation so einfach, dass gängige Nutzerverhalten nahtlos berücksichtigt werden. Machen Sie es nicht zu kompliziert, indem Sie unnötige Navigationsebenen hinzufügen.
Controller
Controller sind in verschiedenen Ausführungen erhältlich – von einer minimalistischen Fernbedienung bis hin zu komplexen Controllern. Alle Controller haben eine Richtungstasten (das Steuerkreuz) sowie die SELECT-, Home- und Zurück-Tasten. Andere Tasten variieren je nach Modell.
Steuerkreuz
Die primäre Navigationsmethode auf Fernsehern ist das Steuerkreuz, das die Hardwaretasten für die Richtungsrichtung „Nach oben“, „Nach unten“, „Links“ und „Rechts“ umfasst. Das Steuerkreuz verschiebt den Fokus von einem Objekt auf das nächste Objekt in Richtung der gedrückten Taste.
Schaltfläche „Auswählen“
Wählt das fokussierte Bildschirmelement aus.
Schaltfläche „Startseite“
Damit wird der Nutzer zum Startbildschirm des Systems weitergeleitet.
Schaltfläche „Zurück“
Damit können Nutzer zur vorherigen Ansicht zurückkehren.
Mikrofonschaltfläche
Ruft entweder Google Assistant oder die Spracheingabe auf.
Navigation über das Steuerkreuz
Auf einem Fernseher können Nutzer entweder das Steuerkreuz oder die Pfeiltasten verwenden. Diese Art von Steuerelement beschränkt die Bewegung nach oben, unten, links und rechts. Um eine gute TV-optimierte App zu erstellen, müssen Sie ein Navigationsschema bereitstellen, mit dem der Nutzer mithilfe dieser eingeschränkten Steuerelemente schnell lernen kann, wie er in der App navigieren kann.
Das Android-Framework verarbeitet die Richtungsnavigation zwischen Layoutelementen automatisch, sodass Sie in der Regel nichts weiter für Ihre App tun müssen. Sie sollten die Navigation jedoch mit einem Steuerkreuz-Controller gründlich testen, um etwaige Navigationsprobleme zu erkennen.
Folgen Sie diesen Richtlinien, um zu testen, ob das Navigationssystem Ihrer App mit einem Steuerkreuz auf einem Fernseher funktioniert:
- Nutzer mit einem Steuerkreuz müssen alle sichtbaren Steuerelemente auf dem Bildschirm aufrufen können.
- Achten Sie bei fokussierten gescrollten Listen darauf, dass Sie mit den Nach-oben- und Nach-unten-Tasten in der Liste scrollen und mit der Auswahltaste ein Element in der Liste auswählen. Nutzer müssen ein Element aus der Liste auswählen können und die Liste muss auch scrollen, wenn ein Element ausgewählt wird.
- Der Wechsel zwischen den Steuerelementen muss einfach und vorhersehbar sein.
Richtungsnavigation ändern
Das Android-Framework wendet automatisch ein Schema für die Richtungsnavigation an, das auf der relativen Position fokussierbarer Elemente in Ihren Layouts basiert. Testen Sie das generierte Navigationsschema in Ihrer App mit einem Steuerkreuz. Wenn Sie nach dem Testen entscheiden, dass sich Nutzer auf eine bestimmte Weise durch Ihre Layouts bewegen 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 erhält:
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
In der folgenden Tabelle sind alle verfügbaren Navigationsattribute für Android-Widgets aufgeführt:
| Attribut | Funktion |
|---|---|
nextFocusDown |
Definiert die nächste Ansicht, die hervorgehoben wird, wenn der Nutzer nach unten navigiert. |
nextFocusLeft |
Legt die nächste Ansicht fest, die hervorgehoben wird, wenn der Nutzer nach links navigiert. |
nextFocusRight |
Definiert die nächste Ansicht, die hervorgehoben wird, wenn der Nutzer nach rechts navigiert. |
nextFocusUp |
Definiert die nächste Ansicht, die hervorgehoben wird, wenn der Nutzer nach oben navigiert. |
Wenn Sie eines dieser expliziten Navigationsattribute verwenden möchten, legen Sie den Wert auf das android:id eines anderen Widgets im Layout fest. Achten Sie darauf, die Navigationsreihenfolge als Schleife festzulegen, damit das letzte Steuerelement den Fokus wieder auf das erste Steuerelement lenkt.
Klaren Fokus und Auswahl schaffen
Der Erfolg des Navigationsschemas einer App auf Fernsehgeräten hängt davon ab, wie einfach ein Nutzer erkennen kann, welches Element der Benutzeroberfläche im Fokus ist. Wenn du nicht klar auf das Element im Fokus und damit auf das Element, das ein Nutzer reagieren kann, angibst, kann dies schnell frustrierend sein und deine App verlassen. Aus demselben Grund ist es wichtig, immer ein Element im Fokus zu haben, für das der Nutzer unmittelbar nach dem Start oder bei jeder Inaktivität der App Aktionen ausführen kann.
Verwende im Layout und bei der Implementierung deiner App Farbe, Größe, Animation oder eine Kombination dieser Attribute, damit Nutzer leichter entscheiden können, welche Aktionen sie als Nächstes ausführen können. Verwenden Sie ein einheitliches Schema, um den Fokus in der gesamten Anwendung anzugeben.
Android bietet Ressourcen für Listen zum Zeichnen, um Markierungen für fokussierte und ausgewählte Steuerelemente zu implementieren. Im folgenden Codebeispiel wird veranschaulicht, wie das visuelle Verhalten einer Schaltfläche aktiviert wird, um anzuzeigen, dass ein Nutzer zum Steuerelement navigiert und es 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 Drawable der vorherigen Statusliste auf ein 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 einen ausreichenden Abstand haben, damit die Spitzlichter um sie herum deutlich sichtbar sind.
Navigation für die Schaltfläche „Zurück“
Achte darauf, dass das Verhalten der Schaltfläche „Zurück“ diesen Richtlinien entspricht, um für Einheitlichkeit in allen Anwendungen auf der Plattform zu sorgen.
Vorhersehbares Verhalten der Schaltfläche „Zurück“ verwenden
Wenn der Nutzer auf die Schaltfläche „Zurück“ der Fernbedienung drückt, gelangt er zum vorherigen Ziel, um eine einfache und vorhersehbare Navigation zu ermöglichen.
Wenn der Nutzer von einem Menüelement zu einer Karte in der Mitte der Seite wechselt und dann auf 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 die obere Navigation:Bringe den Nutzer zurück an den Anfang der Seite, indem du schnell scrollst und den Fokus auf dem Menü aktivierst.
- App verwendet linke Navigationsleiste:Aktivieren Sie das Menü auf der linken Seite und wählen Sie den aktuell aktiven Menüpunkt aus.
Achten Sie darauf, dass die Schaltfläche „Zurück“ nicht durch Bestätigungsbildschirme blockiert wird oder Teil einer Endlosschleife ist.
Das sollten Sie nicht tun.
Vermeiden Sie Exit-Gating. Gib Nutzern die Möglichkeit, die App ohne Bestätigung zu verlassen.
Das sollten Sie nicht tun.
Begeben Sie sich niemals auf eine Endlosschleife beim Schließen und Öffnen des Menüs. Wenn du auf die Schaltfläche „Zurück“ drückst, wird die App idealerweise beendet. Im Menü sollte nur dann eine Schaltfläche zum Beenden angezeigt werden, wenn es sich um einen Sonderfall wie ein Kinderprofil handelt.
Keine Auf- oder Zurück-Schaltfläche anzeigen
Im Gegensatz zu Handheld-Geräten dient die Zurück-Taste auf der Fernbedienung dazu, auf einem Fernseher zurückzugehen. Es ist nicht erforderlich, eine virtuelle Zurück-Schaltfläche auf dem Bildschirm einzublenden:
Das sollten Sie nicht tun.
Schaltfläche zum Abbrechen anzeigen, falls erforderlich
Wenn die einzigen sichtbaren Aktionen sind bestätigende, destruktive oder Kaufaktionen, empfiehlt es sich, eine Abbrechen-Schaltfläche zu haben, über die Sie zum vorherigen Ziel zurückkehren können:
Richtig.
Rückwärtsnavigation implementieren
Das Android-Framework unterstützt die Zurück-Navigation in der Regel genauso wie das Steuerkreuz. Wenn Sie die Navigationskomponente verwenden, werden verschiedene Navigationsgrafiken unterstützt. Gelegentlich kann es erforderlich sein, ein benutzerdefiniertes Verhalten zu implementieren, z. B. dass die Schaltfläche „Zurück“ den Fokus auf den Anfang einer langen Liste setzt.
Mit ComponentActivity, der Basisklasse für FragmentActivity und AppCompatActivity, können Sie das Verhalten der Schaltfläche „Zurück“ mithilfe ihrer OnBackPressedDispatcher steuern, die Sie durch Aufrufen von getOnBackPressedDispatcher() abrufen können.
Weitere Informationen finden Sie unter Benutzerdefinierte Zurücknavigation bereitstellen.
Wiedergabesteuerung auf dem Fernseher
Die Videowiedergabe ist eine der wichtigsten Funktionen auf Fernsehern. Es ist wichtig, dass sich die Videoplayer in Apps bei Android TV gleich verhalten. Weitere Informationen findest du in den Richtlinien für Wiedergabesteuerelemente 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, wie in den folgenden Abschnitten beschrieben.
Reibungslose Wiedergabe
Die reibungslose Wiedergabe gilt für das In-App-Verhalten nach Deeplink eines Live- oder linearen Kanals von Google TV und Android TV.
Nutzer, die auf einen Deeplink eines Live- oder linearen Kanals von Google TV und Android TV klicken, müssen direkt zur Kanalwiedergabe weitergeleitet werden, ohne den Bildschirm der Ziel-App zu blockieren oder zu verzögern. Anmeldeabläufe, Registrierungen, Branding-Videos und andere Verzögerungen sind nicht zulässig.
Wenn der Deeplink jedoch das Laden der Ziel-App aus 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 solcher Kaltstart tritt wahrscheinlich nicht mehr als einmal pro Sitzung auf.
Wenn die Aktivierung 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 zum Laden des Kanals benötigt wird (ähnlich der durchschnittlichen Ladezeit des Kanals innerhalb der Anwendung).
Wenn der Nutzer abgemeldet ist oder kein Abo hat, kannst du die Wiedergabe für einen kostenpflichtigen Kanal blockieren, um den Anmelde- oder Registrierungsvorgang abzuschließen.
Direkt-Back
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 Drücken zurück zum Tab „Live“ zurückkehren, unabhängig davon, wie viel Zeit vergangen ist. Dieses direkte Verhalten ist für alle Deeplinks für den Live-Tab bei Google TV und Android TV erforderlich.
Deeplinks auf dem Live-Tab sind durch einen angehängten Deeplink-Parameter gekennzeichnet: ?exit_on_back=[true|false]. Apps müssen diesen Parameter parsen, um festzustellen, ob die App über den Tab „Live“ gestartet wurde. Wenn exit_on_back den Wert true hat, müssen Apps das Direct-Back-Verhalten implementieren.
Hinweis: Wenn der Nutzer beim ersten Drücken der Schaltfläche nach dem Deeplink eine andere als die Schaltfläche „Zurück“ drückt, gilt die Voraussetzung für eine direkte Weiterleitung nicht. Es ist nur das standardmäßige Verhalten der Schaltfläche „Zurück“ erforderlich.
Angenommen, ein Nutzer drückt nach dem Folgen eines Deeplinks die Auswahltaste auf dem Steuerkreuz, um ein Steuerelemente-Overlay aufzurufen. Der Nutzer wartet, bis das Overlay verschwindet, und drückt dann auf die Schaltfläche „Zurück“. Da es sich bei der ersten Taste, die nach dem Klicken auf den Deeplink um die Auswahltaste des Steuerkreuzes handelt, nicht erwartet, ist das direkte Zurückgehen nicht erforderlich. Stattdessen gilt die normale Back-Stack-Logik der Anwendung.
Wiederholtes Drücken der Zurück-Schaltfläche muss den Nutzer ohne Endlosschleifen zum Stammverzeichnis der App und dann zurück zu Google TV oder Android TV führen. Weitere Informationen finden Sie im Abschnitt Vorhersehbares Verhalten der Schaltfläche „Zurück“.
Navigationsarchitektur
Startziel festgelegt
Der erste Bildschirm, den der Nutzer sieht, wenn er die App über den Launcher startet, ist auch der letzte Bildschirm, den der Nutzer sieht, wenn er nach dem Drücken der Schaltfläche „Zurück“ zum Launcher zurückkehrt.
Mit Deeplink wird die manuelle Navigation simuliert
Ob Deeplinks oder manuelles Aufrufen eines bestimmten Ziels – mit der Schaltfläche „Zurück“ können Nutzer durch die Ziele zurück zum Startziel wechseln.
Durch Deeplinks von einer anderen App zu einer App wird die manuelle Navigation simuliert. Wenn der Nutzer beispielsweise von Google TV direkt zu einer Detailseite in der Moviestar-App wechselt und dann auf die Schaltfläche „Zurück“ drückt, wird er zur Startseite der Moviestar-App weitergeleitet.
Pfad zu allen fokussierbaren Elementen angeben
Ermöglichen Sie den Nutzenden die Navigation durch Ihre Benutzeroberfläche mit einer klaren Richtung. Wenn es keinen direkten Weg zu einem Steuerelement gibt, sollten Sie es an einer anderen Stelle platzieren.
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, die Steuerelemente an schwer zugänglichen Stellen enthalten. Das Erreichen der hier gezeigten Suchaktion ist mit dem Steuerkreuz nicht einfach zu verwalten.
Achsen
Entwerfen Sie Ihr Layout so, dass es sowohl die horizontale als auch die vertikale Achse nutzt. Weisen Sie jeder Richtung eine bestimmte Funktion zu, sodass Sie große Hierarchien schneller bewältigen können.
Richtig.
Kategorien können auf der vertikalen Achse und Elemente innerhalb jeder Kategorie auf der horizontalen Achse durchsucht werden.
Das sollten Sie nicht tun.
Vermeiden Sie komplexe und verschachtelte Layouthierarchien.