Takafumi Horiuchi

Practice Log n Share

Um app para registrar e compartilhar a prática musical diária

Tela de registro. Uma grade com o histórico de prática fica acima de uma barra que mostra o total de 54 minutos de hoje e dos cartões de categorias. O cronômetro de “Prática de peças” ultrapassou 27 minutos, e seu cartão está destacado com uma cor mais clara e um contorno branco. Tela de compartilhamento. Um resumo desde a aula de 17 de setembro até 24 de setembro mostra 4 horas e 38 minutos de prática, barras por categoria e uma tabela diária com todas as categorias visíveis sem rolagem horizontal.
O app tem duas telas. Experimente as duas na demonstração web.

1. Visão geral

Um app para iPhone para registrar o tempo de prática com um toque enquanto seguro o instrumento e, depois, mostrar o registro ao professor durante a aula. As telas de registro e compartilhamento conectam a prática diária às conversas nas aulas.

Defini o problema, projetei a experiência e a interface do usuário, refinei as interações em um iPhone, implementei o app e preparei os materiais do projeto. Colaborei com IA na implementação e tomei pessoalmente as decisões finais sobre as telas e as interações.

Usei o app na minha própria prática e nas aulas. Meu professor disse que era fácil ver o que eu havia praticado e pediu registros mais detalhados (comentário parafraseado).

2. Contexto e desafios

Toco saxofone tenor como hobby e tenho aulas a cada duas semanas. Quando meu professor perguntava como estava indo a prática, eu não tinha uma forma concreta de mostrar o que havia praticado nem por quanto tempo.

Com o saxofone pendurado na correia de pescoço, é difícil escrever em papel durante a prática. Conforme as páginas de um diário de prática se acumulam, os registros ficam espalhados.

Tentativa de escrever em papel com um saxofone pendurado na correia de pescoço. Folhas soltas de anotações de prática se acumulam, dificultando encontrar os registros.
Escrever enquanto seguro o instrumento é difícilOs registros de prática se espalham por mais páginas

Os apps de controle de tempo que experimentei permitiam iniciar a contagem com um toque. O desafio era transformar esses registros em algo que meu professor entendesse à primeira vista.

3. Princípios de design

Eu queria que registrar a prática e compartilhá-la na aula formassem um processo contínuo. Dois requisitos orientaram a organização das telas e as interações.

Manter o registro simples durante a prática

Registrar o tempo de prática tocando em uma categoria, sem soltar o instrumento.

Evitar a edição antes de uma aula

Organizar automaticamente os registros para mostrar o que pratiquei e por quanto tempo, sem precisar editá-los antes.

4. Funcionalidades e design

Reunir controles e tempo de prática em um único cartão

Toque no cartão de uma categoria para iniciar a contagem, em outro para mudar de categoria ou novamente no mesmo para parar. Cada cartão destaca o tempo de prática de hoje naquela categoria e só fica mais claro, com um contorno branco, enquanto seu cronômetro está em execução. Os controles e o estado do registro ficam no mesmo lugar.

Tela de registro. Uma grade com o histórico de prática fica acima de uma barra que mostra o total de 54 minutos de hoje e dos cartões de categorias. O cronômetro de “Prática de peças” ultrapassou 27 minutos, e seu cartão está destacado com uma cor mais clara e um contorno branco.
O tempo de “Prática de peças” está sendo registrado.
A categoria, o tempo de prática de hoje e o estado do cronômetro ficam visíveis no mesmo cartão.

Ver a distribuição da prática sem rolagem horizontal

O app resume automaticamente a prática desde a aula anterior, dispensando a edição dos registros antes de compartilhá-los. Na tabela diária, priorizei mostrar todas as categorias de uma só vez, mesmo que isso exigisse um texto menor. Assim, posso mostrar a tela ao professor e conversar sobre como distribuo meu tempo de prática.

Tela de compartilhamento. Um resumo desde a aula de 17 de setembro até 24 de setembro mostra 4 horas e 38 minutos de prática, barras por categoria e uma tabela diária com todas as categorias visíveis sem rolagem horizontal.
O período, o tempo total de prática, a distribuição por categoria e os detalhes diários em uma única tela.

Fazer da prática acumulada um motivo para continuar

Tornei possível ver tanto o progresso de hoje quanto a prática acumulada ao longo de meses e anos. Também espero que mostrar ao professor o esforço que dediquei ajude a me motivar a continuar praticando.

Visão diária: preencher a barra, usando uma hora como referência

