Guia de Boas práticas para a criação de interfaces

• Componentes de interface
• Heurísticas de Nielsen
• Princípios de Experiência do usuário (UX)
• Boas Práticas de UI

Componentes de interface

Botões:

•  Os botões são componentes essenciais em praticamente todas as interfaces. Eles são usados para acionar ações, enviar formulários, confirmar seleções e muito mais. Para interfaces desktop, botões com rótulos claros e uma área de clique confortável são ideais. Para interfaces móveis, é recomendado o uso de botões grandes o suficiente para facilitar o toque com os dedos.

 

Menus de Navegação: 

• Os menus de navegação são usados para permitir que os usuários acessem diferentes seções de um aplicativo ou site. Em interfaces desktop, um menu de navegação na parte superior da página ou um menu de navegação lateral são comuns. Em interfaces móveis, é comum utilizar um menu "hambúrguer" (três linhas horizontais empilhadas) que, ao ser tocado, abre um menu deslizante.

 

Listas e Tabelas: 

• As listas e tabelas são componentes utilizados para exibir conjuntos de informações estruturadas. Em interfaces desktop, uma tabela com linhas e colunas é uma maneira eficaz de exibir dados. Em interfaces móveis, uma lista vertical com itens expansíveis ou deslizantes pode ser mais adequada para economizar espaço na tela.

 

Carrosséis e Sliders: 

• Os carrosséis e sliders são componentes utilizados para exibir conteúdo em formato de slide, permitindo que os usuários naveguem por diferentes itens. Eles são frequentemente usados para mostrar imagens, produtos ou notícias em destaque. Esses componentes são adequados para interfaces em ambos os dispositivos desktop e móveis.

 

Formulários: 

• Os formulários são usados para coletar informações dos usuários. Em interfaces desktop, os campos de formulário podem ser dispostos em colunas para facilitar a leitura. Em interfaces móveis, é importante manter os campos de entrada de texto grandes o suficiente e utilizar teclados apropriados (como numéricos para campos numéricos) para facilitar a interação.

 

Barras de Pesquisa: 

• As barras de pesquisa permitem que os usuários pesquisem conteúdo específico em um aplicativo ou site. Elas são componentes importantes tanto em interfaces desktop quanto móveis. Certifique-se de que a barra de pesquisa seja visível e esteja posicionada em um local facilmente acessível para os usuários.

 

Cards:

• Os cards são componentes versáteis que podem exibir informações em um formato compacto e visualmente atraente. Eles são amplamente utilizados em feeds de notícias, galerias de produtos e exibição de conteúdo em geral. Os cards são adequados para interfaces desktop e móveis, fornecendo uma apresentação concisa do conteúdo.

 

Lembre-se de adaptar os componentes às necessidades e às características específicas dos usuários e dos dispositivos que serão utilizados. Além disso, é importante considerar a consistência visual e interativa entre os diferentes componentes de sua interface.

Heurísticas de Nielsen

Este guia tem como objetivo fornecer orientações sobre como aplicar boas práticas ao projetar e desenvolver interfaces para nossos produtos. O foco principal é criar interfaces amigáveis que atendam às necessidades de diversos tipos de usuários.

 

Visibilidade do status do sistema: 

• Mantenha os usuários informados sobre o que está acontecendo, fornecendo feedback adequado sobre o status das suas ações. Isso inclui fornecer feedback visual ou auditivo para indicar que uma ação foi concluída com sucesso, informar sobre o progresso de uma tarefa em andamento ou alertar sobre possíveis erros ou problemas.

 

Correspondência entre o sistema e o mundo real: 

• Utilize linguagem, terminologia e conceitos familiares aos usuários, alinhando o sistema com o mundo real. Isso significa que a interface deve adotar palavras, ícones e fluxos de interação que sejam consistentes com a expectativa e experiência dos usuários na vida cotidiana, evitando termos técnicos ou jargões desnecessários.

 

Controle e liberdade do usuário: 

• Permita que os usuários desfaçam ações indesejadas e tenham controle sobre o sistema, evitando saídas forçadas ou caminhos restritos. Ofereça opções claras de desfazer, refazer ou cancelar ações, permitindo que os usuários tenham liberdade para explorar e corrigir erros sem medo de consequências irreversíveis.

 

Consistência e padrões: 

• Mantenha consistência em todo o sistema, seguindo convenções de design estabelecidas e padrões reconhecidos. Isso inclui a consistência visual, de interação e de terminologia, para que os usuários possam transferir seu conhecimento e experiência de uma parte do sistema para outra, sem ter que aprender novas formas de interação ou interpretação.

 

