10 erros comuns de design ... e como evitá-los

O trabalho de design é um negócio complexo. É muito fácil estragar tudo.

Para criar produtos de alta qualidade, todos os pequenos detalhes são de importância crucial. Cada detalhe deve ser levado em consideração. Pode ser fácil se perder nos detalhes e perder de vista o quadro geral. É por isso que existem vários erros e fraquezas incrivelmente comuns na interface do usuário.

Então, como você pode evitar esses erros comuns? Continue lendo para obter algumas dicas e sugestões focadas em ajudar a evitar essas armadilhas muito comuns.

Sim, tudo isso é baseado em minha própria experiência dolorosa como designer. E sim, qualquer semelhança com eventos reais é pura coincidência.

1. Falta de planejamento para casos extremos (diga NÃO a Lorem Ipsum)

Usando o lorem ipsum e as fotos de ações, você pode criar facilmente um design bonito e harmônico ... que rapidamente será irrelevante para a realidade. Seu belo design será quebrado assim que for preenchido pelo conteúdo real.

Para evitar essa situação e evitar a frustração dos clientes em relação aos produtos finais que não se parecem com o que você pretendia, é necessário obter informações. Reúna o máximo de informações possível sobre o conteúdo que já existe ou o conteúdo que será produzido.

Especificamente, antes de começar a trabalhar em um design de interface do usuário, você precisa saber que tipo de conteúdo será mostrado em todas as seções da página. Você também precisa conhecer os tamanhos mínimo e máximo do conteúdo (ou seja, quantas linhas de texto, tamanhos de imagem). Esses pontos de virada são chamados de casos extremos, porque mostram quando e como a interface será alterada.

Selecionando imagens

Você também deseja investigar as limitações da imagem. Se o seu cliente não possui fotos personalizadas ou não compra nenhuma, não faz sentido usar fotos bonitas, mas sem sentido, da Unsplash.

Por quê? As fotos tendem a ser conceituais. Não basta usar algo bonito. Em vez disso, você precisa selecionar imagens que criem uma narrativa ou impliquem um significado mais profundo.

Faça o que fizer, não use fotos que não precisam estar lá. Atualmente, as pessoas ficam sobrecarregadas com grandes quantidades de informação. Um pouco mais de informação visual inútil apenas os irritará.

Compreendendo blocos repetidos

Outro caso extremo está relacionado à repetição de blocos - por exemplo, imagem + texto, ícone + texto, número + texto e assim por diante. Você deve pensar em como esses blocos ficarão com duas linhas de texto e com dez, além de se ficarão um a um.

Para pequenos blocos de texto que descrevem recursos, você pode usar facilmente um layout de três colunas. No entanto, se você tiver mais de cinco linhas de texto e precisar mostrar tudo sem elipses, precisará criar outra solução visual. Por quê? Porque a leitura de longas colunas de texto é boa apenas para jornais e não é conveniente para a web. As possíveis soluções podem incluir o uso de slides com rolagem horizontal ou um layout de duas colunas.

Planejando o dimensionamento

Conhecer os casos extremos do seu conteúdo ajudará você a usar o espaço da tela com mais eficiência e a escolher o tratamento de interface do usuário correto para cada parte da interface. Mas lembre-se de que os casos extremos não são apenas sobre o que você tem atualmente. Um bom designer deve sempre pensar de maneira proativa, permitindo a possibilidade de os clientes precisarem escalar a interface do usuário no futuro.

2. Anotações de tela inadequadas

O próximo grande erro que é melhor evitar é a falta de anotação nos seus designs.

Toda a sua equipe - o gerente de projetos, especialistas em controle de qualidade e desenvolvedores de front-end e back-end - vê as telas de design em suas formas estáticas, como um conjunto de belas imagens. Eles não sabem qual comportamento você supõe para cada elemento da interface. Eles não podem prever como você o projetou em sua mente. O que pode ser óbvio para você e seus colegas designers não será óbvio para todos os membros da equipe.

