Analisando a Acessibilidade Visual do Aplicativo Nubank
O que descobri ao estudar as atualizações do app dos últimos 6 meses
O Nubank acabou de alcançar neste mês de julho 80 milhões de clientes no Brasil, se tornando o 4º maior banco do país. Acompanhando esse crescimento de clientes, a fintech também vem focando cada vez mais em acessibilidade. Temos como exemplo mais recente o NuBraille, a solução para cartões acessíveis do Nubank.
Segundo o IBGE, o Brasil tem 18,6 milhões de pessoas com deficiência, sendo 6,4 milhões de pessoas que apresentam dificuldade para enxergar, mesmo usando óculos ou lentes de contato. Mas acessibilidade não é um conceito pensado exclusivamente para pessoas com deficiência, é sobre fornecer acesso e melhorar a usabilidade para todas as pessoas, e isso diversifica e expande a clientela do produto.
Então, observando a acessibilidade enquanto estratégia de negócio, escolhi analisar o aplicativo do Nubank por ele vir se mostrando como um exemplo de sucesso nesse quesito.
Focando minha análise na acessibilidade visual, realizarei testes a partir de duas telas principais do aplicativo: a tela inicial e de configurações.
1. Princípios Básicos do Design
Ao manter as boas práticas fundamentais do Design como Contraste, Repetição, Alinhamento e Proximidade, a acessibilidade já está sendo aplicada, pois um bom layout e uma boa hierarquia visual promovem a clareza da informação.
1.1 Layout
Comparei as telas atuais com a versão de 6 meses atrás e pude identificar algumas melhorias sutis mas importantes:
A atualização no botão “Conta” aproximou os itens valor e título. Como resultado entendo que isso facilitou a identificação deste elemento como pertencente ao mesmo grupo.
A atualização do botão “Cartão de Crédito” também alterou a proximidade entre os itens, separando do bloco “fatura e valor da fatura” a linha inferior que traz algumas informações diferentes dependendo do contexto, como a data do vencimento ou o limite disponível do cartão. Essa alteração melhora a legibilidade de cada bloco de informação.
A tela de Configurações foi a que mais sofreu modificações. Ela passou de uma tela com várias opções para uma tela com apenas os botões mais importantes, acabando com a necessidade de um scroll e melhorando a navegação.
Outra atualização importante foi a aparência diferenciada do botão “Sair do Aplicativo”. Antes o botão se misturava como uma das opções de configuração do aplicativo, propósito esse que o botão não carrega.
1.2 Tipografia
O Nubank utiliza a tipografia Graphik, uma fonte grotesca sans serif moderna, trabalhando a hierarquia visual através do peso e tamanho da fonte.
A maioria dos textos funcionam em uma combinação do peso medium com o regular, e do tamanho 32 com o 24, mantendo um bom contraste em cada bloco de informação do aplicativo.
1.3 Paleta de Cores
As telas são construídas basicamente apenas com padrões de cinza, criando um alto contraste com fundo branco e texto/ícones em preto, e utilizando tons de cinza para trazer harmonia e uma melhor distinção entre os blocos.
O roxo característico da marca só aparece na tela inicial e em elementos de destaque, como botões e textos específicos. Outros tons de roxo aparecem para complementar o roxo principal, servindo como fundo de ícones.
Observando o padrão de cores utilizadas para os fundos e textos, o aplicativo se enquadra no critério de sucesso 1.4.3 — Contraste (mínimo) da WCAG (Diretrizes de Acessibilidade para o Conteúdo da Web), onde o nível AA de contraste é o mínimo exigido.
2. Daltonismo
De acordo com a OMS (Organização Mundial de Saúde), no Brasil existem mais de 8 milhões de pessoas com daltonismo. O tipo que afeta a maioria das pessoas é o tricomátrico, onde a pessoa possui os 3 cones receptores da cor (vermelho, verde e azul), porém 1 deles não funciona como deveria.
2.1 Tricomátrico
A paleta de cores do Nubank será visualizada dessa forma por pessoas com daltonismo tricomátrico:
2.2 Dicomátrico
No daltonismo dicomátrico, a pessoa não possui um dos cones receptores. A paleta de cores do Nubank será visualizada dessa forma:
2.3 Acromátrico
O daltonismo acromátrico é o mais raro, as pessoas não distinguem cores, enxergando tudo em preto, branco e tons de cinza. Para essas pessoas, a paleta de cores do Nubank será visualizada dessa forma:
Repetindo os testes de contraste, observando o padrão de cores utilizadas para os fundos e textos, o aplicativo permanece dentro do nível de contraste exigido pelas diretrizes da WCAG independente do tipo de daltonismo de seus usuários.
3. Baixa Visão
A baixa visão se caracteriza pela perda parcial da capacidade visual de um ou dos dois olhos. Para melhorar a acessibilidade em produtos digitais nestes casos uma das soluções possíveis é o aumento da fonte e da exibição.
3.1 Ampliação
É possível aumentar o tamanho da fonte e o tamanho da exibição pelo sistema do celular, e para estes testes utilizei o Android.
Nas versões “Fonte Grande” e “Fonte Enorme” alterei apenas o tamanho da fonte, mantendo o tamanho de exibição no Padrão. No último exemplo, fiz o teste somando o tamanho máximo de fonte (Enorme) com o tamanho máximo de exibição (Maior). Isso demonstra como é possível realizar ajustes combinando o tamanho de fonte com o tamanho de exibição até encontrar a combinação ideal.
Ao analisar os layouts ampliados não identifiquei falhas na consistência das telas, apenas na seção de ícones alguns textos não conseguiram manter a responsividade quando no tamanho de fonte “Enorme”.
3.2 Modo Escuro
O Nubank lançou em abril deste ano a função Modo Escuro, oferecendo uma opção de interface para ajudar pessoas com fotossensibilidade e baixa visão, devido ao seu maior contraste. O Modo Escuro também agrega valor em acessibilidade por oferecer o poder de escolha para todas as pessoas, com ou sem deficiência.
Porém, ao realizar testes com a paleta de cores do Modo Escuro percebi que algumas áreas na verdade perderam o nível de contraste que possuíam no Modo Claro.
A nova cor que substitui o Roxo Principal não traz o contraste mínimo para ser usada em uma fonte pequena no novo tom para o fundo Cinza Principal. Já o novo tom para textos em cinza traz um pouco menos de contraste do que a combinação original do Modo Claro.
4. Deficiência Visual Total
Nos casos de Deficiência Visual Total o aplicativo será acessado por leitores de tela, que deverão proporcionar uma boa navegabilidade pelos elementos e pelas telas.
Realizei os testes usando o Talkback, leitor de telas do Google nativo em dispositivos Android.
Assim que o aplicativo abre, o foco vai para a navegação por abas. A partir deste ponto, o usuário pode deslizar para a direita até sair das abas e mudar o foco para o topo da tela, ou deslizar para a esquerda e sair das abas direto para o elemento mais próximo.
A leitura das abas apresenta alguns problemas, como a repetição do item selecionado sendo lido duas vezes (Selecionado, Selecionado), e cada item trazendo marcações do código antes do nome do botão (Tabulação 0 de 0, aba de transações). Essas repetições e falhas na leitura correta do item traz mais lentidão para a navegação e dificultam o entendimento.
Outro problema de repetição acontece na seção Descubra Mais. O leitor faz a leitura do título (Descubra Mais) e lê o bloco informando novamente o mesmo texto (Descubra Mais). Neste caso, o título poderia ser lido apenas uma vez, e ao entrar na seção do slide de cards informar qual é o tipo de conteúdo desta seção.
Seguindo no bloco Descubra Mais, o leitor identifica cada card como um botão, já oferecendo a possibilidade de acessar o conteúdo, porém ao continuar a navegação ele também entra no botão dentro do card, lendo o texto do botão. A maioria destes botões trazem textos simples como: Conhecer, Acessar ou Saiba Mais, que não oferecem um contexto sobre o que são, então além de atrasar a navegação com elementos repetidos, este fluxo de leitura também confunde a localização do usuário dentro do aplicativo.
Outro problema identificado está no slide dos cards. Conforme o leitor de tela avança para o próximo card, às vezes o card não sai completamente para fora da tela, e nestes casos o leitor lê novamente o mesmo card que acabou de ser lido. Isso somado com o problema anterior transforma o fluxo de navegação desta seção em uma série enorme de repetições.
Também identifiquei que nem todo card é lido por completo. Em alguns apenas o título é lido, em outros apenas o texto, e em outros o título e o texto. Como exemplo, o card de portabilidade de salário, quando lido apenas o texto (Liberdade é escolher onde receber seu dinheiro), o usuário não recebe informações suficientes para entender para onde este botão leva.
Uma boa solução foi implementada apenas no último card, sobre os termos de uso do Nubank. O leitor não leu o título e o texto, mas sim um texto alternativo para o card: “Entenda o documento de termos de uso do Nu”.
Para melhorar a navegação desta seção e manter uma boa consistência entre os cards, seria interessante aplicar a solução de texto alternativo para todos os cards e remover os botões do fluxo de navegação feito pelo leitor de tela, já que os cards funcionam como botões. Isso agilizaria a navegação e melhoraria o entendimento da seção.
Conclusão
Este artigo teve como objetivo entender o quanto a acessibilidade é essencial para os negócios. Consegui perceber que as atualizações do aplicativo do Nubank são reflexos do diálogo constante que a empresa tem com seus usuários, e que pensar em acessibilidade traz essa realidade à tona: focar em pessoas significa ouvir as pessoas, todas elas.
No desenvolvimento deste artigo descobri que o Nubank possui um grupo de afinidade com pessoas com deficiência, o NuPlural, que atua promovendo mudanças na empresa e implementações de acessibilidade no aplicativo. Além deste grupo, ainda existem o NuBlacks, NuPride, Purple Parents e NuWomen, todos atuando junto ao time de Diversidade e Inclusão. Isso comprova como a inclusão real de diversidade na cultura da empresa traz resultados reais e afeta positivamente seus produtos.
Também pude aprender mais sobre os princípios, as métricas e a como realizar testes de acessibilidade. Agradeço demais pela mentoria da Cecília Veloso, CEO da Lit Collective, que me guiou até aqui e me incentivou a buscar minhas áreas de interesse, sem ela essa análise não existiria.
E pensando em próximos passos, planejo realizar novos testes com outras telas e fluxos de navegação, e também realizar testes de usabilidade moderados, para identificar novas oportunidades em acessibilidade.
Clique aqui para ler a segunda parte do artigo, com minha análise das WCAG (Diretrizes de Acessibilidade para Conteúdo Web).
Referências:
https://blog.nubank.com.br/nubank-80-milhoes-de-clientes-brasil/
https://blog.nubank.com.br/nubraille-cartao-nubank/
https://blog.nubank.com.br/modo-escuro-no-app-nubank/
https://comunidade.nubank.com.br/t/acessibilidade-como-aumentar-a-fonte-do-app/466704
https://blog.nubank.com.br/nuplural-grupo-de-afinidade-de-pessoas-com-deficiencia-do-nubank/
