A importância de conhecer sobre UX como desenvolvedor e meu desespero na farmácia

Introdução

Quando atuei na Involves, tive a oportunidade de trabalhar com o Fábio Eric Martins e pude conhecer sobre UX mais de perto, opinar (até demais às vezes), trabalhar pela primeira vez na construção de um design system do zero, experimentações e o conhecimento mais importante como desenvolvedor: Heurísticas de usabilidade. A experiência que tive na Involves, com o time de design trabalhando ao lado e não sendo um processo à parte, foi fundamental. Parei de ver o design como algo estético e comecei a vê-lo como algo funcional. Eu não estava desenvolvendo apenas uma interface bonita, estava fazendo um produto que passava segurança ao usuário, que entregava performance, que era, na medida do possível, intuitivo e que qualquer um podia utilizar sem um manual.
Pois bem, num belo fim de semana fui ao shopping e precisei pagar a minha conta na farmácia e o app do banco simplesmente não exibia nem o campo de senha e nem o botão para logar. Passado o desespero e medo de não conseguir pagar a conta, parei para entender o que estava acontecendo: Minha conexão estava ruim, o app estava demorando a se comunicar com o backend mas não tinha informação nenhuma sobre isso, fez um loading, entrou na tela de login e só exibia o campo de CPF. Então me lembrei das heurísticas de Nielsen e como essa situação poderia ter sido projetada.

Heurísticas de Nielsen

Jakob Nielsen e Rolf Molich propuseram 10 heurísticas que devem ser levadas em consideração no desenvolvimento de interfaces. Seria como regras gerais para reduzir a carga cognitiva do usuário para que a jornada dele seja mais leve e aprimorada. As 10 heurísticas de Nielsen são:

1. Visibilidade do status do sistema;
2. Correspondência entre o sistema e o mundo real;
3. Liberdade e controle do usuário;
4. Consistência e padrões;
5. Prevenção de erros;
6. Reconhecer ao invés de lembrar;
7. Flexibilidade e eficiência;
8. Estética e design minimalista;
9. Auxiliar usuários a reconhecer, diagnosticar e recuperar erros;
10. Ajuda e documentação.

O problema

O app bloqueia print, o mais próximo que consegui simular:

Com base nas heurísticas de Nielsen, temos aqui alguns problemas:

Visibilidade de estado do sistema
O sistema deve manter o usuário informado sobre o que está acontecendo, com feedback dentro de um tempo razoável. Por exemplo: Meu microfone, quando toco nele para mutar/desmutar ele fica aceso ou apagado, informando o estado. No caso do aplicativo, na abertura da tela o app apresenta um carregamento que deveria ser mantido até que realmente fosse concluído. Outro ponto foi o preenchimento do CPF, não houve qualquer feedback informando se eu tinha inserido um valor válido ou não, a impressão que tive foi que o CPF estava inválido e não liberou o campo de senha por isso.

Reconhecimento ao invés de memorização
Ao esconder elementos em determinados contextos, o usuário é forçado a lembrar de mais informações, teria que lembrar onde o campo ou botão foi parar, como fazer para exibi-lo novamente. Essa abordagem gera mais dificuldade do que benefício para segurança. É importante para o usuário saber que a opção existe e por que não está disponível naquele momento, por exemplo: Os campos de senha e login poderiam estar visíveis com o botão de login numa cor diferente indicando que está desabilitado e um texto próximo informando do problema de conexão.

Prevenção de erros
Todo esse cenário poderia ser evitado pensando na heurística de prevenção de erros. Melhor do que informar que o usuário cometeu um erro é impedir que ele cometa o erro.
Nesse caso, já que o carregamento não tinha sido concluído, a tela de loading não deveria desaparecer, liberando a alteração do CPF. Fazendo isso, o sistema permite que o usuário cometa um deslize, por exemplo, acabe digitando o CPF errado, desmarque o campo que mantém o CPF salvo e não tenha o CPF no momento. Prevenir erros é crítico para uma boa experiência e usabilidade.

E eu, como desenvolvedor, o que tenho a ver com isso?

Primeiramente, é importante que desenvolvedores e designers falem a mesma linguagem e tenham um entendimento comum do problema e da solução proposta. Conhecer as heurísticas, do ponto de vista de um desenvolvedor, ajuda a tomar decisões durante o desenvolvimento (conhecer os estados de tela também me ajudou muito). Entender que o design não é apenas estética garante que o time de desenvolvimento entregue um produto melhor, pensado no usuário.

Agradecimentos <3

Obrigado Ericão pelo trabalho em conjunto durante o tempo na Involves e por revisar esse texto.
Obrigado a minha digníssima Deborah por fazer o Pix me salvando na farmácia e por revisar o texto.