É por isso que é extremamente importante incluir anotações sobre o comportamento de cada elemento, endereços de links, animações e interações de tela. Quando você pula esta etapa, corre o risco de mal-entendidos. Você também corre o risco de muita confusão desnecessária após o fato, quando muito trabalho é feito exatamente da maneira errada.

É fácil ver como uma coisa pequena, como uma anotação de tela, pode desperdiçar muito tempo de desenvolvimento. Pode até impactar todo o escopo do projeto e aumentar os custos de desenvolvimento.

3. Estados de erro frustrantes

Ao projetar uma interface do usuário, não esqueça o principal objetivo de qualquer interface do usuário: fornecer o mais suave possível uma interação entre o usuário e o serviço. As interfaces não são um lugar para dúvidas, perguntas sem respostas ou qualquer tipo de incerteza.

Os designers devem fornecer feedback claro aos usuários sobre os estados, especialmente no caso de estados de erro. Por conseguinte, as notificações de erro devem satisfazer as seguintes regras simples:

  • Eles devem ser reconhecíveis e perceptíveis (por exemplo, a cor vermelha é um padrão de interface do usuário comum que indica um erro).
  • Eles devem explicar claramente o que aconteceu e como os usuários podem corrigir o erro.
  • Eles devem ser contextuais. É melhor mostrar mensagens de erro próximas ao elemento ao qual elas se relacionam.
  • Eles não devem ser irritantes. Seu usuário já não está irritado o suficiente com o erro?

Os designers também devem cuidar de erros inesperados (por exemplo, erros do servidor, página não encontrada). Qualquer mensagem de erro é um obstáculo ao fluxo do usuário. É por isso que precisamos ajudar o usuário a lidar com isso, fornecer quaisquer soluções possíveis e tentar amenizar uma experiência ruim - especialmente se não for um erro do usuário. Por exemplo, uma boa solução pode ser projetar ilustrações ou animações para 404 e 500 páginas.

Cuidado com as verificações de formulários

Ao projetar estados de erro, tente o seu melhor para não incomodar os usuários. Em particular, tenha cuidado com todos os tipos possíveis de verificação de formulário.

Por exemplo, imagine que você tenha um formulário com os campos obrigatórios. Isso significa que os desenvolvedores têm uma verificação correspondente: "Todos os campos obrigatórios não devem estar vazios". Digamos que o usuário tente preencher o formulário, mas em ordem aleatória. Quando o primeiro campo obrigatório perde o estado de foco, ele retorna um erro: “Por favor, preencha este campo. É necessário!"

Nosso pobre usuário está exclamando: "Espere, companheiro, estou apenas clicando entre os campos do formulário e nem sequer clicamos em" Enviar "!" E as coisas podem piorar. Por exemplo, digamos que você tenha outra verificação e o botão "Enviar" será desativado até que todos os campos obrigatórios não estejam mais vazios.

Apenas pense sobre isso por um segundo. Seu usuário pobre não fez nada e não pode enviar o formulário, mas você já culpou vários erros. Isso definitivamente irritará qualquer pessoa, por isso é melhor evitar essas situações.

Pesando Custo e Valor

Não dê ouvidos aos desenvolvedores que tentam dizer que isso custará um alto nível de esforço para ser implementado da maneira que você deseja. Lembre-se: NÃO evitar esse problema vai custar a você clientes! Ninguém precisa de um serviço ou produto sem clientes. Mesmo que fosse barato de desenvolver.

4. Estados vazios muito vazios

Este tópico se refere ao estado anterior - estados de erro - e também está conectado a casos extremos. Um estado vazio é o caso absoluto da borda, então você precisa pensar proativamente em evitá-los.

Como será sua interface do usuário quando não houver dados em todas as páginas ou seções? Será amigável ou frustrante? Será que vai ficar bem ou vai ficar quebrado? Os usuários entenderão onde estão e o que o estado significa?

A melhor prática aqui é fornecer um visual agradável que inclua conteúdo informativo. Pode ser uma ilustração, um ícone ou simplesmente um bloco de texto com uma boa tipografia explicando a situação.

5. Falta de hierarquia tipográfica

Em seguida, outro tópico que causa muitos erros de design melhor evitados - tipografia.

O texto é a principal unidade de conteúdo informativo. É por isso que deve ser legível, reconhecível e bem organizado. O texto formatado corretamente facilita a percepção das informações dos usuários, mantendo-os focados no que é realmente importante.

Usando fontes e estilos de fonte

Brincar com fontes pode ser divertido. Mas se alguém está tentando ler algo que muda as fontes dez vezes em um parágrafo, isso rapidamente se torna cansativo e irritante.

Para evitar esse tipo de fadiga da fonte, sugiro usar não mais que três fontes em um único layout. Dito isto, lembre-se da diferença entre fontes e estilos de fonte. Cada fonte possui seu próprio conjunto de estilos: regular, médio, negrito, preto, itálico, negrito itálico e assim por diante. Quando você combina todos esses estilos de fonte com maiúsculas e minúsculas, duas ou três fontes são mais do que suficientes para criar um sistema atraente de tipografia.

Prestando atenção em Kerning

Ao pensar em tipografia, não se esqueça do kerning. Se você nunca ouviu falar em kerning antes, não se preocupe. é muito simples. Kerning é o processo tipográfico pelo qual o espaço entre os caracteres é ajustado manual ou automaticamente.

Kerning é importante porque, em algumas situações, ajustar o espaço entre os personagens pode tornar a tipografia mais legível e agradável aos olhos. No entanto, usar mal o kerning - ou não prestar muita atenção a ele - pode causar grandes problemas. Isso pode causar más interpretações ou destruir involuntariamente a coesão de um design.

Atualização da hierarquia visual

Sempre tente manter a hierarquia visual entre os estilos de fonte da sua página. Use tipografia contrastante para dividir visualmente diferentes níveis de texto e estabelecer uma hierarquia estrita. Para que a hierarquia de informações fique claramente visível em uma página, os cabeçalhos principais devem estar mais destacados na página. Os subtítulos devem ser consideravelmente menores, mas ainda claramente visíveis.

O mesmo princípio se aplica à hierarquia visual dentro de um bloco lógico. O título deve ser o maior elemento de design da página, seguido por um subtítulo menor e menos proeminente. Em seguida, qualquer título de recurso a seguir deve ser visivelmente menor que o cabeçalho e ter o mesmo peso. As fontes menores devem ser usadas para descrições de recursos e assim por diante. Essa hierarquia visual ajuda os visitantes do site a distinguir entre informações mais e menos importantes.

6. Preenchimento e espaçamento inadequados

O preenchimento e o espaçamento adequados mantêm o layout limpo e organizado, facilitando a leitura e compreensão das informações pelos leitores.

Espaços do mesmo tamanho devem ser definidos em torno de blocos lógicos (por exemplo, na parte superior e inferior e nos lados esquerdo e direito). Se os espaços forem desiguais, sua página ficará confusa e os usuários poderão não considerar a mesma parte de cada seção.

O preenchimento muito pequeno significa que os usuários não podem dividir o conteúdo em blocos lógicos. Para impedir que as peças lógicas se misturem, mantenha-as separadas e insira um grande espaço entre elas.

Uma maneira fácil de manter a hierarquia visual é seguir esta regra simples: O preenchimento entre os diferentes blocos lógicos deve ser maior que o preenchimento entre o cabeçalho e o texto dentro de cada bloco. Por exemplo, digamos que você tenha um longo bloco de texto que inclua títulos, subtítulos e parágrafos:

  • Defina o cabeçalho na parte inferior do preenchimento como 40px e siga-o com um parágrafo de texto.
  • Defina o parágrafo de preenchimento como 10px.
  • Se houver um subtítulo após o parágrafo, forneça 30px para o topo do preenchimento (ou seja, o espaço entre o parágrafo e a parte superior do subtítulo será 30px) e 20px para o fundo do preenchimento (ou seja, o espaço entre o fundo do subtítulo e o parágrafo terá 20 px, maior que o espaço entre os parágrafos).

Isso colocará a ênfase desejada nos elementos mais importantes e maiores. O texto maior - o cabeçalho - tem o maior espaço ao seu redor. Mas esse espaço deve estar mais próximo dos elementos relacionados que o seguem.

7. Iconografia Confusa

Os ícones são incrivelmente úteis quando você precisa expressar significado por meio de um pequeno símbolo ou ilustrar brevemente uma descrição. Eles também são uma parte fundamental das interfaces modernas, especialmente no celular.

Nos aplicativos, os ícones geralmente são equivalentes aos botões. Basta conferir o Instagram: você verá apenas ícones e texto.

É por isso que é muito importante selecionar a imagem visual correta para corresponder ao significado de um elemento. Parece simples, certo? Não. Todo designer do mundo sabe como pode ser doloroso encontrar exatamente o ícone certo.

Você precisa contar a história usando imagens muito simples e comuns que serão compreensíveis para todos. E você precisa combinar esses ícones com o estilo geral da interface do usuário. Em seguida, você precisa fornecê-los aos desenvolvedores no formato SVG.

Talvez você tenha pesquisado ícones gratuitos e tenha ficado emocionado ao encontrar uma boa imagem para cada elemento. Você pensa como perfeitamente correspondem um ao outro! Eles serão compreensíveis para todos! Infelizmente, de alguma forma, a impressão geral do conjunto de ícones que você selecionou parece confusa e desarrumada. Como você pode evitar esse tipo de confusão? Aqui está uma pequena lista de verificação para você:

  • Largura da linha - Após o redimensionamento, todos os seus ícones devem ter a mesma largura de linha. Caso contrário, será muito perceptível que não.
  • Raio do canto - Se os seus ícones incluem algumas formas retangulares, compare o raio do canto de cada ícone do seu conjunto. Se for diferente para ícones diferentes, é melhor corrigi-lo.
  • Formato da tampa da linha (para ícones delineados) - Pode ser retangular ou arredondado.
  • Cantos juntam-se à forma (para ícones destacados) - Pode ser retangular ou arredondado.

É verdade que usuários não sofisticados podem não perceber especificamente larguras de linhas ou raios de canto diferentes. Ainda assim, a impressão geral estará errada e os usuários sentirão.

Em outras palavras, embora não seja errado usar ícones gratuitos, é melhor ir com calma. O uso de ícones gratuitos faz com que um projeto pareça barato e, em alguns casos, pouco profissional. Além disso, existem muitos ícones gratuitos por aí que as pessoas reconhecerão instantaneamente. Por quê? Eles já os viram usados ​​em todos os lugares.

É por isso que meu conselho é ser estritamente seletivo com ícones gratuitos ou, melhor ainda, criar ícones você mesmo. Os ícones personalizados sempre oferecem uma experiência superior.

8. Baixo contraste

Contraste um princípio fundamental do design gráfico. Nossos olhos são como contraste. O contraste é um instrumento que os designers usam para gerenciar a atenção dos usuários.

O contraste ocorre quando dois elementos em uma página são diferentes. Por exemplo, o contraste pode vir do uso de cores diferentes para o texto e a cor do plano de fundo. Pode ser um cabeçalho definido em uma fonte grande, arrojada e suja, usada ao lado de uma fonte sans serif elegante para o texto do corpo. Pode ser a diferença entre um gráfico grande e um gráfico pequeno, ou pode ser uma textura áspera combinada com uma textura suave.

O importante sobre o contraste é que os elementos contrastantes devem ser completamente diferentes. Não apenas um pouco diferente - uma diferença notável e ousada.

Usando espaço em branco

Dito isto, se você colocar dois elementos completamente diferentes muito próximos um do outro, o usuário não entenderá qual elemento é o "principal". É por isso que podemos dizer que o contraste não se refere apenas à aplicação de estilos visuais diferentes a elementos, mas também à arte de usar o espaço em branco. Isso ocorre porque, às vezes, para contrastar os elementos, é necessário separá-los com espaço em branco.

