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 Mac-App

Design der Audible App als native Mac App mit erweiterten Features

Audible für MacOS

Audible ist als Hörbuch- Anbieter, Produzent und Vertreiber der größte und meist genutzte der Welt. Die Nutzung beschränkt sich dabei allerdings auf mobile Endgeräte.

Im Kurs Die Maus im Fenster bei Frank Rausch, ist daher ein Interfacedesign einer MacOS spezifischen Version der mobilen Audible App entstanden. Der Fokus lag dabei darauf, die Eigenschaften und „Regeln“ des MacOS Design Systems im Kontext einer neu zu gestalteten App korrekt und sinnvoll umzusetzen. 

Über die Umsetzung hinaus, habe ich die Audible App in ihren Funktionen etwas erweitert und Konzeptionell für die intensive Nutzung der App am Desktop angepasst (Notes). Ich habe mich in der Gestaltung auf zwei zentrale Ansichten/Bereiche der App konzentriert: der Store und der Player.

Drei Player Ansichten

mobile Version

Im Zentrum der Audible App steht der Player. Hier können Hörbücher gestartet und pausiert werden, Vor- und Zurückspulen ist möglich, sowie ggf. die Navigation zwischen den Kapiteln. Der Player existiert auf dem Handy dabei in drei Anzeigeformen (s. Abb. 1):

  • Der Player in der geöffneten App, mit vollem Funktionsumfang,
  • dem Widget auf den Sperrbildschirm mit Start-Stopp-Funktion,
  • als Widget bei anderweitiger Nutzung des entsperrten Handys oftmals im Quick-Access Menü den Handys.

Abbildung_1.pngAbbildung_1.png

Desktop Version

Diese Ansichten bleiben in ihrer Anzahl bestehen, sind aber in ihrer Position und Funktion für die Desktop-Nutzung angepasst. Alle drei Ansichten sind auf einem statischen Screen gleichzeitig sichtbar (s. Abb.2). Es gibt die Ansicht des Players in der App (Player 1) (s. Abb. 2, Nr. 1), dieser verfügt über den vollen Funktionsumfang mit Informationen über Buch, Kapitelverlauf, Buchverlauf und Zeiten. Player 2 befindet sich in der Seitenleiste der App (s. Abb. 2, Nr. 2). Diese Position lässt die Bedienung der Hörbuch-Audiospur während der Nutzung der App schnell und einfach zu, sodass man beim Hören andere Bereich der App bedienen kann (z.B. den Store). Player 3 befindet sich in der Menüleiste des Desktops und ist sichtbar, solange die Audible App läuft. Hier kann über ein Dropdown Menü (s. Abb. 3) die Audiospur bedient werden und die App mit verschiedenem Fokus geöffnet werden.

player_ansicht_1.pngplayer_ansicht_1.png
player_ansicht_2.pngplayer_ansicht_2.png

Verlaufsanzeige des Buches

Die Verlaufsanzeige des Kapitels im Players 1 wird von einer Verlaufsanzeige des Buchs ergänzt. Sie stellt alle Kapitel in Ihrer Anzahl und ungefähren Länge dar und bildet als Einheit die Länge des Buches: jedes Kästchen steht für ein Kapitel, die Breite des Kästchens leitet sich von der relativen Länge des Kapitels zum Buch ab. Der rote Rahmen signalisiert dabei welches Kapitel man momentan hört. Zusammen mit dem Audioverlauf und den genauen Zeiten darüber kann man so auf einen Blick verorten, wo man sich im Buchverlauf befindet.

fenster_16-9.pngfenster_16-9.png

Notes

Eng mit den Ansichten des Players verknüpfts ist die Funktionserweiterung „Notes“. Hier können Notizen entlang der Audiospur erstellt, kategorisiert, gespeichert und geteilt werden. Dies ermöglicht Usern, die Hörbücher nicht nur zu Unterhaltungszwecken nutzen, die Arbeit an und mit den Texten, beispielsweise für Sachbüchern oder klassischer Literatur, ohne die Bücher aktiv lesen zu müssen.

Verknüpfung mit dem Player