Prevenção de erros:

•  Projete interfaces para evitar erros, utilizando avisos, confirmações e limitações de entrada. Antecipe erros comuns e forneça orientações claras para evitar que os usuários cometam enganos. Isso pode ser feito por meio de validações de entrada, confirmações antes de ações irreversíveis serem executadas ou orientações claras para ações complexas.

 

Reconhecimento em vez de recordação: 

• Minimize a carga de memória dos usuários, apresentando opções, informações e comandos visíveis. Evite fazer com que os usuários tenham que lembrar informações ou seções específicas da interface para concluir uma tarefa. Em vez disso, forneça instruções, opções e comandos visíveis para facilitar a interação e navegação.

 

Flexibilidade e eficiência de uso: 

• Ofereça atalhos e recursos avançados para usuários experientes, permitindo um uso mais eficiente do sistema. Proporcione meios alternativos para realizar tarefas comuns, como atalhos de teclado, comandos de voz ou personalização da interface, para que usuários experientes possam acelerar suas interações e obter resultados mais rapidamente.

 

Estética e design minimalista: 

• Busque por uma interface limpa, minimalista e esteticamente agradável, eliminando informações irrelevantes ou distrativas. Priorize uma apresentação visual clara e agradável, removendo elementos desnecessários ou excessivos que possam distrair os usuários e focando nos principais elementos e funcionalidades.

 

Reconhecimento, Diagnóstico e Recuperação de erros: 

• O sistema deve fornecer mensagens de erro claras e significativas para que os usuários possam reconhecer quando ocorreram erros, diagnosticar a causa e saber como recuperar-se deles.

 

Reconhecimento de erros: 

• Os usuários devem ser capazes de reconhecer que ocorreu um erro. Isso pode ser feito por meio de mensagens de erro, ícones ou indicações visuais que alertem os usuários sobre problemas ou falhas no sistema.

 

Diagnóstico de erros: 

• Quando um erro ocorre, é essencial fornecer aos usuários informações claras e úteis para que eles possam diagnosticar a causa do erro. As mensagens de erro devem ser específicas, indicando o que deu errado e por quê. Dessa forma, os usuários podem entender o problema e tomar as medidas adequadas.

 

Recuperação de erros: 

• Além de diagnosticar o erro, é importante fornecer aos usuários instruções claras sobre como se recuperar do erro. Isso pode incluir sugestões de solução, alternativas ou etapas específicas a serem seguidas para resolver o problema. A recuperação de erros deve ser projetada de forma que os usuários possam corrigir o erro facilmente, sem ficar presos ou sem saber o que fazer.

 

Ajuda e documentação: 

• Forneça suporte contextual, como dicas e documentação relevante, para auxiliar os usuários em suas tarefas. Disponibilize informações de ajuda acessíveis e relevantes, que possam ser acionadas quando os usuários precisarem de orientações adicionais para concluir uma tarefa ou entender um conceito específico. A ajuda deve estar integrada à interface e ser facilmente acessível quando necessário.

Princípios de Experiência do usuário (UX)

Antes de mergulhar nas práticas específicas, é importante compreender os princípios fundamentais de UX que orientam o design de nossas interfaces:

• Usabilidade: As interfaces devem ser fáceis de usar e compreender, permitindo que os usuários realizem suas tarefas de forma eficiente e eficaz.
• Acessibilidade: As interfaces devem ser acessíveis a todos os usuários, independentemente de suas habilidades físicas, visuais, auditivas ou cognitivas.
• Consistência: As interfaces devem seguir um padrão consistente em termos de design, terminologia e comportamento, para que os usuários possam facilmente entender e prever o que esperar.
• Feedback e resposta: As interfaces devem fornecer feedback claro e imediato para todas as ações do usuário, permitindo que eles compreendam o impacto de suas ações e tomem decisões informadas.
• Simplicidade: As interfaces devem ser simples e livres de elementos desnecessários, evitando sobrecarregar os usuários com informações irrelevantes.

Componentes de UX

Aqui estão alguns componentes essenciais que você deve considerar ao projetar interfaces com boa experiência de usuário:

Navegação

• Utilize uma estrutura de navegação clara e intuitiva, facilitando a descoberta de conteúdo e a movimentação pelo sistema.
• Organize as informações de forma lógica e consistente, seguindo a ordem natural de leitura.
• Utilize agrupamentos visuais e títulos claros para facilitar a identificação de seções e categorias.

