Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Watchever—App Redesign and Experience enhancements for iPhone 5s and Playstation 3

Watchever—App Redesign and Experience enhancements for iPhone 5s and Playstation 3

In dem Kurs 42„ 10“ 4„ bekamen wir die Aufgabe, einen Video-Streaming-Dienst für zwei unterschiedliche Plattformen zu überarbeiten. Durch die Auswahl einiger unterschiedlicher Use-Cases kristallisierte sich mit der Zeit unser OneSentence™ heraus, der die Grundlage für alle weiteren Design-Entscheidungen sein sollte und während des Kurses stetig verbessert wurde.

Use Cases, OneSentence™ und Wireframes

Unsere drei wichtigsten Use Cases - Filme/Serien einfach weiter gucken zu können - Nutzern ein neues und spannendes Entdecken von Filmen und Serien zu ermöglichen - kurze Wege und einfache Bedienbarkeit in der gesamten Applikation

Diese Punkte haben wir in unserem OneSentence™ vereint, der uns durch alle weiteren Schritte begleitete.

onesentence.pngonesentence.png

Wireframes Die Wireframes zu Beginn der Gruppenarbeit halfen uns, die Struktur und die Abläufe der Apps schnell zu skizzieren und somit eine gute Gesprächsgrundlage zu schaffen. Nachdem wir alle Funktionen und Aufteilungen, die sich aus dem OneSentence ergaben, besprochen hatten, sind wir dazu übergegangen, die einzelnen Screens detaillierter zu gestalten.

wireframe-1.pngwireframe-1.png
wireframe-2.pngwireframe-2.png
wireframe-3.pngwireframe-3.png

iPhone

Lola Für besseres Verständnis der Applikation überlegten wir uns eine Nutzergeschichte, durch die ein typischer Ablauf dargestellt wird. Die Geschichte beginnt mit Lola, die sich gerade die neue Watchever App auf dem iPhone 5S installiert hat und diese zum ersten Mal startet.

Themen-Icon Sie bemerkt das neue Icon auf ihrem Homescreen und erkennt eine bekannte Szene aus dem Film „E.T. der Außerirdische“. Durch tippen auf das Icon startet die App und ein Splashscreen mit dem gleichen Motiv und einer dazugehörigen Beschreibung, mit dem Hinweis auf die Science Fiction Wochen, erscheint.

First Experience Da sie die App zum erstem Mal gestartet hat, wird ihr erklärt, dass sie mindestens fünf Filme zu ihrer Watchliste hinzufügen soll. Dafür erscheint die VideoWall™, in der sie durch tippen verschiedene Filme und Serien markiert und somit zu ihrer Watchliste hinzufügt. Nachdem sie eine erste Übersicht über die große Auswahl von Watchever bekommen hat, landet sie zum ersten Mal auf dem »Programm« Screen, wo sie die gewählten Inhalte und dazu passende Empfehlungen findet. Nach einiger Zeit und Nutzung wird sich diese Seite mehr auf Lolas Lieblingsinhalte individualisieren.

a-02.pnga-02.png
b-02.pngb-02.png
c-02.pngc-02.png
d-02.pngd-02.png
e-02.pnge-02.png
f-02.pngf-02.png

Icon-Story und Mein Programm

Nach zwei Wochen gab es ein Update der App – daher haben sich das Icon sowie der Splashscreen geändert und kündigen die neuen Themenwochen an (Oscar-Nächte). Lola landet direkt in „Mein Programm“. Durch die Nutzung der letzten Wochen hat sich diese Ansicht weiter auf ihre Bedürfnisse angepasst. So stehen die zuletzt gesehenen Filme und Serien für sofortigen Zugriff im Fokus. Sie entscheidet sich „Die fabelhafte Welt der Amelie“ weiterzugucken, dies geschieht durch einmaliges Tippen.

04-a-start.png04-a-start.png
05-a-splash-spielberg.png05-a-splash-spielberg.png
06-meinprogramm.png06-meinprogramm.png

Detailseite

Sie landet auf der Filmdetailseite, wo der Film direkt abspielt. Durch Drehen in die Horizontale wird der Film im Vollbild abgespielt. Im oberen Bereich des Players kann die Sprache während des Abspielens gewählt werden.

07-detail-amelie.png07-detail-amelie.png
08-fullscreen.png08-fullscreen.png

DiamondRate™

Nachdem sie den Film zu Ende gesehen hat, wechselt sie zurück in die vertikale Ansicht und bewertet den Film mit dem neuen Tool DiamondRate™

Bewertungssystem Nach langen Diskussionen, wie sinnvoll Rating im allgemeinen ist, entschieden wir uns, auf die Standard-Lösung der 5 Sterne zu verzichten und einen neuen Ansatz zu finden. Folgende Aspekte störten uns an der Standard-Lösung:

  • Keine genaue Differenzierung beim Bewerten (z. B. 4,5 Sterne werden angezeigt, aber sind so nicht wählbar)
  • Keine Aussage über die Verteilung der Bewertungen möglich. (Polarisiert ein Film oder ist er wirklich mittelmäßig)
  • Sterne suggerieren etwas Gutes. Eine schlechte Bewertung ist nicht möglich. Über die Zeit hat sich so bei den Plattformen durchgesetzt, dass schlechte Filme 1-3 Sterne bekommen. Unsere Annahme ist, das schlechte Filme eher gar nicht bewertet werden, als dass sie mit einem Stern bewertet werden.

Rating-Konzept Unser Ansatz versucht, die von uns als problematisch eingestuften Aspekte zu verbessern. In der Übersicht werden die Bewertungen der Filme und Serien nur noch als Tendenz angezeigt. Dies geschieht über die Farbigkeit und Richtung eines Pfeils. Im DiamondRate werden anfangs keine Bewertung angezeigt, um den Nutzer nicht zu beeinflussen. Durch ziehen des Diamanten nach oben oder nach unten kann der Nutzer sehr differenziert bewerten. Nachdem der Nutzer seine Eingabe beendet hat, werden alle Bewertungen angezeigt. Jede Wertung wird durch eine Linie dargestellt, so ist es möglich die Verteilung der Bewertungen zu sehen. Dies gibt Aufschluss darüber, ob ein Film polarisiert, jedem gefällt oder eben durchschnittlich ist. Nachdem der Nutzer einen Film oder eine Serie bewertet hat, wird die Anzeige über die Tendenz mit seiner Wahl erweitert. So hat der Nutzer stets einen Überblick darüber, welche Filme er schon bewertet hat.

rating-01a.pngrating-01a.png
rating-02a.pngrating-02a.png
rating-03a.pngrating-03a.png
rating-04a.pngrating-04a.png

Entdecken – Discoveror™

Wir entschieden uns, auf Kategorien zu verzichten und einen neuen Weg zu finden, um interessante Filme sowie Serien zu entdecken. Dabei entstand die Idee, den Besuch in einer Videothek in ein Interface zu übertragen und so zu verbessern, dass der Nutzer für sich passende Inhalte schnell finden kann. Da Film- und Seriencover je nach Genre eine eigene Sprache sprechen, ist es darüber möglich, Aussagen über den Inhalt zu treffen. Zum Beispiel sind die Cover von Horrorfilmen im Gegensatz zu Komödien eher dunkel gehalten.

Der Discoveror zeigt eine Auswahl von Covern, welche dem Nutzer bekannt und unbekannt sind, auf der VideoWall™ und bietet so die Möglichkeit, sich schnell einen Überblick über das Angebot zu verschaffen. Gleichzeitig kann nach gewünschten Inhalten gefiltert werden. Eine Filterung nach Interesse geschieht durch Tippen auf ein Cover, wodurch anschließend themenähnliche Cover um den gewählten Film angezeigt werden.

Ist ein Film gewählt, kann er der Watchliste hinzugefügt oder direkt gestartet werden. Des Weiteren ist es möglich, sich den Trailer des Filmes direkt anzusehen. Je mehr Filme und Serien der Nutzer bewertet, desto besser werden die anfänglichen Vorschläge im Discoveror. Je weiter weg sich der Nutzer vom Startpunkt entfernt, desto mehr unbekannte Filme oder Serien werden beigemischt. Dies erhöht die Chance, interessante Entdeckungen zu machen und den eigenen filmischen Horizont zu erweitern, statt in festgetretenen Kategoriepfaden zu wandern.

entdecken-01.pngentdecken-01.png
entdecken-02.pngentdecken-02.png
entdecken-03.pngentdecken-03.png
entdecken-04.pngentdecken-04.png
entdecken-05.pngentdecken-05.png

Suche

Neben der Möglichkeit, neue Filme zu entdecken, geben wir dem Nutzer die Funktion, Inhalte über eine Suche zu finden. Suchergebnisse werden sofort nach der Eingabe von wenigen Zeichen angezeigt (Instant Search). Dabei war uns wichtig, mehr Informationen zu den Inhalten anzuzeigen, als bei anderen Ansichten. Dadurch soll schneller klar sein, dass die gefundenen Inhalte auch die richtigen sind.

suche.pngsuche.png
bnal.pngbnal.png

PlayStation 3

Bei der Playstation war es uns wichtig, die Controller stärker in die Bedienung einzubeziehen. Das bedeutet, dass wir uns nicht auf die Cursor-Taste und einen Bestätigungsknopf beschränken wollten. Wir gingen davon aus, dass ein Playstation-Besitzer auch ein/e Spieler/in ist und den Controller nahezu blind bedienen kann. So ist es möglich, die Wege in der Bedienung zu verkürzen und schnell erlernbare Shortcuts zur Verfügung zu stellen. So ist es auf einer Serienübersichtsseite möglich, schnell und unkompliziert zwischen einzelnen Staffeln oder Folgen zu wechseln.

Ein weiteres Feature ist QuickPlay. Wir entschieden uns, den Start-Button in allen Ansichten zu nutzen, um den jeweils gewählten Inhalt sofort abzuspielen – ohne Umwege, ohne weitere Interaktion.

Serienjunkies werden bemerken, dass eine nächste Folge ohne weitere Eingabe sofort startet. Lean back and enjoy!

Fazit

Die Seminare begannen mit kleinen Übungen; das Zeichnen von Icons für verschiedene Aussagen, wie Speichern, Exportieren, Konvertieren und typografischen Aufgaben. Wir bekamen die Hausaufgabe, eine Single-Use-Case-App zu gestalten, welche die Zielsetzung des Kurses klarer machte.

In den weiteren Vorlesungen ging es um mögliche Herangehensweisen, plattformübergreifendes Denken, Typografie. Dies war sehr hilfreich, um uns einen eigenen Fahrplan zu entwickeln, an dem wir uns im weiteren Kursverlauf gut orientieren konnten. Das Feedback von Timm Kekeritz und Frank Rausch half uns, an schwierigen Kreuzungen die richtige Richtung einzuschlagen. Die Stimmung im Kurs war motivierend, da es viele spannende Ideen und Umsetzungen zu bestaunen gab.

Unsere beiden Neuerungen sind gute Ansätze und den Discoverer werden wir im Auge behalten. Dieses Tool in Aktion zu sehen, wäre sicherlich sehr spannend, um zu erfahren, ob die Theorie der Genre-Cover-Sprache wirklich aufgeht. Wir denken, dass es eine gute Alternative zu den herkömmlichen Kategorieeinteilungen ist.

Abschließend können wir sagen, dass wir wirklich großen Spaß in diesem Kurs hatten. Wir sind Fans des OneSentence geworden, weil er bei vielen Entscheidungen half, uns auf das Wesentliche zu konzentrieren. Statt dem Satz neue Features hinzuzufügen, wurde er durch stetige Ausdifferenzierung verbessert. Wir verbrachten viel Zeit damit, uns über Details zu unterhalten und waren erstaunt, wie viel Arbeit kleine Details machen, die im Umgang mit Interfaces oft selbstverständlich sind.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch foto: Timm Kekeritz

Entstehungszeitraum

Wintersemester 2013 / 2014