{"id":45790,"date":"2021-12-07T07:33:43","date_gmt":"2021-12-07T10:33:43","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=45790&preview=true&preview_id=45790"},"modified":"2025-02-07T10:43:25","modified_gmt":"2025-02-07T13:43:25","slug":"dark-patterns","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/dark-patterns\/","title":{"rendered":"Dark Patterns: Desvendando o Lado Sombrio da Web"},"content":{"rendered":"

N\u00f3s adoramos a web. Todos n\u00f3s ter\u00edamos que encontrar carreiras diferentes se n\u00e3o fosse pela incr\u00edvel inven\u00e7\u00e3o de Sir Tim Berners Lee! Apesar de nossa paix\u00e3o, por\u00e9m, a web pode ser um lugar desagrad\u00e1vel.<\/p>\n

O dark patterns ou padr\u00f5es obscuros podem ser involunt\u00e1rios. Um comerciante ou desenvolvedor pode ter pensado que eles estavam fazendo a coisa certa, mas n\u00e3o apreciou os problemas e desvantagens de um recurso que eles implementaram. Os piores dark patterns s\u00e3o intencionais. Uma p\u00e1gina o engana a fazer algo que voc\u00ea n\u00e3o pretendia, porque a UI ou a reda\u00e7\u00e3o manipula suas a\u00e7\u00f5es. Os usu\u00e1rios s\u00e3o cada vez mais s\u00e1bios com as t\u00e9cnicas mais duvidosas, mas algu\u00e9m, em algum lugar, falhar\u00e1 em descobrir que foi enganado at\u00e9 que seja tarde demais.<\/p>\n

Quando bem usada, a web pode economizar tempo, viagens e energia<\/a>. Do outro lado, os dark patterns desperdi\u00e7am milh\u00f5es de horas de trabalho e quilowatts. N\u00e3o vamos envergonhar nenhum site em particular (eles sabem quem s\u00e3o), mas n\u00f3s vamos ilustrar melhorias e op\u00e7\u00f5es alternativas onde for poss\u00edvel.<\/p>\n

Estes s\u00e3o nossos bichinhos de estima\u00e7\u00e3o.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Interfaces de usu\u00e1rio n\u00e3o-intuitivas<\/h2>\n

Estes s\u00e3o os dark patterns mais comuns que voc\u00ea vai encontrar. \u00c9 preciso tempo e considera\u00e7\u00e3o para criar uma grande experi\u00eancia de usu\u00e1rio… e voc\u00ea pode estragar todo esse esfor\u00e7o muito rapidamente com esses dark patterns e intrusivos.<\/p>\n

“Instale nosso aplicativo”!<\/h3>\n

Alguns sites e redes sociais pedem que voc\u00ea 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\u00e1gina web com dois bot\u00f5es:<\/p>\n

    \n
  1. Um enorme bot\u00e3o “Use o nosso aplicativo”. Clicando nele, voc\u00ea deve aprovar, baixar, instalar e ent\u00e3o lan\u00e7ar o aplicativo nativo do site (presumindo que ele seja suportado em seu telefone). Voc\u00ea deve ent\u00e3o entrar, errar a senha, solicitar um reset, abrir o link, criar uma nova senha e acessar o sistema. Voc\u00ea possivelmente esqueceu porque voc\u00ea estava l\u00e1, ent\u00e3o volte para o alerta original e comece novamente.<\/li>\n
  2. Um link microsc\u00f3pico “continuar na rede m\u00f3vel” para realizar a a\u00e7\u00e3o.<\/li>\n<\/ol>\n
    \"N\u00e3o,
    N\u00e3o, obrigado – Eu n\u00e3o preciso do seu aplicativo!<\/figcaption><\/figure>\n

    Talvez o aplicativo seja glorioso e j\u00e1 teve milh\u00f5es de gastos com ele, mas \u00e9 raro encontrar um com mais funcionalidades do que o site. \u00c9 claro, um aplicativo pode coletar mais dados pessoais do que um sistema web, ent\u00e3o ele recebe uma promo\u00e7\u00e3o mais intrusiva.<\/p>\n

    Promover um aplicativo por todos os meios, mas fazer isso no in\u00edcio de cada intera\u00e7\u00e3o irrita os usu\u00e1rios. Alguns instalar\u00e3o o aplicativo para acabar com o inc\u00f4modo, mas outros ir\u00e3o embora. Seria mais eficaz oferecer o aplicativo quando o usu\u00e1rio est\u00e1 usando o site h\u00e1 algum tempo?<\/p>\n

    “Voc\u00ea gostaria de receber notifica\u00e7\u00f5es?”<\/h3>\n

    Em uma palavra: N\u00e3o.<\/p>\n

    Algu\u00e9m j\u00e1 clicou em “Allow”?<\/figcaption><\/figure>\n

    Nesletter, notifica\u00e7\u00f5es<\/a> via web, widgets “vamos conversar”<\/a> e prompts de pesquisa<\/a> podem<\/em> ser \u00fateis, mas suas implementa\u00e7\u00f5es s\u00e3o universalmente terr\u00edveis.<\/p>\n

    Os sites frequentemente o convidam a se inscrever no momento que voc\u00ea acessa pela primeira vez ap\u00f3s uma busca na web. Nesse momento, voc\u00ea n\u00e3o tem id\u00e9ia se o conte\u00fado \u00e9 relevante, se \u00e9 bom ou se o site est\u00e1 em algum lugar que voc\u00ea consideraria visitar frequentemente. N\u00e3o \u00e9 surpreendente descobrir que a maioria das pessoas clique em “N\u00e3o”<\/p>\n

    N\u00e3o h\u00e1 nada de errado em oferecer notifica\u00e7\u00f5es ou boletins informativos, mas \u00e9 melhor garantir que um usu\u00e1rio tenha se envolvido com o site primeiro. Talvez exibir um prompt no final do artigo ou depois de terem visitado algumas vezes. \u00c9 menos intrusivo, menos distrativo e com maior probabilidade de sucesso.<\/p>\n

    Finalmente, por favor, n\u00e3o pe\u00e7a aos usu\u00e1rios que se inscrevam para receber uma newsletter quando clicarem em um link na newsletter! Isso ir\u00e1 afast\u00e1-los mais r\u00e1pido do que ir\u00e1 atra\u00ed-los.<\/p>\n

    Navega\u00e7\u00e3o estranha<\/h3>\n

    Barras de cabe\u00e7alho e menus suspensos podem ser enfadonhos, mas as pessoas os entendem. N\u00f3s n\u00e3o queremos parar a evolu\u00e7\u00e3o da UI e a inventividade do design, mas alguns controles de navega\u00e7\u00e3o<\/a> s\u00e3o estranhos e il\u00f3gicos.<\/p>\n

    Por favor, reconsidere o seu projeto se voc\u00ea precisar solicitar aos usu\u00e1rios com dicas de ferramentas “clique aqui” ou outros m\u00e9todos de ajuda. Bons UI n\u00e3o precisam de explica\u00e7\u00e3o.<\/p>\n

    Rolagem com efeitos desnecess\u00e1rios<\/h3>\n

    Mostrar anima\u00e7\u00f5es ou atualizar itens do menu ativo quando a p\u00e1gina rola pode ser uma experi\u00eancia envolvente. \u00c9 menos \u00fatil quando:<\/p>\n

      \n
    1. As anima\u00e7\u00f5es s\u00e3o usadas em excesso. A anima\u00e7\u00e3o de muitos elementos distrai o espectador – destacar cada item significa que nada \u00e9 trazido \u00e0 aten\u00e7\u00e3o do usu\u00e1rio. Alguns efeitos sutis para focar em mensagens importantes funcionam melhor.<\/li>\n
    2. Isso quebra o contexto. A rolagem n\u00e3o deve levar a a\u00e7\u00f5es inesperadas como o desaparecimento de conte\u00fado, di\u00e1logos modais, envios de formul\u00e1rios, redirecionamento para outras p\u00e1ginas, etc.<\/li>\n<\/ol>\n

      A anima\u00e7\u00e3o tamb\u00e9m pode causar enj\u00f4o e vertigem, ent\u00e3o considere o uso do CSS prefers-reduced-motion<\/code> para desativar os efeitos.<\/p>\n

      Por favor, pare de criar p\u00e1ginas de rolagem infinita! Links para conte\u00fado relacionado s\u00e3o \u00fateis, mas o carregamento autom\u00e1tico de conte\u00fado aleat\u00f3rio sem o consentimento do usu\u00e1rio desperdi\u00e7a largura de banda. Isso dificulta a marca\u00e7\u00e3o de qualquer p\u00e1gina, tornando imposs\u00edvel alcan\u00e7ar os detalhes de contato e outras informa\u00e7\u00f5es no rodap\u00e9 da p\u00e1gina.<\/p>\n

      Artigos desnecess\u00e1rios de v\u00e1rias p\u00e1ginas<\/h3>\n

      Todos n\u00f3s j\u00e1 vimos “artigos” que cont\u00eam um par\u00e1grafo de texto seguido por um link para a p\u00e1gina seguinte. Estas p\u00e1ginas geralmente s\u00e3o iscas sem conte\u00fado substancial – mas voc\u00ea n\u00e3o vai descobrir isso at\u00e9 que voc\u00ea tenha passado por uma multid\u00e3o de an\u00fancios e impress\u00f5es de p\u00e1ginas.<\/p>\n

      Pedir aos webmarketers para parar essa pr\u00e1tica \u00e9 in\u00fatil, mas talvez eles reconsiderem se os desenvolvedores educarem as pessoas para n\u00e3o sucumbir a esse absurdo!<\/p>\n

      Marketing manipulativo<\/h2>\n

      A web \u00e9 o maior mercado do mundo, com capacidade para vender uma infinita variedade de produtos f\u00edsicos e digitais. Os usu\u00e1rios voltar\u00e3o sempre… a menos que voc\u00ea escolha recorrer o dark patterns para impulsionar as vendas.<\/p>\n

      Luta de assinaturas<\/h3>\n

      A desinscri\u00e7\u00e3o de notifica\u00e7\u00f5es ou newsletters deve ser t\u00e3o simples quanto assinar, se n\u00e3o mais simples. Pedir aos usu\u00e1rios para pular barreiras de cancelamento de assinatura leva \u00e0 frustra\u00e7\u00e3o e a uma perda de f\u00e9 no site. N\u00e3o h\u00e1 raz\u00e3o cred\u00edvel para solicitar que os usu\u00e1rios enviem por fax sua certid\u00e3o de nascimento original, tr\u00eas comprovantes de endere\u00e7o e os \u00faltimos registros m\u00e9dicos.<\/p>\n

      An\u00fancios disfar\u00e7ados<\/h3>\n

      Os an\u00fancios s\u00e3o muito utilizados em muitos sites, mas os piores exemplos:<\/p>\n

        \n
      1. Pare\u00e7a um menu ou op\u00e7\u00e3o;<\/li>\n
      2. Finja ser not\u00edcias ou artigos informativos do site de origem; ou<\/li>\n
      3. Mostra controles de UI como um grande bot\u00e3o “DOWNLOAD” em uma p\u00e1gina sobre um produto de software.<\/li>\n<\/ol>\n
        \"Um
        Um an\u00fancio em um site de download, que o afasta do download real.<\/figcaption><\/figure>\n

        Os sites nem sempre podem determinar qual design de an\u00fancio \u00e9 usado, mas eles controlam a coloca\u00e7\u00e3o. A coloca\u00e7\u00e3o de an\u00fancios em locais de destaque para confundir as pessoas pode aumentar as receitas de publicidade, mas ser\u00e1 que esses usu\u00e1rios retornar\u00e3o?<\/p>\n

        Adi\u00e7\u00e3o autom\u00e1tica de produtos ao carrinho de compra<\/h3>\n

        Ver uma lista de produtos relacionados ou recomendados pode ser \u00fatil. Adicion\u00e1-los ao carrinho do usu\u00e1rio sem o seu consentimento \u00e9 outra quest\u00e3o. Quantas pessoas o achar\u00e3o \u00fatil?<\/p>\n