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

ARTE TV iOS App Redesign

Mein Abschlussprojekt aus dem Kurs »Apps & Details« von Frank Rausch.

ARTE-TV App

Wie fast alle Sender des öffentlich-rechtlichen Rundfunks hat auch der deutsch-französische Sender Arte eine eigene App im App Store. Arte nutzt die App vor allem als Übersicht des aktuellen TV-Programms. Die Funktion als Mediathek erfüllt die App nicht konsequent und konzentriert sich eher auf redaktionellen Vorschläge und weniger auf gute Durchsuchbarkeit.

Leider wird das Corporate Design in der App nicht gut umgesetzt. Aufgefallen ist mir das vor allem an den großen Headlines die jeweils mit dem ARTE-Logo in Kombination dargestellt werden. Es ist nicht klar in welchem Kontext die eigentliche Headline Schrift »Barna Stencil« und wann die Textschrift »Barna« eingesetzt wird.

Die Themen des strukturellen Aufbaus der App, die Anwendung der Interface Guidlines von iOS als auch des Corporate Designs von ARTE waren dabei meine Hauptaufgaben.

Zu allererst habe ich mir einen Überblick der Funktionen der App gemacht und dann gruppiert und hierarchisch sortiert. Mir fiel sehr schnell auf das die Bedienungsprobleme hauptsächlich durch unlogischen Kategorien und eine schlechte Struktur erzeugt wird. Das Interfaces verfängt sich dabei in Inkonsistenz und Verständnisproblemen. Man muss dabei anmerken, dass sie sich damit nicht vom Webinterface der Arte Mediathek unterscheidet.

komp1 .gifkomp1 .gif

Tabbar

Änderungen

  • Reduktion von 5 auf 3 Funktionen in der Tabbar

  • Einstellungen und Profil in Tabbar auf ein Tab vereint

  • Schriftgrößen und Icons an Platformstandard angepasst

Auf fast allen Tabs konnte man auf Einstellungen und das Profil über einen floating Button in der rechten oberen Ecke zugreifen. Diesen Button habe ich zu einem Tab in der Tabbar vereint.

Entdecken

Änderungen

  • bessere hierarchische Unterscheidbarkeit bei der Beschriftung von Inhalten
  • Anwendung des Corporate Designs von Arte auf Header

Doku_0_2.jpgDoku_0_2.jpg
Doku_0_1.jpgDoku_0_1.jpg

Detailansicht eines Formats, einer Kategorie oder Serie

Änderungen

  • Mehr vertikalen Raum für die Inhalte

  • verbesserte Lesetypografie für den Beschreibungstext

  • verbesserte Hierarchie der Beschriftung der Thumbnails

Doku_0_3.jpgDoku_0_3.jpg
Doku_0_4.jpgDoku_0_4.jpg

TV-Programm

Änderungen

  • Verbesserung der Unterscheidbarkeit von Seriennamen, Folgenbezeichnung und Folgen- und Staffelnummer

  • Mehr vertikaler Raum für Inhalte

Komp 2.gifKomp 2.gif

Video Player

Änderungen

  • Zentralisierung der Wiedergabe von Videos in einem Modal View

  • Nutzung des platformtypischen Players

  • Verbesserung der Lesetypografie

Es ist möglich in jedem der 5 Tabs ein Video parallel zu öffnen. Dies empfand ich als starke Verwirrung, da nun nicht klar war wo man sich als Benutzer befand und woher der Videostream genau herkam.

Die einzelnen Tabs dienen daher nur noch als eine Art Verlinkung zu Inhalten welche dann in einem Player Modal, ähnlich der Apple Music App, zentral geöffnet werden.

TL;DR

Ich habe die App von ARTE redesigned und mir an deren Struktur die Zähne ausgebissen. Schlussendlich habe ich vorallem reduziert und Klarheit geschaffen.

Als Learning nehme ich mit, dass für ein gutes Design vor allem auch die dahinter liegende Struktur der Inhalte angepasst werden muss. Nur das schafft Konsistenz und damit eine gute Nutzererfahrung. Ein einfaches Theming kann nicht das Ziel eines Interfacedesigner sein.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Apps & Details · SoSe 2020

Entstehungszeitraum

Sommersemester 2020