A barra da prática de hoje vai inicialmente de zero a uma hora. Ela empilha o tempo de cada categoria com uma cor diferente. Minha expectativa era que preencher a barra me desse um motivo para continuar praticando.

Exemplo de 40 minutos de prática. As cores representam as categorias de prática. Os registros são fictícios.

Visão de longo prazo: células verdes mostram o progresso diário

Cada célula representa um dia, e os tons de verde indicam quanto tempo pratiquei. A grade facilita ver a prática se acumulando ao longo de meses e anos. Eu queria que o crescimento desse registro me incentivasse a continuar praticando.

Cada célula representa um dia; contornos vermelhos marcam conquistas. A coluna mais à direita está parcialmente preenchida, com os dias seguintes ainda sem registro. Exemplo fictício.

5. Processo de desenvolvimento

Definir os papéis do registro e do compartilhamento por meio de pesquisa

Usei o ChatGPT para pesquisar apps existentes e esclarecer o problema e a abordagem. Na pesquisa que fiz na época, encontrei apps de controle de tempo, mas nenhuma função de compartilhamento adequada à comunicação com meu professor. Desenvolvi o conceito ao longo dessa conversa, escrevi uma especificação e a entreguei ao Codex para implementar a primeira versão.

Refinar a primeira versão para manter os controles visíveis

Experimentei a primeira versão gerada por IA e solicitei mudanças na interface e na experiência de uso. Reuni nos cartões de categorias as informações de tempo e o controle de parada, antes exibidos separadamente, e dei mais destaque ao tempo de prática de hoje. Também explorei layouts que mantivessem todo o painel de controles visível na tela.

Versão inicial de 9 de setembro. Seis cartões pequenos e o total de hoje, 40 minutos, ficam em áreas separadas da tela de registro.

Versão inicial

Versão revisada de 21 de setembro. Cada cartão grande mostra uma categoria e seu tempo de prática de hoje. O cronômetro ativo de leitura de partitura marca 10 minutos e está destacado.

Versão revisada

As duas versões mostram os mesmos dados fictícios: seis categorias e 40 minutos de prática hoje.
A versão revisada reúne nos cartões de categorias as informações de tempo e o controle de parada.

Usei um fundo preto para uma tela que permanece aberta durante a prática, com cores nas categorias para dar uma sensação alegre.

Comparar a sensação da rolagem antes de escolher uma abordagem

Palavras e imagens não bastavam para alcançar a sensação que eu queria: um movimento suave que parasse firmemente no lugar. Criei uma ferramenta de ajuste com IA para testar pessoalmente diferentes métodos de rolagem e valores dos parâmetros. Em um iPhone, comparei os pontos em que a rolagem parava, buscando uma posição que mantivesse todo o painel de controles visível. Escolhi o encaixe de rolagem nativo do navegador e o usei no app.

Ferramenta de ajuste de rolagem. Controles para cinco métodos de encaixe e seus parâmetros ficam ao lado de uma prévia de celular usada para testar o comportamento da rolagem.
Mudei os métodos e os parâmetros de rolagem para comparar como ela parava em um iPhone.

Usar revisões independentes e decidir o que adotar

Repeti um ciclo de revisão usando duas sessões independentes de IA. Examinei os problemas e as melhorias sugeridos pelo Claude Code e pedi ao Codex que os verificasse e aplicasse as correções necessárias. Algumas sugestões se afastavam da interface e da experiência que eu queria, então decidi o que adotar com base na finalidade do app e na sensação de uso.

Repeti esse processo cerca de 15 vezes. Quando as revisões de IA deixaram de identificar defeitos importantes, considerei isso um dos motivos para encerrar aquela rodada de melhorias.

6. Experiência de uso e próximos passos

Abrir o app passou a fazer parte do início da prática

Instalei o app no meu iPhone e o usei na prática diária para verificar a facilidade de registrar o tempo com um toque enquanto segurava o instrumento. Abri-lo no início da prática se tornou um hábito positivo. Rever a ordem das atividades e a distribuição do tempo, tendo em mente a data da próxima aula, me ajuda a planejar a prática.

Meu professor pediu registros mais detalhados

Meu professor disse que era fácil ver o que eu havia praticado e que registrar os tipos de escala tornaria o app mais útil (comentário parafraseado). Essas observações vêm da minha própria prática e das aulas com meu professor.

Próximo passo: mais detalhes sem complicar o registro

Estou considerando subcategorias, como “Escalas pentatônicas” dentro de “Escalas”, enquanto exploro como manter o registro simples. Para a tela de compartilhamento, também considero uma hierarquia de categorias e subcategorias no lugar da tabela diária.