Voltar
Avaliação heurísticaRedesign

AVALIAÇÃO HEURÍSTICA do apps caixa: Redesign com foco em acessibilidade


Data

Mar/2023

Empresa

Caixa Econômica Federal

INTRODUÇÃO

Nesta avaliação, o foco será examinar como os produtos da Caixa se alinham com práticas recomendadas em design de interface e experiência do usuário. Serão abordados aspectos como a clareza das informações, a eficiência na realização de tarefas, a consistência no design e a acessibilidade. O objetivo é identificar possíveis barreiras ou deficiências que possam impactar a experiência do usuário e oferecer recomendações para aprimorar a usabilidade e a funcionalidade dos produtos.

Através desta avaliação heurística, busca-se não apenas melhorar a interação dos clientes com os produtos da Caixa Econômica Federal, mas também fortalecer a confiança e a satisfação dos usuários, assegurando que a instituição continue a cumprir seu papel de forma eficaz e inovadora no cenário financeiro nacional.

O objetivo é identificar barreiras e propor melhorias para aprimorar a experiência do usuário, como hierarquia visual, escala modular e contraste de cores. Há também um redesenho da navegação, incluindo a criação de uma nova área para simplificar o acesso a informações essenciais.

Hierarquia visual

Tipografia

Para dar ênfase e importância precisamos trabalhar com várias características do texto além do tamanho. É uma mistura de tamanho, estilo, peso e cor que vão influenciar no resultado final.

Além disso, para definirmos isso da melhor maneira para o usuário, é preciso ter atenção nos diferentes tipos de elementos contidos em um texto, que vão desde o título, subtítulo, parágrafos, captions, citações, entre outros.

Ao trabalhar em uma interface com tamanhos, temos a necessidade de ter um cuidado para não exagerar ou achar que o fato de um elemento estar grande é o suficiente para uma boa hierarquia. É necessário haver harmonia na composição para que os elementos não sejam desproporcionais.

Objetivo

Orientação:

Construir um layout pensando em conduzir o usuário de ação em ação, sem que ele se sinta pressionado ou forçado a navegar.

Comunicação:

Criar links na mente do usuário com o intuito de diminuir a carga cognitiva que ele recebe, diminuindo o seu esforço para achar informações e o caminho que deve trilhar.

Impacto emocional:

Sua aplicação deve conter elementos que envolvam o usuário de forma que ele se conecte com o conteúdo e as ações, tornando sua experiência divertida e mais leve.

Escalas modulares

CONSTRUÇÃO DE NÍVEIS DE TEXTO

Escalas modulares são um sistema harmônico que, por meio da matemática, busca trazer uma sequência numérica que faça sentido, em vez de valores definidos aleatoriamente. A utilização desse simples processo, além dos ganhos de uma interface condizente, colabora na agilidade de produção, reduzindo o tempo que você levaria pensando e calculando algo, quando pode conseguir de uma maneira muito mais prática.

Sua aplicação é bem simples, dois valores multiplicados aumentam o nível da escala, e quando divididos, diminuem.

A proporção áurea (1,168) é muito utilizada para auxiliar nesse processo.

Exemplo de USO DE ESCALAS MODULARES

Redesign aplicando a proporção áurea no app sou caixa

Análise de Cores

Acessibilidade

O uso da cor é um dos principais problemas de acessibilidade pois nem todas as pessoas percebem a cor da mesma maneira.

Sempre que fazemos uma pesquisa sobre o publico alvo do produto que será desenvolvido, procuramos saber a idade e o perfil desse público, pois isso também é um fator importante considerando a acessibilidade. Por exemplo, existem algumas condições e doenças nas quais a visão pode ser danificada:

  • Degeneração macular
  • Retinopatia diabética
  • Cataratas
  • Retinite pigmentosa
  • Deuteranopia
  • Protanopia
  • Tritanopia
  • Achromatopsia

“Só no Brasil, existem mais de 6,5 milhões de pessoas com deficiência visual, sendo 582 mil cegas e 6 milhões com baixa visão”

A importância do contraste para a interface

O contraste é uma ferramenta de grande poder que captura nossa atenção e nos permite perceber as diferenças ou aspectos relevantes de algo. Nas interfaces, ele desempenha um papel significativo, podendo melhorar a experiência dos usuários e, em particular, daqueles que possuem deficiência visual.

A cor usada nos textos deve fazer um contraste suficiente com a cor de fundo para garantir uma boa legibilidade. Um mau uso desse contraste entre as duas cores, pode tornar os textos ilegíveis para pessoas com algum tipo de deficiência visual e até mesmo para as que não possuem.

O W3C sugere que a relação de contraste entre o texto e seu plano de fundo deve ser de pelo menos 4.5 para 1. Quando a fonte tem pelo menos 24px ou 19px em negrito, esse mínimo cai para 3 para 1, que seria um valor de contraste ainda aceito para passar no teste de acessibilidade (AA)*.

*De acordo com seu contraste, a nota pode ser A, AA ou AAA, onde A é a mais baixa e AAA a mais alta.

Antes

Depois

Efeito da posição em série

O Efeito de Posição Serial é um termo inventado por Herman Ebbinghaus para descrever como a posição de um item em uma sequência afeta a precisão de lembrança.

Um fenômeno cognitivo pelo qual uma pessoa tem mais probabilidade de se lembrar de itens que são apresentados no início e no final de uma lista, do que de itens que são apresentados no meio da lista. Acredita-se que este efeito se deva à forma como a informação é codificada e recuperada da memória.

Hoje em dia vemos muitos aplicativos sem um menu de hambúrguer, e no seu lugar é colocado uma barra de navegação na parte inferior ou superior. Colocando as ações mais importantes para a direita ou esquerda, essas podendo apenas ser determinadas através de uma análise com usuários.

Exemplo de menu inferior utilizado no twitter, Medium e ProductHunt

mapeamento das funcionalidades

PROPOSTAs DE MELHORIA e redesign do app loterias

  • Criação de menu inferior com as funcionalidades mais utilizadas
  • Redesign da página inicial

Buscando facilitar a vida do usuário a página inicial foi refeita, tendo nela atalhos de mais fácil alcance a menos cliques de distância.

  • Criação do “minha Área”

A página “minha área” foi criada a fim de substituir o menu dropdown que antes ficava localizado no menu hambúrguer que foi excluído.

Além de ser mais fácil a visualização das informações, também diminuiu o número de cliques, fazendo com que o usuário não tenha mais que precisar clicar no menu, selecionar “minha área”, escolher opção e depois voltar a tela inicial.