Beim Hovern über die verschiedenen Kapitelblöcke erscheinen Infos zur Anzahl verknüpfter Notizen im fokussierten Kapitel. Die Interessennahme anderer Nutzer weist dem Kapitel einen Grau-Wert zu und wird hier aufgeschlüsselt. Die genaue Anzahl an öffentlichen Notes kann hier abgelesen werden. So kann man schnell wichtige oder für Interessant befundene Stellen im Buch ausmachen. Die eigenen Notizen werden als blaue Punkte an der Kapitelleiste angezeigt. Beim Hovern erhält man eine Vorschau der Notiz, bestehen aus Themenüberschrift und Notiz. Über einen Button kann die Notiz geöffnet werden.

Im Player 3 kann über das Dropdown Menü des Players in der Menüleiste kann man ebenfalls an betreffender die Notizen öffnen oder eine neue erstellen.

hover_notes_2.pnghover_notes_2.png
hover_notes_1.pnghover_notes_1.png
player_default_light.pngplayer_default_light.png

Notes Fenster

Die Notizen werden immer in einem separaten Fenster geöffnet, um die Arbeit unabhängig vom Rest der App zu ermöglichen. Man erhält hier eine Liste aller Kapitel des Buches und kann an entsprechenden Stellen seine eigenen und öffentliche Notizen anschauen. Jede Notiz ist zwingend mit einem Ausschnitt der Audiospur verknüpft, sodass man sich rückwirkend über die Notiz die bestreffende Stelle anhören kann. Beim Erstellen einer neuen Notiz wird die entsprechend der Audioausschnitt ausgewählt, sowie eine Themenüberschrift vergeben. Dies sind eigens Festgelegte Überkategorien, nachdem man später seine Notizen organisieren und Anzeigen lassen kann (s. Sidebar). Man kann hier schon erstelle Themen auswählen oder neue Erschaffen. Schlussendlich gibt man die Notiz ein und speichert alles.

Die Notizen werden in der App für jedes Buch separat gespeichert und können über „My Notes“ verwaltet werden

notes_3.pngnotes_3.png
notes_2.pngnotes_2.png
notes_1.pngnotes_1.png

Store

Der Store ermöglicht das Entdecken sowie den Kauf neuer Hörbücher über die App. Es gibt persönlich zugeschnittene Empfehlungen, Rankings, Themensammlungen, Bestseller, Kategorien etc. In der Desktop Variante ist der Zugriff auf den Store über die Sidebar möglich. Die „Discover“ Funktion vereint dabei alle Empfehlung in sich, die von Audible selbst kuratiert oder auf den Nutzer Persönlich zugeschnitten sind. Bestseller, Top-10, persönliche Empfehlungen und Themenkollektionen (Pride-Month) können über ein Dropdown Menü navigiert werden. Über die Filter können die Ergebnisse an bestimmte technische oder Inhaltliche Wünsche des Nutzers angepasst werden. Über die Filter-Einstellung „Trigger“ können individuell Reizthemen ausgewählt werden, die im Verlauf des Stöberns entweder markiert/herausgestellt (Triggernwarnung) oder gar nicht angezeigt werden.

store_1.pngstore_1.png
store_2.pngstore_2.png
store_3.pngstore_3.png
store_5.pngstore_5.png
store_4.pngstore_4.png

Fazit

Der Kurs war auf so vielen Weisen genau der, den ich gebraucht habe.

Das letzte Semester hat für mich so viele Lücken gefüllt und mir neue bewusst gemacht, ich wünschte es würde weiter gehen. Mal abgesehen davon, dass der Kurs ein perfekter was-kann-mein-Mac Crashkurs für mich war, wurden im Verlauf des Kurses einige super interessante Themen behandelt, mein Auge fürs Detail wurde geschult und ich fühle mich das erste Mal Vertraut im Umgang mit MacOS.

Den tiefen Einblick in die Gestaltung von GUIs, besonders den aktuellen Stand vor dem Hintergrund des so „kurzen“ Existenzzeitraums von GUIs zu betrachten fand ich besonders interessant. Ich muss gestehen etwas verwirrt gewesen zu sein, als der Kurs Thematisch von historischen (oder futuristischen) GUIs zur Gestaltung einer (aktuellen) MacOS App sprang, ich kann mich aber nicht beschweren, da ich bei beidem viel lernen konnte. :)

Ich fange an überall Fehler zu sehen, das nenne ich Fortschritt. :D

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuer_in

foto: Frank Rausch

Zugehöriger Workspace

Die Maus im Fenster

Entstehungszeitraum

Sommersemester 2023

Keywords