User Interface Design für die TV-Plattform neu denken

Eine Einführung in die grundlegenden Bestandteile einer TV-Benutzeroberfläche

Eine große Mehrheit der Verbraucher schneidet heutzutage das Kabel mit Bezahlfernsehen ab, aber das bedeutet nicht, dass sie sich vor dem großen Bildschirm gescheut haben, um ihre Inhalte zu konsumieren. Laut einer Datenveröffentlichung von Nielsen haben die Sehgewohnheiten der US-Erwachsenen ergeben, dass 92 % aller Fernsehsendungen immer noch auf dem Fernsehbildschirm stattfinden. Das sind ziemlich große Zahlen.

Über 92 % der Zuschauer in den USA finden immer noch auf dem Fernsehbildschirm statt.

Die Bedeutung von „Fernsehen“ hat sich in den letzten Jahrzehnten stark verändert. Wir sind nicht mehr auf eine Fernbedienung und eine Kabelbox beschränkt, um unsere Bildschirme zu füllen; Wir verwenden Smart TVs oder streamen mit Pucks wie Roku, Amazon Fire und Apple TV oder verbinden Videospielkonsolen wie Xbox und Playstation. Und jedes dieser Geräte ermöglicht eine Benutzeroberfläche, die viel leistungsfähiger ist als Ihre altmodische Anleitung auf dem Bildschirm.

26 % der weltweiten Online-Befragten bezahlen für das Ansehen von Sendungen oder VOD-Programmen über abonnementbasierte Online-Dienste wie Hulu, Netflix oder Amazon (Nielsen ). Das ist eine beachtliche Zahl. 72 % der Befragten bestätigten jedoch, dass sie immer noch bezahlen, um ihre Inhalte über eine herkömmliche TV-Verbindung anzusehen.

Bedeutet dies, dass der traditionelle TV-Anschluss nicht mehr wegzudenken ist?

Wir alle scheinen zu glauben, dass die Kabelschneider da draußen eine höhere Zahl darstellen würden. Nielsen berichtet, dass voraussichtlich 116,4 Millionen Haushalte in den USA während der Saison 2015-16 fernsehen werden. Dies ist eine riesige Zahl, und der Bericht ergab auch, dass etwa 9,5 Millionen dieser Haushalte auf kostenloses OTA-TV umgestellt haben. Von allen Streaming-Diensten da draußen scheint Netflix (60,7 %) die Nase vorn zu haben, gefolgt von Amazon Prime Video (49,4 %) und Hulu (26 %). Ich glaube, einer der Hauptgründe, warum die Leute das Kabel durchschneiden, ist, dass wir nur für das bezahlen wollen, was wir verwenden.

Im Vergleich zu Computern und sogar Mobiltelefonen ist das Entwerfen von UIs für das Fernsehen noch ein relativ neues Gebiet. Es ist auch eine grundlegend andere Plattform und die Art und Weise, wie wir unsere Inhalte konsumieren, ist anders. Design für das Fernsehen erfordert eine einzigartige Reihe von Überlegungen, einschließlich Bildschirmgröße und Zuschauerabstand, technische Einschränkungen und Nutzungskontext. Benutzer befinden sich in einer „zurückgelehnten“ Erfahrung und sitzen durchschnittlich 10 Fuß entfernt, und die Benutzeroberfläche und das Erlebnis müssen dies widerspiegeln. Im Gegensatz zu Touchscreen-Tablets und -Telefonen erfolgen die Interaktionen bei Fernsehern über ein D-Pad (Steuerkreuz) mit einer Fernbedienung oder einem Videospiel-Controller, was die Komplexität erhöht.

Der Bildschirm

Fernseher sind nicht wie Tablets und Telefone.

Fernseher haben sich im Laufe der Zeit stark verändert, von einem riesigen, klobigen Möbelstück zu einem eleganten, minimalistischen Display, das an der Wand hängt. Damals, als Fernseher das gesamte Wohnzimmer einnahmen, verwendeten sie eine Technologie, die auf allen Fernsehgeräten, insbesondere in der Nähe der Ränder, inkonsistente Bilder erzeugte. Um diese Probleme zu kompensieren, wurden CRT-Fernseher einem Overscan unterzogen. Dies bedeutet nur, dass die Bilder leicht vergrößert wurden, sodass die Ränder nicht außerhalb der Grenzen des Anzeigebereichs lagen.

Traditionell haben die Sender dies vorausgesehen und wollten vermeiden, dass ihre kritischen Informationen zu nahe an den Rändern des Bildschirms angezeigt werden. Um dieses Problem zu lösen, erstellten sie einen titelsicheren Bereich, um den Text ohne Verzerrung anzuzeigen, und einen aktionssicheren Bereich, in dem das Bild sicher angezeigt werden konnte.

