Takafumi Horiuchi

Practice Log n Share

Une app pour noter et partager la pratique musicale quotidienne

Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc. Écran de partage. Du cours du 17 septembre au 24 septembre : 4 heures et 38 minutes, des barres par catégorie et un tableau quotidien présentant toutes les catégories sans défilement horizontal.
L’application comporte deux écrans, présentés ici dans leur version japonaise. Essayez-les dans la démo web.

1. Présentation

Une application iPhone pour enregistrer le temps de pratique d’une seule pression, sans lâcher son instrument, puis montrer les relevés à son professeur pendant le cours. Ses deux écrans, l’un pour enregistrer et l’autre pour partager, relient la pratique quotidienne aux échanges en cours.

J’ai défini le problème, conçu l’UX et l’UI, affiné les interactions sur un iPhone, développé l’application et préparé les documents du projet. J’ai collaboré avec l’IA pour le développement, tout en prenant moi-même les décisions finales sur les écrans et les interactions.

Je l’ai utilisée dans ma pratique et mes cours. Mon professeur a trouvé le contenu compréhensible d’un coup d’œil et a demandé des relevés plus détaillés (propos résumés).

2. Contexte et difficultés

Je joue du saxophone ténor en amateur et prends un cours toutes les deux semaines. Lorsque mon professeur me demandait comment se passait ma pratique, je n’avais aucun moyen concret d’expliquer ce que j’avais travaillé et pendant combien de temps.

Avec le saxophone suspendu à sa sangle, écrire sur du papier pendant la pratique est malcommode. Les feuilles du journal s’accumulent et les relevés se dispersent.

La difficulté d’écrire sur du papier avec un saxophone suspendu à sa sangle. Les feuilles du journal de pratique s’accumulent et se dispersent, rendant les relevés difficiles à retrouver.
Écrire en tenant son instrument est malcommodeLes feuilles s’accumulent, les relevés se dispersent

Les applications de suivi du temps que j’ai essayées permettaient de lancer un chronomètre d’une seule pression. La difficulté restait de présenter ces relevés sous une forme compréhensible d’un coup d’œil par mon professeur.

3. Principes de conception

Je souhaitais créer un parcours continu entre l’enregistrement pendant la pratique et le partage en cours. Deux exigences ont guidé les choix d’écrans et d’interactions.

Simplifier le suivi du temps pendant la pratique

Enregistrer le temps en touchant une catégorie, sans lâcher l’instrument.

Éviter les retouches avant de montrer les relevés

Regrouper automatiquement les relevés pour montrer tels quels les exercices travaillés et le temps qui leur a été consacré.

4. Fonctionnalités et conception

Réunir les commandes et le temps de pratique sur une même carte

Toucher une catégorie lance le chronomètre ; toucher une autre carte change de catégorie ; toucher à nouveau la même carte l’arrête. Chaque carte affiche clairement le temps du jour et ne devient plus lumineuse, avec un contour blanc, que pendant le chronométrage. L’endroit où j’agis est aussi celui où je vérifie ce que j’enregistre.

Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc.
Le chronométrage de « Travail des morceaux » est en cours.
La catégorie, le temps du jour et l’état du chronomètre sont visibles sur la même carte.

Voir la répartition de la pratique sans défilement horizontal

Pour éviter les retouches avant le partage, l’application regroupe automatiquement les relevés depuis le dernier cours. Pour le tableau quotidien, j’ai privilégié l’affichage simultané de toutes les catégories, quitte à réduire la taille du texte. L’objectif est de discuter de la répartition du travail avec mon professeur en lui montrant l’écran.

Écran de partage. Du cours du 17 septembre au 24 septembre : 4 heures et 38 minutes, des barres par catégorie et un tableau quotidien présentant toutes les catégories sans défilement horizontal.
La période, le total, la répartition par catégorie et le détail quotidien sur un seul écran.

Faire de la pratique accumulée une raison de continuer

J’ai rendu visibles les progrès du jour ainsi que l’accumulation sur des mois et des années. J’espère aussi que pouvoir montrer mes efforts à mon professeur m’aidera à poursuivre la pratique.

Une journée : remplir la barre, avec une heure comme repère

La barre du temps de pratique du jour s’étend initialement de zéro à une heure. Les durées de chaque catégorie s’y empilent dans des couleurs différentes. J’espérais que remplir cette barre me donnerait une raison de continuer à pratiquer.

Exemple après 40 minutes de pratique. Les couleurs représentent les catégories. Relevés fictifs.

Dans la durée : des cases vertes pour montrer les progrès quotidiens

