Jéssica Bortolan
O formulário de dados do simulador da Aires tinha atrito em dois pontos: no cadastro inicial, os campos apareciam em formato de lista compacta, difícil de preencher num público pouco familiarizado com tecnologia e na etapa de contratação, a navegação entre preencher, revisar e editar campos era imprevisível, voltar ou fechar uma etapa podia reiniciar o fluxo inteiro ou fechar o formulário sem aviso, sem chance de o usuário reconsiderar. Avaliei o fluxo mobile inteiro sob a lente das dez heurísticas de usabilidade de Nielsen e redesenhei cada ponto de atrito.
Contexto
Ponto a ponto: problema, heurística e decisão
Visibilidade do status do sistema.
Em nenhum momento do preenchimento da contratação o usuário sabia quanto ainda faltava, nem em qual seção estava, nem quantos campos restavam ali. A heurística é direta: o sistema deve manter o usuário informado sobre o que está acontecendo, com feedback adequado e em tempo razoável.
A solução foi uma barra de progresso segmentada no topo, indicando em qual das sete seções do fluxo o usuário está, combinada com um contador dentro de cada seção mostrando quantos campos faltam ali, progresso macro e micro, sempre visível.
Reconhecimento em vez de memória.
No formulário inicial, o pouco espaço de tela levou a organizar os campos em seções, e uma delas acabou em formato de lista compacta, com inputs pequenos e amontoados, de leitura difícil para quem não preenche formulários digitais no automático. A heurística diz que o usuário nunca deveria precisar reter informação de uma tela pra usar na próxima, tudo relevante deve estar visível. A decisão foi reduzir a densidade em vez de tentar caber mais informação na tela: cada etapa passou a mostrar um campo, ou um par diretamente relacionado, como número da agência e dígito, por vez, sempre com espaço de sobra ao redor.
Controle e liberdade do usuário.
Na etapa de contratação, editar um campo a partir da revisão jogava o usuário de volta ao preenchimento, se ele salvasse, voltava pra revisão, mas se clicasse em "voltar" em vez de salvar, o sistema reiniciava o fluxo inteiro, obrigando a repetir etapas já feitas. A heurística exige uma saída clara de uma ação indesejada, sem processos mais longos do que o necessário. A solução foi criar um modo de edição separado do fluxo original: ao clicar em "editar", o usuário entra numa tela própria, com suas próprias ações de cancelar e salvar, e ao sair volta direto pra revisão, nunca para o início.
Prevenção de erros.
Clicar no "x" no canto da tela, o gesto mais natural pra quem só quer fechar uma etapa, fechava o formulário por completo e devolvia o usuário direto pro simulador, com tudo perdido, sem nenhuma chance de reconsiderar. A heurística prioriza evitar que o erro aconteça, em vez de só lidar com ele depois. A decisão foi um modal de confirmação que aparece sempre que o usuário tenta fechar o formulário, com duas ações claras: continuar preenchendo, ou sair mesmo assim.
Consistência e padrões.
O footer com as ações principais não era fixo, em telas mais longas, ele desaparecia com o scroll, quebrando o padrão de onde o usuário esperava encontrar os botões de ação. A solução foi tornar o footer fixo e consistente em todas as etapas do fluxo, sempre na mesma posição, com as mesmas ações.
Estética e design minimalista.
Dois headers ocupavam espaço logo no topo da tela, espaço que, no mobile, já era escasso. A heurística defende que a interface não deve competir com informação irrelevante pela atenção do usuário. A decisão foi simples: os dois headers viraram um só, liberando espaço vertical logo de início.
Resultado
Próximos passos
Jéssica Bortolan