Layout e Organização

• Utilize um layout equilibrado e visualmente agradável, com espaçamento adequado entre elementos.
• Organize as informações de forma lógica e consistente, seguindo a ordem natural de leitura.
• Utilize agrupamentos visuais e títulos claros para facilitar a identificação de seções e categorias.

Formulários e Entrada de Dados

• Simplifique o processo de preenchimento de formulários, solicitando apenas as informações necessárias.
• Utilize rótulos claros e instruções contextuais para orientar os usuários na entrada de dados.
• Forneça validações em tempo real para ajudar os usuários a evitar erros e garantir a precisão dos dados.

Feedback e Confirmação

• Forneça feedback visual e de status para indicar quando uma ação foi concluída com sucesso ou se ocorreu algum erro.
• Confirme as ações irreversíveis, como exclusões, para evitar erros acidentais.
• Utilize mensagens de erro claras e orientadas a soluções para ajudar os usuários a corrigir problemas.

Acessibilidade

• Garanta que as interfaces sejam acessíveis a todos os usuários, aderindo a padrões de acessibilidade reconhecidos.

Boas Práticas de UI

É importante seguir boas práticas de UI (Interface do Usuário) para criar interfaces atrativas e intuitivas. Aqui estão algumas boas práticas que você deve considerar:

Hierarquia visual:

Utilize diferentes tamanhos, cores e estilos de fonte para destacar informações importantes e criar uma hierarquia visual clara.

Tamanho da fonte: 

• Utilize diferentes tamanhos de fonte para estabelecer uma hierarquia visual clara entre os elementos de texto. Por exemplo: erros, diagnosticar a causa e saber como recuperar-se deles.
• Utilize um tamanho de fonte maior para títulos e cabeçalhos, destacando a importância dessas informações.
• Utilize um tamanho de fonte menor para o texto do corpo, proporcionando uma leitura confortável e facilitando a distinção entre diferentes níveis de informação. 

Cor da fonte:

• Utilize cores de fonte diferentes para destacar informações importantes ou categorias específicas. Por exemplo: erros, diagnosticar a causa e saber como recuperar-se deles.
• Utilize uma cor mais vibrante ou em destaque para chamar a atenção dos usuários para elementos de destaque, como botões de ação ou informações críticas.
• Utilize cores mais suaves ou neutras para informações secundárias ou menos relevantes, mantendo o foco nas informações mais importantes.

Estilo da fonte:

• Utilize diferentes estilos de fonte, como negrito ou itálico, para enfatizar ou diferenciar certas palavras ou frases. Por exemplo: erros, diagnosticar a causa e saber como recuperar-se deles.
• Utilize negrito para destacar palavras-chave ou pontos-chave em um parágrafo.
• Utilize itálico para indicar termos técnicos ou citações.

Espaçamento e alinhamento:

•  Utilize espaçamento e alinhamento adequados para criar uma hierarquia visual clara e ordenada. Por exemplo: erros, diagnosticar a causa e saber como recuperar-se deles.
• Aumente o espaçamento entre cabeçalhos e parágrafos para estabelecer uma distinção clara entre as seções de conteúdo.
• Alinhe o texto à esquerda, direita ou centralizado com base na importância e no contexto do conteúdo.

Destaque de elementos visuais:

• Utilize elementos visuais, como ícones, ilustrações ou imagens, para destacar informações importantes. :
  • Utilize um ícone de alerta ou um sinal de aviso para chamar a atenção dos usuários para informações críticas ou erros.
  • Utilize uma imagem ou ilustração de destaque para atrair a atenção para promoções, recursos ou informações especiais.

Lembrando que a hierarquia visual é fundamental para orientar os usuários e comunicar a importância relativa das informações na interface. Ao utilizar diferentes tamanhos, cores e estilos de fonte, você pode criar uma hierarquia visual clara e ajudar os usuários a identificar rapidamente as informações mais importantes e relevantes.

Espaçamento e alinhamento:

Mantenha um espaçamento adequado entre elementos e alinhe-os de maneira consistente para uma aparência organizada e equilibrada.

Espaçamento entre elementos: 

Garanta um espaçamento adequado entre os elementos para evitar que eles pareçam muito próximos uns dos outros. Isso ajuda a melhorar a legibilidade, a compreensão e a interação. 

• Adicione margens ou preenchimentos entre botões, campos de entrada e outros elementos interativos para evitar que fiquem muito próximos.
• Utilize espaçamento vertical entre parágrafos, listas e blocos de conteúdo para tornar o texto mais legível e permitir que os usuários identifiquem facilmente diferentes seções.
• Considere o espaçamento entre itens em uma lista ou grade para criar uma aparência organizada e facilitar a identificação de cada item.

