SoundCloud Redesign
Wie sich die wahrgenommene Usability einer hybriden Musik-App messbar verbessern lässt.
- UX Design
- 2026
- Adobe XD
- Heuristische Evaluation + SUS
SoundCloud verbindet die Welt des Musikstreamings und der sozialen Plattformen in einer App. Diese Art von Plattformstruktur ist bislang kaum systematisch untersucht. Daher habe ich die SoundCloud-App heuristisch evaluiert, ein vollständiges Redesign konzipiert und seine Wirkung auf die wahrgenommene Gebrauchstauglichkeit empirisch gegen das Original mitttels System Usability Scale gemessen.
Zwischen Musikstreaming und Social Feed
SoundCloud verbindet klassisches Musikhören mit sozialen Funktionen wie Folgen, Likes, Reposts, Feed, Kommentaren und Direktnachrichten und nimmt daher im Musikstreaming eine besondere Rolle ein. Das hybride Nutzungserlebnis aus Streamingdienst und sozialer Plattform führt zu einer hohen Funktionsdichte der App, die die mobile Gestaltung anspruchsvoll macht.
Einerseits können Nutzer:innen Inhalte entdecken und Musik steuern, andererseits müssen sie soziale Interaktionen, den Zusammenhang und Abgrenzung von Musikstreaming-Funktionen verstehen und zwischen diesen Kontexten wechseln. Typisch für mobile Nutzung passiert das oft in kurzen, beiläufigen Nutzungssituationen. Die gestalterischen Anforderungen an Orientierung, Konsistenz, visuelle Hierarchie und effiziente Bedienung sind entsprechend hoch.
Wissenschaftlich ist die mobile Usability der App bislang kaum systematisch untersucht. Nach kurzer Recherche trifft man immer wieder auf unzufriedene Nutzerstimmen in Foren und vereinzelte Case Studies, eine empirisch fundierte Analyse existiert aber noch nicht. Diese Lücke war der Ausgangspunkt meiner Arbeit und führte zu der leitenden Forschungsfrage:
Welche Usability-Defizite zeigt die SoundCloud-App im Hörerkontext, und wie lässt sich die wahrgenommene Gebrauchstauglichkeit durch ein begründetes Redesign verbessern?
Der HCD-Prozess
Mein Vorgehen orientiert sich am Human-Centered Design und gliedert sich in drei aufeinander aufbauende Phasen. Ziel war es, die Usability der SoundCloud-App systematisch zu diagnostizieren, das Redesign auf Basis dieser Diagnose zu konzipieren und seinen tatsächlichen Effekt auf die wahrgenommene Gebrauchstauglichkeit zu prüfen.
1
Heuristische Evaluation
2
Konzeption des Redesigns
3
SUS - Befragung
Heuristische Evaluation
Vorbereitung und Durchführung der Analyse
Damit die Evaluation die App in ihrer ganzen Breite abdecken konnte, musste ich sie zunächst vollständig, inklusive aller Ansichten, Navigationspfaden, Overlays und Funktionen, erfassen. So entstand während der Evaluationsvorbereitung ein Struktur- und Funktionsmodell, das die SoundCloud-App als Ganzes abbildet. Auf seiner Basis ließen sich 24 Entitäten festlegen. Dies sind in sich geschlossene Untersuchungseinheiten, die nacheinander anhand der definierten Heuristiken – eine Kombination aus Nielsens 10 Heuristiken und den SMASH-Erweiterungen für mobile Apps – geprüft wurden und in Summe die gesamte App abdecken. Das Ergebnis war eine Befundtabelle mit 131 dokumentierten Usability-Problemen, die jeweils einer Entität zugeordnet waren und mindestens eine Heuristik verletzten.
Key Findings: Problemfelder
Viele der 131 Befunde waren strukturell verwandt und kehrten über verschiedene Screens hinweg wieder. Durch Affinity Diagramming nach inhaltlicher Ähnlichkeit der jeweiligen Nutzungsbeeinträchtigung konnte ich sie zu sechs Problemfeldern (PF 1 – PF 6) zusammenfassen. Allein die drei häufigsten Problemfelder machen rund 70 % aller Befunde aus und treten quer durch die gesamte App auf, was zeigt, dass die größte Schwächen der SoundCloud-App in wiederkehrenden, ansichtsübergreifenden Mustern liegen. Damit war klar, dass das Redesign nicht nur punktuell auf einzelne Schwachstellen innerhalb der Screens eingehen musste, sondern eine übergreifende strukturelle Überarbeitung nötig war.
Uneinheitliche Interaktionsmuster (PF 1)
Vergleichbare Funktionen, Icons und Interaktionsmuster sind innerhalb der App unterschiedlich gestaltet, darunter wechselnde Headerstrukturen, uneinheitliche Button- und Filter-Icons und eine zwischen Hauptbereichen variierende Sekundärnavigation. Hinzu kommen Abweichungen von etablierten Plattformkonventionen, wie z.B. eine Doppeltipp-Geste, die Wiedergabe statt Like auslöst.
Hohe visuelle Dichte und defizitäre Informationshierarchie (PF 2)
Das schnelle Scannen und Erfassen von Ansichten wird häufig durch geringe Abstände, schwache Gruppierung und Priorisierung weniger relevanter Elemente erschwert. Zum Beispiel sind Track-Informationen im Musikplayer klein und dicht platziert, Feed-Beiträge visuell überladen, und komerzielle oder dekorative Elemente zu stark hervorgehoben.
unklare Begriffe und Zuordnungen (PF 3)
Die Bedeutung von UI-Elementen und worauf sich diese Elemente beziehen, ist in vielen Fällen nicht unmittelbar erkennbar. Dazu zählen mehrdeutige Bezeichnungen wie Vibes oder Eingang, konventionsfremde Begriffe wie Profile im Zusammenhang mit Interpreten oder Crew für im Zusammenhang mit Künstlerempehlungen sowie unklare Funktionslabels wie Zur Vorschau tippen.
geringe Auffindbarkeit und Bedieneffizienz (PF 4)
Zentrale Funktionen sind oft nicht dort zu finden, wo Nutzer:innen sie erwarten, oder nur über Umwege erreichbar. Beispiele sind die im Overflow-Menü versteckte Repost-Funktion im Musikplayer, die umständliche und mehrschrittige Entfernung von Tracks aus der Warteschlange und globale Elemente wie Upgrade, Mitteilungen und Profil, die nicht durchgängig auf den Haupt-Screens platziert sind.
schwer erkennbarer Systemstatus und Kontext (PF 5)
Der aktuelle Zustand der App oder einer Ansicht wird nicht immer ausreichend kommuniziert. Das zeigt innerhalb der Kommentaransicht, in der der Track-Wiedergabestatus zu subtil angedeutet wird, dadurch, dass die Anzahl neuer Nachrichten nicht signalisiert wird und durch leere Tabs, die irreführende bzw. inkorrekte Fehlermeldungen enthalten, aber keine hilfreichen Erklärungen.
geringe Ergonomie und Touch-Bedienbarkeit (PF 6)
Touchziele sind teilweise zu klein oder zu dicht platziert, beispielsweise die Aktionsicons im Musikplayer und die Icons für Upload und Benachrichtigungen in der Sekundärnavigation. Außerdem liegen zentrale Wiedergabeaktionen wie Repeat und Shuffle außerhalb der Zone, die bei einhändiger Bedienung komfortabel erreichbar ist.
Vom Befund zur Anforderung
Aus der Verdichtung leitete ich Gestaltungsanforderungen auf zwei Ebenen ab:
- Auf Befundebene formulierte ich für jede der 131 Schwachstellen eine lokale Anforderung, die konkret genug war, um sie im Prototyp an der entsprechenden Stelle direkt umzusetzen.
- Auf Problemfeldebene formulierte ich zusätzlich sechs übergeordnete Gestaltungsanforderungen (GA1–GA6), die jeweils aus den Problemfeldern abgeleitet wurden und das Redesign in einen kohärenten Gestaltungsrahmen einbetten, also als eine Art Leitlinie fungierten.
Durch diese zweistufige Ableitung konnte ich sicherstellen, dass das Redesign sowohl über alle Bildschirme hinweg konsistent designed wurde und übergeordnete Konsistenz/alternativer Ausdruck (?).. nicht as dem Blick verloren wurde, während gleichzeitig aber lokale Defizite detailliert berücksichtigt wurden und das Redesign hinreichend genau/detailliert war. Gleichzeitig konnten dadurch auch mehrere Befunde durch einzelne Designentscheidung adressiert werden (warum wichtig?), damit keine Dopplungen auftraten oder beim Designen auffiel, dass das schon adressiert wurde o.ä,. Eine vereinheitlichte Headerstruktur etwa berücksichtigt gleichzeitig die Konsistenzdefizite aus PF1 und die Befunde zu geringer Auffindbarkeit aus PF4. Die lokalen Anforderungen mussten erfüllt werden, außer wenn im Hinblick auf die übergeordneten Leitlinien, eine andere Entscheidung sinnvoller war. => Design sowohl detailliert und genau/ basierend auf Ergebnissen der analyse (empirisch genug?) als auch sinnvoll im Zusammenspiel (Ausdruck?)
Lösung: Konsistenz, Erreichbarkeit...(?)
Auf Basis konkreter Umsetzungsvorschläge, die aus den Nachbereitungsschritten der Evaluation formuliert wurden, konnte schließlich das Redesign erstellt werden. Dabei wurden globale Styles der SoundCloud-App übernommen und genau nur die um die Vergleichbarkeit zu garantieren und die spätere Befragung nicht zu verzerren. (?)