CASE UX WRITING
Redefinindo a senha em um banco digital
Precisei redefinir minha senha em um banco digital recentemente e me deparei com alguns pontos que estão em desacordo com as boas práticas de UX Writing.
A redefinição de senha em instituições bancárias, assim como vários outros procedimentos, pode ser um processo que causa certa frustração nas pessoas usuárias devido a toda burocracia envolvida. No caso da senha, por se tratar de um dado extremamente sensível, a burocracia é justificada pois é essa complexidade que vai garantir a segurança tanto da instituição como da pessoa usuária.
Com a chegada dos bancos digitais, além de outras facilidades, os procedimentos tendem a ser mais “fáceis”. Por exemplo, sabemos que a redefinição de senha exige cuidados em relação à confirmação da titularidade antes de permitir a troca de fato. Nos bancos tradicionais, esse processo (geralmente) é feito presencialmente, nos caixas eletrônicos. Já nos bancos digitais, por não haver uma estrutura física, a redefinição é feita on-line após a confirmação de dados como e-mail, CPF, entre outros.
Case
Recentemente esqueci minha senha de um banco digital e precisei passar pelo processo de redefinição de senha, que é feito através do site. A ideia de estudar esse case surgiu em uma das etapas da redefinição, quando o site me mostrou uma mensagem de erro que julguei não estar correta de acordo com as boas práticas da usabilidade. Decidi criar esse case como forma de colocar em prática tudo que venho aprendendo e, também, para incluir em meu portfólio.
A experiência
Para conseguir concluir o processo de redefinição de senha, precisei passar por sete passos, que mostrarei com detalhes abaixo.
Ao citar essa instituição uso “Produto X”.
Vamos aos passos.
Passo 1: Tela de login para acesso à área do cliente no site do Produto X.
Passo 2: Após clicar no botão “Esqueci minha senha” na tela anterior fui direcionada para esta tela.
Passo 3: Após inserir meu e-mail na tela anterior, fui direcionada para esta tela.
Print 4: Assunto do e-mail recebido tendo como remetente o Produto X.
Print 5: Conteúdo do e-mail recebido.
Print 6: Após inserir o código na mesma tela do print 3, recebi uma mensagem de erro.
Como podemos ver no último print a mensagem de erro dizia:
“O número de ticket fornecido não é válido”
Por ter certa experiência com produtos digitais, ter trabalhado muitos anos com sistemas/suporte e ter o olho — muito — treinado para detalhes, entendi que algum dado preenchido estava inválido: Código, Nova senha ou Repetição da nova senha. Inclusive esse olhar analítico é uma das minhas soft skills, com muito orgulho.
Bom, levando em consideração a mensagem de erro e após conferir o código recebido por e-mail pude perceber que havia um erro no preenchimento. Ao copiar e colar ficou faltando um dígito. Corrigi o código e pronto, concluí a redefinição da senha com sucesso!
Todas as pessoas usuárias desse banco que precisarem redefinir a senha passarão por esse mesmo processo e, caso também errem na digitação do código, terão a mesma experiência que eu tive.
O questionamento que me fiz na hora e trago pra cá é: será que todas essas pessoas terão o mesmo olhar analítico que tive e entenderão o que precisa ser feito para concluir o procedimento? Por ter lidado com diversos perfis me arrisco a dizer que: não, nem todos saberão do que se trata o tal “número do ticket”.
Sendo assim, decidi propor algumas alterações referentes à escrita para a experiência do usuário, o famigerado UX Writing.
Antes de falar sobre minha proposta…
Heurísticas de Nielsen
As primeiras informações que reuni para a criação desse case foram as heurísticas de Nielsen.
Conforme definição do Nielsen Norman Group:
Jakob Nielsen’s 10 general principles for interaction design. They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines.
Trazendo para o português:
As 10 heurísticas de Jakob Nielsen são princípios gerais para o design de interação. Elas são chamadas de “heurísticas” porque são regras básicas e não diretrizes específicas de usabilidade.
É possível enxergar a aplicação das heurísticas em muitas situações do nosso dia a dia. Várias experiências poderiam ter sido mais positivas caso houvesse a aplicação dessas regras durante o processo de criação e iteração do produto, digital ou não.
As 10 heurísticas de Nielsen são:
Para criar a proposta de alteração e levando em consideração essas 10 heurísticas, julguei que as falhas encontradas estão relacionadas principalmente às quatro heurísticas abaixo:
Benchmarking
Além das heurísticas, fiz uma pesquisa em outros dois produtos digitais da área financeira e simulei todo o processo de redefinição de senha. Isso foi feito como uma espécie de benchmarking, para coletar informações sobre como funcionava o processo e comparar ao que eu havia encontrado na experiência com o Banco X.
Obs: Não quis simular erro nos outros dois produtos pois nenhum deles segue a mesma forma de autenticação para redefinição de senha do Banco X, que pede para preencher um código. A comparação não seria de igual para igual.
Nomeei o primeiro produto como Produto Y e o segundo como Produto Z.
Produto Y
Passo 1 — Tela de login do site do Produto Y, onde cliquei no link “Esqueci minha senha”.
Passo 2 — Após clicar no link fui direcionada para esta tela, onde preenchi meu CPF e cliquei no botão “ENVIAR”.
Passo 3 — Tela informando sobre o envio de um link para o e-mail cadastrado.
Passo 4 — Assunto do e-mail recebido tendo como remetente o Produto Y.
Passo 5 — Conteúdo do e-mail recebido, onde cliquei no botão “ALTERAR SENHA”
Passo 6 — Ao clicar no botão no e-mail, fui direcionada à esta tela onde preenchi a nova senha, repeti a senha e cliquei no botão “REDEFINIR SENHA”.
Alguns pontos observados em relação ao Produto Y:
- Todos os botões seguem o mesmo padrão: Ghost Button com formato retangular, sem bordas arredondadas e fonte maiúscula.
- Durante toda a experiência de alteração de senha informam sobre a existência de um link que será enviado por e-mail. Essa informação também é padronizada.
- Existe uma quebra de padrão no passo 6. Até ao passo 5 tratam o processo como “Alteração de senha” e o último botão tem como texto “REDEFINIR SENHA”.
Produto Z
Passo 1 - Tela de login do site do Produto Z, onde cliquei no link “Esqueceu a senha?”.
Passo 2 - Após clicar no link fui direcionada para esta tela, onde preenchi meu e-mail e cliquei no botão “Continuar”.
Passo 3 - Tela informando sobre o envio de um link para o e-mail cadastrado.
Passo 4 - Assunto do e-mail recebido tendo como remetente o Produto Z.
Passo 5 - Conteúdo do e-mail recebido, onde cliquei no botão “Criar minha nova senha”.
Passo 6 - Ao clicar no botão no e-mail, fui direcionada à esta tela onde preenchi o e-mail, a senha, repeti a senha e cliquei no botão “Criar senha”.
Alguns pontos observados em relação ao Produto Z:
- Existe uma quebra de padrão no botão do passo 6. Até o passo 5 os botões tem bordas bem arredondadas (aproximadamente 26px de border radius), fonte negrito e background color #FF3859. O botão do passo 6 tem as seguintes características: bordas menos arredondadas (aproximadamente 8px de border radius), fonte regular background color #FF4D4D.
- Durante toda a experiência informam que será enviado um e-mail com as instruções para definir uma nova senha.
- Em relação ao processo que está sendo feito, existem algumas variações de palavras entre um passo e outro:
“redefinição da senha” / “definir uma nova senha” / “criar nova senha” / “criar nova senha” / botão com “Criar senha”
Minhas propostas de alteração
Mediante estudo e conhecimento adquirido em diversos cursos de UX Writing que tenho feito, criei uma proposta com várias alterações na experiência do Produto X e explico abaixo, com os prints.
Passo 1: Nenhuma alteração.
Passo 2:
a) Alteração no título, também presente nos Passos 3 e 6.
Original: “Redefinição de senha”
Proposta: “Redefinição de Senha”
Argumento: No passo um, as palavras do título tem a inicial maiúscula, nas demais telas não existe esse padrão.
b) Alteração no texto auxiliar.
Original: “Digite o seu e-mail no campo abaixo e lhe enviaremos uma nova senha.”
Proposta: “Digite o seu e-mail no campo abaixo e lhe enviaremos um código de ativação para redefinição de senha.”
Argumento: Aqui é dito que a pessoa usuária vai receber por e-mail uma nova senha quando, na verdade, será enviado por e-mail um código de ativação para redefinição senha.
Passo 3:
a) Mesma alteração citada no passo 2.
b) Alteração no texto, também presente no Passo 6.
Original: “Um e-mail foi enviado para {e-mail} para finalizar o cadastro.”
Proposta: “Um e-mail foi enviado para {e-mail} para finalizar a redefinição de senha.”
Argumento: O e-mail enviado não tem como objetivo finalizar o cadastro da pessoa e sim ajudar na redefinição de senha.
c) Alteração no texto, também presente no Passo 6.
Original: “Por favor, insira no campo abaixo o código de ativação que você recebeu por e-mail e redefina uma nova senha.”
Proposta: “Por favor, insira no campo abaixo o código de ativação que você recebeu por e-mail e redefina sua senha.”
Argumento: Ao meu ver não faz sentido dizer “redefina uma nova senha”, portanto proponho alteração.
d) Inclusão de palavra no primeiro placeholder.
Original: “Código”
Proposta: “Código de ativação”
Argumento: Para evitar um esforço cognitivo muito grande por parte da pessoa usuária, o ideal é usar os mesmos termos para definir as mesmas coisas. Nos passos anteriores é usado o termo “código de ativação”, portanto, sugiro manter esse termo em toda a experiência.
Passo 4:
a) Alteração no título (a) e texto auxiliar (b) do e-mail.
Original: “Use o código de segurança para redefinir sua senha. Em alguns segundos sua senha será alterada…”
Proposta: “Use o código de ativação para redefinir sua senha. Em poucos minutos sua senha será alterada…”
Argumento: Manter em toda a experiência o termo “código de ativação”, como dito anteriormente e substituir o tempo sugerido para finalização do processo.
Passo 5:
a) Alteração na primeira frase do e-mail.
Original: “Para redefinir sua senha, copie o código de segurança abaixo.”
Proposta: “Para redefinir sua senha, copie o código de ativação abaixo.”
Argumento: Manter em toda a experiência o mesmo termo “código de ativação”. Substituir o tempo sugerido para finalização do processo.
b) Alteração da segunda frase.
Original: “Agora basta acessar, colar o código e escolher uma nova senha.”
Proposta: “Agora acesse a página de redefinição e insira esse código de ativação.”
Argumento: As duas perguntas que podem ser feitas pelas pessoas usuárias: “Basta acessar o quê?” e “Colar que código?”. A proposta é também diminuir o esforço cognitivo e deixar o mais claro possível.
Passo 6:
a e b) Mesma alteração citada no passo 3.
c) Inclusão de palavra no texto auxiliar da primeira caixa de texto.
Original: “Código”
Proposta: “Código de ativação”.
Argumento: Manter em toda a experiência o mesmo termo “código de ativação”.
d) Alteração na mensagem de erro.
Original: “O número de ticket fornecido não é válido”
Proposta: “O código de ativação não é válido, confira o e-mail recebido e tente novamente.”
Argumento: Esse foi o principal motivo para eu querer estudar esse caso e encontrar pontos de melhoria. Na mensagem de erro é citado um “número do ticket” que em nenhum momento foi citado para referenciar o código de ativação.
Esse é um grande problema e pode causar frustração nas pessoas por não saberem do que se trata e nem como resolver. Provavelmente entrarão em contato com o banco para entender o motivo do erro e esse contato seria extremamente dispensável no caso de uma mensagem de erro mais clara e intuitiva.
E você, o que achou da proposta que apresentei? Na sua opinião, a experiência da pessoa usuária seria melhor ou não mudaria em relação ao original?
Sugiro que, se você ainda não presta atenção nestes detalhes, passe a prestar atenção e crie o hábito de sugerir melhorias, escrevendo artigos por aqui ou no Linkedin.
Esse hábito ajuda tanto na sua escrita como colocar em prática conceitos de UX Writing, além de permitir que outras pessoas entendam como você trabalha.
Me chama no LinkedIn e diz o que achou desse case (ou sobre qualquer outra coisa), ficarei bem feliz :)
Referências:
- Nielsen Norman Group
- Mensagem de erro: o terror de UX Writing - Talita González
- Em busca de boas práticas de UX Writing - Bruno Rodrigues
- Redação Estratégica para UX: Aumente engajamento, conversão e retenção com cada palavra - Torrey Podmajersky
- Curso UX Writing com Cris Luckner, Mergo
- Curso UX Writing com Bruno Rodrigues, Product Arena
