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.
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
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.
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.