Skip to content
Template Nova Análise de UX - Cliente
Share
Explore

icon picker
Leis de UX

Nesta página, apresentamos as documentadas pelo designer Jon Yablonski. Com base nelas, fazemos a análise do e-commerce, verificando se o design e as interações estão seguindo as boas práticas para entregar uma melhor experiência ao usuário.

1. Efeito da Usabilidade Estética

Essa lei de UX descreve que o usuário tende a correlacionar usabilidade com a estética da interface. Os usuários geralmente percebem o design esteticamente agradável como um design mais utilizável.
O design esteticamente agradável pode tornar os usuários mais tolerantes a pequenos problemas de usabilidade.
O design esteticamente agradável cria uma resposta positiva no cérebro das pessoas e as leva a acreditar que o design realmente funciona melhor.
O design esteticamente agradável pode mascarar problemas de usabilidade e impedir que problemas sejam descobertos durante os testes de usabilidade.

image.png

Exemplo: Um belo exemplo são os produtos da Apple, que possuem uma estética agradável e moderna, e dessa forma, em termos de usabilidade, podem possuir algumas falhas, mas seus usuários acabam nem percebendo ou, se percebem, não veem isso como algo negativo. No entanto, o designer não pode se deixar enganar por essa lei. Apesar da estética do produto influenciar o usuário, ela não consegue mascarar grandes erros de usabilidade.
Portanto, a usabilidade e a estética são complementares e devem andar juntas no desenvolvimento de uma interface.


2. Limiar de Doherty

Essa lei de UX é sobre à velocidade de resposta da interface. A produtividade aumenta quando um computador e os usuários interagem em um ritmo (<400ms) que garante que nenhum deles precise esperar pelo outro. Quanto mais rápido a resposta dos nossos computadores, mais rápido tomamos a próxima ação.
Forneça feedback do sistema dentro de 400ms para manter a atenção dos usuários e aumentar a produtividade.
Use o desempenho percebido para aumentar o tempo de resposta e reduzir a percepção de espera.

image.png
Nesse sentido, aplicando essa lei, temos que uma interface não pode ser lenta, porque afeta a usabilidade do usuário.
Um aplicativo lento ou um site que não carrega rapidamente fará com que o usuário tenha uma percepção ruim da sua interface e fará com que ele abandone sua página. , a probabilidade dos usuários deixarem uma página aumenta 32%, conforme o tempo de carregamento passa de 1 segundo a 3 segundos.

3. Lei de Fitts

É lei de UX que diz respeito ao tempo de ação do usuário em relação a uma interface. O tempo para interagir com um alvo é uma função da distância e tamanho do alvo.
Ao contrário da Limiar de Doherty, a qual está relacionada à resposta da interface, a Lei de Fitts está relacionada ao tempo que o usuário leva para entender a interface e agir.
Os alvos de toque devem ser grandes o suficiente para que os usuários discernem o que é e os selecionem com precisão.
Os alvos de toque devem ter amplo espaçamento entre si.
Os alvos de toque devem ser colocados em áreas de uma interface que permita que sejam facilmente adquiridos.
image.png

Adequar a sua interface à Lei de Fitts é importante para não deixar o usuário com a impressão de que o seu produto é complicado de utilizar.

4. Lei de Hick

O tempo necessário para tomar uma decisão aumenta com o número e a complexidade das escolhas.
Simplifique as opções para o usuário, dividindo tarefas complexas em etapas menores.
Evite sobrecarregar os usuários, destacando as opções recomendadas.
Use a integração progressiva para minimizar a carga cognitiva para novos usuários.

Um bom exemplo são os sites de compras. Para finalizar o pedido, geralmente, são necessárias diversas informações como endereço, forma de pagamento, cadastro, etc.
image.png
Em um site de compras as etapas são quebradas em uma tela por vez

image.png
Após escolher o tipo de frete, a próxima tela diz respeito à forma de pagamento

Se essas informações forem solicitadas todas de uma vez, o usuário poderá se sentir confuso e sobrecarregado e acabará desistindo da compra. Por outro lado, é comum que essa etapa seja quebrada em diversas partes, uma em cada página, para simplificar a interação do usuário.
Dessa forma, é importante analisar todas as interações que o seu usuário possui com a interface. Entenda se há momentos em que ele gasta muito tempo e tente quebrar esse processo em etapas menores para melhorar sua experiência com a interface.

5. Lei de Jakob

Os usuários passam a maior parte do tempo em outros sites. Isso significa que os usuários preferem que seu site funcione da mesma maneira que todos os outros sites que eles já conhecem.
Os usuários transferem as expectativas criadas em torno de um produto familiar para outro que parece semelhante. Portanto, o seu produto deve atingir essa expectativa, caso contrário o usuário terá uma experiência ruim.
Ao alavancar os modelos mentais existentes, podemos criar experiências de usuário superiores nas quais o usuário pode se concentrar em sua tarefa, em vez de aprender novos modelos.
Minimize a discordância, capacitando os usuários a continuar usando uma versão familiar por um tempo limitado.

O usuário cria uma expectativa de senso comum que precisa ser atendida. Por exemplo, em um website, é comum o logo da empresa ficar no canto superior esquerdo. Se o seu site tiver o logo no canto inferior direito da página, a expectativa de senso comum do usuário não será atendida. E, dessa forma, ele se sentirá confuso com a sua interface.

image.png


Exemplo: Um bom exemplo é a convenção das cores vermelho, amarelo e verde, usadas em semáforos. Temos em nossas cabeças que o vermelho é pare ou algo negativo. E verde é siga ou algo positivo. Se você trocar esses significados pode acabar criando um acidente.

Muitas vezes caímos na tendência de querer fazer algo diferente e inovador para nos diferenciarmos dos nossos concorrentes. Apesar de ser interessante se diferenciar, é importante não ser muito disruptivo a ponto de causar confusão para o usuário.
Portanto, ao desenvolver uma interface, leve em consideração que o seu usuário está acostumado a interagir com diversas interfaces semelhantes. Dessa forma, é importante manter certas interações para não quebrar as expectativas do seu usuário. Além disso, é possível inovar e criar melhores experiências alavancando os modelos mentais existentes, nas quais o usuário pode se concentrar em sua tarefa, em vez de aprender novos modelos.

6. Lei da Região Comum

Os elementos tendem a ser percebidos em grupos se eles estiverem compartilhando uma área com um limite claramente definido.
Adicionar uma borda ao redor de um elemento ou grupo de elementos é uma maneira fácil de criar uma região comum.
A região comum pode ser criada definindo um plano de fundo atrás de um elemento ou grupo de elementos.
image.png

O princípio da região comum têm relação com princípio da proximidade, podendo ser até mesmo considerado um sub-princípio deste primeiro. Dessa forma, esse principio afirma que quando objetos são posicionados dentro da mesma região fechada estes são percebidos como parte do mesmo grupo.

image.png
Exemplo: veja que os elementos são agrupados por estarem limitados em suas regiões comuns.

7. Lei de Prägnanz

As pessoas perceberão e interpretarão imagens ambíguas ou complexas como a forma mais simples possível, porque é a interpretação que requer o menor esforço cognitivo de nós. Ou seja, quando nos deparamos com uma forma que não conseguimos identificar, temos a predisposição de quebrar essa imagem em formas mais simples.
O olho humano gosta de encontrar simplicidade e ordem em formas complexas porque nos impede de ficar sobrecarregados com informações.
Pesquisas confirmam que as pessoas são mais capazes de processar e lembrar visualmente de figuras simples do que de figuras complexas.

image.png


Exemplo: Nossos olhos convertem formas complexas (esquerda) em formas mais simples e conhecidas (direita). A Lei de Prägnanz afirma exatamente isso. Nossos olhos preferem encontrar a simplicidade, porque nos previnem de uma sobrecarga de informações.

Nesse sentido, é importante utilizar a Lei de UX no momento de diagramar a sua interface, por exemplo:
image.png
Dessa forma, procure sempre utilizar formas simples para compor a estrutura da sua interface. Porque será exatamente assim que o usuário a enxergará.

8. Lei da Proximidade

Os elementos próximos tendem a se agrupar, constituindo uma unidade. Esses elementos vão parecer mais próximos e unificados quanto menor for a distância entre eles.
A proximidade ajuda a estabelecer um relacionamento com objetos próximos.
A proximidade ajuda os usuários a entender e organizar as informações de maneira mais rápida e eficiente.
image.png

Exemplo: Objetos próximos uns dos outros, automaticamente são percebidos como partes de um mesmo inteiro. Dessa vez os objetos da imagem acima apresentam, além de um mesmo tamanho e formato, a mesma cor. Ainda assim, o nosso cérebro tende a perceber os quadrados da esquerda como um grupo e os quadrados da direita como um outro grupo, diferente e independente do primeiro.

image.png
Outro exemplo é a interface do menu da 99. Por causa da Lei da Proximidade, os objetos “Motorista”, “Passageiro”, “Empresas”, “99 Food”, “Segurança” e “Ajuda” demonstram fazer parte da composição de um mesmo inteiro: O menu. Já a logo da empresa e o botão “Quero ser motorista”, são objetos dispostos com um espaçamento maior, porque não participam desse mesmo grupo.

9. Lei da Similaridade

Os elementos similares tendem a aparecer agrupados. O agrupamento pode ocorrer inclusive em ambos os estímulos visuais e auditivos. Itens similares tendem a ser agrupados juntos.
Verifique se os links e os sistemas de navegação são visualmente diferenciados dos elementos de texto normais e têm um estilo consistente.
image.png



Exemplo: É comum que o nosso cérebro busque por padrões. Por causa disso, acabamos por interpretar objetos semelhantes como pertencentes a um mesmo grupo.

image.png
Na tela do Banco Inter, o menu é um conjunto. Mas observe que o item “O Inter”, quando selecionado, possui um fundo acinzentado, que se destaca das outras opções. Isso mostra ao usuário que aquela é a opção do menu que ele está navegando.

image.png
Já na tela do Mercado Livre, a oferta que o usuário está selecionando se torna maior em comparação as outras, desbloqueando informações adicionais sobre o produto de interesse.

10. Lei da Conexão Uniforme

Elementos visualmente conectados são percebidos como mais relacionados do que elementos sem conexão. Se essa relação for entre objetos distintos mas com o mesmo contexto e ainda guiados de alguma maneira, auxilia e muito na mensagem que você quer passar. Um grande exemplo são os assistentes virtuais, e onboardings que possuem uma animação guiando todos os primeiros passos quando está sendo acessado pela primeira vez ou uma pequena introdução do que virá.
Agrupe funções de natureza semelhante para que elas sejam visualmente conectadas por meio de cores, linhas, molduras ou outras formas.
image.png
Exemplo do princípio da conexão uniforme. Protótipo por no

Estabelecer um fluxo com indicadores, sejam pontos ou setas, força na absorção da informação e transmite segurança. O usuário sente que está aprendendo sobre a plataforma, aumentando sua autoestima e segurança em utilizá-lo, isso facilita na aprendizagem da aplicação e de futuras atualizações que possam vir.

11. Lei de Miller

Nós temos uma capacidade cognitiva que entra em ação toda vez que nos deparamos com uma nova interface. A partir desse momento, um processo de aprendizagem é iniciado e nosso cérebro começa a entender como devemos utilizar aquela interface.
Adicionalmente, nós possuímos uma memória de trabalho restrita. Ou seja, nossa capacidade de armazenar as novas informações é limitada.
A Lei de Miller descreve que uma pessoa média só pode manter 7 (mais ou menos 2) itens em sua memória de trabalho.
Por conta disso, é importante que o desenvolvimento da interface contemple formas de não sobrecarregar a capacidade cognitiva e a memória imediata do usuário. Pois, caso contrário, ele se sentirá confuso e isso prejudicará sua experiência.

Chunking é um método eficaz de apresentar grupos de conteúdo de maneira gerenciável. Organize o conteúdo em grupos de 5 a 9 itens por vez.
Em sua interface, evite:
Muitas escolhas e opções para o usuário;
Fazer com que o usuário pense demais;
Falta de clareza nas interações;
Muita informação agrupada.
image.png
Exemplo: Um exemplo simples é a formatação de números grandes como telefone ou código postal. Com todos os números juntos, a leitura fica confusa. Já se separarmos em blocos, a nossa experiência será melhor. Dessa forma, você garante que o usuário gastará sua capacidade cognitiva, memória e atenção nos elementos realmente importantes da sua interface.

12. Navalha de Occam

Essa Lei de UX descreve que devemos sempre escolher a solução mais simples para um determinado problema. Ao invés de optar pela mais complexa. Ou seja, cortar com uma navalha aquilo que não é relevante. Entre as hipóteses concorrentes que preveem igualmente bem, deve-se selecionar aquela com o menor número de suposições.
Analise cada elemento e remova o maior número possível, sem comprometer a função geral.

Exemplo: O site do Bing possui diversos elementos que podem atrapalhar o usuário.
image.png

Enquanto a página do Google é simples e direta.
image.png

Assim, o que propõe essa Lei de UX é reavaliar o seu design e eliminar tudo o que deixa sua interface mais complexa, simplificando a interação do usuário.
Portanto, o resultado disso será uma interface mais simples, com a mesma eficiência e uma boa experiência para o usuário.

13. Princípio de Pareto

O Princípio de Pareto é bastante comum e muito usado em diversas situações e áreas. Talvez você até já tenha se deparado com esta Lei de UX antes. O conceito em torno deste princípio descreve que 80% dos seus resultados são consequência de 20% dos seus esforços. Ou seja, a relação entre causa e efeito nunca é equivalente. É, na verdade, desproporcional.
Dessa forma, entender esse conceito te ajuda a dimensionar os esforços para quando você estiver revisando ou atualizando a sua interface.
Por exemplo: após uma pesquisa com os usuários, você descobre que existem diversos problemas de interação com o seu produto. Mas você não consegue ajustar todas as incorreções, por conta de tempo e orçamento escassos. Desse modo, você pode analisar os dados da sua pesquisa e identificar quais os 20% dos erros que afetam 80% dos seus usuários. Com isso, você dá foco em um problema que afeta a maior parte dos seus usuários, ao invés de se preocupar com algo que impacta menos gente.

image.png
Concentre a maior parte do esforço nas áreas que trarão os maiores benefícios para a maioria dos usuários.
Vale lembrar que os números nem sempre serão 80 e 20. Essa relação tende a mudar um pouco, para mais ou para menos. O importante é que você entender que essa relação existe e pode te ajudar a poupar esforços desnecessários.

14. Regra do Ponto Final (Peak-End)

As pessoas julgam uma experiência amplamente baseadas em como se sentiram no auge e no final, em vez da soma total ou média de cada momento da experiência.
A regra do Peak-End (Pico e fim, em tradução literal) é uma teoria que tem como base a psicologia. Em alguns casos, a regra do Peak-End é interpretada, inclusive, como um viés cognitivo. Desse modo e por conta disso, acabou sendo bastante usada em UX e acabou se tornando uma das Leis de UX.

image.png
Exemplo: uma viagem de férias. Você esta mais suscetível a lembrar dos melhores e piores momentos — como um passeio marcante ou a perda do passaporte, por exemplo. O final da sua viagem estará mais latente também. Desse modo, você se lembra mais dos últimos dias da sua viagem do que dos dias iniciais.
Nesse sentido, ao aplicarmos essa Lei de UX na prática, é importante a preocupação com os picos de emoção atingidos durante a Jornada do Usuário. Se o usuário tiver alguma dificuldade em algum momento crucial na interação com a interface, esse momento será um pico de emoção e ficará gravado em sua memória. Assim como os momentos e ações finais da sua Jornada.
Dessa forma, entenda quais são os momentos cruciais da interação do usuário e faça com que esse pico emocional seja positivo. Ainda, tenha em mente o final do processo, como você pode deixar o final da Jornada do usuário melhor?
Dica: evite usar pop-ups e mensagens do tipo “por favor, não saia do site”. Esses elementos podem contribuir para uma impressão negativa da sua interface.

Preste muita atenção aos pontos mais intensos e aos momentos finais (o “fim”) da jornada do usuário.
Identifique os momentos em que seu produto é mais útil, valioso ou divertido e o design para tornar esses momentos ainda melhores.
Lembre-se de que as pessoas lembram experiências negativas mais vividamente do que experiências positivas.

15. Lei de Postel

Essa lei é um princípio originalmente descrito como um guia para a transferência de dados entre softwares. Contudo, ela é bastante compatível para UX Design também.
O conceito por trás dessa lei é: “seja conservador no que você envia e liberal no que você recebe”. Traduzindo para UX Design: “aceite, do usuário, qualquer forma de input. Mas seja preciso quando for enviar a ele algum feedback”.
Seja empático, flexível e tolerante com qualquer número de ações que o usuário possa executar. Isso significa aceitar entrada variável dos usuários, traduzir entrada para atender aos requisitos, definir limites para entrada e fornecer feedback claro ao usuário.
Exemplo: Ao preencher um formulário de cadastro, o usuário precisa preencher um campo com o seu número de RG. Sabemos que tal número possui pontos (.), traços (-) e, em alguns casos, letras.
Dessa forma, é papel do UX Design aceitar qualquer formato deste input. Seja com as pontuações ou somente os números. Seja contemplando as letras ou não. O usuário tem que ter a liberdade para inserir os dados da maneira que mais lhe é conveniente.
Adicionalmente, caso haja algum erro no preenchimento do formulário, é importante que o UX diga aonde está o erro.
Ao invés de simplesmente enviar uma mensagem dizendo que há erro no preenchimento, é essencial indicar quais os campos precisam ser alterados e qual a maneira correta.
image.png
Diga ao seu usuário exatamente onde está o erro - se é o email ou se é a senha.

A aplicação da Lei de Postel está diretamente ligada à boa ou má experiência do usuário com a sua interface.

16. Efeito de Posição Serial

Os usuários têm uma propensão a se lembrar melhor do primeiro e do último item de uma série.
A partir dessa descrição, portanto, temos dois outros conceitos:
Efeito de Primazia: é a tendência de lembrarmos do primeiro elemento da sequência, por conta de haver pouca informação e esforço para serem processados pelo nosso cérebro.
Efeito de Recência: é a tendência de lembrarmos dos elementos finais da sequência, por conta da nossa memória recente.
primazia recencia.png
Colocar os itens menos importantes no meio das listas pode ser útil porque esses itens tendem a ser armazenados com menos frequência na memória de longo prazo e de trabalho.
O posicionamento das principais ações na extrema esquerda e direita em elementos como a navegação pode aumentar a memorização.

17. Lei de Tesler

A Lei de Tesler, também conhecida como Lei da Conservação da Complexidade, afirma que, para qualquer sistema, existe uma certa quantidade de complexidade que não pode ser reduzida.
Este princípio é uma das Leis de UX que pode causar algum dilema nas tomadas de decisão sobre deixar ou não deixar a interface mais complexa para o usuário.
Em um primeiro momento, a resposta parece simples: Ora, é claro que devemos simplificar o máximo possível a interface para o usuário.
image.png
Contudo, o que a Lei de Tesler propõe é que a complexidade de um sistema nunca deixa de existir. Ela somente muda de lugar e impacta outros agentes.
Nesse sentido, quando a decisão é simplificar um recurso de uma interface, a complexidade migra do usuário para os desenvolvedores. E, dessa forma, acaba-se por criar um dilema: Vale a pena gastar mais tempo e dinheiro no desenvolvimento, a fim de retirar a complexidade do usuário e tornar sua jornada melhor e mais simples? Depende.
Retirar a complexidade do usuário significa também diminuir o controle que ele tem sobre a interface. E alguns usuários, mais experientes, precisam desse controle para ter uma melhor experiência. Por outro lado, existem sempre a questão de simplificar a vida do usuário, fazendo com que ele pense menos e tenha menos esforço com a interface.
É uma decisão difícil e que precisa ser avaliada de projeto para projeto. Portanto, é importante analisar bem a sua persona e a disponibilidade dos seus recursos. Para, então, determinar se vale a pena ou não, retirar a complexidade da mão do seu usuário.

18. Efeito Von Restorff

O efeito Von Restorff, também conhecido como Efeito Isolamento, prevê que, quando vários objetos semelhantes estiverem presentes, é mais provável que aquele que difere do resto seja lembrado.
Faça informações importantes ou ações-chave visualmente distintas.
Esse princípio pode ser aplicado de várias maneiras, principalmente usando cor, tamanho e espaçamento dos elementos, por isso os (CTAs) se diferenciem dos demais botões de ação em um site ou aplicativo, vejas os exemplos abaixo:
image.png
Landing page Feedly — CTA

image.png
Homepage Stripe — CTA

19. Efeito Zeigarnik

As pessoas se lembram melhor de tarefas incompletas ou interrompidas do que de tarefas concluídas.
Você já parou para pensar por que é tão difícil tirar da cabeça aquela série que você ainda não terminou, na Netflix? Uma das explicações está baseada nessa lei. Nesse sentido, podemos afirmar que é difícil esquecer de uma série porque ainda não assistimos a trama por completo. Cada episódio nos mostra apenas um pedaço do todo, e ficamos tensos em saber qual o desfecho final do enredo.
Use barras de progresso para tarefas complexas para indicar visualmente quando uma tarefa está incompleta e, assim, aumentar a probabilidade de ser concluída.
image.png
Efeito Zeigarnik mostrando a evolução em cursos online

Mas como que este efeito se aplica em UX Design? O Designer pode usar essa Lei de UX para prender a atenção do usuário e fazê-lo lembrar de ações e tarefas que ainda estão incompletas. Dessa forma, o usuário cria engajamento com a interface.
Um bom exemplo são as barras de evolução. Diversas interfaces usam este elemento para demonstrar o status da ação, do andamento de um curso ou do preenchimento de um perfil. O LinkedIn usa o Efeito Zeigarnik para mostrar a evolução do perfil do usuário na plataforma. Desse modo, o usuário se sente engajado com uma atividade e não deixará de pensar nisso até que complete a tarefa toda.

image.png
Efeito Zeigarnik aplicado ao LinkedIn

Fontes:


Próxima Página →
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.