40 commits para tornar três telas idênticas: por que a uniformização invisível muda tudo

Três telas. Tarefas. Memos. Eventos. Todas as três exibem essencialmente a mesma coisa: um título, um conteúdo, pessoas que têm acesso a ele, uma pasta de anexo, lembretes, etiquetas. E, no entanto, no TAMSIV, essas três telas tinham cada uma seu próprio layout, sua própria ordem de seções, sua própria maneira de exibir as mesmas informações. 40 commits depois, elas finalmente se parecem. Eis por que essa uniformização invisível muda tudo.

Por que uniformizar três telas que já funcionavam

A pergunta é legítima. Se as três telas já funcionavam, por que gastar 40 commits para torná-las idênticas? A resposta se resume a uma palavra: carga cognitiva.

Quando tu usas o TAMSIV diariamente, tu passas de uma tarefa para um memorando e depois para um evento, às vezes em menos de um minuto. Se cada tela exibe as mesmas informações em uma ordem diferente, teu cérebro precisa se reorientar a cada transição. Tu procuras a etiqueta no topo da tarefa, tu a encontras na parte inferior do memorando, tu não a encontras mais no evento. Multiplica isso por 20 ou 30 consultas por dia, e o atrito invisível acaba pesando.

Pelo contrário, quando as três telas se parecem, teu cérebro aprende apenas uma vez onde cada coisa está. O título está no topo. A árvore de acesso está logo abaixo. A pasta pai segue. As etiquetas vêm em seguida. O conteúdo principal ocupa o centro. Os lembretes e o histórico descem para a parte inferior. Três telas, um único mapa mental.

A árvore de acesso: dois ramos, zero ambiguidade

A informação mais crítica em uma tela de detalhes é "quem vê o quê". Antes do refator, cada tela respondia a essa pergunta à sua maneira. A tela de tarefa listava uma pasta atribuída com um distintivo. A tela de memorando exibia uma lista plana de membros. A tela de evento mostrava uma seção "Participantes" separada do resto.

O novo componente TaskAccessTree substitui essas três lógicas por uma estrutura de dois ramos claramente rotulados:

• Ramo "proprietário": a pessoa que criou a tarefa ou o memorando. Exibição mínima, avatar mais nome, nada mais.
• Ramo "grupos compartilhados": cada grupo no qual o conteúdo é visível, com a lista de membros envolvidos na forma de avatares empilhados. Se a tarefa é compartilhada em três grupos, três sub-ramos são exibidos.

O interesse dessa estrutura de dois ramos é que ela responde a duas perguntas diferentes sem misturá-las. Quem é o proprietário: ramo 1. Quem vê o conteúdo além do proprietário: ramo 2. Nenhuma confusão possível. Um usuário pode, com um único olhar, entender quem tem acesso, sem ler uma única linha de texto.

Quando a hierarquia breadcrumb desaparece

Outro detalhe de refator, invisível quando tudo está bem, mas horrível quando aparece: o caminho de navegação das pastas pai. Se a tua tarefa está organizada em Família > Compras > Supermercado, a tela exibe esse caminho no topo como um breadcrumb. Perfeito.

Problema: algumas tarefas não estão organizadas em nenhuma pasta. Elas estão na raiz. O breadcrumb exibia então um espaço vazio, depois uma seta, depois nada, depois o título. Um artefato visual que dava a impressão de que a tela estava mal carregada.

A correção é trivial quando se pensa nisso: se a lista de pais está vazia, não renderizamos o componente. Duas linhas de código, um bug visual a menos, e a tela respira. É tipicamente o tipo de polimento que nenhum usuário notará conscientemente, mas que todos sentirão subconscientemente como "este aplicativo é bem cuidado".

As etiquetas prefixadas com hashtags

As tags eram exibidas sem prefixo ou cabeçalho. Uma lista plana de palavras colocadas sob o conteúdo. Visualmente, elas se misturavam ao texto principal e não eram imediatamente identificadas como etiquetas.

A nova renderização adiciona duas coisas simples:

1. Um cabeçalho "Tags" acima da lista, para que o olho saiba imediatamente do que se trata.
2. Um prefixo # na frente de cada etiqueta, convenção emprestada das redes sociais e que todos conhecem.

O resultado é imediato: uma tarefa que tem cinco etiquetas agora exibe uma linha clara como #urgente #compras #fimdesemana #familia #refeicao, impossível de confundir com texto normal.

A mesma ordem de seções nas três telas

Em cada tela, as seções agora seguem esta ordem:

1. Título e status (ou data para um evento)
2. Árvore de acesso (TaskAccessTree)
3. Pasta pai atribuída (com o mesmo mapa visual em todos os lugares)
4. Etiquetas (com cabeçalho e prefixo #)
5. Conteúdo principal (descrição, texto do memorando, detalhes do evento)
6. Lembretes e recorrência (se aplicável)
7. Anexos (se presentes)
8. Histórico e atividade (comentários, reações)

Passar de uma tarefa para um memorando e depois para um evento agora oferece total continuidade visual. Tu aprendes uma vez onde clicar, e não aprendes mais nada depois. Um ganho de alguns milissegundos por consulta, que se torna minutos por dia e horas por mês para um usuário regular.

As funcionalidades invisíveis fazem os aplicativos que mantemos

Ninguém vai lançar o TAMSIV amanhã dizendo "oh, que ótimo, a tela de detalhes da tarefa está alinhada com a do memorando". As funcionalidades invisíveis não são anunciadas. Elas não são vendidas. Elas são sentidas.

Este sprint de 3 dias e 40 commits não produz nenhuma captura de tela de marketing. Nenhum novo botão para mostrar. Nenhuma animação cinematográfica. E, no entanto, é exatamente o tipo de trabalho que faz a diferença entre um aplicativo que se instala e se esquece, e um aplicativo que se mantém e se recomenda.

Os 10 dias anteriores, foi um sistema de e-mails transacionais completo. Os 3 dias seguintes, foi a uniformização das três telas de detalhes. E amanhã, será outra coisa tão invisível. O aplicativo cresce, mas sempre em silêncio.

O que este refator permitirá posteriormente

O outro benefício dessa uniformização é que ela abre caminho para funcionalidades futuras muito mais rapidamente. Quando as três telas compartilham a mesma estrutura, adicionar uma nova seção (por exemplo, um box "traduzido automaticamente" para um memorando de voz em um idioma diferente) é feito uma única vez e se aplica em todos os lugares.

Antes do refator, adicionar uma seção transversal significava codificá-la três vezes, com três variantes de estilo e três locais para negociar. Depois, é um componente compartilhado que é injetado em todas as telas de detalhes. O custo marginal de adicionar uma nova funcionalidade é dividido por três.

Este é o verdadeiro beneficiário oculto desta semana: não o usuário de hoje que verá apenas um aplicativo mais consistente, mas o desenvolvedor solo que construirá as próximas 40 funcionalidades em um terço do tempo.

E enquanto isso, 22 redirecionamentos SEO antigos

Paralelamente à uniformização das telas, corrigi um problema de redirecionamento no site. As primeiras passagens de tradução do blog haviam deixado 22 slugs obsoletos em DE, ES, IT e PT, que retornavam 404 no Google. Cada slug obsoleto agora é redirecionado permanentemente (301) para sua versão atual.

O arquivo x-default do sitemap também foi corrigido, para que os motores de busca entendam qual é a versão canônica de cada artigo quando o idioma do usuário não pode ser determinado.

São 22 linhas em um arquivo de redirecionamento Next.js, 22 erros de indexação a menos, e potencialmente 22 caminhos de visitantes encontrados em vez de perdidos.

Perguntas frequentes

Uniformizar as telas de detalhes torna o aplicativo mais rápido?

Tecnicamente, marginalmente. Os componentes compartilhados são renderizados em cache de forma mais eficiente, e o pacote Javascript diminui cerca de 3% graças à deduplicação de código. Mas o verdadeiro ganho é cognitivo, não técnico: o usuário se sente mais rápido porque navega com menos atrito mental.

Por que não foi feita essa uniformização antes?

Porque enquanto as três telas evoluíam separadamente e ainda não se sabia quais seções surgiriam como transversais, tentar uniformizar teria sido prematuro. Era preciso primeiro que cada tela descobrisse suas próprias necessidades, e depois extrair os padrões comuns uma vez que estivessem estáveis.

Qual o impacto para alguém que usa o TAMSIV pela primeira vez?

Um novato aprende a tela de tarefa primeiro. Antes do refator, ele precisava reaprender a tela de memorando e a tela de evento. Depois, ele reconhece instantaneamente os elementos, e sua curva de aprendizado passa de três níveis para um único. O onboarding é dividido por três em tempo percebido.

Um usuário vai notar a diferença?

Provavelmente não conscientemente. O refator é projetado para ser invisível. Mas se perguntarmos a um usuário que usava o aplicativo antes e depois para nomear o que mudou, ele dirá frequentemente "o aplicativo me parece mais consistente" ou "encontro minhas informações mais facilmente", sem saber explicar exatamente por quê.

O refator quebrou algo na versão mobile?

Uma auditoria completa foi feita após a implantação. Nenhuma regressão funcional detectada. As animações de transição entre telas foram até ligeiramente fluidificadas porque os componentes compartilhados permitem uma renderização mais previsível pelo React Native.

Disponível na Play Store, 6 meses e mais de 780 commits

TAMSIV está disponível em produção no Google Play desde 2 de abril. Gratuito, 6 idiomas, desenvolvimento solo. O aplicativo continua a evoluir todos os dias, majoritariamente em silêncio. São os 80% invisíveis que fazem com que ele permaneça instalado.