Padrões sombrios: desvendando o lado obscuro da web

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.

Padrões escuros podem não ser intencionais. Um profissional de marketing ou desenvolvedor pode ter pensado que estava fazendo a coisa certa, mas não apreciou os problemas e as desvantagens de um recurso implementado. Os piores padrões escuros são intencionais. Uma página leva você a fazer algo que você não pretendia porque a interface do usuário ou o texto manipulam suas ações. Os usuários estão cada vez mais atentos às técnicas mais duvidosas, mas alguém, em algum lugar, não perceberá que foi enganado até que seja tarde demais.

Quando bem usada, a web pode economizar tempo, viagens e energia. Por outro lado, padrões escuros desperdiçam milhões de horas de trabalho e quilowatts. Não envergonharemos nenhum site em particular (eles sabem quem são), mas ilustraremos melhorias e opções alternativas sempre que possível.

Estas são as nossas implicâncias.

Interfaces de usuário não intuitivas

Estes são os padrões escuros mais comuns que você encontrará. É preciso tempo e consideração para criar uma ótima experiência do usuário… e você pode estragar todo esse esforço muito rapidamente com esses padrões escuros intrusivos.

“Instale nosso aplicativo!”

Alguns sites e redes sociais solicitam que você instale o aplicativo – normalmente ao clicar em um alerta de e-mail sobre uma nova mensagem ou seguidor. O link é aberto em uma página da Web com dois botões:

1. Um enorme botão "Usar nosso aplicativo". Clicar nele leva à AppStore, onde você deve aprovar, baixar, instalar e iniciar o aplicativo nativo do site (presumindo que seja compatível com seu telefone). Você deve então fazer login, errar a senha, solicitar uma redefinição, abrir o link, criar uma nova senha e acessar o sistema. Você possivelmente esqueceu por que estava lá, então volte para o alerta original e comece de novo.
2. Um link microscópico “continuar na web móvel” para realizar a ação.

Talvez o aplicativo seja glorioso e tenha gasto milhões nele, mas é raro encontrar um com mais funcionalidades do que o site. É claro que um aplicativo pode coletar mais dados pessoais do que um sistema web, por isso recebe uma promoção mais intrusiva.

Promova um aplicativo por todos os meios, mas fazê-lo no início de cada interação incomoda os usuários. Alguns instalarão o aplicativo para interromper a irritação, mas outros irão embora. Seria mais eficaz oferecer o aplicativo quando o usuário já usa o site há algum tempo?

“Gostaria de receber notificações?”

Em uma palavra: Não.

Inscrições em boletins informativos, notificações push baseadas na web, widgets “vamos conversar” e prompts de pesquisa podem ser úteis, mas suas implementações são universalmente ruins.

Os sites geralmente solicitam que você se inscreva no momento em que acessa pela primeira vez após uma pesquisa na web. Nesse ponto, você não tem ideia se o conteúdo é relevante, se é bom ou se o site está em algum lugar que você consideraria visitar com frequência. Não é surpreendente descobrir que a maioria das pessoas clica em “Não”.

Não há nada de errado em oferecer notificações ou boletins informativos, mas é melhor garantir que o usuário tenha se engajado com o site primeiro. Talvez exiba um prompt no final do artigo ou depois de visitá-lo algumas vezes. É menos intrusivo, menos perturbador e mais provável de ser bem-sucedido.

Por fim, não peça aos usuários que se inscrevam em um boletim informativo quando clicarem em um link no boletim informativo! Isso os afastará mais rápido do que os atrairá.

Navegação peculiar

Barras de cabeçalho e menus suspensos podem ser chatos, mas as pessoas os entendem. Não queremos parar a evolução da interface do usuário e a criatividade do design, mas alguns controles de navegação são estranhos e ilógicos.

Por favor, reconsidere seu design se precisar solicitar aos usuários dicas de ferramentas “clique aqui” ou outros métodos de ajuda. Boas interfaces de usuário não precisam de explicação.

Scroll-Jack desnecessário

Mostrar animações ou atualizar itens de menu ativos quando a página rola pode ser uma experiência envolvente. É menos útil quando:

1. Animações são usadas em excesso. Animar muitos elementos distrai o espectador – destacar cada item significa que nada chama a atenção do usuário. Alguns efeitos sutis para focar em mensagens importantes funcionam melhor.
2. Isso quebra o contexto. A rolagem não deve levar a ações inesperadas, como desaparecimento de conteúdo, diálogos modais, envios de formulários, redirecionamentos para outras páginas etc.