Aus Gründen, auf die wir keinen Einfluss haben, ist Overscan immer noch eine Sache … sogar auf Ihren neuen HDTVs. Die Menge an Overscan ist bei allen Fernsehern nicht gleich. Um sicherzustellen, dass alle Ihre primären Informationen wie Titel und wichtige Aktionen sicher sind, halten Sie sie innerhalb der sicheren Ränder.

Einen festgelegten „Standard“ für sichere Aktionsbereiche gibt es derzeit nicht; es wird meistens von der Plattform selbst definiert. Google hält seinen sicheren Bereich eng und Apple ist etwas großzügiger. Aus meinen vielen Suchen im Internet gehen hervor, dass diese Zonen zwischen 85 % und 95 % eines Fernsehbildschirms von der Mitte aus variieren. Um die Anforderungen aller verschiedenen Plattformen zu erfüllen, auf denen Sie möglicherweise arbeiten, würde ich vorschlagen, einen sicheren Bereich mit 60 Pixel oberen und unteren Rändern und 90 Pixel Seitenrändern zu verwenden. Dies bedeutet, dass alle Ihre primären Informationen in diesen Bereich passen müssen, um alle Fernsehbildschirme aufzunehmen und alle Plattformanforderungen zu erfüllen.

Um mit dem Design Ihrer neuen Fernsehbenutzeroberfläche zu beginnen, erstellen Sie eine neue Leinwand im Format 1920 x 1080. Ihre Auffüllung (sichere Zone) sollte 90 Pixel an den Seiten (links und rechts) sowie 60 Pixel für oben und unten betragen. Hier erhalten Sie Ihren kostenlosen Datei-Download.

Navigation

Wie Oben-Unten-Links-Rechts TV-Schnittstellen formt.

Als Designer bestimmt die Hardware, für die wir entwerfen, einige unserer Designmuster. Auf Mobilgeräten wischen, tippen, drücken, ziehen usw., um Aktionen auszuführen. Registerkarten und Menüs werden auf unseren Geräten als Navigationsmuster verwendet. Das Fernsehen bietet eine große Leinwand, die leicht zu komplex werden kann, wenn sie nicht richtig gemacht wird. Das Anzeigen langer Reihen von Inhalten, um die für die Benutzer sichtbare Menge davon zu maximieren, ist zu einem Standardelement von Fernseh-UIs geworden.

Im Gegensatz zu mobilen Geräten, die wir mit unseren Fingern steuern, werden die meisten TV-Benutzeroberflächen über ein D-Pad gesteuert und in einiger Entfernung vom Bildschirm verwendet. Ob auf einer Fernbedienung oder einem Gamepad, das D-Pad beschränkt die Navigation auf vier Richtungen: nach oben, unten, links und rechts.

Jede Plattform hat auch ihre eigenen etablierten Konventionen. Auf der Xbox bieten die Trigger beispielsweise eine „Bild-auf“- und „Bild-ab“-Steuerung, während die Stoßfänger verwendet werden, um zwischen den Inhaltsansichten zu wechseln. Es gibt auch eine Reihe von „Power-User“-Schaltflächen auf jeder Plattform, mit denen erfahrenere Spieler vertraut sein dürften.

Das andere kritische Element in TV-UIs ist der Fokusstatus . Ohne die Möglichkeit, den Bildschirm zu berühren oder eine Maus zu verwenden, müssen Benutzer zu dem Element navigieren, das sie auswählen möchten. Während der Benutzer innerhalb der App navigiert, sollten verschiedene UI-Elemente hervorgehoben werden, die anzeigen, dass ein Navigationselement im Fokus ist.

Fokus- und Hervorhebungszustände sind beim Entwerfen für das Fernsehen sehr wichtig. Dieser Fokuszustand ist das Element, das eine auswählbare Komponente hervorhebt und die aktuelle Position des Benutzers auf dem Bildschirm anzeigt. Die Form, in der der Fokus angezeigt wird, kann variieren; Je nach Komponente wird jedoch immer die Konsistenz entscheidend sein. Ein klarer und gut sichtbarer Fokus hilft dem Benutzer, seine aktuelle Position auf dem Bildschirm schnell zu erkennen, und erleichtert die Navigation. Wenn ein Benutzer kurz vom Fernseher wegschaut und dann zurückblickt, sollte automatisch klar sein, welche Option gerade für die Navigation ausgewählt ist. Jedes Element auf dem Bildschirm muss mit dem Cursor erreichbar sein, und es sollte immer klar sein, wohin sich der Cursor als nächstes bewegen kann.