O espaço em branco é importante para facilitar a leitura do conteúdo dos usuários. Obviamente, o espaço em branco pode ser usado indevidamente: ter muito espaço em branco ou colocar muito conteúdo em uma área pequena. Muitos sites com anúncios excessivos também não possuem espaço em branco suficiente.

Garantindo contraste suficiente entre texto e imagens

Evite baixo contraste para a cópia de texto colocada em uma imagem. Deve haver contraste suficiente entre o texto e o plano de fundo. Para destacar a cópia, coloque um filtro contrastante sobre a imagem. O preto é uma cor popular, mas você também pode usar cores brilhantes, misturando-as e combinando-as.

Outra opção é usar uma imagem contrastante desde o início. Nesse caso, você pode colocar a cópia em cima de uma seção escura da fotografia ou imagem.

Evitando overdose de contraste

Evite usar muitos estilos em uma página. Muitos estilos tipográficos e de design em uma única página fazem com que pareçam não profissionais - e também dificultam a leitura. Para evitar isso, limite-se a uma única fonte e a duas opções de saturação (por exemplo, normal e negrito).

Evite enfatizar elementos de página estreitos com cores. Apenas não parece bom. Por exemplo, os títulos já estão bem marcados, graças ao tamanho, tipo de saturação e preenchimentos. Deseja destacar um ponto específico em uma página? Use um plano de fundo colorido para todo o bloco, incluindo um cabeçalho e uma cópia de texto relacionados.

9. Falha ao pensar em várias plataformas

Sim, idealmente, isso não deve mais ser um problema no mundo de hoje. Todos sabemos que a maioria dos usuários acessa serviços da Web a partir de dispositivos móveis. Infelizmente, muitos designers ainda tendem a esquecer esse fato. (Ou talvez os clientes não desejem gastar dinheiro para criar designs otimizados para celular?)

Para os profissionais de design, no entanto, o problema de não otimizar para vários dispositivos não deve ocorrer. Ao criar uma interface do usuário, você sempre deve ter em mente a amplamente elogiada abordagem "primeiro celular". Concentre-se no conteúdo que todo tipo de usuário verá em cada página. Em seguida, pergunte-se: "O controle da interface do usuário que eu selecionei para exibir esse conteúdo específico é conveniente ou não?"

Você pode escolher um bom elemento de interface do usuário que funcione perfeitamente em dispositivos de desktop - mas não será ótimo para usuários de smartphones. Ou vice-versa. É por isso que é importante ter sempre em mente a grande variedade de dispositivos que devemos projetar hoje em dia.

10. Demasiado Design

Só porque você pode adicionar algo ao seu design não significa que você deveria. A simplicidade oferece muitas vantagens. Portanto, tenha cuidado ao enlouquecer com estilos. Embora o excesso de design não seja um grande erro, ele pode causar alguns problemas sérios.

Por exemplo, o uso de muitas cores em uma página é confuso; torna-se claro quais bits são mais importantes. Uma ou duas cores são suficientes para dar destaque visual ao que é realmente importante.

Podemos dizer o mesmo sobre estilos de fonte. Basta enfatizar títulos e subtítulos e usar contraste para frases-chave.

Quanto mais “coisas” você adota em seu design, mais difícil o usuário precisa para extrair as informações que apresenta. Um design precisa respirar e viver por conta própria. Lembre-se: ter espaço em branco não é necessariamente ruim. Em muitos casos, é melhor do que preencher cada centímetro quadrado de espaço em branco.

Seu projeto tem erros que precisam ser corrigidos? Nos informe! Nossa equipe de design de primeira linha pode ajudá-lo a evitar a loucura do design enquanto se comunica de maneira mais clara e bonita.

Sobre o autor

Maria Pisarenko, designer sênior de UI / UX, ingressou na Distillery em 2018. Ela traz mais de 6 anos de experiência em design e construiu inúmeras interfaces para clientes em todo o mundo. As paixões de Maria incluem iconografia, tipografia e ilustração; ela acredita que o design desempenha um papel fundamental para tornar o mundo um lugar melhor.