A animação também pode causar enjoo e vertigem, então considere usar a consulta de mídia 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, impossibilitando o acesso a detalhes de contato e outras informações no rodapé da página.

Artigos de várias páginas desnecessários

Todos nós já vimos “artigos” que contêm um parágrafo de texto seguido por um link para a próxima página. Essas páginas geralmente são iscas de link sem conteúdo substancial - mas você não descobrirá isso até ter percorrido uma infinidade de anúncios e impressões de página.

Pedir aos profissionais de marketing da web que parem com 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 retornarão de novo e de novo... a menos que você opte por recorrer a padrões sombrios para aumentar as vendas.

Lutas de assinatura

Cancelar a assinatura de notificações ou boletins informativos deve ser tão simples quanto assinar, se não mais simples. Pedir aos usuários que ultrapassem os obstáculos de cancelamento de assinatura leva à frustração e à 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 registros médicos mais recentes.

Anúncios disfarçados

Os anúncios são usados ​​em excesso em muitos sites, mas os piores exemplos:

1. Parece um menu ou opção;
2. Fingir ser notícias ou artigos de informação do site de origem; ou
3. Mostrar controles de interface do usuário, 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 controlam o posicionamento. Colocar anúncios em locais de destaque para confundir as pessoas pode aumentar as receitas de publicidade, mas esses usuários retornarão?

Adição automática de produtos aos carrinhos de compras

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 acharão útil?

• Na melhor das hipóteses, uma pequena proporção de usuários perceberá o item extra e decidirá mantê-lo.
• Uma proporção maior irá removê-lo.
• Alguns não notam até a entrega, depois reclamam e exigem um reembolso.

Essas atividades aumentam as vendas às custas de suporte ao cliente, boa vontade e compras de devolução contínuas. Lidar com reclamações e reembolsos pode compensar qualquer aumento de lucratividade a curto prazo.

Custos de compras ocultos

Não é agradável perder 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 e cobranças, esperamos que você não perceba.

Os preços devem ser claros e honestos, ou os clientes perderão a fé no serviço de comércio eletrônico. Quando os custos de entrega variam significativamente, solicite ao usuário que insira seu país ou código postal antes de se comprometer com a compra.

Temporizadores artificiais de escassez e disponibilidade de estoque

É útil saber quando um item está em estoque, mas alguns sites de comércio eletrônico aumentam a credibilidade. Quanto mais informações eles dão, menos críveis eles se tornam:

"COMPRE AGORA! 2 itens em estoque, 15 foram comprados nos últimos 3 minutos e 597 pessoas estão visualizando 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 essas mensagens são inúteis quando os itens permanecem em estoque por muitos dias. Eles continuarão com a compra quando as mensagens de marketing do site não forem confiáveis?

Vergonha de desativação

Mesmo certas grandes empresas de comércio eletrônico se entregam a técnicas tolas de vergonha. Eles apresentarão uma pergunta de inscrição seguida por um grande botão "Concordo" e um link de desativação menor, como:

• “Não, não quero entrega gratuita ilimitada.”
• “Não – eu não me importo com a situação dos animais fofos ameaçados de extinção.”
• “Não – eu quero ver o planeta queimar.”

Essa prática funciona? Talvez. Mas será que estabelece uma relação honesta com o cliente e aumenta a confiança no site?

Cancelamentos de cookies complexos

O Regulamento 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 semelhantes. É 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 aceitará e seguirá em frente sem pensar (o que anula parcialmente o objetivo da legislação). A desativação deve ser igualmente fácil, mas alguns sites exigem que você:

• percorrer páginas/abas de jargão antes de encontrar as opções;
• clique em dezenas de caixas de seleção, mesmo que isso viole as regras do GDPR; e
• espere até um minuto enquanto eles “salvam suas preferências” (para quê?).

Pode persuadir alguns usuários a clicar em “concordo com todos”, embora outros abandonem o site ou mudem para o modo de leitura para ocultar o aviso de cookies. Na melhor das hipóteses, dificultar a desativação dá a impressão de que o site tem algo a esconder. Na pior das hipóteses, esse padrão sombrio está à margem da legalidade e pode levar a multas ou aumento dos custos com advogados.

Tecnologia terrível

Tecnologias como HTML são utilizáveis, acessíveis e compatíveis com versões anteriores. É preciso um esforço especial para jogar fora esses benefícios.

Quebrando a funcionalidade do navegador

O botão Voltar foi a maior contribuição da web para interfaces de usuário. É prático e compreendido por qualquer pessoa com experiência técnica mínima. No entanto, os sites o quebram abrindo novas janelas/guias, expirando a página anterior ou dizendo aos usuários para não usarem os controles do navegador.

Não há motivos técnicos 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 evitar:

1. Não desative os menus de clique com o botão direito ou toque longo.
2. Não desative a cópia ou adicione mais texto “útil”.
3. Não interrompa os favoritos em seu aplicativo de página única ao não atualizar o URL.

Mas o pior de todos esses problemas é o próximo da nossa lista.

Desativando Colar em Campos de Senha

Desativar a colagem por qualquer motivo é desnecessário. Desativar a colagem em um campo de senha é desagradável, mas você encontrará essa restrição em sites grandes - eles devem saber melhor. Já o vi empregado por grandes bancos internacionais.

A prática é provavelmente implementada por motivos de segurança duvidosos. Se o usuário não puder colar, é lógico que ele não pode reutilizar uma senha de outro lugar. Infelizmente, também impede que as pessoas usem um aplicativo gerenciador de senhas. Não é mais possível gerar strings aleatórias, longas e altamente seguras que são impraticáveis ​​de digitar.

Além disso, os desenvolvedores podem desabilitar as restrições de colagem com alguns ajustes do DevTool. Outros teriam dificuldades e são mais propensos a usar senhas fracas. Nunca desative a colagem — é menos trabalhoso para você e melhora a segurança do sistema.

Restrições de senha bobas

“Sua senha deve ter entre 8 e 12 caracteres e requer pelo menos um caractere maiúsculo, um número e um símbolo — mas não use ` ' ” / \ ou ;”

Não há uma boa razão para implementar restrições estritas de senha. Pergunte a si mesmo:

1. O sistema está armazenando a senha como texto simples em um banco de dados em vez de fazer o hash?
2. Algum especialista em segurança sugeriu impedir as pessoas de usarem senhas fáceis, como senha , qwerty ou 123456 ? Isso é verdade, mas também impede que as pessoas usem senhas mais complexas e fornece um modelo útil para cracking de força bruta.

Uma única regra impõe senhas fortes: um comprimento mínimo longo. Cada caractere adicional aumenta exponencialmente a complexidade e os tempos de quebra.

Salto de conteúdo móvel

Ler conteúdo em um smartphone pode ser uma experiência frustrante. Você está absorto em um artigo quando o conteúdo sai 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ê clicará em um link ou botão no momento em que ele se mover e uma ação inesperada ocorrer. Alguns leitores perderão o ímpeto, desistirão e sairão antes que você possa convertê-los em clientes.

O salto de conteúdo ocorre quando uma imagem ou iframe (normalmente um anúncio) é carregado acima do ponto de rolagem da janela de visualização. Depois 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 real) empurra o conteúdo para baixo na mesma proporção.

A métrica 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 img e iframe do HTML ou use a propriedade aspect-ratio do CSS para reservar espaço na página antes que o ativo seja carregado.
• Defina dimensões para elementos de contêiner que incluam ativos de carregamento mais lento, como anúncios, imagens e widgets de mídia social.
• Solicite imagens maiores o quanto antes e considere usar links de pré-carregamento em seu head HTML.
• Otimize o uso de fontes da Web e use substitutos de tamanho semelhante para minimizar as mudanças de layout.
• Evite inserir elementos na parte superior 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 contenção CSS para otimizar a renderização de blocos de conteúdo. Pode ser possível definir elementos que não afetarão o dimensionamento ou a posição de outros.

Quando o login social é uma merda

Tecnologias como OAuth permitem que os usuários se registrem rapidamente em um site usando outra conta como Google, Facebook, Twitter, LinkedIn ou Github. Bem implementado, é uma opção prática que fornece um processo de inscrição mais ágil, economiza tempo e leva a conversões mais altas.

Se mal implementado, um site exigirá posteriormente que você insira seu e-mail, dados pessoais e até mesmo uma senha “para seus registros”.

Nem todos os provedores passarão informações do usuário, portanto, evite o OAuth se seu site exigir que esses detalhes sejam funcionais. OAuth nunca deve se tornar uma etapa desnecessária que atrasa o processo de registro.

Desempenho ruim da Web

De acordo com o HTTP Archive, a página da web média leva sete segundos para carregar em um dispositivo desktop e vinte segundos em um celular. Uma visualização de página única faz 70 solicitações HTTP, baixa mais de 2 MB de dados e emite 1,3 g de CO² na atmosfera (consulte o Website Carbon Calculator). Esta é uma média – muitos sites são piores.

Ninguém se propõe a fazer um site lento, mas a adição de recursos geralmente supera as melhorias de desempenho. Dado que é possível criar um clone jogável de Quake em 13Kb, você deve questionar por que dois parágrafos de waffle de marketing em uma página “Sobre nós” exigem um download 154 vezes maior!

Abordar o desempenho 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 sorrateiros

Widgets de mídia social, como botões “Curtir”, parecem inocentes, mas:

1. Cada um adiciona centenas de kilobytes de código JavaScript que afeta o desempenho da página.
2. O código é um risco de segurança, pois é executado com as mesmas permissões do JavaScript do site.
3. Os widgets implementam o rastreamento do usuário mesmo quando não estão ativados. Isso pode levar a problemas legais em alguns territórios.
4. Quase ninguém os usa: você terá sorte de ver 1% de engajamento do usuário.

Os widgets também são desnecessários. A maioria dos sites de mídia social fornece links padrão que mantêm o compartilhamento sem qualquer risco ao desempenho, segurança ou privacidade, por exemplo,

• E-mail: 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] é o URL da página atual e [title] é o cabeçalho principal. Um link padrão <a> funciona bem, mas você pode aprimorá-lo para abrir a página em uma janela pop-up se quiser que eles se comportem de forma idêntica aos botões padrão.

CAPTCHA

CAPTCHA é a abreviação de Teste de Turing Público Completamente Automatizado para diferenciar computadores e humanos. Ele ajuda a impedir que bots ou outras máquinas acessem sistemas web. Muitas vezes, você é solicitado a inserir o texto mostrado em uma imagem indecifrável ou clicar em quadrados que contêm bicicletas. (Uma bicicleta montada em um carro conta? E aquele triciclo? Há uma bicicleta atrás daquela parede!?)

CAPTCHAs têm três problemas fundamentais:

1. Eles são propositadamente difíceis para humanos não deficientes com visão perfeita. Como as pessoas com deficiências visuais ou outras devem lidar com isso?
2. Eles precisam se tornar mais complexos à medida que os bots e as técnicas de IA melhoram.
3. Eles colocam o ônus da segurança de acesso nos usuários – não nos proprietários ou desenvolvedores do site, os principais beneficiários.

CAPTCHAs são um exagero na maioria dos sites. Você pode considerar opções alternativas para CAPTCHAs que causam menos esforço humano:

• Campos de honeypot ocultos bloqueiam o envio de formulários quando os bots adicionam dados.
• Verifique se os eventos do teclado, como input ou tecla keydown , são acionados adequadamente.
• Verifique o tempo que leva para preencher e enviar um formulário — a atividade do bot geralmente é instantânea.
• Crie um processo de envio de duas etapas que solicite ao usuário que confirme seus dados ou uma pergunta adicional antes de enviar.

Estes irão parar a maioria dos bots. É possível ignorar qualquer uma das técnicas, mas isso requer um esforço de desenvolvimento adicional específico para seu site. Poucos desenvolvedores de bot se incomodarão quando houver milhares de outros sites com vulnerabilidades conhecidas.

Resumo

A web é um ótimo lugar, mas algumas práticas duvidosas podem arruinar essa percepção. Claro, você pode ser enganado em qualquer lugar, mas a web permite que os criminosos alcancem milhares de pessoas com pouco custo ou esforço. E quando grandes empresas multibilionárias usam padrões obscuros de forma imprudente, é absolutamente vergonhoso!

Os sites usam padrões escuros porque funcionam. Mas é um pensamento de curto prazo. Os visitantes sempre se tornam sábios para técnicas nefastas e podem nunca mais voltar.

Faça a coisa certa, construa confiança em sua marca e você reterá clientes sem ter que recorrer a padrões obscuros.

Tem alguma outra ideia sobre padrões escuros que você encontrou? Por favor, compartilhe-os na seção de comentários abaixo!