Takafumi Horiuchi

Practice Log n Share

Eine App zum Erfassen und Teilen des täglichen Musikübens

Log-Ansicht. Über einem Balken mit der heutigen Gesamtzeit von 54 Minuten und den Kategoriekarten befindet sich ein Raster mit dem Übeverlauf. Die Zeitmessung für „Stücke üben“ hat 27 Minuten überschritten; die Karte ist durch eine hellere Farbe und einen weißen Umriss hervorgehoben. Share-Ansicht. Eine Zusammenfassung vom Unterricht am 17. September bis zum 24. September zeigt insgesamt 4 Stunden und 38 Minuten Übezeit, Balken für jede Kategorie und eine Tagestabelle, in der alle Kategorien ohne horizontales Scrollen sichtbar sind.
Die App hat zwei Ansichten. Beide lassen sich in der Web-Demo ausprobieren.

1. Überblick

Eine iPhone-App, mit der sich die Übezeit mit einem Tippen erfassen lässt, während man das Instrument hält. Die Aufzeichnungen können anschließend im Unterricht der Lehrkraft gezeigt werden. Die Ansichten zum Erfassen („Log“) und Teilen („Share“) verbinden das tägliche Üben mit dem Gespräch im Unterricht.

Ich definierte das Problem, gestaltete die UX und UI, verfeinerte die Interaktionen auf einem iPhone, implementierte die App und erstellte die Projektmaterialien. Bei der Implementierung arbeitete ich mit KI zusammen; die endgültigen Entscheidungen über die Ansichten und Interaktionen traf ich selbst.

Ich nutzte die App beim eigenen Üben und im Unterricht. Meine Lehrkraft sagte, dass sie leicht erkennen könne, was ich geübt hatte, und wünschte sich detailliertere Aufzeichnungen (sinngemäß wiedergegeben).

2. Hintergrund und Herausforderungen

Ich spiele als Hobby Tenorsaxofon und nehme alle zwei Wochen Unterricht. Wenn meine Lehrkraft fragte, wie das Üben lief, hatte ich keine Möglichkeit, konkret zu zeigen, was ich wie lange geübt hatte.

Mit dem Saxofon am Halsgurt ist es umständlich, während des Übens auf Papier zu schreiben. Je mehr Seiten sich im Übetagebuch ansammeln, desto verstreuter sind die Aufzeichnungen.

Der Versuch, auf Papier zu schreiben, während ein Saxofon am Halsgurt hängt. Lose Blätter mit Übenotizen häufen sich an; die Aufzeichnungen lassen sich nur schwer wiederfinden.
Mit dem Instrument in der Hand ist Schreiben umständlichDie Aufzeichnungen verteilen sich auf immer mehr Seiten

Die Zeiterfassungs-Apps, die ich ausprobierte, konnten die Messung mit einem Tippen starten. Die Herausforderung bestand darin, diese Aufzeichnungen so aufzubereiten, dass meine Lehrkraft sie auf einen Blick verstand.

3. Gestaltungsprinzipien

Das Erfassen beim Üben und das Teilen im Unterricht sollten einen durchgehenden Ablauf bilden. Zwei Anforderungen bestimmten die Anordnung der Inhalte und die Interaktionen.

Das Erfassen beim Üben einfach halten

Die Übezeit mit einem Tippen auf eine Kategorie erfassen, während ich das Instrument halte.

Auf eine Bearbeitung vor dem Unterricht verzichten können

Die Aufzeichnungen automatisch aufbereiten, damit ich ohne vorherige Bearbeitung zeigen kann, was ich wie lange geübt habe.

4. Funktionen und Gestaltung

Bedienelemente und Übezeit auf einer Karte zusammenführen

Ein Tippen auf eine Kategoriekarte startet die Zeitmessung, ein Tippen auf eine andere Karte wechselt die Kategorie, und ein erneutes Tippen auf dieselbe Karte stoppt die Messung. Jede Karte zeigt die heutige Übezeit ihrer Kategorie gut sichtbar an. Nur während der laufenden Messung wird sie heller und erhält einen weißen Umriss. Bedienelemente und Erfassungsstatus befinden sich am selben Ort.

