Aplicando os fundamentos de UI Design e as Heurísticas de Nielsen para aprimorar o meu primeiro projeto em dark mode.
Neste artigo, compartilho como aprimorei a interface do meu primeiro projeto em dark mode desenvolvido durante o Hackathon promovido pela Orange Juice em parceria com a FCamara.
O dark mode é uma tendência de design que vem ganhando cada vez mais espaço, e por isso decidi desenvolver uma aplicação seguindo esse estilo. Entretanto, durante o processo de criação da interface, me deparei com alguns desafios importantes:
A interface deveria ser fácil de usar, atraente visualmente, seguindo os fundamentos de UI Design e as Heurísticas de Nielsen, além de atender aos requisitos de acessibilidade e contraste de cor.
Neste artigo, compartilho as mudanças que implementei na interface para torná-la mais intuitiva e agradável aos usuários.
Primeiro passo
Com o objetivo de melhorar a usabilidade da interface, utilizei os princípios básicos de UI Design e as Heurísticas de Nielsen, mantendo a hierarquia visual e o agrupamento dos conteúdos semelhantes.
Para aprimorar a interface e torná-la mais agradável visualmente, realizei as seguintes melhorias:
- Aprimorei o design com uma abordagem minimalista, eliminando elementos desnecessários e enfeites, como o stroke linear do card (contorno em torno do card), para simplificar a interface e torná-la visualmente mais agradável.
- Aprimorei a legibilidade ajustando o tamanho da fonte e o tracking (espaçamento entre as letras) para que a interface seja facilmente legível em diferentes dispositivos.
- Reorganizei as informações contidas nos cards a fim de evitar sobrecarga visual para o usuário, especialmente em relação aos dados de “Módulos” e “Horas de conteúdo”.
- Ajustei o tamanho dos botões para garantir a consistência visual e funcional da interface, melhorando a estética geral e, assim, aprimorando a usabilidade da aplicação.
Antes e depois:
As implementações realizadas seguem os princípios básicos do UI Design e as Heurísticas de Nielsen, que visam garantir que o texto seja legível e fácil de entender, ao mesmo tempo em que minimizam a sobrecarga visual dos usuários. Isso significa evitar o uso excessivo de informações que possam prejudicar a clareza e eficiência da interface, e tornar a experiência do usuário mais intuitiva e satisfatória.
Segundo passo
Para garantir a acessibilidade da interface para todos os usuários, independente de suas limitações, utilizei as diretrizes de contraste de cores da WCAG (Web Content Accessibility Guidelines), e para essa análise utilizei o site colorshock.io. Mas vale ressaltar que existem diversas outras ferramentas, como plug-ins no Figma (Exemplo: Color Contrast), que também podem ser utilizados para esse fim.
O WCAG recomenda que o contraste entre o texto e o fundo seja pelo menos 4,5:1 para que o texto seja facilmente legível. Já para elementos maiores, como cabeçalhos e botões, o contraste mínimo recomendado é de 3:1.
Levando em consideração essa questão, realizei as análises necessárias para adequar as cores, com o objetivo de melhorar o contraste entre o card e o background da aplicação, assim como entre o botão e a cor de fundo do card.
Outro aspecto importante que levei em consideração foi a acessibilidade visual, visando garantir que usuários com limitações visuais, como Protanopia, Deuteranopia, Tritanopia e Achromatopsia, também possam ter uma experiência digital inclusiva e acessível. Por isso, realizei uma análise cuidadosa para verificar se a escolha de cores poderia prejudicar a usabilidade de usuários com essas condições.
Resultado da análise
Primeira versão
A primeira versão do protótipo apresenta pouco contraste entre as cores, principalmente nos botões de ação, o que pode causar confusão e erros para os usuários. Esse problema ocorre porque os elementos podem se fundir visualmente, dificultando a identificação dos botões e, consequentemente, tornando a navegação mais complexa.
Versão final
Foram implementadas melhorias significativas, na versão final do protótipo em relação à questão de contraste entre as cores. Foram escolhidas cores com maior diferença de luminosidade e saturação, principalmente para os botões de ação, tornando-os mais destacados visualmente.
Após essas adequações, a interface ficou mais clara e intuitiva para todos os usuários, tornando fácil a identificação dos botões de ação e a realização das ações desejadas sem gerar confusão ou erros. Com isso, a experiência do usuário é aprimorada, tornando a navegação e interação com a aplicação mais eficiente e satisfatória.
Conclusão
Aprimorar a interface em dark mode não é apenas uma questão de estética, mas também de usabilidade e acessibilidade. Seguir os princípios fundamentais de UI Design e as Heurísticas de Nielsen podem ajudar a criar uma interface organizada e fácil de usar, reduzindo a sobrecarga visual e fornecendo uma experiência mais clara para os usuários.
Além disso, verificar a acessibilidade da interface para usuários com limitações visuais e garantir o contraste adequado de cores é fundamental para tornar a experiência digital mais inclusiva.
Com essas abordagens, é possível aprimorar a legibilidade, a navegabilidade e a eficiência da interface em dark mode, proporcionando uma experiência agradável e acessível para todos os usuários.
Primeira versão do protótipo:
Versão final do protótipo após as mudanças:
Foi um prazer compartilhar o meu aprendizado com vocês, e espero que tenham encontrado valor nas informações aqui apresentadas, assim como encontrei durante o processo. Agradeço pela leitura!
