Pix - Internet Banking
Como transformei um APP em um website visando diminuir a curva de aprendizado.
O desafio
Em outubro de 2021 me deparei com o desafio de dar continuidade ao trabalho de um outro designer, além de transformar o app em uma página web.
Como transformar um app em um website sem aumentar a curva de aprendizagem do usuário?
O cenário atual
O conceito de Mobile First, como o nome já diz, se refere a criar projetos focados primeiramente em dispositivos móveis e depois em desktop e outras plataformas.
A maioria das empresas desenvolvem seus projetos pensando no desktop como tela principal. A partir disso, é adaptado para atender a demanda dos dispositivos móveis. Com o mobile first, acontece justamente o contrário.
Uma pesquisa feita pelo Comitê Gestor da Internet no Brasil (CGI.br) mostra que quase metade dos brasileiros que acessam a internet preferem os smartphones. De 120,7 milhões de pessoas que acessaram a internet em 2018, 49% delas utilizaram apenas o celular. 47% dos usuários fizeram conexão por computador e celular e 4% apenas pelo computador.
Esse artigo de William Leal diz:
“A curva de aprendizado representa a dificuldade inicial em aprender algo novo ou executar uma tarefa de forma diferente. Quanto mais tempo investido para aprender determinada tarefa, maior é a carga cognitiva gerada.
Quando você cria uma nova interface, diferente do padrão antigo, ou que não é familiar, vai levar muito mais tempo e boa vontade para o usuário aprender a nova interface do que continuar usando a antiga.
Como designers, precisamos facilitar a vida do usuário, diminuindo a carga cognitiva que resulta do fato dele ter que aprender algo novo. Quanto menos energia um hábito requerer, maior a probabilidade de ocorrer “.
Com isso, percebi que quanto mais o app fosse parecido com o site, menos energia o usuário teria que gastar para se adaptar à nova plataforma.
Com isso, o objetivo se tornou:
Criar uma solução que ajude o usuário mobile à usar a versão desktop, sentindo familiaridade e diminuindo o atrito com a interface.
Com isso, escolhi as funcionalidades do PIX para expor minha solução.
Página Principal do Pix
Transformei a página principal do Pix em um menu hover.
O menu hover pode ser acessado por um menu lateral, porém os ícones e as nomenclaturas foram mantidos iguais. Dessa forma, o número de páginas foi economizado, e as mesmas informações ainda são encontradas.
Gerenciador de chaves
O gerenciador de chaves no dispositivo móvel consistia em uma tela com bastante informações e um modal que complementava as ações com as chaves. Redistribui todos os elementos em uma única tela, e aproveitei todo o espaço que o desktop oferece para manter o respiro da página.
Agendamento Pix
O agendamento do Pix no celular possui uma página de revisão que guia o usuário para uma nova página com um calendário. Na versão desktop o calendário aparece como um modal, dessa forma, o usuário pode escolhes uma data na mesma tela e manter contato com todas as informações da revisão.
Informativos Pix
Nos informativos do Pix, na versão mobile, aparecia um modal que cobria a tela com as informações que ele buscava, o usuário precisaria fechar as informações para acessar alguma das opções. Na versão web as informações aparecem na mesma tela, e o usuário continuar tendo contato com as opções que ele precisa escolher para prosseguir. O exemplo abaixo é sobre as diferenças entre QR Code Dinâmico e Estático.
Conclusões
Os aprendizados quanto ao conceito de mobile first nos leva a uma realidade onde grande parte da população utiliza o celular para tarefas digitais do dia a dia e, por isso, o celular deveria ser pensado primeiro ao projetar um site.
Como meu primeiro projeto desktop, entender esse conceito facilitou muito na criação da versão web, além de uma base mais sólida para um início de projeto mais seguro.