Fernseher bieten eine begrenzte Anzahl von Navigationssteuerelementen für Apps. Um ein effektives Navigationsschema für die TV-Benutzeroberfläche zu erstellen, sollten Sie diese eingeschränkten Steuerelemente und die Art und Weise berücksichtigen, wie der Nutzer mithilfe der Tasten der Fernbedienung anstelle eines Touchscreens navigiert.
Highlights
- Der Controller bietet eingeschränkte Navigationsfunktionen – oben, unten, links und rechts. Achte also darauf, wie dies das UI-Design deiner App beeinflussen kann.
- Die Navigation sollte sich natürlich und vertraut anfühlen.
- Mit der Zurück-Taste auf der Fernbedienung kannst du die Navigation vereinfachen.
- Wenn ein Nutzer nicht direkt zu einem Steuerelement gelangt, sollten Sie es verschieben.
Grundprinzip
Ziel ist es, dass die Navigation natürlich und vertraut anfühlt, ohne die Benutzeroberfläche zu dominieren oder die Aufmerksamkeit vom Inhalt abzulenken. Die folgenden Grundsätze helfen, eine Grundlage für eine einheitliche und intuitive Nutzung von TV-Apps zu schaffen.
effizienter
Sorgen Sie dafür, dass der Zugriff auf Inhalte schnell und einfach ist. Nutzer möchten auf Inhalte schnell und mit möglichst wenig Klicks zugreifen 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 wird nicht zu kompliziert, 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 Auswahl-, Start- und Zurück-Tasten. Andere Schaltflächen variieren je nach Modell.
- Steuerkreuz: Die primäre Navigationsmethode auf Fernsehern ist das Steuerkreuz, das Hardwaretasten nach oben, unten, links und rechts enthält.
- Auswahlschaltfläche: Wählt das fokussierte Bildschirmelement aus. Durch Gedrückthalten werden weitere Optionen eingeblendet.
- Startbildschirmtaste: Der Nutzer wird zum Startbildschirm des Systems weitergeleitet.
- Schaltfläche „Zurück“: Diese Schaltfläche ermöglicht es dem Nutzer, zur vorherigen Ansicht zurückzukehren.
- Mikrofonschaltfläche: ruft entweder Google Assistant oder die Spracheingabe auf.
Steuerung über das Steuerkreuz
Auf einem Fernseher können Nutzer über ein 4-Wege-Steuerkreuz navigieren: nach oben, unten, links und rechts. Entwerfen Sie zum Erstellen einer optimalen TV-App ein Navigationsschema, bei dem der Nutzer mithilfe der vier Pfeiltasten schnell lernen kann, Ihre App zu verwenden. Das Steuerkreuz verschiebt den Fokus von einem Element zum nächstgelegenen Element in der entsprechenden Richtung.
Wenn Sie testen möchten, ob die Navigation Ihrer App mit einem Steuerkreuz auf einem Fernseher funktioniert, sollten Sie Folgendes berücksichtigen:
- Stellen Sie sicher, dass Nutzende zu allen fokussierbaren Elementen auf dem Bildschirm navigieren können.
- Achten Sie darauf, dass die Navigationsrichtung einfach und vorhersehbar ist.
- Achte bei Scrolling-Listen darauf, dass die Nach-oben- und Nach-unten-Steuertasten durch die gesamte Liste scrollen und jedes Listenelement ausgewählt werden kann.
Startbildschirmtaste
Durch Drücken der Home-Taste gelangt der Nutzer immer zurück zum Google TV Home oder Launcher. Die aktuelle App wird standardmäßig im Hintergrund angehalten.
Durch langes Drücken der Startbildschirmtaste wird das Systemdashboard bei Google TV und das App-Raster bei Android TV angezeigt. Das Standardverhalten kann je nach Hersteller variieren.
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. Letztendlich sollte der Nutzer zum Startbildschirm oder Launcher von Google TV weitergeleitet werden, wenn er die Zurück-Taste gedrückt hält.
Der Nutzer wird durch schnelles Scrollen zurück an den Anfang der Seite geleitet und aktiviert den Fokus auf das Menü.
Das Menü auf der linken Seite ist aktiviert und der Fokus des Nutzers wird auf den aktiven Menüpunkt gelenkt.
Achte darauf, dass die Schaltfläche „Zurück“ nicht von Bestätigungsbildschirmen verdeckt wird oder Teil einer Endlosschleife ist.
Don'ts
Keine Zurück-Schaltfläche anzeigen
Anders als auf Handheld-Geräten wird die Zurück-Taste auf der Fernbedienung verwendet, um auf einem Fernseher rückwärts zu navigieren. Es ist nicht notwendig, eine virtuelle Zurück-Schaltfläche auf dem Bildschirm anzuzeigen.
Don'ts
Schaltfläche „Abbrechen“ anzeigen, falls erforderlich
Wenn nur die Aktionen „Bestätigen“, „Löschen“ oder „Kauf“ sichtbar sind, empfiehlt es sich, eine Schaltfläche „Abbrechen“ zu verwenden, mit der zum vorherigen Ziel zurückgekehrt wird.
Dos
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 Drücken der Schaltfläche „Zurück“ zum Launcher zurückkehrt.
Mit Deeplinks wird die manuelle Navigation simuliert.
Unabhängig davon, ob sie Deeplinks verwenden oder manuell zu einem bestimmten Ziel navigieren, können Nutzer die Schaltfläche „Zurück“ verwenden, um von einer beliebigen Stelle in der App 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 wechselt 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 den Nutzern, mit einer eindeutigen Richtung durch Ihre Benutzeroberfläche zu navigieren. Wenn es nicht den richtigen Weg zu einer Kontrolle gibt, sollten Sie sie verlegen.
Dos
Don'ts
Axis
Entwerfen Sie Ihr Layout unter Berücksichtigung der horizontalen und vertikalen Achsen. Weisen Sie jeder Richtung eine bestimmte Funktion zu, um das Navigieren in großen Hierarchien zu beschleunigen.
Dos