Alinhamento consistente: 

Mantenha um alinhamento consistente entre elementos relacionados para criar uma aparência organizada e equilibrada. Isso ajuda os usuários a entender a relação entre os elementos e facilita a leitura e a navegação.

• Alinhe os rótulos de campo de entrada com os campos correspondentes para criar uma conexão visual clara entre eles.
• Alinhe os botões em uma barra de navegação ou em uma lista horizontal para que fiquem visualmente conectados.
• Mantenha a consistência no alinhamento de elementos em diferentes seções da interface para criar um fluxo visual suave e previsível.

Grade e alinhamento baseado em grade:

Utilize uma grade ou uma estrutura de layout baseada em grade para manter um espaçamento consistente e um alinhamento preciso entre os elementos. Isso ajuda a criar uma aparência organizada e alinhada em toda a interface.

Teste com usuários:

Realize testes com usuários para verificar se o espaçamento entre elementos e o alinhamento estão adequados. Observe o feedback e as interações dos usuários para identificar áreas onde o espaçamento e o alinhamento podem ser melhorados.

Lembrando que um espaçamento adequado e um alinhamento consistente tornam a interface mais agradável visualmente, facilitam a compreensão das informações e a navegação pelos usuários, criando uma experiência mais coesa e organizada.

Contraste e legibilidade: 

Garanta que o texto e os elementos tenham um contraste adequado para facilitar a leitura, especialmente para usuários com deficiências visuais.

• Contraste entre texto e fundo: Certifique-se de que o texto e o fundo tenham um contraste suficiente para facilitar a leitura. Evite combinações de cores que resultem em baixo contraste, como texto cinza claro em fundo branco. Utilize cores com contraste adequado, como texto preto em fundo branco ou texto branco em fundo escuro.
• Tamanho e peso da fonte: Utilize tamanhos de fonte adequados para diferentes elementos de texto, como títulos, subtítulos e corpo de texto. Além disso, escolha o peso da fonte (por exemplo, regular, negrito) para enfatizar hierarquia e melhorar a legibilidade.
• Espaçamento entre letras e linhas: Ajuste o espaçamento entre letras (tracking) e linhas (leading) para garantir que o texto seja legível e confortável de ler. Evite espaçamentos muito apertados que dificultem a distinção entre as letras ou muito espaçados, o que pode prejudicar a leitura contínua.
• Estilos e formatos de texto: Utilize estilos e formatos de texto adequados para destacar informações importantes. Por exemplo, utilize negrito para enfatizar palavras-chave ou use itálico para indicar termos técnicos. Certifique-se de que esses estilos adicionais não comprometam a legibilidade geral.
• Destaque de links: Utilize cores ou sublinhado para destacar os links e torná-los facilmente identificáveis. Além disso, forneça feedback visual quando um link é clicado ou hover (passagem do mouse sobre o link) para indicar sua interatividade.
• Teste de acessibilidade: Realize testes de acessibilidade para garantir que o contraste e a legibilidade do texto sejam adequados para usuários com deficiências visuais. Utilize ferramentas de verificação de contraste e, se possível, teste com usuários reais para identificar quaisquer problemas ou dificuldades na leitura.

Lembrando que a garantia de um contraste adequado e uma legibilidade aprimorada não apenas beneficia usuários com deficiências visuais, mas também melhora a experiência de todos os usuários, tornando a leitura mais fácil e agradável.

Ícones e elementos visuais: 

Garanta que o texto e os elementos tenham um contraste adequado para facilitar a leitura, especialmente para usuários com deficiências visuais.

