Watchever 2014 – so wie es sein soll.

Ziel des Kurses 42“ 10“ 4“ war die Gestaltung eines realistischen UI-Konzepts für einen Medien-Streaming-Dienstes auf zwei verschiedenen Plattformen. Dabei waren insbesondere die Unterschiede der verschiedenen Betriebssysteme und Nutzungsszenarien, sowie ein übergreifendes Markenerlebnis zu berücksichtigen.

Unsere Wahl fiel auf den Film- und Serien-Streaming-Dienst Watchever, da wir bereits auf Erfahrungen (und Frustrationen) als aktive Nutzer des Anbieters zurückgreifen konnten. Bei der Wahl der Plattformen entschieden wir uns für das iPad unter iOS 7 und die Playstation 4.

Zu beginn der Kurses wurden in verschiedenen Gruppen die unterschiedlichen Stream-Anbieter im Deutschen Markt untersucht und vorgestellt. Dies gab allen Kursteilnehmer einen guten Einstieg in die doch sehr verschiedenen Streaming-Konzepte. In der Gruppe haben wir uns anschließend Watchever auf verschiedenen Devices (iPhone, Apple TV, Browser, PS4) angeschaut und auf die Stärken und Schwächen analysiert.

Die gröbsten Schwächen zusammengefasst:

Watchever läuft häufig sehr instabil. Filme und Serien werden ohne Grund unterbrochen
Es gibt keine klare (visuelle) Trennung zwischen Serien und Filmen
Gesehene Serienfolgen oder Filme werden zwar erfasst, aber nicht gekennzeichnet
Das fortsetzen von Serien oder Filmen ist sehr umständlich
Das Watchever-Design ist auf iOS veraltet
Die Offline-Funktion unter iOS ist unklar

OneSentence

Erkläre Deine App in einem Satz. Dieser Satz soll für einen Elevator Pitch oder als Einleitungssatz für die Promo-Website zur App geeignet sein. Der Satz wird Euer Projekt für den Rest des Semesters begleiten und sich ständig weiterentwickeln und verfeinern. (Frank Rausch: [Quelle](https://incom.org/post/125424 „https://incom.org/post/125424“))

Use-Case

Finde und beschreibe die wichtigsten Nutzungsszenarien für Deine App. Detailliert, aber ohne die konkrete Interface-Lösung zu beschreiben. (Frank Rausch: [Quelle](https://incom.org/post/125424 „https://incom.org/post/125424“))

Interaktionsfluss

Unser erster Interaktionsfluss für die iPad-Version mit den wichtigsten Screens. Im späteren Kursverlauf hat sich der Interaktionsfluss geringfügig verändert.

Wireframes

Entwicklung (iPad)

iPad Entwicklung mit Illustrator bis zum HTML-Prototypen. Im HTMl-Prototypen wurden noch sehr viel Detail-Änderungen vorgenommen und viele Varianten getestet

Konzept

Unser Fokus bei der Konzeption des Redesigns lag auf dem Ziel, möglichst einfach Filme und Serien direkt dort weiterzuschauen, wo man zuletzt unterbrochen hat – und das auf allen Plattformen. So kann man die Lieblingsserie auf dem iPad stoppen und direkt auf der Playstation 4 weiterschauen. Darüber hinaus war uns eine klare Trennung von Serien und Filmen wichtig, da eine Mischung von beiden Medienarten verwirrend wirkt und nicht zielführend ist. Bei unserer Recherche stellten wir fest, dass der Benutzer fast immer schon vorher entschieden hat, ob er eine Serie oder einen Film sehen möchte, was höchstwahrscheinlich auf die Zeitdauer der verschiedenen Formate zurückzuführen ist.

Formalästhetisch wurde die App für das neue Apple Betriebssystem iOS 7 optimiert. In Anlehnung an die neuen Human-Interface-Guidelines von Apple kommt ein modernes und reduziertes Design zum Einsatz, welches auf unnötige Effekte verzichtet und auf Flächen und Linien setzt. In Folge wird die App übersichtlicher. Dieser Trend setzt sich in den Icons und Buttons fort, die dynamisch den Downloadfortschritt oder die verbleibende Spielzeit anzeigen können. Das Farbklima ist der Corporate Identity von Watchever entsprechend in schwarzem bis dunkelgrauem Hintergrund und in weißer Schrift mit goldener Auszeichnung gehalten um den Wiedererkennungswert und das Markenerlebnis zu fördern.

Beim Start der App zeigt sich zunächst der Homescreen mit einer Übersicht an unterbrochenen Serien auf der linken Hälfte des Bildschirms. Die zuletzt gestoppte Serie bzw. der zuletzt gestoppte Film steht hier prominent an erster Stelle und mit nur einem Fingertap kann man von dort aus den Filmgenuss fortsetzen.

Auf der rechten Hälfte befinden sich Serienempfehlungen, die ausgehend von den bisher gesehenen Serien dem eigenen Geschmack entsprechen könnten. Im Gegensatz zur alten App tauchen bereits gesehene Filme und Serien nicht in den Vorschlägen auf, es sei denn es handelt sich um eine weitere Staffel einer bereits angefangenen Serie.

Passwort: FHP

Durch Wischen von links nach rechts über eine Serie öffnet sich ein Overlay, über das die Serie oder eine Staffel als gesehen markiert, auf die Merkliste gesetzt, oder weiterempfohlen werden kann.

Die Navigationsbar am oberen Rand des Screens wurde reduziert und beinhaltet nun eine Umschaltmöglichkeit zwischen Filmen und Serien, eine Auswahl der Kategorie bzw. des Filmgenres, sowie je einen Button für die Suchfunktion und die Einstellungen. Die Auswahl der Genres erfolgt dabei mittels eines Pop-Overs, wobei auch die meistgesehenen Serien oder Neuheiten angezeigt werden können.

Die Detailansicht zu einer Serie erscheint nun als Pop-Over über dem Homescreen. Hier sind bereits gesehene Episoden weiß dargestellt und mit einem Haken markiert während ungesehene Episoden in gold leuchten und ein Play-Icon besitzen. Über Tabs gelangt man zu den verschiedenen Staffeln.

Der Offline-Modus sowie dessen Funktion wurde komplett überarbeitet. Statt eines eigenen Bereichs ist die Download-Funktion nun überall integriert, sodass sich links neben jeder Episode nun ein Button zum Download befindet. Dieser dient außerdem als Fortschrittsanzeige für den Download und ermöglicht es, die Episode, nachdem sie heruntergeladen wurde, wieder vom Gerät zu entfernen.

Bei der Filmansicht ist das Layout vorwiegend auf die Filmcover reduziert. Mit einem Blick sieht der Nutzer, ob er einen Film schon gesehen (ausgegraut, Haken), bereits angefangen (Weiterschauen-Button), oder noch nicht gesehen (Play-Button) hat.

Im Rahmen der First-Start-Experience gibt es für neue Nutzer eine Guided Tour, die die Funktionen der App erklärt und auf implizite Interaktionen eingeht. Dabei können auch bevorzugte Genres festgelegt werden, um bessere Filmempfehlungen liefern zu können.

Wird ein Film abgespielt, gibt es in der Play-Ansicht die Möglichkeit, die Audio-Sprache umzustellen sowie AirPlay zu benutzen. Außerdem gibt es auch hier die Listenansicht, um schnell zwischen Episoden wechseln zu können und diese für den Offline-Gebrauch herunterzuladen oder zu löschen.

Das Konzept von Watchever auf der Playstation 4 erfolgte in Anlehnung an unsere Gestaltung auf dem iPad, sodass sich der Nutzer sofort zu Hause fühlt, wenn er zwischen den beiden Plattformen wechselt. Dabei wurden die spezifischen Anforderungen, die die Playstation 4 (mit Controller statt Touchscreen) an die App stellt, berücksichtigt.

Charakteristisch für die Playstation sind die horizontalen Menüs, die wir verwendeten, um zwischen Kategorien und Genres zu wechseln. Dabei wurden die beiden getrennten Bereiche für Filme und Serien durch Tabs beibehalten. Die größte Herausforderung bestand darin, Aufmachung des Design der iPad Variante nicht zu ignorieren, sondern sinnvoll anzupassen, so dass die App auch auf großen TV-Geräten optimal bedienbar ist. Aufgrund der Steuerung mittels Controllers bedarf es außerdem einer Hervorhebung des aktiven Elements in form einer Umrandung im Corporatefarbton. Dies eröffnete die Möglichkeit, beim Anwählen den Trailer einer Serie oder eines Films anstelle des Covers zu zeigen wodurch das Interface deutlich lebendiger wird.

Gängige Steuerungsbefehle (wie X für Auswählen, Kreis für zurück oder Options für Optionen) wurden übernommen. Die Detailansicht einer Serie zeigt im Gegensatz zur alten App nun auch die Titel der einzelnen Episoden an. Eine Downloadmöglichkeit gibt es aufgrund des stationären Gebrauchs der PlayStation4 nicht.

Der Nutzer soll die Möglichkeit haben direkt beim Start der App ohne viele Navigationsschritte, die zuletzt auf dem iPad oder auch der PS4 geschauten Serien/Filme fortsetzen zu können.

Die Umsetzung erfolgte anfangs in Illustrator, später jedoch auf Basis eines voll funktionstüchtigen HTML Prototypen inkl. PS4-Controller Steuerung.

Passwort: FHP

Startscreen der PS4 App in der persönlichen Serienansicht

Optionen zu Serienfolgen - erreichbar über den Optionsbutton des PS4-Controllers

Detailansicht einer Serie mit bereits gesehenen und ungesehenen Folgen

Detailansicht einer Serie - inkl. des Optionsmenüs

Startseite des Filmbereichs der PS4 Version inkl. redaktionellem Content

Optionen eines Films - erreichbar über den Optionsbutton des PS4-Controllers

[](http://benschmitt.de/fhp/doc-watchever/tablet-mockup.jpg „http://benschmitt.de/fhp/doc-watchever/tablet-mockup.jpg“) [](http://benschmitt.de/fhp/doc-watchever/tablet-mockup02.jpg „http://benschmitt.de/fhp/doc-watchever/tablet-mockup02.jpg“) [](http://benschmitt.de/fhp/doc-watchever/tablet-mockup03.jpg „http://benschmitt.de/fhp/doc-watchever/tablet-mockup03.jpg“)

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Watchever 2014 – so wie es sein soll.

Konzept

Ein Projekt von

Fachgruppe

Art des Projekts

Betreuung

Entstehungszeitraum