Reformulação da segurança do usuário

Ana Ragazzi
Acesso | Produtos e UX
7 min readJul 24, 2018

--

Aqui na Acesso, temos a chance de inovar o modo como as pessoas têm acesso às lojas presenciais e online. Hoje vendemos nossos cartões pré pagos em postos físicos e em nosso e-commerce. Recentemente tivemos a oportunidade de fazer uma melhoria de usabilidade no fluxo de vendas online. Inclusive, fizemos um artigo contando como foi essa experiência. Você pode ver detalhes de como foi clicando aqui.

Além das várias melhorias de interface e usabilidade, percebemos como pequenos ajustes poderiam melhorar a segurança dos usuários, como, por exemplo, um novo conjunto de regras de senha. E é sobre esse processo que eu vou falar nesse artigo.

Como funcionava o processo antigo?

No fluxo antigo, sugeríamos a criação de uma senha que possuísse de 6 à 10 dígitos, que combinasse letras maiúsculas e minúsculas e números não sequenciais. Entretanto, não sabíamos ao certo quais itens eram verificados na hora de validar a senha. E os únicos feedbacks que o usuário recebia ao digitar a senha eram “Formato se senha errada!” e “Formato de senha ok!”.

Versão desktop do input de criação de senha.

O que nós mudamos?

No novo fluxo, optamos por trazer um feedback mais claro para o usuário. Conforme ele preenchia o campo de senha, os itens trocavam de cor, do cinza para o verde e um ícone de check (√) aparecia no lado direito. Uma barra de força de senha também foi inserida, assim o usuário conseguia ver se a senha estava forte o suficiente. O botão de “criar conta” só era ativado depois que todas essas etapas eram preenchidas corretamente para que não houvesse um excesso de cliques.

Segunda versão do input de criação de senha.

O que percebemos em seguida?

Liberamos o novo fluxo para 50% dos acessos para testar o impacto que esses e outros ajustes iriam causar. Tivemos um retorno muito bom pois a conversão foi bem melhor que a anterior. E constatamos que a mudança no geral foi positiva na questão visual e de usabilidade.

Apesar dos aspectos positivos, encontramos um problema na etapa de criação de senha da conta. Os usuários estavam com certa dificuldade de entender as regras e passar para o próximo passo. Cerca de 10% do fluxo era contido, agora, um número relativamente mais alto, em torno de 35% estava desistindo da compra e fechando o site.

Como no geral a nova versão estava muito melhor que a anterior, optamos por fazer uma segunda opção, como um teste A/B, para essa etapa da senha. Dessa forma, poderíamos fazer um comparativo e observar o quanto nós evoluímos em relação à primeira versão.

O problema

Desde o lançamento do novo fluxo, acompanhamos dentro do Hotjar e do Google Analytics quais eram os possíveis pontos de dor do usuário. Desse modo foi fácil identificar quais eram de fato as dificuldades na etapa de criação de senha.

Observamos que os usuários estavam tendo dificuldade principalmente na versão mobile, que corresponde a cerca de 25% dos nossos acessos. Mas antes de fazer a nova proposta, identificamos os três pontos principais:

  • Usuários não conseguiam identificar o que havia e o que não havia sido cumprido;
  • A barra de força de senha não estava sendo utilizada ou compreendida pelos usuários;
  • A área da senha estava ocupando muito espaço na versão mobile. Dependendo do tamanho da tela do celular, o teclado omitia algumas informações, principalmente a barra de força.

Mas então qual seria o melhor meio de inserir essas novas regras de senha no nosso fluxo de vendas, e fazer com que o usuário compreendesse elas?

Primeiro precisávamos entender melhor as dificuldades e desafios do ponto de vista do usuário em relação à criação de senhas. Foi aí que nos deparamos com um estudo muito bacana feito pela CSID, empresa parceira da Experian em pesquisa de mercado. Nesse estudo, observamos que a maioria das pessoas não se preocupa com segurança de senha. Além disso, 61% das pessoas utilizam a mesma senha para diferentes sites e 89% se sentem seguros com suas senhas.

Após a leitura desse estudo e outras pesquisas que realizamos, percebemos que a nossa proposta de inserir mais regras de senha iria causar uma mudança de comportamento e afetar a adesão de novos clientes. Ou seja, um aumento natural de desistência nessa etapa. A preocupação que nós temos em relação à segurança não é compartilhada pela maioria dos usuários. Por isso, entendemos que, para o usuário, a hora de criar a senha é uma etapa que precisa ser rápida e fácil de completar.

Entretanto, ainda era um fator importante melhorar a segurança dos usuários em virtude de possíveis problemas de fraude. Tendo isso em vista, uma nova hierarquização de informações poderia ser o caminho certo para resolver o problema.

Como otimizar a autenticação de senhas

Encontramos diversos benchmarks e sites com boas práticas de UX em áreas de etapa de senha. Dentre os visitados, selecionamos quatro ideias de usabilidade que se encaixam muito bem no nosso contexto.

Deixar as regras de senha bem visíveis no momento em que o usuário digita a senha:

Campo de regras do Hotjar

Dar um feedback claro para o usuário caso ocorra algum erro:

Feedback de senha do Hootsuite

Trazer um botão com a opção de mostrar o conteúdo que está sendo digitado:

Visualização de senha do Mail Chip

Mostrar um indicador de força de senha:

Campo de criação de senha do Airbnb

As duas primeiras dicas apresentadas já estavam contempladas na segunda versão, mas poderiam ser otimizadas e apresentadas de uma nova forma. As regras poderiam encaixar melhor na versão mobile. O feedback poderia ser mais claro, dando maior compreensão até mesmo para os usuários com baixa visão.

O botão de visualizar de senha também já estava nessa etapa e os usuários pareciam não ter problema em usá-la, então optamos por não alterar essa funcionalidade.

O indicador de força de senha, como dito anteriormente, estava apresentando problemas na principalmente na versão mobile e, consequentemente, não estava sendo bem aproveitado pelo usuário. Com isso, optamos por eliminar essa funcionalidade por enquanto e trazer a regra de quantidade de caracteres em forma de texto corrido com o intuito de facilitar o momento de criação da senha junto com as demais regras.

Alterações feitas

Na terceira versão, mantivemos o feedback de mudança de cor conforme a senha é digitada e adicionamos outra sinalização, além da utilização de cores para pessoas com deficiência visual. Desta forma, o feedback fica mais claro para todos.

Outra mudança foi a forma como as regras eram apresentadas. Deixamos as regras em forma de texto corrido. O conteúdo ficou mais resumido, ocupando um espaço menor, tanto no mobile quanto no desktop. Também aproximamos o texto do campo de senha.

Nova versão de visualização de senha da Acesso

Resultado final

Novamente lançamos essa terceira versão para uma parcela dos clientes e tivemos um resultado muito melhor que o anterior. Nossa conversão melhorou em mais de 5%. Entendemos, como dito no começo, que é normal ter uma queda em função da mudança, levando em consideração o perfil do nosso cliente. Portanto, esse resultado é muito positivo para nós. Mas atualizações e melhorias nunca vão deixar de acontecer.

Nossa visão

Aqui na Acesso, tentamos ao máximo promover a melhor experiência possível para nossos clientes. Sabemos que o caminho nem sempre é fácil, mas é incrivelmente satisfatório observar como os nossos clientes usam e vêem a nossa empresa depois de uma mudança como essa.

Recentemente tivemos o prazer em ver isso de perto com o lançamento do nosso novo aplicativo. Inclusive publicamos um artigo aqui contando como foram as etapas de criação dele. Se você for curioso o suficiente, baixe nosso App que já está disponível nas lojas Google Play e Apple Store e nos mande um feedback contando o que achou!

Ainda tem muito mais coisa por vir, em breve vamos compartilhar mais novidades voltadas à segurança do usuário e acessibilidade. E como isso vai impactar todas as nossas plataformas digitais.

Colaboradores: Ana Ragazzi (UX/UI Designer), Denis Andrade (Desenvolvedor de Software), Eric Nogare (Analista de E-commerce), Fabricio Nascimento (Desenvolver.Net), Filipe Silva (Software Engineer), Flavia Deutsch (Director of Product), Gabriela Teixeira de Azevedo (Product Management), Gustavo Yuzo (Designer de Interface), Heber Alvares (Product Designer) e Victor Maciel (Especialista de produtos).

Obrigada pela leitura e continue acompanhando nossas histórias aqui :)

--

--

Ana Ragazzi
Acesso | Produtos e UX

I’m a Brazilian Product Designer passionate about UX & UI. Currently living in Malmö, Sweden.