• Ícones para ações comuns: Utilize ícones reconhecíveis e padronizados para representar ações comuns, como um ícone de lápis para editar, um ícone de lixeira para excluir ou um ícone de seta para voltar. Isso facilita a compreensão e a navegação dos usuários, pois eles já estão familiarizados com o significado desses ícones.
• Ícones em menus e navegação: Utilize ícones junto com rótulos de texto em menus e barras de navegação para ajudar os usuários a identificar rapidamente as diferentes opções disponíveis. Por exemplo, um ícone de casa para representar a página inicial, um ícone de envelope para representar mensagens ou um ícone de carrinho de compras para representar a área de compras.
• Elementos visuais para destacar informações importantes: Utilize elementos visuais, como caixas de destaque, cores chamativas ou ícones de alerta, para chamar a atenção dos usuários para informações importantes ou ações críticas. Por exemplo, destaque um botão de "Comprar agora" em uma cor contrastante para encorajar os usuários a realizar uma ação específica.
• Ícones indicativos de estado ou status: Utilize ícones para indicar o status de um item ou uma condição específica. Por exemplo, utilize um ícone de checkmark para indicar que uma tarefa foi concluída com sucesso ou um ícone de relógio para indicar que uma ação está em andamento.
• Padrões e estilos consistentes: Mantenha uma biblioteca de ícones e elementos visuais consistente em todo o sistema. Certifique-se de que os ícones tenham um estilo visual uniforme, tanto em termos de linhas, proporções e cores, para que eles pareçam pertencer ao mesmo conjunto.
• Teste com os usuários: Ao utilizar ícones e elementos visuais, é importante realizar testes de usabilidade com os usuários para garantir que os ícones escolhidos sejam compreendidos corretamente e transmitam a mensagem desejada. Isso pode ajudar a identificar quais ícones são mais intuitivos e significativos para o público-alvo.

Lembrando que é essencial equilibrar o uso de ícones com texto explicativo, especialmente quando se trata de ações críticas ou informações importantes. Além disso, verifique a consistência visual dos ícones em diferentes dispositivos e resoluções para garantir que sejam legíveis e reconhecíveis em todos os contextos de uso.

Simplicidade e consistência: 

Mantenha uma interface simples, evitando sobrecarregar os usuários com informações desnecessárias. Além disso, mantenha a consistência visual em todo o sistema.

Simplicidade

Evite sobrecarregar os usuários com informações desnecessárias:

• Ao projetar um formulário, solicite apenas as informações essenciais necessárias para a tarefa em questão. Por exemplo, se você está criando um formulário de registro, pergunte apenas pelo nome, e-mail e senha, evitando campos adicionais irrelevantes.
• Utilize linguagem clara e concisa para evitar excesso de texto. Seja direto e objetivo ao fornecer instruções e orientações, evitando informações redundantes ou complicadas.
• Limite o número de opções e escolhas em menus suspensos e seletores para evitar sobrecarregar os usuários com muitas opções. Se possível, forneça sugestões ou utilize filtros para ajudar os usuários a encontrar o que precisam de forma mais rápida e eficiente.

Consistência:

Mantenha a consistência visual em todo o sistema:

• Utilize um conjunto consistente de cores, tipografia e elementos visuais em toda a interface. Isso cria uma identidade visual coerente e facilita o reconhecimento dos elementos pelos usuários.
• Mantenha a disposição e a organização dos elementos consistentes em diferentes partes do sistema. Por exemplo, se você está projetando um painel de controle com cartões informativos, certifique-se de que a estrutura e o estilo dos cartões sejam semelhantes em todas as seções.
• Padronize a terminologia e os rótulos utilizados em todo o sistema para garantir que os usuários compreendam e reconheçam as ações e funcionalidades. Evite termos ambíguos ou jargões desnecessários.
• Garanta que os padrões de interação, como gestos de toque em dispositivos móveis ou atalhos de teclado em interfaces desktop, sejam consistentes em todas as partes do sistema. Isso permite que os usuários transfiram seus conhecimentos e experiências de uma área para outra.

Ao manter uma interface simples e consistente, você facilita a compreensão e a navegação dos usuários, criando uma experiência mais intuitiva e coesa.

Feedback visual:

Forneça feedback visual imediato para ações do usuário, como animações suaves ou mudanças de estado, para garantir que os usuários compreendam o impacto de suas ações.

• Ao enviar um formulário, exiba uma animação de carregamento ou uma mensagem de sucesso para indicar que a ação foi concluída.
• Quando um usuário passar o mouse sobre um elemento interativo, mude sua cor de fundo ou adicione uma animação sutil para indicar que ele está interagindo com o elemento.
• Ao arrastar e soltar um elemento em uma interface de arrastar e soltar, forneça feedback visual em tempo real, como uma sombra ou uma mudança na posição do elemento, para indicar onde ele será solto.
• Ao pressionar um botão, aplique um efeito de destaque ou uma mudança visual para mostrar que o botão foi pressionado.
• Ao exibir mensagens de erro, utilize cores, ícones ou indicadores visuais para destacar os campos com problemas e fornecer orientações claras sobre como corrigir os erros.

O feedback visual é uma forma eficaz de comunicar o estado e o resultado das interações do usuário, garantindo uma experiência mais intuitiva e responsiva.