10 princípios de design que todo designer deve conhecer

Princípios de Design são um conjunto de considerações que formam a base de qualquer bom design de produto. Você pode encontrar muitos artigos online listando vários princípios, mas frequentemente eles carecem de exemplos concretos de produtos que encontramos no dia a dia.

Aqui estão 10 princípios de design que todo designer deve conhecer que podem ajudá-lo a criar designs mais usáveis, eficazes e imersivos.

O tradeoff entre Flexibilidade e Usabilidade

Quanto mais a flexibilidade de um sistema aumenta, mais sua usabilidade diminui.

Designs flexíveis suportam mais funções e satisfazem um conjunto mais amplo de requisitos, mas executam essas funções de forma menos eficiente do que ferramentas especializadas.

Ao equilibrar flexibilidade versus usabilidade, considere o quão bem as necessidades dos usuários são compreendidas e quão provável é que elas evoluam ou mudem. Produtos flexíveis vêm com custos significativos em termos de complexidade, usabilidade, tempo de adoção e requisitos de investimento.

O Adobe Photoshop é amplamente usado por designers, artistas gráficos, fotógrafos e profissionais criativos. A cada nova versão, o conjunto de recursos do Photoshop foi expandido para acomodar um conjunto maior de casos de uso, resultando em uma interface altamente flexível, porém complexa.

Em contrapartida, o Figma foi construído propositalmente para design de UI e possui um conjunto de recursos muito enxuto. Sua interface minimalista pode ser totalmente aproveitada sem muito treinamento.

O que fazer:

• Suporte mais flexibilidade quando as necessidades do público-alvo não podem ser claramente antecipadas. Mas não se esqueça de fornecer padrões inteligentes e soluções prontas para uso.
• Entenda que cada novo recurso contribui para a complexidade: priorize e reduza o escopo. Foque na proposta de valor principal do produto. A cada novo lançamento, tente melhorar o conjunto de recursos existentes e não apenas adicionar novos.
• Limite o número de abordagens e visualizações alternativas que suportam a mesma necessidade. Projete uma interface de usuário mais prescritiva.

O efeito da Estética na Usabilidade

Usuários têm a tendência de perceber designs esteticamente agradáveis como mais usáveis. Tendemos a acreditar que produtos com melhor aparência funcionarão melhor — mesmo que na realidade não funcionem.

Em 1995, após testar 26 variações de uma UI de caixa eletrônico e pedir que 252 participantes do estudo avaliassem cada design quanto à facilidade de uso e apelo estético, os pesquisadores Masaaki Kurosu e Kaori Kashimura descobriram que os usuários são fortemente influenciados pela estética de qualquer interface, afetando sua percepção de facilidade de uso.

A página de erro do GAP é bastante usável, pois não utiliza códigos de erro desconhecidos para o usuário como “404” e lista possíveis razões pelas quais o erro ocorreu. Além disso, a página tem um call to action claro e contatos de suporte.

Em contraste com a página insossa e direta do Gap, a página 404 da Pixar foca em evocar relacionamentos positivos e emoções nesse cenário estressante. Usando um visual muito mais rico e um personagem divertido do seu universo, eles tentam fazer você sorrir.

O que fazer:

• Aspire a criar designs esteticamente agradáveis. Usuários têm mais probabilidade de querer experimentar um produto visualmente atraente, e são mais pacientes com pequenos problemas. Então é um investimento válido de tempo e dinheiro.
• A beleza está nos olhos de quem vê. O que pode parecer esteticamente agradável para você pode não parecer o mesmo para seu público-alvo. Invista em pesquisa e testes.
• Em seus designs, recorra a princípios como o Viés de Atratividade, a Proporção Áurea, o Viés de Contorno e a Regra dos Terços para afetar a estética.

Tolerância a erros

Um bom design deve ajudar os usuários a evitar erros e minimizar as consequências negativas dos erros quando eles ocorrem.

Somos humanos e, consequentemente, cometemos todo tipo de erros: Deslizes — quando usuários agem e obtêm resultados inesperados, como erros de digitação. Enganos — devido a lacunas no conhecimento ou a uma avaliação incorreta de uma situação. Ou lapsos — devido a falhas de concentração ou memória.

A tolerância da busca da Amazon ajuda compradores apressados a obter os resultados que desejavam. Ao detectar erros de digitação, o sistema apresenta resultados para o termo de busca corrigido. O Gmail também utiliza diversos métodos para tornar sua interface mais tolerante. Ao enviar um e-mail, o app cria um pequeno atraso artificial para dar aos usuários a chance de cancelá-lo caso mudem de ideia. Ou, no caso de “anexo” mencionado no texto, ao enviar, o app lembrará o usuário de realmente incluí-lo caso tenha esquecido.

O que fazer:

• A melhor maneira de evitar erros é criar designs com boa affordance — características físicas do design que influenciam seu uso adequado.
• Suporte a reversibilidade de ações, ou construa “redes de segurança” — processos que previnem erros ou falhas catastróficas.
• Certifique-se de exigir confirmações apenas para ações importantes e irreversíveis.

Escassez

Produtos, serviços e oportunidades se tornam mais desejáveis quando são percebidos como estando em oferta limitada ou ocorrendo com pouca frequência.

Marcas usam o princípio da escassez para persuadir pessoas a comprar um produto ou tomar outra ação desejada. Poucos princípios movem seres humanos à ação de forma mais eficaz do que a escassez.

Muitos fenômenos psicológicos contribuem para o efeito deste princípio. O medo de ficar de fora (FOMO) — a sensação de apreensão de que a pessoa não está informada ou está perdendo informações, eventos, experiências ou decisões de vida que poderiam melhorar sua vida.

A ponto de existirem categorias inteiras de produtos chamadas de “bens de Veblen” — um bem cuja demanda aumenta conforme o preço sobe, por causa de sua natureza exclusiva e apelo como símbolo de status.

Na maioria dos sites de reserva de viagens, como KAYAK ou Booking, as listagens são exibidas com uma nota indicando que restam apenas poucos assentos/quartos/itens a um determinado preço. O novo relógio HYT limitado a 5 peças é um exemplo clássico de “bem de Veblen” que pode vender melhor a 2–3X do custo devido à sensação percebida de exclusividade.

O que fazer:

• Dependendo da natureza do produto ou serviço, empregue várias táticas para criar escassez:
  • Informação Exclusiva para um grupo “privilegiado” de usuários
  • Acesso Limitado para um grupo “privilegiado” de usuários
  • Número Limitado de itens
  • A Repentinidade da queda de oferta
  • Uma indicação clara de Alta demanda comunicada aos clientes
• Levar usuários a agir rapidamente, muitas vezes sem consideração cuidadosa das consequências, pode criar um enorme ganho de curto prazo para o negócio, mas muitas dessas táticas são consideradas “dark UX” e podem prejudicar a lealdade à marca a longo prazo.

Razão Sinal-Ruído

A razão entre informações relevantes e irrelevantes em uma interface ou canal de comunicação.

A interação humano-computador é baseada na transmissão e recepção de informação. Qualquer estilização excessiva ou informação apresentada de forma ineficiente ou inadequada degrada o sinal e adiciona ruído aos designs. Uma alta razão sinal-ruído é um objetivo-chave para qualquer designer de UX.

A degradação do sinal ocorre por muitos motivos: ausência de hierarquia, sobrecarga de informação, tipografia ou gráficos altamente estilizados, ícones pouco claros e visuais inadequados, etc.

Abaixo, vemos 3 exemplos de homepages mobile de e-commerce com diferentes níveis de ruído. O app da AliExpress consegue exibir uma tonelada de informações, links e calls to action. Infelizmente, isso combinado com uma UI colorida e fundos chamativos resulta em ruído excessivo que torna quase impossível focar em algo específico.

O que fazer:

• Identifique os principais objetivos dos usuários e as informações essenciais necessárias para tomar uma decisão. Mantenha os designs simples.
• Equilibre tamanho, contraste e “peso” visual de cada elemento no design. Use tipografia e cor para construir uma hierarquia clara e trazer foco para as informações que devem ser comunicadas ao usuário.

Regra 80/20

Também conhecida como o Princípio de Pareto, afirma que uma alta porcentagem dos efeitos em qualquer sistema grande é causada por uma baixa porcentagem de variáveis.

Você pode ver esse princípio afetando praticamente tudo. Embora o axioma 80-20 seja frequentemente usado em economia, você pode aplicar o conceito a interfaces de usuário, controle de qualidade e engenharia.

Aqui estão alguns exemplos. Aproximadamente:

• 80% do uso de um produto envolve 20% de seus recursos
• 80% dos erros são causados por 20% dos componentes
• 80% da receita de uma empresa vem de 20% de seus clientes
• 80% do progresso vem de 20% do esforço
• 80% das ideias virão de 20% das pessoas

O app Calculadora do iOS faz uso total da regra 80/20. Os principais recursos da calculadora que correspondem à maior parte das tarefas e volume de uso dos usuários são acessíveis no modo retrato padrão. Recursos usados com menos frequência aparecem discretamente no modo paisagem.

O que fazer:

• Aproveite análises de produto para otimizar seus esforços de design! Se 20% dos seus clientes correspondem a 80% da receita da empresa, e eles usam 20% dos recursos do produto 80% do tempo, então é aí que as equipes precisam dedicar a maior parte do tempo em pesquisa, design e testes.
• Sempre considere o Retorno sobre Investimento de tempo e dinheiro gastos em atividades de pesquisa de design e o público a ser envolvido.

O mais avançado, porém aceitável

O design mais inovador que ainda é reconhecível e familiar tem a maior probabilidade de se tornar um sucesso comercial.

No design, experiências novas e desconhecidas despertam curiosidade, e a originalidade é valorizada acima de muitas coisas. Dito isso, pesquisas empíricas sustentam o fato de que as pessoas preferem experiências familiares. A familiaridade nos dá uma sensação de controle e segurança.

“O gosto do público adulto não está necessariamente pronto para aceitar as soluções lógicas para suas necessidades se a solução implica um afastamento grande demais daquilo que foram condicionados a aceitar como norma.” Raymond Loewy — aclamado designer industrial franco-americano, responsável pela garrafa da Coca-Cola, logo da Shell Oil, etc.

O Google Glass foi uma aposta ousada para trazer o mundo um passo mais adiante no futuro. As campanhas de marketing geraram muito hype, mas o produto recebeu críticas consideráveis, com preocupações sobre preço, segurança e privacidade. O Google Glass parecia não ter o fator “cool”. A Fortune Magazine listou o Nokia 7280 como um dos melhores produtos de 2004. Embora seu design tenha sido elogiado por muitos e até tenha tido alguns seguidores de culto, no geral teve vendas insatisfatórias.

O que fazer:

• Se você precisa explicar seu design, ou ele requer treinamento extenso e recursos de “ajuda”, seu design é avançado demais ou complexo demais. Aspire a criar designs que precisem de pouca ou nenhuma explicação.
• Entenda o conjunto de habilidades do seu público-alvo, velocidade de aprendizado e capacidade de mudança.
• Avance o design gradualmente, usando uma abordagem incremental para chegar à visão final.

Imersão

Um estado de foco mental quando a consciência do “mundo real” é perdida e os usuários estão totalmente absorvidos em uma experiência.

A imersão pode ocorrer enquanto jogamos um jogo, trabalhamos em uma tarefa envolvente ou dançamos. Essa sensação, acompanhada por uma sensação de alegria, é geralmente caracterizada por uma noção alterada de tempo ou perda da autoconsciência. Esses elementos podem ocorrer independentemente uns dos outros, mas apenas em combinação constituem o chamado estado de flow.

O Pokémon GO — um app que tomou o mundo de assalto em 2019, foi um dos melhores exemplos de como criar uma experiência imersiva através de gamificação, storytelling e realidade aumentada — a ponto de usuários se colocarem em perigo na corrida para “capturá-los todos”. Em 200 dias, os jogadores gastaram um recorde de um bilhão de dólares em upgrades dentro do jogo.

O IKEA Place permite que você posicione virtualmente modelos 3D em escala real no seu próprio espaço. Combinando a mais recente tecnologia de AR com as soluções de casa inteligente da IKEA, você pode experimentar a IKEA como nunca antes.

O que fazer:

• Projete ambientes que minimizem distrações, promovam uma sensação de controle e forneçam feedback.
• Forneça objetivos e desafios claramente definidos que possam ser superados.
• Aproveite VR/AR/MR/XR para posicionar o conteúdo e facilitar a interação no mundo virtual, eliminando a abstração entre o conteúdo e seus usuários.

Entra lixo, sai lixo

A qualidade da saída do sistema é dependente da qualidade da entrada do sistema.

O princípio é baseado na observação de que computadores operam com lógica estrita, e boas entradas geralmente resultam em boas saídas, enquanto entradas ruins resultam em saídas com defeitos.

Pode haver vários problemas de entrada:

Como resultado de enganos — as entradas fornecidas podem ser radicalmente diferentes da entrada esperada, como digitar um número de telefone em um campo de número de passaporte. Pequenos deslizes podem ocorrer quando o tipo de entrada está correto, mas há erros, como erros de digitação.

Um processo rigoroso, mas guiado, de publicar sua experiência no Airbnb realmente ajuda a melhorar o conteúdo na plataforma e criar consistência. Requisitos de qualidade de imagem, referências, limitações de contagem de palavras e pré-visualizações são apenas uma fração dos mecanismos empregados para auxiliar os usuários na criação da listagem mais atraente.

O que fazer:

• Projete para boas affordances e restrições para evitar enganos.
• Habilite pré-visualizações, confirmações e autocorreção para minimizar os problemas de qualidade de dados.
• Ao fazer pesquisa de usuário ou entrevistas, escolha a amostra certa. Faça as perguntas certas. Certifique-se de que suas perguntas não são tendenciosas, confusas ou com suposições embutidas.

Custo-benefício

Uma atividade será realizada somente se seus benefícios forem iguais ou maiores que os custos.

O tempo, esforço, despesas e outros recursos dos usuários constituem um custo que será comparado aos potenciais benefícios obtidos ao usar um serviço ou produto.

O princípio de custo-benefício é frequentemente usado por equipes de produto para avaliar o retorno financeiro associado a novos recursos e elementos, e para estabelecer a prioridade dos recursos.

O app Nuri, como muitas outras startups, dá recompensas monetárias aos usuários por indicações. Outros produtos de investimento como o Robinhood dão ações de presente por abrir uma conta com eles. A Matriz de Prioridade é uma atividade simples que ajuda equipes a avaliar o valor que cada recurso traz versus o esforço necessário para entregá-lo.

O que fazer:

• Foque em simplificar os fluxos e pense em como você pode minimizar o esforço para cada tarefa na plataforma.
• Não confunda recursos que entusiasmam stakeholders ou designers com recursos valiosos para os clientes. Grupos focais e testes de usabilidade ajudarão você a descobrir o que é verdadeiramente valioso.

Conclusão

Princípios de design não são regras rígidas a serem seguidas cegamente, mas sim bússolas que orientam decisões em meio à complexidade de criar produtos digitais.

Do equilíbrio entre flexibilidade e usabilidade até a análise de custo-benefício, cada princípio oferece uma lente diferente para avaliar e refinar suas escolhas de design. A verdadeira habilidade está em saber quando e como aplicar cada um deles.

Vale lembrar que esses princípios frequentemente interagem entre si e, às vezes, até entram em conflito. Criar escassez pode prejudicar a tolerância a erros; buscar imersão pode comprometer a razão sinal-ruído.

Cabe ao designer entender o contexto, conhecer profundamente seu público e fazer os tradeoffs necessários para entregar a melhor experiência possível.

Mais importante do que memorizar princípios, é desenvolver o hábito de observar produtos do cotidiano com olhar crítico. É assim que esses conceitos se tornam parte natural do seu processo criativo.

Se você gostou deste artigo, confira também os 4 princípios fundamentais de design, os 19 princípios de User Interface Design e as 58 regras para um UI Design bonito e eficiente.