Existe um imposto pequeno e constante na maioria dos apps de despesas, e você nem percebe mais que está pagando.
Você está conferindo uma lista de quarenta despesas de uma viagem, uma por uma, com a fatura do cartão. Clica numa. O app leva você para outra tela. Você confere o valor, volta e cai no topo da lista de novo — quarenta linhas acima de onde estava, sem ideia de qual tinha acabado de conferir. Agora multiplique isso por quarenta.
A solução não é uma página mais rápida. É não sair do lugar, para começo de conversa.
O que uma tela de detalhes precisa fazer de verdade
Abra uma conta a partir de uma lista e quatro coisas precisam ser verdade ao mesmo tempo — e a maioria das implementações acerta duas:
Você não perde o lugar. A lista fica onde estava, rolada até onde estava, com a linha que você abriu marcada para você saber onde está.
Voltar faz o óbvio. Fecha o que você abriu, em vez de sair da tela.
O que você está vendo tem um endereço. Recarregue a página e continua lá. Mande o endereço para alguém e a pessoa vê o mesmo que você.
Dá para seguir um fio. Uma conta menciona uma pessoa, essa pessoa tem outras contas. Seguir essa corrente não deveria expulsar você da lista que estava lendo.
Uma janela modal entrega as duas primeiras, mal, e nunca a terceira. Uma página inteira entrega a terceira e abre mão da primeira. O que você quer são as duas coisas, e o jeito de ter as duas é parar de tratar “o que está aberto” como algo que o app guarda só para si.
Coloque na barra de endereço
No HiBill, o que estiver aberto no painel lateral vai escrito na URL da página — uma transação como ?peek=, uma pessoa como ?person=. Não tem nada de genial nisso. É só a constatação de que o painel aberto faz parte de onde você está, e onde você está deve ficar na barra de endereço.
Tudo de bom vem dessa única decisão, de graça:
Recarregar mantém tudo. Não é uma reconstrução nem um palpite. A mesma conta, na mesma lista, na mesma posição de rolagem.
O link é um link. Copie o endereço, mande para a pessoa com quem você dividiu a passagem de avião, e ela abre exatamente a conta que você estava vendo. As regras de acesso não mudam — quem não está na transação continua sem ver nada —, então, para mandar uma conta para alguém que não tem cadastro, continua existindo o compartilhamento público.
Voltar é voltar. Não é “sair da página”. O navegador já guarda uma pilha de tudo o que você abriu, então o botão Voltar desce por ela, uma conta de cada vez, e só sai da página quando a pilha acaba.
Esse último ponto é o motivo de o painel também ter o seu próprio botão Voltar, logo no começo do cabeçalho do painel. Ele não faz nada além do que o Voltar do navegador faz. Está ali porque, no notebook, sua mão está no trackpad e o painel está à direita, e pedir para alguém ir até a barra do navegador para desfazer uma coisa que fez no app é uma pequena grosseria.
Seguir uma corrente sem sair da lista
O quarto requisito é o interessante.
Abra um jantar no feed de Atividade. A divisão mostra quatro nomes. Clique em um e, em vez de fechar e levar você para outro lugar, o painel vira aquela pessoa: o saldo dela, as transações em comum. Clique numa delas e o painel vira aquela conta.
Dá para descer três ou quatro passos nessa corrente — uma conta, alguém nela, outra conta dessa pessoa — e a lista de onde você partiu nunca se mexeu. Aí é Voltar, Voltar, Voltar, e você está exatamente onde estava, com a resposta que foi buscar. Esse é o recurso inteiro. O resto é acabamento.
Mas o acabamento vale a pena. Com uma transação aberta, o cabeçalho do painel tem as setas Transação anterior e Próxima transação, que percorrem a lista de onde você abriu, na ordem em que ela aparece. As teclas ↑ e ↓ fazem o mesmo. Revisar um mês de despesas vira segurar uma tecla e ler, que é o que revisar deveria ser. E, no computador, a borda esquerda do painel é uma alça para arrastar, porque 520 pixels é a largura certa para um jantar de duas linhas e a errada para um recibo de trinta itens — e a largura que você escolher fica guardada para a próxima vez.
Por que não é um modal
Um modal teria dado menos trabalho. Não usamos, por dois motivos.
Um modal mata a lista. Escurecida, sem rolagem, sem clique. Só que a lista é o contexto — muitas vezes o que você quer é comparar a conta aberta com as três em volta, ou continuar rolando e abrir outra coisa. Aqui não tem camada escura. A lista embaixo continua viva, e clicar nela não fecha o painel na sua cara.
Um modal prende o teclado. Num modal, o Esc precisa significar uma coisa só, e geralmente significa “jogue tudo fora”. No painel, apertar Esc enquanto você escreve um comentário tira você do campo, e só fecha o painel na segunda vez. Esc numa caixa de filtro da página de trás não faz nada com o painel. São regras pequenas, mas são a diferença entre um teclado útil e um teclado perigoso.
O único lugar em que um modal faz sentido é o celular, onde não há espaço para duas coisas lado a lado. Então, no celular, o painel ocupa a tela — e o endereço continua guardando o que está aberto, ou seja, um link que você manda do celular abre a mesma coisa no notebook de outra pessoa.
Veja na prática
Já está no ar para todo mundo: na tela Início, no feed de Atividade, em Pessoas e dentro do histórico com uma pessoa. Clique em qualquer coisa.
Como funciona, passo a passo, está em abrindo transações e pessoas no painel lateral, e, se você é novo por aqui, como funciona o HiBill é o tour completo.
Continue lendo
Como funciona o HiBill: o caderninho do dinheiro entre amigos — o modelo inteiro numa leitura só: pessoas, saldos e os dois tipos de transação.
Como encontrar uma despesa compartilhada rápido, por grupo ou pessoa — como reduzir uma lista longa até a conta que você quer abrir.
Como corrigir uma despesa compartilhada depois de salvar — o que dá para mudar pelo painel e o que todo mundo vê quando você muda.