Como manter a uniformidade da sua interface

Já sabemos que construir a interface de um produto vai muito além de uma simples escolha de cores, fontes e imagens bonitas. Devemos garantir que os usuários naveguem em uma interface de forma simples, intuitiva, eficiente e sem precisar de um manual de instruções para entender o que deve fazer.

Image from Freepik

Existem diversas práticas que vão nos assegurar essa uniformidade, e aqui vão algumas delas.

Consistência

Mais conhecida como a quarta Heurística de Nielsen!

“Os usuários não devem ter que se perguntar se palavras, situações ou ações diferentes significam a mesma coisa. Siga as convenções da plataforma.”

Por isso, é muito importante manter uma consistência e um padrão visual nas cores, textos, imagens, botões, ícones e outros elementos utilizados. Padronizar ajuda na memorização dos usuários e na prevenção de erros.

Um ótimo exemplo disso é o Google, que mantém os botões de ação de seus aplicativos no mesmo local. Também deixa claro qual botão está ativo no momento, através das cores.

Respiro

Sabe aqueles sites cheios de elementos visuais que até cansam de olhar? Muitas vezes eles nos trazem essa sensação por terem poucos espaços em branco de respiro. Essas áreas vazias são essenciais, pois nos sugerem uma pausa, um descanso para os olhos e também uma maneira de dividir conteúdos diferentes e dar harmonia ao conjunto.

Aqui vemos o bom uso do espaçamento em branco na página de login do Dropbox. O usuário pode fazer login sem se distrair com elementos desnecessários/que atrapalham. Além disso, a página tem um visual minimalista e simples.

Blocos de texto

Você sabia que o comprimento das linhas do texto podem ter um impacto muito grande na sua interface?

Linhas mais longas (geralmente acima de 100 caracteres) são mais difíceis de acompanhar e de nos manter engajados com a leitura, já que nosso olho precisa viajar mais longe da extremidade de uma linha para o início da próxima. Portanto, dê preferência para as linhas mais curtas. Elas são mais confortáveis de ler e farão uma grande diferença na legibilidade do seu layout.

Dica: Procure usar um comprimento médio de linha de 45–75 caracteres, incluindo espaços e pontuação.

O site da Apple é um excelente exemplo de como blocos de texto mais curtos dão uma fluidez ainda maior para a interface.

Grids

Hoje em dia, temos dispositivos de diversos tamanhos em nossas mãos que conversam entre si, facilitando nossas atividades. Podemos ouvir música no Spotify pelo App quando estamos indo para o trabalho, ou pela versão Web quando já estamos no escritório, por exemplo.

E para que seja possível desenhar a interface de um produto digital que funcione bem nas diferentes larguras das telas desses dispositivos, os Grids são imprescindíveis.

Eles são formados por colunas, lacunas e margens que nos ajudam a colocar o conteúdo dentro de uma página, funcionando como um Framework. Dessa maneira, vão facilitar o ajuste de proporção dos elementos, seu alinhamento e consistência, sem consumir muito esforço —além de ajudar muito o time de Desenvolvimento na etapa seguinte.

Você pode habilitar a visualização dos grids e personalizá-los na hora de inciar sua interface (Adobe Xd, Sketch, Figma, etc).

Essas são só algumas das diversas boas práticas de UI, mas que já vão te ajudar muito na criação de uma interface mais amigável, intuitiva e fácil de se usar. Lembrando sempre do que Nielsen nos diz:

“Three Tips: Simplify, Simplify, Simplify.”