Log-Ansicht. Über einem Balken mit der heutigen Gesamtzeit von 54 Minuten und den Kategoriekarten befindet sich ein Raster mit dem Übeverlauf. Die Zeitmessung für „Stücke üben“ hat 27 Minuten überschritten; die Karte ist durch eine hellere Farbe und einen weißen Umriss hervorgehoben.
Die Zeit für „Stücke üben“ wird gerade erfasst.
Kategorie, heutige Übezeit und Messstatus sind auf derselben Karte sichtbar.

Die Verteilung der Übezeit ohne horizontales Scrollen überblicken

Die App fasst das Üben seit dem letzten Unterricht automatisch zusammen. Deshalb müssen die Aufzeichnungen vor dem Teilen nicht bearbeitet werden. Bei der Tagestabelle war mir wichtiger, alle Kategorien gleichzeitig zu zeigen, auch wenn dafür die Schrift kleiner sein musste. So kann ich meiner Lehrkraft den Bildschirm zeigen und mit ihr besprechen, wie ich meine Übezeit aufteile.

Share-Ansicht. Eine Zusammenfassung vom Unterricht am 17. September bis zum 24. September zeigt insgesamt 4 Stunden und 38 Minuten Übezeit, Balken für jede Kategorie und eine Tagestabelle, in der alle Kategorien ohne horizontales Scrollen sichtbar sind.
Zeitraum, gesamte Übezeit, Aufschlüsselung nach Kategorien und Tagesdetails in einer Ansicht.

Die bisherige Übezeit als Ansporn zum Weitermachen

Ich machte sowohl den heutigen Fortschritt als auch die über Monate und Jahre angesammelte Übezeit sichtbar. Ich hoffe außerdem, dass es mich zum Weiterüben motiviert, meiner Lehrkraft meinen Einsatz zeigen zu können.

Tagesansicht: den Balken füllen, mit einer Stunde als Richtwert

Der Balken für die heutige Übezeit reicht zunächst von null bis zu einer Stunde. Er setzt sich aus verschiedenfarbigen Abschnitten für die Zeit in jeder Kategorie zusammen. Ich hoffte, dass mich das Füllen des Balkens zum Weiterüben anspornen würde.

Ein Beispiel mit 40 Minuten Übezeit. Die Farben stehen für die Übekategorien. Die Aufzeichnungen sind fiktiv.

Langzeitansicht: grüne Zellen zeigen den täglichen Fortschritt

Jede Zelle steht für einen Tag; die Grüntöne geben an, wie lange ich geübt habe. Das Raster macht sichtbar, wie sich über Monate und Jahre Übezeit ansammelt. Die wachsenden Aufzeichnungen sollten mich zum Weiterüben ermutigen.

Jede Zelle steht für einen Tag; rote Umrisse markieren Meilensteine. Die rechte Spalte ist nur teilweise gefüllt, da die späteren Tage noch nicht erfasst sind. Fiktives Beispiel.

5. Entwicklungsprozess

Durch Recherche die Aufgaben von Erfassen und Teilen klären

Ich recherchierte mit ChatGPT bestehende Apps und klärte das Problem sowie meinen Ansatz. Bei meiner damaligen Recherche fand ich Zeiterfassungs-Apps, aber keine Funktion zum Teilen, die sich für die Kommunikation mit meiner Lehrkraft eignete. Im Gespräch entwickelte ich das Konzept, schrieb eine Spezifikation und übergab sie an Codex, um die erste Version implementieren zu lassen.

Die erste Version so verfeinern, dass die Bedienelemente sichtbar bleiben

Ich probierte die von der KI erzeugte erste Version selbst aus und bat um Änderungen an UI und UX. Die zuvor separat angezeigten Informationen zur laufenden Zeitmessung und die Stoppfunktion integrierte ich in die Kategoriekarten. Die heutige Übezeit hob ich stärker hervor. Außerdem erprobte ich Anordnungen, bei denen das gesamte Bedienfeld auf dem Bildschirm sichtbar blieb.

Erste Version vom 9. September. Sechs kleine Kategoriekarten und die heutige Gesamtzeit von 40 Minuten stehen in getrennten Bereichen der Log-Ansicht.

Erste Version

Überarbeitete Version vom 21. September. Jede große Karte zeigt eine Kategorie und die heutige Übezeit. Die laufende Zeitmessung für das Notenlesen zeigt 10 Minuten und ist hervorgehoben.

Überarbeitete Version

Beide Versionen zeigen dieselben fiktiven Daten: sechs Kategorien und heute insgesamt 40 Minuten Übezeit.
Die überarbeitete Version integriert die Informationen zur laufenden Zeitmessung und die Stoppfunktion in die Kategoriekarten.

Da die Ansicht während des Übens geöffnet bleibt, wählte ich einen schwarzen Hintergrund. Die Farben der Kategorien sollten ihr eine freundliche Wirkung geben.

Das Scrollgefühl vergleichen, bevor ich ein Verfahren auswähle

Mit Worten und Bildern allein ließ sich das gewünschte Gefühl nicht erreichen: eine fließende Bewegung, die an der Zielposition sicher einrastet. Gemeinsam mit KI entwickelte ich ein Abstimmungswerkzeug, mit dem ich verschiedene Scrollverfahren und Parameterwerte selbst ausprobieren konnte. Auf einem iPhone verglich ich, an welchen Positionen das Scrollen zur Ruhe kam. Gesucht war eine Position, an der das gesamte Bedienfeld sichtbar blieb. Ich entschied mich für die native Scroll-Snap-Funktion des Browsers und setzte sie in der App ein.

Werkzeug zum Abstimmen des Scrollverhaltens. Neben einer Smartphone-Vorschau zum Erproben des Scrollens befinden sich Bedienelemente für fünf Einrastverfahren und ihre Parameter.
Ich variierte die Scrollverfahren und ihre Parameter, um auf einem iPhone zu vergleichen, wie die Bewegung zur Ruhe kam.

Unabhängige Reviews nutzen und selbst entscheiden, was ich übernehme

Ich wiederholte einen Review-Zyklus mit zwei unabhängigen KI-Sitzungen. Ich prüfte die von Claude Code genannten Probleme und vorgeschlagenen Verbesserungen. Anschließend ließ ich die Hinweise von Codex verifizieren und die erforderlichen Korrekturen vornehmen. Manche Vorschläge entfernten sich von der gewünschten UI und UX. Deshalb entschied ich anhand des App-Zwecks und des Bediengefühls, was ich übernahm.

Diesen Ablauf wiederholte ich etwa 15-mal. Als die KI-Reviews keine größeren Fehler mehr fanden, war das für mich ein Grund, diese Verbesserungsrunde abzuschließen.

6. Nutzungserfahrungen und nächste Schritte

Das Öffnen der App wurde Teil des Übungsbeginns

Ich installierte die App auf meinem iPhone und nutzte sie beim täglichen Üben. Dabei prüfte ich, wie leicht sich die Zeit mit einem Tippen erfassen ließ, während ich das Instrument hielt. Die App zu Beginn des Übens zu öffnen, wurde zu einer positiven Gewohnheit. Die Reihenfolge meiner Übungen und die Verteilung meiner Zeit im Rückblick zu betrachten und dabei den nächsten Unterrichtstermin im Blick zu behalten, hilft mir bei der Planung.

Meine Lehrkraft wünschte sich detailliertere Aufzeichnungen

Meine Lehrkraft sagte, sie könne leicht erkennen, was ich geübt habe. Wenn auch die Arten der Tonleitern erfasst würden, wäre die App noch nützlicher (sinngemäß wiedergegeben). Diese Beobachtungen stammen aus meinem eigenen Üben und dem Unterricht mit meiner Lehrkraft.

Als Nächstes: mehr Details bei weiterhin einfacher Erfassung

Ich erwäge Unterkategorien wie „Pentatonische Tonleitern“ innerhalb von „Tonleitern“ und untersuche zugleich, wie das Erfassen einfach bleiben kann. Für die Ansicht zum Teilen erwäge ich außerdem, die Tagestabelle durch eine Hierarchie aus Kategorien und Unterkategorien zu ersetzen.