Beispiele für Designs, bei denen sich Benutzer fragen könnten, wo sie sich in der App befinden. Diese Beispiele liefern keine ausreichende visuelle Anzeige (Fokuszustand) der Positionierung. Benutzer sollten jederzeit klar sehen können, wo sie sich befinden, ohne sich nach oben oder unten bewegen zu müssen. Sie sollten in der Lage sein, vom Fernsehgerät weg und zurück zu blicken und trotzdem Ihre Position zu kennen.

Typografie

Lesen aus zehn Fuß Entfernung.

TV-Apps werden oft als 10-Fuß-Erlebnisse bezeichnet, ein Begriff, der sich auf eine gemeinsame Entfernung zwischen Ihnen und Ihrem Fernseher bezieht. Im Gegensatz zu anderen Geräten wie Mobil- und Desktop-Geräten soll das Fernsehen eher eine Umgebung zum Zurücklehnen und Entspannen sein. Angesichts dieser Entfernung müssen wir eine Benutzeroberfläche etwas anders behandeln als im Web oder auf Mobilgeräten.

Fernsehbildschirme sind im Allgemeinen größer als mobile Geräte und Desktop-Computermonitore, werden aber aus größerer Entfernung betrachtet. Die Lesbarkeit wird zu einem wichtigen Merkmal, was bedeutet, dass die Größe von Text und anderen Elementen entsprechend angepasst werden muss. Abhängig von Ihrem Alter wären 18 Pixel wahrscheinlich die kleinste lesbare Größe und nur für unwesentliche Etiketten geeignet, wie z. B. ein Augenbrauenetikett. Als allgemeine Faustregel gilt jedoch, dass die von Ihnen gewählte Schriftgröße nie kleiner als 24 pt sein sollte. Dies ist meiner Meinung nach die minimale Schriftgröße, um jedem Benutzertyp gerecht zu werden.

Der Schlüssel zu guter Typografie im Fernsehen liegt im ständigen Testen. Dünne, kleine Schrift auf Ihrem Monitor sieht sauber und scharf aus, aber sobald sie auf einem Fernseher angezeigt wird, kann sie überbelichtet oder unlesbar erscheinen.

Zeilen scannen

Was sind Scanlinien?

Im Gegensatz zu Desktop-, Mobil- und Tablet-Bildschirmen besteht das Bild auf einem Fernsehbildschirm aus ungeraden und geraden Abtastzeilen. Der Fernseher gibt diese Zeilen in Phasen wieder, die schnell zwischen ungeraden und geraden Abtastzeilen wechseln. Jedes einzelne Pixel (oder jede Zeile von Pixeln), die auf eine einzelne Abtastzeile fällt, flackert. Um ein Flackern Ihrer Artikel auf dem Bildschirm zu vermeiden, sollten Sie Ihre Zeilen immer auf gerade Zahlen und nicht dünner als 2 Pixel halten. Dies ist etwas, das Sie berücksichtigen sollten, wenn Sie an plattformübergreifenden Projekten arbeiten und sich darauf vorbereiten, Ihre Designs von Touch-Geräten (Mobilgeräte und Tablets) zu übertragen, auf denen Sie häufig 1-Pixel-Randschaltflächen für das Fernsehen erstellen.

Eine andere Möglichkeit, diese verschwommenen Linien oder Formen zu vermeiden, besteht darin, sicherzustellen, dass Ihre Designs immer pixelgenau sind. Das folgende Beispiel ist ein gutes Beispiel für Linien, die mit ungeraden Zahlen erstellt werden. Wie Sie sehen können, können wir die Auswirkungen davon deutlich sehen, und es wird für die Augen beunruhigend.

Farbe

TV-Displays haben Grenzen.

Das erste Element, das Sie beachten sollten, ist, dass Fernseher einen viel höheren Gammawert haben als Desktop-, Tablet- und Mobilgeräte. Der beste Weg, um zu beschreiben, wie sich Gamma auf die Bildqualität auswirkt, ist, dass Gamma den Helligkeitsunterschied zwischen den einzelnen Schritten in der Graustufe darstellt oder wie „schnell“ Schwarz heller wird. Doppeltes Licht empfinden wir als nur einen Bruchteil heller. Verschiedene Marken und Modelle von Fernsehern unterscheiden sich stark, wenn es um Helligkeit, Anzeige und andere Einstellungen geht. Wie Schrift sollte Farbe früh und oft auf Fernsehern getestet werden.

Einige Richtlinien, die Sie bei der Auswahl Ihrer Farben beachten sollten: Helle Farben können beim nächtlichen Fernsehen oder in einem dunklen Raum unangenehm für die Augen sein. Vermeiden Sie eine übermäßige Verwendung gesättigter Farben (insbesondere Rot) und eine starke Verwendung von Weiß in großen Elementen oder Hintergründen. Reines Weiß erzeugt Lichthöfe und andere visuelle Ablenkungen. Bei der Auswahl von Weiß wird empfohlen, einen #f1f1f1 , um ein Flackern zu vermeiden. Um die Lesbarkeit zu erhöhen, stellen Sie sicher, dass Sie genügend Kontrast zwischen Ihren Elementen erzeugen

Die allgemeine Regel lautet, scharfe Kanten zwischen kontrastreichen Farben (insbesondere helle Farben neben dunklen Farben) und „heiße“ Farben wie sehr gesättigte Rot- und Gelbtöne zu vermeiden. Diese verlaufen leichter als weniger gesättigte Farben oder kühlere Farben wie Blau und Grün.

Testen Sie Farben immer auf einem echten Fernseher, um zu verstehen, wie sich Ihre Farbauswahl auf den großen Bildschirm überträgt. Wenn möglich, sehen Sie sich Ihre App auf mehreren Fernsehern in der Vorschau an, da die Farben zwischen den Fernsehermodellen stark variieren können. Schließen Sie einfach das HDMI-Kabel Ihres Fernsehers an und testen Sie es.

Die Grundlagen

Kleinigkeiten zu beachten.

Diese Elemente sollten verwendet werden, um Ihre Designs als Ganzes zu leiten. Die wichtigsten Überlegungen beim Entwerfen Ihrer TV-Benutzeroberflächen sind Einfachheit und leichte Interaktion.

Während viele der Grundlagen und Best Practices für das Interaktionsdesign immer noch gelten, wird der Fernseher im Gegensatz zu einem Computer oder Mobilgerät entspannter verwendet. Die Benutzeroberfläche auf einem Fernseher sollte klar, einfach und visuell sein. Das Design erfordert Einfachheit und Klarheit bei geringer Informationsdichte. Die Elemente müssen groß und weit genug voneinander entfernt sein, um aus der Ferne gelesen zu werden. Präsentieren Sie eine klare Reihe von Aktionen oder Optionen für jeden Bildschirm.

Dieses Design ist sauber und einfach und verwendet schöne große Kartenbehandlungen. Fokuszustände werden mit Skalen- und Schlagschatten erreicht, die mit dem Rest des sauberen Designs ausgerichtet sind. Metadaten sind auch nur beim Hovern sichtbar, was es den Benutzern ermöglicht, sich auf die aktuelle Karte zu konzentrieren.

Platzieren Sie die wichtigsten Inhalte oder Optionen zuerst auf dem Bildschirm, damit sie für den Benutzer leicht sichtbar und navigierbar sind. Unnötige Rasterebenen müssen entfernt werden. Das Hineingehen in verschiedene Ebenen und das Wiederaussteigen muss einfach und selbstverständlich sein.

Der wichtigste Faktor beim Entwerfen einer TV-Anwendung ist eine klare und genaue Navigation für die Benutzerbedienung. Wenn die Navigation mehrdeutig ist, fühlen sich die Benutzer verwirrt und unsicher.

Kurz gesagt, Benutzer sollten immer genau wissen, wo sie sich innerhalb einer Anwendung befinden. Denken Sie daran, dass der Benutzer nur grundlegende Steuerelemente zum Navigieren verwendet. Move, Return, Enter und andere grundlegende Navigationsfunktionen müssen klar sein. Die Benutzer sollten in der Lage sein, die gewünschten Operationen mit diesen Aktionen zu verwenden.

Als Designer ist es unsere Aufgabe, Benutzeroberflächen zu erstellen und zu gestalten, die den Benutzern den Zugriff auf Inhalte auf eine Weise ermöglichen, die klar und einfach zu navigieren ist. Wir können nicht erwarten, dass die Benutzer neue Gewohnheiten anpassen, nur damit sie unsere Inhalte sehen können. Vielmehr müssen wir unsere Benutzeroberflächen so anpassen, dass sie im Dunkeln von jemandem bedient werden können, der uns weniger als seine volle Absicht gibt, und mit einem sehr begrenzten Eingabegerät. Es ist eine ziemliche Herausforderung, aber die potenzielle Auszahlung ist enorm. Viel Spaß beim Gestalten!

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft