Anzeige
Anzeige
UX & Design
Artikel merken

App-Design für SmartTV optimieren: Das musst du beachten

Laut einer Studie der GfK steht mittlerweile in jedem fünften deutschen Haushalt ein SmartTV mit Internetanschluss. Zeit also abzuwägen, ob die Optimierung eigener Apps oder Websites für den TV-Screen in Frage kommt. Dabei gilt es, eine ganze Reihe an Besonderheiten in Sachen Gestaltung, User-Interface und Nutzungsszenario zu berücksichtigen.

7 Min. Lesezeit
Anzeige
Anzeige

Während es beim Tablet eine rege Diskussion gibt, ob sich diese Geräte nicht auch zum Erstellen von Inhalten eignen, macht diese Diskussion beim Fernseher wenig Sinn: einschalten, zurücklehnen und genießen lautet die Devise. Vor diesem Hintergrund muss sich eine erfolgreiche Smart-TV-App messen lassen. Für produktives Arbeiten sind andere Geräte besser geeignet. Die Bereiche, in denen ein Smart-TV punkten kann, sind andere: ein großer Bildschirm, vergleichsweise sehr guter Sound und Support für eine Reihe von Videocodecs.

Zielgruppe: Couch Potato

Anzeige
Anzeige

[metabox keyword=“smart-tv“]Auf dem heimischen Sofa sitzt man ein paar Meter entfernt vom Fernseher und so verschwindet der Vorteil eines großen Bildschirms recht schnell. Wenn man den weiter entfernten Fernseher gar mit einem Mobiltelefon oder Tablet vergleicht, das man nahezu direkt vor den Augen hat, dann erübrigt sich der Vorteil des großen Screens bei TV-Geräten schnell wieder.

Bedienelemente müssen auf dem Fernseher aus diesen Gründen eine vergleichsweise große Fläche sowie größere Abstände zueinander einnehmen, um auf Distanz gut sichtbar und unterscheidbar zu bleiben. Statt auf einem Fernseher mehr anzuzeigen als auf einem Tablet gilt die Regel: reduzieren und das Verbleibende vergrößern.

Anzeige
Anzeige

Geteilte Freude ist doppelte Freude

In der typischen Umgebung eines Fernsehers macht nicht jedes App-Konzept Sinn. Das gilt beispielsweise für Social-Apps. Wenn man von Apps mit einer sozialen Komponente spricht, handelt es sich meist um Apps, die stark personalisiert sind. Dies funktioniert gut bei Geräten, die hauptsächlich von einer Person benutzt werden, also bei Mobiltelefonen und Tablets. Im Umfeld des TV bedeutet „social“ allerdings, dass der Fernseher von mehreren Personen benutzt wird und das meist gleichzeitig. Vor diesem Hintergrund lässt sich nicht jede App oder Website ohne Weiteres übertragen.

Anzeige
Anzeige

Ein gutes Beispiel ist Twitter. Zwar findet sich schon allein aus Prestigegründen auf jeder Smart-TV-Plattform eine Twitter-App, jedoch möchte man sein Soical Network aus Gründen der Privatsphäre nicht unbedingt auf einem großen Fernseher im Wohnzimmer nutzen. Generell ist der Umgang mit verschiedenen Zugangsdaten, Profilen und Privatbereichen auf dem TV eher unhandlich. Bevor man anfängt, seine App oder Webseite für den Fernseher anzupassen, sollte man sich also fragen, ob das Konzept überhaupt in diese Umgebung passt.

Vorbildlich: SnagFilms für Google TV. Eine simple UI, die ohne Probleme mit dem Steuerkreuz bedient werden kann.

Vorbildlich: SnagFilms für Google TV. Eine simple UI, die ohne Probleme mit dem Steuerkreuz bedient werden kann.

Die Bildfläche

Während Auflösungen bei PC, Tablet und Mobiltelefon alle möglichen Werte annehmen können, ist die Welt bei den Fernsehern noch überschaubar. Ein modernes HDTV-Gerät hat eine Auflösung von 1920×1080 Pixeln (1080i/p). Bei HD-ready ist es schon ein wenig schwieriger. Ein Fernseher mit diesem Label muss eine Auflösung von mindestens 1280×720 (720p) aufweisen.

Anzeige
Anzeige

Auch wenn Responsive Design beim Fernseher keine so große Rolle spielt wie bei anderen Geräten, kann man auch hier trotzdem nicht auf pixel-genaues Design setzen. So ist aus historischen Gründen der tatsächlich sichtbare Bereich des TV-Schirms nochmals um circa sechs Prozent kleiner. Dieser so genannte Overscan-Bereich wurde früher benutzt, um Ungenauigkeiten der Technik zu kaschieren. Da dieser Bereich je nach Fernseher unterschiedlich groß ausfallen kann, empfiehlt Google in den Guidelines für die eigene Smart-TV-Plattform Google TV einen Mindestabstand von zehn Prozent zum Bildschirmrand einzuhalten.

Im Allgemeinen ist ein Fernseher auch heute noch auf die Darstellung des üblichen Fernsehprogramms optimiert. Dadurch ergeben sich einige Unterschiede zu Computerbildschirmen und anderen Displays. Während man normalerweise beispielsweise bei Websites eher helle Hintergründe und dunkle Schriften bevorzugt, ist beim Fernseher das Gegenteil der Fall. Helle Hintergründe wirken schnell grell und blenden durch die große Fläche. Darüber hinaus begünstigt Weiß, sowie helles Rot und Orange das Entstehen von Geisterbildern (Ghosting). Diese leicht versetzten Doppelbilder lassen das Gesamtbild unscharf erscheinen.

Die technische Fokussierung auf die Darstellung von Fernsehprogrammen bekommt man leider auch bei der Rechenleistung zu spüren. Normalerweise bekommt der Fernseher über einen Breitbandanschluss fertig gerenderte Bilder geliefert, für deren Darstellung nicht mehr viel Rechenpower nötig ist. Dadurch sind Fernseher und Set-Top-Boxen eher schwachbrüstig ausgerüstet. Dies schränkt die Möglichkeit für manche Anwendung oder gar großflächige Animationen unter Umständen erheblich ein.

Anzeige
Anzeige

Eingabegeräte für den Smart TV

Zwar unterstützen Smart-TVs heutzutage eine Reihe von Eingabegeräten, darunter auch die üblichen wie Tastatur und Maus, jedoch sind diese nicht zwingend notwendig und häufig auch gar nicht vorhanden. Der kleinste gemeinsame Nenner bleibt weiterhin das von der Fernbedienung bekannte D-Pad, ein Steuerkreuz, das nur Oben, Unten, Links und Rechts kennt. Ein auf den Fernseher optimiertes UI sollte deshalb optimal mit dem Steuerkreuz bedienbar sein. Weitere Eingabemethoden, wie ein Touchpad oder Sprach- und Gestensteuerung, sollten Entwickler als optionale Erleichterung beziehungsweise Verbesserung für den Benutzer ansehen, aufgrund ihrer noch geringen Verbreitung allerdings erst in einem zweiten Schritt berücksichtigen.

Optimieren für das Steuerkreuz

Bei einer Oberfläche, die für die Bedienung mit dem Steuerkreuz ausgelegt ist, gilt: weniger ist mehr. Dem Benutzer muss auf den ersten Blick ersichtlich sein, wo er sich auf dem Bildschirm befindet und wie er sein Ziel erreicht. Dazu ist es wichtig, dass ein gut sichtbarer Indikator das gerade fokussierte Element hervorhebt. Aus der optischen Ansicht muss sich auch der Bewegungsablauf ableiten lassen: sind Bedienelemente horizontal angeordnet, müssen diese dann auch konsequenterweise mit Links- und Rechtsbewegungen erreichbar sein.

Scrollende Elemente sind auf einem Fernseher eher unüblich und man sollte ihren Einsatz am besten vermeiden. Lässt es sich dennoch nicht umgehen und sind Listen oder Raster erforderlich, muss man aufpassen, dass man den User nicht in diesen Elementen einsperrt. Muss erst eine Liste mit dem Steuerkreuz komplett durchquert werden, um ein Element am oberen oder unteren Bildschirmrand zu erreichen, kann schnell Frust aufkommen. Häufig wird deshalb die zentrale Navigation am linken Bildschirmrand angezeigt. Egal wie weit unten man sich dann in einer vertikalen Liste befindet, man kann immer mit einer Linksbewegungen zurück zur Hauptnavigation. Eine gute Oberfläche für einen Fernseher lässt den Nutzer immer in so wenigen Schritten wie möglich sein Ziel erreichen.

Anzeige
Anzeige
Kleinster gemeinsamer Nenner bei der Bedienung: Das D-Pad (hier auf einer Fernbedienung für Samsung Smart-TVs).

Kleinster gemeinsamer Nenner bei der Bedienung: Das D-Pad (hier auf einer Fernbedienung für Samsung Smart-TVs).

Text: Spärlich und mit Bedacht

Die grundsätzliche Regel für Text auf dem Fernseher lautet: wenn möglich vermeiden. Die Nutzer sind es nicht gewohnt, große Textblöcke auf dem Fernsehgerät zu lesen. Sollte dennoch Text dargestellt werden, dann gilt: möglichst groß und in einer Schriftart, die die verschiedenen Inkonsistenzen von TV-Displays verzeiht. Die BBC und auch Google empfehlen beim Design für interaktive TV-Geräte eine Schriftgröße von 24 Punkten und niemals kleinere Werte als 18 Punkte zu benutzen. Insgesamt sollte der Text nicht mehr als 90 Worte umfassen und in kleine Brocken aufgeteilt sein.

Von den Besten lernen: Spielkonsolen

Gerade wenn man für TV-Geräte entwickelt lohnt sich ein Blick, was der Markt zu bieten hat und was bereits erfolgreich ist. Ein gutes Beispiel und Inspiration sind hier die Oberflächen beziehungsweise Dashboards von Spielekonsolen, die der User in der Regel mit einem Steuerkreuz bedient.

Die Oberfläche der Xbox 360 hat eine beeindruckende Evolution durchlaufen. Microsoft hat seit dem ersten Dashboard 2005 (hier im Bild) immer wieder an Design und Interface geschraubt.

Die Oberfläche der Xbox 360 hat eine beeindruckende Evolution durchlaufen. Microsoft hat seit dem ersten Dashboard 2005 (hier im Bild) immer wieder an Design und Interface geschraubt.

Vergleicht man die Interfaces von Wii U, Playstation 3 und Xbox 360 lassen sich schnell Gemeinsamkeiten finden: Text wird nur sehr sparsam eingesetzt – beispielsweise zur Untertitelung oder für Überschriften. Stattdessen kommen häufig Icons zum Einsatz, teilweise auch Kacheln, die in einem Raster angeordnet und leicht zu navigieren sind. Von den drei etablierten Konsolen am Markt kann mittlerweile das Dashboard der Xbox 360 am meisten überzeugen. Microsoft hat seit 2005 in diversen Updates nicht nur viel an Design und Bedienbarkeit geschraubt, sondern neben neuen Inhalten wie TV, Video und Musik auch neue Eingabemöglichkeiten wie Sprach- und Gestensteuerung per Kinect eingeführt.

Anzeige
Anzeige
Das aktuelle Xbox-360-Dashboard: Sauber und aufgeräumt. Horizontale Navigation oben und Teaser-Kacheln unten.

Das aktuelle Xbox-360-Dashboard: Sauber und aufgeräumt. Horizontale Navigation oben und Teaser-Kacheln unten.

Designer und Entwickler von Smart-TV-Apps können von der Evolution des Xbox-360-Dashboard eine ganze Menge lernen. Das aktuelle User-Interface ist so simpel und übersichtlich gehalten, dass die Steuerung per Steuerkreuz gut funktioniert. Es ist zu jeder Zeit ersichtlich, in welchem Bereich sich der Nutzer gerade aufhält und wie er zu anderen Bereichen navigiert. Wenige Eingaben mit dem Steuerkreuz sind dafür nötig. Zusätzlich zum durchdachten Design kommen die angesprochenen neuen Eingabemöglichkeiten und ermöglichen es, per Handgeste oder vom Sofa aus per Sprachbefehl durch das Dashboard zu navigieren.

Fazit

Statt das Erlebnis auf nur einen Benutzer zu personalisieren, erwartet man bei einem Fernseher Apps, die auf eine Zuschauergruppe ausgelegt sind. Grundsätzlich gilt das TV als Konsumgerät. Daher dürften Apps, die wenig Interaktion benötigen, am ehesten von klassischen Fernsehzuschauern angenommen werden.

Für einen Fernseher zu entwickeln unterscheidet sich stark von der Entwicklung für Tablet oder Mobiltelefon. Für ein TV-Gerät braucht es simple Benutzeroberflächen, die sich auch nur mit einem Steuerkreuz einfach und schnell bedienen lassen. Selbst wenn die Fernseher-Hersteller sich auf neue Eingabemöglichkeiten wie Sprachsteuerung einlassen, wird es noch eine Weile dauern, bis diese Technologien verbreitet genug sind.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige