In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
ZDF Mediathek-App / Offlinestreaming
Redesign und Neustrukturierung der ZDF Mediathek-App, um auch offline ein möglichst uneingeschränktes Streaminggefühl zu erhalten.
In der ersten Findungsphase hat sich die Idee eines App-Dienstes entwickelt, mit welchem man Vielfliegern bei der Lufthansa das einfache Offline-Streamen ihrer Filme ermöglichen kann.
Während der Bildung der Semesterthemen wurde diese Idee übernommen. Als Grundlage diente die ZDF Mediathek-App, welche durch ein Redesign und einer Neustrukturierung dieses Bedürfnis befriedigen sollte.
Der dazugehörige OneSentence™ lautet:
Unsere ZDF Mediathek-App ist ein Online-Streaming-Dienst, mit dem man das umfangreiche Programmangebot des ZDF jederzeit auch offline mobil und flexibel genießen kann.
©Jasmin Fayad
Um die ZDF Mediathek-App flüssig nutzen zu können, benötigt es einiges an Einarbeitung.
Wenn man jedoch den ersten Überblick zum Aufbau erhalten hat, findet man wenigstens die meist genutzten Funktionen schnell wieder.
Auf der Startseite findet man einen direkten Zugang zu den vier Live-Sendern: ZDFinfo, ZDFneo, ZDFkultur und ZDF. Darunter Buttons zur Sendersuche (Schnelleinstieg in drei Variantionen: „Sendung verpasst?”, „Sendungen A-Z” und „Sender”. Die Hauptfläche nehmen die Sendekategorien „Unsere Tipps”, „Aktuell” und „Meist gesehen” ein. Welche beiden Sendungen man selber zuletzt gesehen hat, findet sich in der rechten unteren Ecke wieder. Im Header sind der Menubutton, das Suchfelder und die/meine „gemerkten” Sendungen platziert.
Bei der Betrachtung der Vor- und Nachteile überwiegen auf erstem Blick eher die Nachteile. Die App gliedert sich inhaltlich in zwei Bereiche: Dem offiziellen Bereich und dem persönlichen Bereich. Beides wird aber gemixt auf vielen Kanälen angeboten, sodass man sich oft verloren fühlt.
Im Menubereich finden sich dann alle bisher erwähnten Funktionen nochmals. Zusätzliche Menupunkte scheinen unkoordiniert platziert zu sein, sodass man erst durch rumprobieren erfährt, wo der vermeidliche Mehrwert liegt. Gerade die Dopplungen unter „Rubriken”, „Themen” und „Sender” verwirren stark.
©Jasmin Fayad
Wenn sich das Gerät im Offlinemodus befindet, werden keinerlei Inhalte mehr angezeigt. Schaltet man das iPad während der Nutzung offline wird der Grundaufbau noch angezeigt, jedoch fehlt jeglicher Content. Startet man die App, während das Gerät offline ist erscheint eine Fehlermeldung mit Mainzelmännchen. Dass die Live-Sendungen nicht abspielbar sind, erscheint logisch. Dass man sich jedoch nicht über die vorher vorgeschlagenen Sendungen informieren kann, ähnlich einer Offlinebibliothek, oder gar seine gemerkten Sendungen abrufen kann, ruft Frust hervor.
Analyse: Die ZDF Mediathek App hält ein umfangreiches Angebot bereit, welches jedoch nur sehr unübersichtlich angeordnet ist und somit selten bewusst abgerufen werden kann. Die Unterteilung in einen offiziellen und einen privaten Bereich finde ich sehr sinnvoll. Auch hervorzuheben ist, dass man sich Sendungen zusammenstellen und merken kann, ohne einen nervigen Accounterstellungsprozess durchführen zu müssen.
Das Angebot kann und sollte verknappt werden (z.B.. Zusammenführung von den Bereichen „Themen” und „Rubriken”. Somit bräuchte die Startseite nicht mehr so ganz überladen sein.
Und vorallem sollten gewisse Inhalte für den Nutzer auch offline zugänglich sein, wenigsten solche, bei denen er es erwartet. Eine visuelle Gestaltung, welche der (online/offline) Orientierung dient sollte mitberücksichtigt werden.
©Jasmin Fayad
Struktur: Da ich mich vorher noch nie intensiv gestalterisch mit Screendesign auseinandergesetzt habe, habe ich als nächstes die App auf die eigenen Wireframes runtergebrochen. So habe ich mir erst einmal einen klaren Überblick der Anordnung verbracht.
Der Vorteil: Ich bekam einen klareren Blick auf die einzelnen Elemente: Welche gehören zusammen, welche doppeln sich, was will mir die Startseite überhaupt sagen und wozu einladen. Der Nachteil: Es ist auf diese Weise schwer sich von den bestehenden Strukturen zu lösen und etwas eigenes/besseres zu gestalten.
Wir waren angehalten, So viel Content wie möglich in die Skizzen zu legen. Da es meine ersten Erfahrungen mit Wireframes waren, habe ich das in allen Elementen durchgezogen. Im Nachhinein finde ich es in dieser Intensität nicht ratsam. Jedenfall nicht im ersten Schritt. Für das erste Spielen um die Anordnung der einzelnen Elemente hat das unheimlich geblock, denn es ist mit viel aufhaltender Fleißarbeit verbunden. Für meine folgenden Projekte werde ich, je nach Komplexität, erst gröbere Wireframes mit Universalplatzhaltern arbeiten und im nächsten Schritt, wenn alles bisherige soweit Sinn ergibt, die detaillierten Wireframes anlegen.
©Jasmin Fayad
Wie schon in Punkt 2 ZDF Mediathek beschrieben, stellten die vielen Menupunkte und Dopplungen in der App eine große Herausforderung dar.
Um zu wissen, was denn noch gestaltet werden muss und eine übersichtlichere App zu gestalten, habe ich mich mit Timm und Frank darauf geeinigt, dass die Menupunkte extrem reduziert werden. Auch werden Punkte wie „Impressum”, „Kontakt” und „Datenschutz” völlig aussen vor gelassen.
Mit in die Gliederung fließt der Hintergedanke der Teilung der App in Online- und Offlinenutzung rein.
Damit der Rahmen des Semesters nicht gesprengt wird, wurde ab diesem Punkt die Aufmerksamkeit hauptsächlich auf die Offlinenutzung gelegt.
Letztendlich wurden folgende Menupunkte verwendet:
• Listen • Zuletzt hinzugefügt(e Sendungen) • Playlisten • Zappen • Rubrik • Live • Suchen
©Jasmin Fayad
Als ein großes Problem stellte sich für mich das Arbeiten mit der richtigen Software dar. Adobe InDesign ist für gewöhnlich meine erste Wahl. Auch für alles, was mit (schneller) Visualisierung von Konzepten zu tun hat. Da es beim Screendesign jedoch auf die Pixelgenauigkeit ankommt, bin ich ab einem gewissen Punkt mit InDesign nicht mehr weiter gekommen. Photoshop nutze ich verhältnismäßig lang, jedoch vorrangig für das Bearbeiten von Fotografien.
Beim Umsteigen auf Sketch hat sich in ziemlich kurzer Zeit ein sehr großer Schritt getan. Zwar hat auch dieses Programm seine Macken, im Großen und Ganzen hat es mir nach etwas Einarbeitung dann doch die Möglichkeit gegeben, meine Vorstellungen recht nahe umgesetzt zu bekommen.
Mehr noch, es hat mir im Laufe des Erarbeitens irgendwann wirklich Spaß gemacht mit den Formen und Effekten zu spielen. Auch wenn das heißt, am Ende Stunden damit verbracht zu haben, die richtige Strichstärke oder den Transparentheitsgrad von Gestaltungselementen zu finden.
©Jasmin Fayad
Damit die App auch auch nach ZDF aussieht, galt es einiges vom Corporate Design einzuhalten.
Nach dem Durcharbeiten der zur Verfügung stehenden Manuals war es verhältnismäßig einfach, nichts oder kaum etwas falsch zu machen. Selten musste ich eine vom ZDF aufgestellte Regel brechen (z.B. dass die 2 im Logo immer weiß sein soll).
Was sich jedoch als schwierig erwies war die Farbkombination von orange und grau. Um es nicht altbacken wirken zu lassen, habe ich grau nur als Farbe zum Trennen oder für dezente Flächenbelegung gewählt. Soweit wie möglich sollte die App in orange und weiß gestaltet werden.
In meinem Enddesign finden sich verwertbare Elemente aus der Ausgangsapp wieder. Auch, um nahe an der bisherigen ZDF gestaltung zu bleiben.
Nach der Analyse, der Recherche und den Vorbereitungen ging es an die ersten Skizzen.
Vordergründig ging es mir darum, die Menupunkte sinnvoll unterzubringen. Ich habe am Anfang weniger Wert auf vorherige Skizzen und Wireframes gelegt, dafür gleich mit dem Gestalten am Rechner angefangen. Dies hatte zur Folge, dass alles wirr und unzugehörig wirkte. Wirklich befriedigend fand ich das nicht.
Von einer anfangs sehr freien Darstellung der einzelnen Elemente (welche im Raum zu schweben wirkten) habe ich mich zu einer Variante vorgearbeitet, welche sich mehr an das iPad-Format anpasst. Aber auch hier wirkten die Elemente groß und verloren.
Als nächstes ging ich einen Schritt zurück. Da habe ich mir angesehen, wie andere Apps, wie z.B. Spotify, TED oder Youtube, mit der vorliegenden Problematik umgehen. Die Screens und Lösungen, welche mir zugesagt haben, dienten daraufhin als Orientierung.
Auch habe ich angefangen, mehr Skizzen auf dem Papier zu machen. Da ich in diesem Bereich noch nicht sonderlich geübt bin, fand ich es unglaublich schwierig, das digitale Design erst analog zu denken. Denn oftmals ließen sich z.B. die Trennung von Ebenen viel besser optisch durch einen mehr oder weniger starken Schatten trennen. Das lässt sich digital viel besser und schneller verdeutlichen.
Da viele Basiselemente schon im ersten Schritt entstanden sind, hatte ich an dieser Stelle wenig Muße und Zeit, erneut graue Wireframes zu erstellen und bin gleich in die Umsetzung gegangen. Dies mag nicht der optimale Arbeitsweg sein, dennoch war es für mich an dieser Stelle einfacher, um mich an mein gewünschtes Ergebnis heranzutasten.
Nach und nach habe ich mir die Screens und die einzelnen Bedingungen und Schritte der Workflows erarbeitet. Zurückblickend habe ich mir dafür, dass sich dieser Kurs mit Screendesign beschäftigt, wahrscheinlich zuviele Gedanken um die Architektur und die Workflows gemacht. Da in der konzeptionellen Arbeit meine Stärke lieg, hat mich der Gedanke einer guten Struktur bis dahin mehr interessiert.
Es fiel mir sehr schwer einen Screen zu gestalten, der so tut als ob er etwas bedienen würde, ohne zu wissen, ob er das auch tatsächlich kann. An dieser Stelle fehlte einfach die Routine und Erfahrung. Daher wurde bei Konsultationen beschlossen, dass ich bestimmte Elemete aufgrund des Zeitmangels ruhig auslassen könne. Andere widerum seien wichtig und müssten immer dargetsellt werden. Diese ganzen Zwischenschritte haben mich letztendlich sehr aufgehalten. Als ich das Ganze ein Stück weit als gegeben akzeptiert habe, konnte ich mich mehr dem wirklichen Gestalten der App widmen.
Viele Seiten wie das „Zappen” oder dem Verwalten der Inhalte (Regulierung ist nötig, da die Offlinevariante bedingt, dass die Inhalte lokal auf dem iPad gespeichert werden) konnte ich leider nicht mehr angehen. Hier liegen die Grundideen nur in Skizzenform vor. Beim „Zappen” hätte mich interessiert, wie man die Bedienung gestaltet, beim Regulieren der Inhalte wäre es spannend geworden, die einzelnen Elemente übersichlich und gut steuerbar darzustellen.
Wie weiter oben beschrieben, waren die ersten Screengestaltungen eher experimentell. Das Design unschlüssig und zusammenhangslos. Im nachhinein betrachtet lag das wohl daran, dass ich es anfangs spannender fand, die Listen zu gestalten. Welche Infos werden wann gezeigt, welche Grautöne zeigen Darstellungsflächen an, welche sind nur informativ, welche aktiv – und zieht sich das Ganze sinnvoll durch alle Screens? Wie gehe ich mit den vielen Zahlen um, die alle in eine Spalte gehören (Zeit, Länge, Größe, Anzahl, ...)? Wie bettet man die Listen am besten ein, in welchem Bezug werden die Bilder gezeigt? Im Laufe der Überarbeitungen wurden die Bilder immer größer. Ein Grund hierfür war das triste weiß/grau/orange zu durchbrechen.
In den ersten Gestaltungen finden sich noch Angaben zur Information über die Größe der einzelnen Sendungen. Diese Informationen sind jedoch immer weiter in den Hintergrund getreten, um die übrige Zeit für die Ausarbeitung des Gesamtdesigns zu widmen.
Im Folgenden werden die ersten beiden Designs gezeigt. Nach der Besprechung mit Timm und Frank haben wir uns geeinigt, dass vom ersten Design der Aufbau und vom zweiten die Farbigkeit zu übernommen wird.
Die Gestaltung erfolgte in diesem Schritt noch mit InDesign. Da ich mit InDesign sehr schnell meine Ideen umsetzen kann, war es an dieser Stelle noch praktisch. Die Designs bewegen sich irgendwo zwischen digitaler Skizze, ersten Wireframes und partieller Feinausarbeitung.
Aber genau an der Feinausarbeitung scheitert InDesign, da es nicht pixelgenau ist. Nach dem Feedback zum folgenden Design habe ich mich in Sketch eingearbeitet und alles dort nachgebaut, bzw. angepasst.
Ein Aspekt in meiner Arbeit war, dass ich mich dazu entschied eine Apple-App zu gestalten. Zwar standen mir die Guidelines für iOS 7 zur Verfügung, doch hat mich das alles an dieser Stelle noch überrollt. Hatte ich doch noch mit den einzelnen Icons und generellen Zusammengehörigkeiten gekämpft, sind iOS relevante Aspekte generell zu kurz gekommen. Das war ab einer bestimmten Stelle eine bewusste Entscheidung, um zum Ende des Semesters ein abgeschlossenes Projekt abgeben zu können.
Durch die anfangs schwierige Kommunikation, der spärlichen Zuarbeit und letztendlich dem Ausstieg meiner Gruppenmitglieder aus dem Kurs Ende Dezember hat sich ein Großteil des Kurse als sehr schleppend und unbefriedigend erwiesen.
Nachdem ich mich dem Thema dann ab Januar alleine widmen konnte, ging es merklich voran. Leider hinkte ich dennoch insgesamt hinterher. Daher musste gleichzeitig aufgeholt und weitergearbeitet werden.
Themen wie Wireframes sind dadurch deutlich zu kurz gekommen. Die Ausarbeitung des Screendesigns erwies sich daher im weiteren Verlauf als schwierig, da die App kein richtiges Fundament hatte.
Als gelungen sehe ich dennoch die/meine Entwicklung. Da ich mich vorher nie mit Screendesign beschäftigt habe, war das Pensum im Kurs recht hoch. Mit dem Verlauf des Kurses merkte ich aber, dass es mir doch rech viel Spaß machte. Das Experimentieren mit den Formen, Farben, Icons, Ratsern und Inhalten hat mich dann Stück für Stück dem Ziel näher gebracht.
Eher misslungen ist bis zu diesem Punkt ein hochwertiges Appdesign zu erlangen, welches optisch wie funktional qualitativ ist und wirkt. Auch das Erarbeiten mit der Software war mehr ärgerlich denn hilfreich. So fiel wie beschrieben InDesign ab einem gewissen Punkt weg, Photoshop erwies sich als zu sperrig und Sketch stürzte regelmäßig circa einmal in der Stunde ab oder hängte sich auf. Dies ließ das Frustpensum oderntlich steigen. Nachdem die Basis nun gelegt war, sahen die neuen Ziele wie folgt aus:
• Menu und Bedienelemente final festlegen • Die Appstruktur vereinfachen • Das Appdesign am Corporate Design des ZDF anpassen • Den Onlinemodus vom Offlinemodus deutlich abgrenzen • An iOS 7 wenigstens anlehnen • Das Design verfeinern und schleifen
In den folgenden Abbildungen ist eine Auswahl aus den finalen Designs zu sehen. Alle Screens, welche zur Workflowerklärung dienen, habe ich nicht mit in die Dokumentation genommen. Hier wurden viele der neuen Ziele umgesetzt, genauere Beschreibungen finden sich direkt bei den Abbildungen.
Die Reihenfolge der Abbildungen beschreibt folgendes Szenario: Der User bereitet sich auf eine Zeit vor, in der er/sie längere Zeit über keinen Zugang zum Internet haben wird (z.B. eine größere Flugstrecke). Für diesen Zeitraum möchte sich der User vorbereiten, hierfür stehen ihm zwei Wege zur Verfügung:
1: Der User wählt im Onlinemodus die Sendungen aus, die dieser später sehen möchte und fügt sie seinem Profil/ dem Offlinemodus hinzu 2: Der User kann sich Sendungen bis zu einem gewissen Speichervolumen (den er vorher selber bestimmt hat) laden lassen, welche auf sein Nutzerprofil passen (Vorauswahl durch z.B. die liebsten Sender, Schauspieler, Hashtags, etc.)
Die gewählten Sendungen laden noch im Onlinemodus. Später im Offlinemodus kann sich der User die neuen Sendungen ansehen, eine Playlist zusammenstellen oder via Schnellstart auf der Startseite direkt die letzte Playlist weitersehen.
Aus Zeitmangel konnte ich mich nur dem ersten Fall widmen.
In Punkt 7 Fazit werde ich eine abschließende Beurteilung zu dieser Semesterarbeit geben.
Insgesamt bin ich mit den Ergebnissen zufrieden, die unter den gegebenen Umständen entstanden sind. Die Idee der App wird transportiert, an vielen Stellen ist das Design jedoch noch nicht ausgereift. Die Icons sollten insgesamt eher wie aus einem Guss wirken und auch die Größenverhältnisse stimmen hier noch nicht ganz. Eine gewisser Grad an Eleganz wird daher meiner Meinung nach noch verfehlt.
Auch sind die einzelnen Elemente nicht so intuitiv, wie erhofft. Es erschließt sich nicht ganz, an welcher Fläche eine Aktion was auslösen würde. Dies führe ich auf die leider bröckelige Basis der App zurück. Auch empfinde ich das Design noch als ein wenig zu modern für das ZDF.
Dass ich es wie in Punkt 4 Erste Lösungsansätze beschrieben nicht mehr geschafft habe die Seiten „Zappen” und „Verwalten/Regulieren” auszugestalten ärgert mich besonders, lässt sich aber an dieser Stelle nicht ändern.
Unterm Strich war der Kurs für mich eine gute und intensive Einarbeitung und Grundlage in das Thema Screendesign. Ich konnte meine Schwächen und Stärken finden und habe Lust auf mehr bekommen.
Ob ich es zeitlich schaffe, an diesem Projekt weiter zu arbeiten um es auszufeilen oder das Gelernte in neuen Projekten einbringe, kann ich noch nicht sagen. Auf jeden Fall ist mir die ZDF Mediathek-App ans Herz gewachsen und sollte sich die Zeit finden, werde ich noch einige Stunden darin investieren.
Ein Projekt von
JF
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im zweiten Studienabschnitt
Betreuer_in
Timm Kekeritz
Frank Rausch
Entstehungszeitraum
Wintersemester 2013 / 2014