Nós adoramos a web. Todos nós teríamos que encontrar carreiras diferentes se não fosse pela incrível invenção de Sir Tim Berners Lee! Apesar de nossa paixão, porém, a web pode ser um lugar desagradável.
O dark patterns ou padrões obscuros podem ser involuntários. Um comerciante ou desenvolvedor pode ter pensado que eles estavam fazendo a coisa certa, mas não apreciou os problemas e desvantagens de um recurso que eles implementaram. Os piores dark patterns são intencionais. Uma página o engana a fazer algo que você não pretendia, porque a UI ou a redação manipula suas ações. Os usuários são cada vez mais sábios com as técnicas mais duvidosas, mas alguém, em algum lugar, falhará em descobrir que foi enganado até que seja tarde demais.
Quando bem usada, a web pode economizar tempo, viagens e energia. Do outro lado, os dark patterns desperdiçam milhões de horas de trabalho e quilowatts. Não vamos envergonhar nenhum site em particular (eles sabem quem são), mas nós vamos ilustrar melhorias e opções alternativas onde for possível.
Estes são nossos bichinhos de estimação.
Interfaces de usuário não-intuitivas
Estes são os dark patterns mais comuns que você vai encontrar. É preciso tempo e consideração para criar uma grande experiência de usuário… e você pode estragar todo esse esforço muito rapidamente com esses dark patterns e intrusivos.
“Instale nosso aplicativo”!
Alguns sites e redes sociais pedem que você instale seu aplicativo – tipicamente ao clicar em um e-mail de alerta sobre uma nova mensagem ou um seguidor. O link se abre em uma página web com dois botões:
- Um enorme botão “Use o nosso aplicativo”. Clicando nele, você deve aprovar, baixar, instalar e então lançar o aplicativo nativo do site (presumindo que ele seja suportado em seu telefone). Você deve então entrar, errar a senha, solicitar um reset, abrir o link, criar uma nova senha e acessar o sistema. Você possivelmente esqueceu porque você estava lá, então volte para o alerta original e comece novamente.
- Um link microscópico “continuar na rede móvel” para realizar a ação.
Talvez o aplicativo seja glorioso e já teve milhões de gastos com ele, mas é raro encontrar um com mais funcionalidades do que o site. É claro, um aplicativo pode coletar mais dados pessoais do que um sistema web, então ele recebe uma promoção mais intrusiva.
Promover um aplicativo por todos os meios, mas fazer isso no início de cada interação irrita os usuários. Alguns instalarão o aplicativo para acabar com o incômodo, mas outros irão embora. Seria mais eficaz oferecer o aplicativo quando o usuário está usando o site há algum tempo?
“Você gostaria de receber notificações?”
Em uma palavra: Não.
Nesletter, notificações via web, widgets “vamos conversar” e prompts de pesquisa podem ser úteis, mas suas implementações são universalmente terríveis.
Os sites frequentemente o convidam a se inscrever no momento que você acessa pela primeira vez após uma busca na web. Nesse momento, você não tem idéia se o conteúdo é relevante, se é bom ou se o site está em algum lugar que você consideraria visitar frequentemente. Não é surpreendente descobrir que a maioria das pessoas clique em “Não”
Não há nada de errado em oferecer notificações ou boletins informativos, mas é melhor garantir que um usuário tenha se envolvido com o site primeiro. Talvez exibir um prompt no final do artigo ou depois de terem visitado algumas vezes. É menos intrusivo, menos distrativo e com maior probabilidade de sucesso.
Finalmente, por favor, não peça aos usuários que se inscrevam para receber uma newsletter quando clicarem em um link na newsletter! Isso irá afastá-los mais rápido do que irá atraí-los.
Navegação estranha
Barras de cabeçalho e menus suspensos podem ser enfadonhos, mas as pessoas os entendem. Nós não queremos parar a evolução da UI e a inventividade do design, mas alguns controles de navegação são estranhos e ilógicos.
Por favor, reconsidere o seu projeto se você precisar solicitar aos usuários com dicas de ferramentas “clique aqui” ou outros métodos de ajuda. Bons UI não precisam de explicação.
Rolagem com efeitos desnecessários
Mostrar animações ou atualizar itens do menu ativo quando a página rola pode ser uma experiência envolvente. É menos útil quando:
- As animações são usadas em excesso. A animação de muitos elementos distrai o espectador – destacar cada item significa que nada é trazido à atenção do usuário. Alguns efeitos sutis para focar em mensagens importantes funcionam melhor.
- Isso quebra o contexto. A rolagem não deve levar a ações inesperadas como o desaparecimento de conteúdo, diálogos modais, envios de formulários, redirecionamento para outras páginas, etc.
A animação também pode causar enjôo e vertigem, então considere o uso do CSS prefers-reduced-motion para desativar os efeitos.
Por favor, pare de criar páginas de rolagem infinita! Links para conteúdo relacionado são úteis, mas o carregamento automático de conteúdo aleatório sem o consentimento do usuário desperdiça largura de banda. Isso dificulta a marcação de qualquer página, tornando impossível alcançar os detalhes de contato e outras informações no rodapé da página.
Artigos desnecessários de várias páginas
Todos nós já vimos “artigos” que contêm um parágrafo de texto seguido por um link para a página seguinte. Estas páginas geralmente são iscas sem conteúdo substancial – mas você não vai descobrir isso até que você tenha passado por uma multidão de anúncios e impressões de páginas.
Pedir aos webmarketers para parar essa prática é inútil, mas talvez eles reconsiderem se os desenvolvedores educarem as pessoas para não sucumbir a esse absurdo!
Marketing manipulativo
A web é o maior mercado do mundo, com capacidade para vender uma infinita variedade de produtos físicos e digitais. Os usuários voltarão sempre… a menos que você escolha recorrer o dark patterns para impulsionar as vendas.
Luta de assinaturas
A desinscrição de notificações ou newsletters deve ser tão simples quanto assinar, se não mais simples. Pedir aos usuários para pular barreiras de cancelamento de assinatura leva à frustração e a uma perda de fé no site. Não há razão credível para solicitar que os usuários enviem por fax sua certidão de nascimento original, três comprovantes de endereço e os últimos registros médicos.
Anúncios disfarçados
Os anúncios são muito utilizados em muitos sites, mas os piores exemplos:
- Pareça um menu ou opção;
- Finja ser notícias ou artigos informativos do site de origem; ou
- Mostra controles de UI como um grande botão “DOWNLOAD” em uma página sobre um produto de software.
Os sites nem sempre podem determinar qual design de anúncio é usado, mas eles controlam a colocação. A colocação de anúncios em locais de destaque para confundir as pessoas pode aumentar as receitas de publicidade, mas será que esses usuários retornarão?
Adição automática de produtos ao carrinho de compra
Ver uma lista de produtos relacionados ou recomendados pode ser útil. Adicioná-los ao carrinho do usuário sem o seu consentimento é outra questão. Quantas pessoas o acharão útil?
- Na melhor das hipóteses, uma pequena proporção de usuários notará o item extra e decidirá mantê-lo.
- Uma proporção maior irá removê-lo.
- Alguns não notarão até a entrega, então reclamam e exigem um reembolso.
Essas atividades aumentam as vendas às custas do suporte ao cliente, da boa vontade e das compras de retorno contínuo. Lidar com reclamações e reembolsos pode compensar qualquer aumento na lucratividade a curto prazo.
Custos de compras ocultas
Não é agradável gastar tempo escolhendo um produto, inscrevendo-se, inserindo seus detalhes de entrega e postando suas informações de pagamento para descobrir que o preço subiu acima dos sites concorrentes. A página de resumo agora mostra custos ocultos, como entrega, seguro, manuseio – que não vamos perceber – esses custos.
Os preços devem ser claros e honestos, ou os clientes perderão a fé no serviço de eCommerce. Quando os custos de entrega variam significativamente, peça ao usuário para entrar em seu país ou código postal antes de se comprometer a comprar.
Temporizadores de escassez e disponibilidade de estoque artificial
É útil saber quando um item está em estoque, mas alguns sites de eCommerce esticam a credibilidade. Quanto mais informações eles dão, menos acreditáveis eles se tornam:
“COMPRE AGORA! 2 itens em estoque, 15 foram comprados nos últimos 3 minutos, e 597 pessoas estão vendo esta página”
Essas táticas de alta pressão se tornam mais suspeitas quando aplicadas a itens digitais ou de alto valor, como carros e férias.
Os usuários logo percebem que estas mensagens não valem nada quando os itens permanecem em estoque por muitos dias. Eles continuarão com suas compras quando as mensagens de marketing do site não puderem ser confiáveis?
Opt-Out Shaming
Mesmo certas grandes empresas de eCommerce se entregam a técnicas tolas de vergonha. Elas apresentarão uma pergunta de inscrição seguida por um grande botão “Concordo” e um link menor de auto-exclusão, como por exemplo:
- “Não – Eu não quero entrega gratuita ilimitada”
- “Não – Eu não me importo com a situação dos animais fofos em extinção”
- “Não – Eu quero ver o planeta arder”
Essa prática funciona? Talvez. Mas será que ela estabelece um relacionamento honesto com o cliente e aumenta a confiança no site?
Cancelamentos de cookies complexos
A Regulamentação Geral de Proteção de Dados da UE (GDPR) exige que os sites mostrem um aviso de exclusão para cookies não essenciais e tecnologias de rastreamento similares. É falho, mas a legislação é bem intencionada e uma exigência legal em toda a Europa. Outros países podem ter regras semelhantes, embora geralmente sejam menos rigorosas.
A maioria dos usuários optará por entrar e seguirá em frente sem pensar (o que em parte derrota o objetivo da legislação). Optar por sair deve ser igualmente fácil, mas alguns sites exigem que você:
- percorra através de páginas/tabs de jargão antes de encontrar as opções;
- clique em dezenas de caixas de seleção, mesmo que isso quebre as regras do GDPR; e
- espere até um minuto enquanto eles “guardam suas preferências” (para quê?).
Isso pode persuadir alguns usuários a “concordar com todos”, embora outros abandonem o site ou mudem para o modo de leitura para esconder o aviso de cookie. Na melhor das hipóteses, dificultar o opt-outs dá a impressão de que o site tem algo a esconder. Na pior das hipóteses, este dark patterns está à margem da legalidade e pode levar a multas ou aumento dos custos com advogados.
Tecnologia terrível
Tecnologias como o HTML são utilizáveis, acessíveis e compatíveis com o passado. É preciso um esforço especial para jogar fora esses benefícios.
Interrompe a funcionalidade do navegador
O botão voltar foi a maior contribuição da web para as interfaces do usuário. É prático e compreendido por qualquer pessoa com o mínimo de experiência técnica. No entanto, os sites o Interrompe novas janelas/tabs, expirando a página anterior, ou dizendo aos usuários para não usarem controles de navegador.
Não há razões técnicas para interromper a funcionalidade do navegador. Tentar contornar os controles é um problema de design que confunde os usuários e torna um sistema web menos utilizável.
Outros problemas a serem evitados:
- Não desative os menus de clique com o botão direito ou de longa duração.
- Não desative a cópia ou adicione mais textos “úteis”.
- Não interrompa os favoritos em seu aplicativo de página única não atualizando a URL.
Mas o pior de todos esses assuntos está no próximo passo da nossa lista.
Desabilitando a opção de colar nos campos de senha
Desabilitar a opção de colar por qualquer razão é desnecessário. Desabilitar a opção de colar em um campo de senha é desagradável, mas você encontrará esta restrição em sites grandes – eles devem saber melhor. Eu já vi isso ser empregado por grandes bancos internacionais.
A prática provavelmente é implementada por razões duvidosas de segurança. Se o usuário não puder colar, é lógico que ele não pode reutilizar uma senha de outro lugar. Infelizmente, isso também impede que as pessoas usem um aplicativo de gerenciador de senhas. Não é mais possível gerar cadeias de caracteres altamente seguras, longas e aleatórias que são impraticáveis de digitar.
Além disso, os desenvolvedores podem desativar as restrições de colar com alguns ajustes no DevTool. Outros teriam dificuldades, e são mais propensos a usar senhas fracas. Nunca desabilite a opção de colar – é menos trabalho para você e melhora a segurança do sistema.
Restrições tolas de senhas
Sua senha deve ter entre 8 e 12 caracteres e requer pelo menos um caractere em maiúsculo, um número e um símbolo – mas por favor não utilize ` ‘ ” ” / ou ;”
Não há uma boa razão para implementar restrições rígidas de senha. Pergunte a si mesmo:
- O sistema está armazenando a senha como texto simples em um banco de dados, ao invés de a ter em mãos?
- Um especialista em segurança sugeriu impedir que as pessoas usem senhas fáceis como senha, qwerty, ou 123456? Isto é verdade, mas também impede que as pessoas usem senhas mais complexas e fornece um modelo prático para Brute-Force-Cracking.
Uma única regra impõe senhas fortes: um comprimento longo. Cada caractere adicional aumenta exponencialmente a complexidade .
Salto de conteúdo em dispositivos móvel
A leitura de conteúdo em um smartphone pode ser uma experiência frustrante. Você fica absorto em um artigo quando o conteúdo salta da tela e você perde o seu lugar. Você então passa vários segundos rolando freneticamente para cima e para baixo. Ou pior, você clica em um link ou botão no momento em que ele se move, e uma ação inesperada ocorre. Alguns leitores perderão seu impulso, desistirão e sairão antes que você possa convertê-los a um cliente.
O salto de conteúdo ocorre quando uma imagem ou iframe (tipicamente um anúncio) é carregada acima do ponto de rolagem do viewport. Uma vez que o conteúdo é carregado, o navegador pode determinar suas dimensões e colocá-lo na página. Portanto, uma imagem de 500px de altura (mostrada em tamanho completo) empurra o conteúdo para baixo pela mesma quantidade.
O Cumulative Layout Shift (CLS) do Google mede os saltos de conteúdo e penaliza os sites de acordo. Este era um problema complexo, mas várias soluções técnicas estão agora disponíveis:
- Adicione atributos de largura e altura aos elementos HTML
imgeiframeou use a propriedade CSSaspect-ratiopara reservar espaço na página antes do carregamento dos ativos. - Defina dimensões para elementos de contêineres que contenham ativos de carregamento mais lento, tais como anúncios, imagens e widgets de mídia social.
- Solicite imagens maiores o mais cedo possível e considere o uso de links de pré-carga em seu HTML
head. - Otimize o uso de fontes da web e use fallbacks de tamanho semelhante para minimizar as mudanças de layout.
- Evite inserir elementos no topo da página a menos que seja uma atualização do DOM acionada após uma ação do usuário, como um clique.
- Use a contenção CSS para otimizar a renderização dos blocos de conteúdo. Pode ser possível definir elementos que não afetarão o tamanho ou a posição de outros.
Quando o sinal social é uma porcaria
Tecnologias como OAuth permitem que os usuários se registrem rapidamente em um site usando outra conta como Google, Facebook, Twitter, LinkedIn, ou Github. Implementado bem, é uma opção prática que fornece um processo de inscrição mais inteligente, economiza tempo e leva a conversões mais altas.
Se mal implementado, um site irá posteriormente exigir que você digite seu e-mail, seus dados pessoais e até mesmo uma senha “para seus registros”
Nem todos os provedores passarão informações do usuário, então evite o OAuth se o seu site exigir esses detalhes para ser funcional. O OAuth nunca deve se tornar um passo desnecessário que retarde o processo de registro.
Mau desempenho da Web
De acordo com o HTTP Archive, a página web demora em média sete segundos para carregar em um dispositivo desktop e vinte segundos em um celular. Uma única visualização de página faz 70 solicitações HTTP, baixa mais de 2MB de dados e emite 1,3g de CO² para a atmosfera (veja a Calculadora de Carbono).
Ninguém se propõe a fazer um site lento, mas adicionar recursos muitas vezes supera as melhorias de desempenho. Dado que é possível criar um clone de Quake jogável em 13Kb, você tem que questionar porque dois parágrafos de waffle de marketing em uma página “Sobre nós” requer um download que é 154 vezes maior!
O desempenho da abordagem requer uma combinação de técnicas, mas você precisa se lembrar de apenas um ponto-chave: não envie tantas coisas!
Widgets de mídia social enganosa
Os widgets de mídia social como botões “Like” parecem inocentes, mas:
- Cada um adiciona centenas de kilobytes de código JavaScript que impactam a performance da página.
- O código é um risco de segurança uma vez que roda com as mesmas permissões do JavaScript do site.
- Os widgets implementam o rastreamento do usuário mesmo quando eles não são ativados. Isto pode levar a problemas legais em alguns territórios.
- Quase ninguém os usa: você terá sorte de ver 1% de envolvimento do usuário.
Os widgets também são desnecessários. A maioria dos sites de mídia social fornece links padrão que retêm o compartilhamento sem qualquer risco ao desempenho, segurança ou privacidade, por exemplo
- Email
mailto:?subject=[title]&body=[url] - Facebook
https://www.facebook.com/sharer.php?u=[url] - Twitter
https://twitter.com/share?url=[url]&text=[title] - LinkedIn
https://www.linkedin.com/shareArticle?url=[url]&title=[title] - Reddit
https://reddit.com/submit?url=[url]&title=[title]
Onde [url] é a URL da página atual e [title] é o título principal. Um link padrão <a> funciona bem, mas você pode melhorá-lo para abrir a página em uma janela pop-up se você quiser que eles se comportem de forma idêntica aos botões padrão.
CAPTCHAs
CAPTCHA é a abreviação de Completely Automated Public Turing test to tell Computers and Humans Apart. Ele ajuda a evitar que bots ou outras máquinas acessem sistemas web. Você é frequentemente solicitado a digitar o texto mostrado em uma imagem indecifrável ou clicar em quadrados que contenham bicicletas. (Uma bicicleta montada em um carro conta? E quanto a esse triciclo? Existe uma bicicleta atrás daquela parede!?)
Os CAPTCHAs têm três problemas fundamentais:
- Eles são propositalmente difíceis para humanos não deficientes com visão perfeita. Como se espera que aqueles com deficiências visuais ou de outra natureza lidem com elas?
- Eles têm que se tornar mais complexos à medida que os bots e as técnicas de IA melhoram.
- Eles colocam o ônus da segurança de acesso sobre os usuários – não sobre os donos ou desenvolvedores do site, os principais beneficiários.
CAPTCHAs são exagerados na maioria dos web o envio de formulários quando bots adicionam dados.
- Verifique se os eventos do teclado, como
inputoukeydown, são acionados apropriadamente. - Verifique o tempo que leva para completar e enviar um formulário – a atividade do bot é muitas vezes instantânea.
- Crie um processo de envio em duas etapas que peça ao usuário para confirmar seus dados ou uma pergunta adicional antes de enviar.
Isto irá parar a maioria dos bots. É possível contornar qualquer uma das técnicas, mas isso requer um esforço adicional de desenvolvimento específico para o seu site. Poucos desenvolvedores de bot se incomodarão quando houver milhares de outros sites com vulnerabilidades conhecidas.
Resumo
A internet é um ótimo lugar, mas algumas práticas duvidosas podem arruinar essa percepção. Claro, você pode ser enganado em qualquer lugar, mas a internet permite que os criminosos cheguem a milhares de pessoas com pouco custo ou esforço. E quando grandes negócios multimilionários usam Dark Patterns de forma imprudente, é uma vergonha!
Os sites usam dark patterns ou padrões obscuros porque eles funcionam. Mas é um pensamento de curto prazo. Os visitantes sempre se tornam sábios às técnicas nefastas e podem nunca mais voltar.
Faça a coisa certa, construa confiança na sua marca e você reterá os clientes sem ter que recorrer ao Dark Patterns.
Tem alguma outra idéia sobre dark patterns ou padrões obscuros que você já encontrou? Por favor, compartilhe-os na seção de comentários abaixo!
Deixe um comentário