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.
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”.
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…
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.
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:
Então, bora para a lista?
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.
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.
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.
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.
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…
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.
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.
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.
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.
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.
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:
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:
