Top 10 erros de design em websites de 2021, por Jakob Nielsen

Top 10 erros de design em websites de 2021, por Jakob Nielsen

Última atualização:
13/12/2022
Pessoa autora:
Tiago
Categorias:

Em 29 de outubro, a NielsenNorman Group lançou um vídeo clássico comentando os 10 maiores erros de design do ano. A NNGroup é uma consultoria de User Experience baseada em pesquisa e foi fundada por duas lendas do UX: Jakob Nielsen e Don Norman.Don Norman, além de um queridíssimo, é figurinha carimbada sempre que falamos de UX na DiTi. Aliás, já recomendamos o livro dele no nosso vídeo “Conhecendo a profissão: User eXperience”: “O design do dia a dia” é a bíblia do design centrado no usuário. Inclusive, Norman é o responsável pelo termo “UX”, utilizando-o pela primeira vez quando trabalhava na Apple, na década de 90. 😳Já Jakob Nielsen, outra figurinha carimbada, contribui com muito conteúdo sobre a área e criou também um modelo de análise heurística de usabilidade: as “Heurísticas de Nielsen”, suuuper conhecidas e utilizadas por profissionais de UX.De tempos em tempos, Nielsen faz uma análise sobre os principais erros de web design do ano. Ele fez isso em 1996, 2002, 2005, 2011, 2016 e agora, em 2021. Então, nós decidimos fazer a tradução desses 10 erros, trazendo também alguns comentários e exemplos sobre eles. Se você quiser assistir ao vídeo na íntegra, ele estará disponível no final deste artigo.

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Vamos lá?

Primeiro, Nielsen começa descrevendo o que é um “erro”. Basicamente, ele classifica erros de designs em: estúpidos, preguiçosos ou maliciosos/maldosos. Eu, particularmente, gosto mais da definição do Don Norman, pois ele abre um escopo maior para “erro”, criando duas categorias: as “escorregadas” e os “equívocos”.

Maldosos: claramente um equívoco e não uma escorregada

Quando a empresa, deliberadamente, faz algo ruim para os usuários. Aqui, por exemplo, cabem os famosos “dark patterns”. Se você não conhece esse termo, estamos falando de designs que foram feitos para induzir os usuários a fazerem coisas que são boas apenas para um lado.Um exemplo clássico são os modais invasivos oferecendo X% de desconto se você der seu e-mail ou número de telefone e para fechar esse modal, é necessário clicar em um botão “Não gosto de descontos” ao invés de simplesmente “fechar”.Um outro exemplo de design maldoso é a assinatura da Telecine Play: você se inscreve para um período grátis de 30 dias e depois não consegue cancelar a assinatura, sendo obrigado a pagar. Super fácil de assinar o período de testes, mas muito difícil para cancelar a assinatura e evitar pagamentos não desejados. Tsc tsc tsc…

Reclamações sobre a assinatura da Telecine Play

Design estúpido: uma escorregada clássica, cometida por várias empresas hoje em dia

Quando empresas pensam ter um site bom, mas não têm noção que estão fazendo algo que não agrada os usuários.

Design preguiçoso: escorregada também

Quando a empresa sabe que algo é ruim, mas escolhe não resolver e prioriza outras coisas.Sendo assim, a lista abaixo foi priorizada de acordo com dois critérios principais:

  • ser algo que incomoda e irrita usuários reais;
  • a recorrência do erro em vários websites.

Então, bora para a lista?

#10 - Design para celular em telas grandes

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Basicamente, um design que funciona muito bem no celular, mas não funciona no desktop e ainda assim é utilizado.Há alguns anos, tínhamos o problema oposto, e mesmo hoje, muitos designers ainda cometem este erro: desenhar em telas grandes e depois apertar todo o design para “caber” na tela menor. Contudo, atualmente o problema é o inverso: muitas interfaces estão sendo desenhadas para o celular e apenas “aumentadas” para caber no desktop.Um exemplo que Nielsen usou foi o menu “hambúrguer”: algo que funciona bem no celular, mas não no desktop, onde podemos trazer o menu já aberto pois temos muito mais espaço disponível.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 10 - design para celular em telas grandes

#9 - Apenas uma imagem grande acima da primeira rolagem de tela

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Você entra no site e tudo o que você vê é uma foto gigante. Ocupando a tela toda, criando uma ilusão de que não existe mais nada além daquilo. Alguns sites usam um botão ou um ícone para trazer um símbolo de que existe algo mais abaixo da rolagem, mas segundo Nielsen, isso é uma forma pobre de comunicar o que o site traz de valor/múltiplas opções para os usuários.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 9 - apenas uma imagem grande acima da primeira rolagem de tela

#8 - Mudança do layout enquanto a página carrega

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Um erro mais técnico e, recentemente, incluído nas guidelines do Google como uma forma de ter o seu site penalizado em SEO caso ocorra. Basicamente, Nielsen comenta sobre as páginas que se movimentam enquanto o site é carregado.Sabe quando você entra em um site, está lendo o texto e, de repente, o texto é empurrado para baixo pois um outro conteúdo é carregado na tela.Já existem várias formas simples de evitar isso. Uma delas é garantir que quando a página carrega, todos os elementos visuais que demoram mais para carregar já tenham seu tamanho “reservado” na tela. Nielsen comenta que todos os estudos de usabilidade mostram uma coisa em comum entre os usuários: eles são impacientes. Não vão esperar para ver um conteúdo, eles querem poder clicar rápido naquilo que desejam. Então, se no momento que vão realizar o clique, o site se move levando o usuário para uma área diferente da que gostaria… é super frustrante.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 8 - mudança do layout enquanto a página carrega

#7 - Ícones sem texto

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Fotos são ótimas. Textos são ótimos. A combinação dos dois é perfeita. Aqui, Nielsen aborda um problema que ainda acontece muito hoje em dia: ícones iguais para ações diferentes. Confundindo usuários. Tirando a previsibilidade de uma navegação. E o segundo problema: ícones difíceis de entender quando não existe um texto de apoio. Pessoas hesitam para clicar em algo que o significado não é claro.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 7 - ícones sem texto

#6 - Não poder selecionar, copiar e colar o texto

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Muitos sites de notícias fazem isso para evitar que pessoas copiem o conteúdo e colem em outro lugar. Este é um erro polêmico, mas super relevante. E vale mencionar que atualmente é impossível se blindar contra alguém poder tirar um conteúdo do seu site e utilizá-lo em outro lugar. Afinal, as câmeras dos telefones celulares já conseguem captar o texto de uma imagem…

#5 - Inputs inflexíveis

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Aqui, Nielsen fala da dificuldade de exigir que usuários insiram uma informação exatamente da forma que o sistema precisa e não necessariamente da forma mais fácil para o usuário.Por exemplo, campos de data de validade de cartão de crédito. Muitos sites solicitam que o campo seja preenchido usando a máscara “MM/AAAA” enquanto usuários gostariam de preencher “MM/AA” (M = mês / A = ano). Ou então, campos de cartão de crédito, números longos a serem digitados e que muitos sites não permitem que o usuário copie e cole o número no campo, obrigando-os a digitar devido a uma máscara no campo que funciona apenas com digitação.

#4 - Contraste baixo e textos pequenos

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Um problema peculiar tanto para usuários idosos quanto para jovens. “Não quero precisar apertar os olhos para ler um site.” Um problema ativo na lista por vários anos já e que continua algo a ser resolvido.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 4 - contraste baixo e textos pequenos

#3 - Links confusos e expectativas

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Um link é uma promessa. “Se você clicar aqui, você vai obter isso”. Essa promessa precisa ser cumprida de forma consistente. Pessoas pensam que vão obter uma coisa e obtém outra. Isso é frustrante.Por exemplo, pessoas clicam em um link esperando ver um vídeo e vêem um texto. Clicam em um link esperando fazer o download do conteúdo e são direcionadas para um cadastro grande. Isso é algo fácil de corrigir, já que basta trocar o texto do link em questão para ser mais declarativo e suprir a expectativa que foi gerada.

#2 - Baixo tempo de resposta

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Eu, particularmente, gostei muito de ver Nielsen inserir este erro no top 2, pois, muitas vezes, profissionais de UX não se preocupam com o tempo de carregamento. “Isso é algo para dev’s”. Infelizmente, essa é uma ação feita por dev’s, mas a responsabilidade é também da pessoa de UX. Aquela interface que foi muito bem nos testes e que resolve um problema não vai ter o mesmo impacto se demorar longos 2s, 4s, 5s ou até 10s (😱😱😱) para carregar.Nem todo mundo tem a conexão rápida que nós temos. Então, isso ainda precisa ser algo pensado para não impactar de forma negativa a experiência do usuário. Existem várias técnicas hoje, como, por exemplo, o lazy load.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 2 - baixo tempo de resposta

#1 - Pop-ups e overlays (no singular e plural)

Jakob Nielsen no vídeo no qual apresenta o top 10 erros de design em websites de 2021

Chato demaaaaaaais quando você entra em um site para ver um conteúdo e algo obstrui, entra no caminho daquilo que você quer ler.Esse é um erro que o Google também está penalizando no último update Google Page Experience (que você pode ler mais sobre em “O que é Google Page Experience: tudo o que você precisa saber sobre SEO & UX”). Entretanto, alguns overlays são necessários, como, por exemplo, LGPD. Porém, você não precisa mais abrir de forma invasiva. Existem diversas possibilidades para contornar este problema e ainda atingir o objetivo que você tinha com tal comunicação.

Top 10 erros de design em websites de 2021, por Jakob Nielsen: exemplo do erro 1 - pop-ups e overlays

Eu sempre faço uma provocação: coloque um evento no botão de fechar do seu pop up/overlay e verifique quantas vezes ele é clicado. Você vai se impressionar com o fato que a maioria das pessoas fecham sem nem ler. O benefício de ter uma mensagem não-invasiva no lugar, é que a pessoa pode:

  1. escolher se abre ou não;
  2. escolher se abre ou não no momento que achar oportuno. Normalmente, este tipo de interação uma vez fechado, some para sempre. Quando você tem um elemento menos invasivo, você pode o manter na tela fechado e a pessoa usando o seu site pode escolher se quer abrir e em qual momento da jornada.

Conclusão

No final, Nielsen aborda um tema muito importante: a maioria das pessoas não deixa um feedback, simplesmente sai e não volta. Não ligam para o seu site, simplesmente saem e acham outro melhor.Pensar nestas coisas básicas, entender bem e melhor de forma recorrente a necessidade das pessoas que visitam seu site/app, além de implementar soluções para tais necessidades, é a fórmula mágica do sucesso. Muito mais do que copiar o que os concorrentes estão fazendo. #FicaADica :DConfira, na íntegra, o vídeo de Jakob Nielsen sobre o top 10 erros de web-design de 2021: