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

Audible für iOS – ein Redesign

Dreiwöchiges Abschlussprojekt des Kurses »Apps & Details«.


Mockup-01_Incom.jpgMockup-01_Incom.jpg


Ziel des Kurzprojektes war es, »[…] eine iOS-App im Hinblick auf Usability, Plattformstandards, und Liebe zum gestalterischen Detail zu überarbeiten«, wobei das Redesign dem Original formalästhetisch ansonsten möglichst treu bleiben sollte.


1. Start und Stöbern

Audible – eine eigentlich recht solide App, die aber dennoch ein paar Probleme hat, wenn man genau hinschaut. Zum Beispiel die beiden Tabs Start und Stöbern, die quasi identisch sind. Teilweise die selben Kategorien mit den selben Inhalten. 
Mich verwirrt das – andere Nutzer auch, wenn man die App-Bewertungen liest. Deshalb habe ich im Redesign beide Tabs unter Stöbern zusammengeführt. 

Die App unterscheidet in meinem Entwurf zwischen Hörbüchern und Podcasts – eine Trennung, die Audible zwar auf ihrer Website, bisher jedoch nicht in der iOS-App vorgenommen hat. Über ein custom Segmented Control am Kopf des Screens kann zwischen den beiden Kategorien umgeschaltet werden.

Stöbern 2.jpgStöbern 2.jpg
Stöbern.jpgStöbern.jpg
Stöbern 3.jpgStöbern 3.jpg
Stöbern 4.jpgStöbern 4.jpg

Statt einer langweiligen Kategorieliste herrscht nun optische Abwechslung: ich habe neue Teaser in Form von swipe-baren Cover-Galerien, Bestseller-Listen und Cards (die zum Beispiel Anreißertext und / oder Bewertungen abbilden könnten) eingeführt.


2. Suche

Die Suche kann in der aktuellen Audible-App in drei Tabs gleichzeitig geöffnet werden – verwirrend. Zumal die Zurück-Buttons der drei Ansichten nicht einheitlich ausgezeichnet sind. In meiner Lösung bekommt die Suche ihren eigenen Tab und einen sinnvollen Empty-State: Inhalte werden an die Oberfläche geholt, statt den Raum für ein fragwürdig riesiges Lupen-Icon zu nutzen.

Suche 2.jpgSuche 2.jpg
Suche.jpgSuche.jpg


3. Hörbuch-Detailansicht

Hier besteht ein ähnliches Problem wie bei der Suche. Auch die Hörbuch-Detailansicht lässt sich in drei Tabs gleichzeitig öffnen. Im Redesign öffnen sich Hörbucher nun als Modale, die außerhalb der Tab-Navigation leben.

Hörbuchdetail 2.jpgHörbuchdetail 2.jpg
Hörbuchdetail 3.jpgHörbuchdetail 3.jpg
Hörbuchdetail.jpgHörbuchdetail.jpg

Weitere Details

  • Sprechernamen sind nun ausklappbar und werden nicht mehr abgeschnitten.

  • Zeitangaben wurden App-übergreifend auf ein einheitliches Format überführt.

  • Buttons haben klare Aussagen, ändern bei Zustandswechsel ihre Optik und können auch Daten wie den Wiedergabefortschritt anzeigen.


4. Bibliothek

Die verschiedenen Sortierungsoptionen der Bibliothek wurden im Redesign in ein übersichtliches Modal verschoben. Die Filter habe ich wegfallen lassen und durch eine Gruppierung der Hörbücher ersetzt, die ebenfalls über das neue Modal beeinflusst werden kann.

Im Vergleich zum Original sind zudem die Aktionen, die durch Tap auf ein Hörbuch ausgelöst werden, klar gekennzeichnet. Extrem kleine Schriftgrade wurden deutlich vergrößert.

Bibliothek 2.jpgBibliothek 2.jpg
Bibliothek.jpgBibliothek.jpg


5. Player und Mini-Player

Im Player habe ich Elemente, die funktional zusammengehören, nun auch zusammen angeordnet. Der Mini-Player, der dauerhaft erscheint, sobald Hörbuch aktiv ist, schwebt nun optisch klar über den Inhalten und sagt bereits alleine durch die Farbgestaltung: Ich bin ein Element, das außerhalb der Tab-Struktur existiert. Auch im Player und Mini-Player wurden im Vergleich zum Original lesbarere Schriftgrößen eingesetzt.

Player.jpgPlayer.jpg
Player 2.jpgPlayer 2.jpg


Fazit

Ein kompaktes Redesign-Projekt als Abschluss für einen Kurs, der mir tatsächlich viel über iOS-Design beigebracht hat. Hut ab für die durchgehend gute Lehre, Frank Rausch.

Wäre noch mehr Zeit gewesen, würde es in der App noch unzählige Ansichten geben, die neugedacht oder umgestaltet werden müssten. Auch im hier vorliegenden ersten Redesign-Wurf sind noch ein paar Stellen vorhanden, die eine zweite Iteration vertragen könnten. Zum Beispiel folgende:

  • Der Player ist hierarchisch noch nah an der Vorlage: ich bin mit der Tab-artigen Bedienelement-Anordnung nicht zufrieden. Im Optimalfall würden sich diese Elemente optisch stärker von der Tab Bar anderer Screens abheben.

  • Durch die Wahl von Orange als aktive Farbe, ergibt sich in der Tab Bar ein neues Problem: die inaktiven Elemente sind hellgrau. Etwas zu hellgrau: der Kontrast ist aus Accessibility-Sicht nah an fragwürdig. In einer zweiten Runde würde ich hier definitiv optimieren.


Mockup-02_Incom.jpgMockup-02_Incom.jpg

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