Chaque case représente un jour et la nuance de vert indique le temps de pratique. La grille permet de voir l’accumulation sur des mois et des années ; je souhaitais que l’enrichissement des relevés quotidiens encourage la régularité.

Une case correspond à un jour ; les contours rouges marquent des étapes. La dernière colonne est partiellement renseignée : les jours situés en dessous n’ont pas encore de relevé. Exemple fictif.

5. Processus de réalisation

Définir l’enregistrement et le partage par la recherche et le dialogue

J’ai utilisé ChatGPT pour étudier les applications existantes et structurer le problème et l’approche. Dans le périmètre de mes recherches à l’époque, j’ai trouvé des applications de gestion du temps, mais aucun mécanisme de partage adapté aux échanges avec un professeur. J’ai formalisé le concept précisé par le dialogue dans une spécification, puis l’ai transmise à Codex pour réaliser la première version.

Essayer la première version et garder les commandes dans l’écran

J’ai essayé moi-même la première version générée, demandé des améliorations de l’UI et de l’UX, puis affiné le résultat. J’ai regroupé sur les cartes les informations de chronométrage et la commande d’arrêt, auparavant séparées, et mis en évidence le temps du jour. J’ai aussi exploré des dispositions permettant de garder le panneau de commandes entièrement dans l’écran.

Première version du 9 septembre. Six petites cartes et le total du jour, 40 minutes, occupent des zones distinctes de l'écran de suivi.

Version initiale

Version révisée du 21 septembre. Chaque grande carte affiche une catégorie et le temps de pratique du jour. Le chronomètre de lecture de partition, actif, indique 10 minutes et sa carte est mise en évidence.

Version améliorée

Comparaison avec les mêmes données fictives : six catégories et 40 minutes aujourd’hui.
La version améliorée regroupe sur les cartes les informations de chronométrage et la commande d’arrêt, auparavant dans une zone distincte.

J’ai choisi le noir comme base pour un écran qui reste ouvert pendant la pratique, tout en cherchant une impression joyeuse grâce aux couleurs des catégories.

Comparer moi-même les sensations d’interaction avant de choisir

Les mots et les images seuls ne suffisaient pas à obtenir la sensation souhaitée : un mouvement fluide qui s’arrête nettement à la bonne position. J’ai créé avec l’IA un outil de réglage pour essayer moi-même différentes méthodes de défilement et valeurs de paramètres. Sur un iPhone, j’ai comparé les positions d’arrêt pour garder le panneau de commandes entièrement visible. J’ai retenu l’alignement automatique du défilement intégré au navigateur et l’ai utilisé dans l’application.

Outil de réglage du défilement. Les commandes des cinq méthodes d'accrochage et leurs paramètres côtoient un écran de téléphone pour essayer l'interaction.
J’ai modifié les méthodes de défilement et leurs paramètres pour comparer les positions d’arrêt sur un iPhone.

S’appuyer sur des revues indépendantes et décider soi-même

J’ai répété un cycle de revue dans deux sessions d’IA indépendantes. J’examinais les problèmes et les améliorations proposés par Claude Code, puis Codex les vérifiait et appliquait les corrections nécessaires. Certaines propositions s’éloignaient de l’UI et de l’UX que je recherchais ; je décidais donc lesquelles retenir selon l’objectif de l’application et les sensations d’utilisation.

J’ai répété ce processus environ 15 fois. Lorsque les revues d’IA n’ont plus signalé de défaut majeur, j’en ai fait l’un des éléments justifiant de clore cette phase d’amélioration.

6. Expérience d’utilisation et perspectives

Ouvrir l’application est devenu un rituel de début de pratique

Je l’ai installée sur mon iPhone et utilisée chaque jour pour vérifier la facilité d’enregistrement d’une seule pression, instrument en main. L’ouvrir au début de la pratique est devenu une habitude positive. Revoir l’ordre et la répartition du travail de la journée, tout en gardant à l’esprit la date du prochain cours, m’aide à planifier ma pratique.

Mon professeur a demandé des relevés plus détaillés

Mon professeur a trouvé le contenu clair d’un coup d’œil et estimé que noter les types de gammes rendrait l’application encore plus utile (propos résumés). Ces observations reposent sur mon expérience personnelle de pratique et de cours avec lui.

La prochaine difficulté : plus de détail sans compliquer la saisie

J’envisage d’ajouter des sous-catégories, comme « Gammes pentatoniques » sous « Gammes ». Je cherche encore comment conserver un enregistrement simple. Pour l’écran de partage, j’étudie aussi une hiérarchie de catégories et de sous-catégories à la place du tableau quotidien.