Patrones oscuros: desentrañando el lado oscuro de la web

Nos encanta la red. ¡Todos hubiéramos tenido que encontrar diferentes carreras si no fuera por el increíble invento de Sir Tim Berners Lee! Sin embargo, a pesar de nuestra pasión, la web puede ser un lugar desagradable.

Los patrones oscuros pueden ser involuntarios. Un comercializador o desarrollador puede haber pensado que estaba haciendo lo correcto, pero no apreció los problemas y las desventajas de una función que implementó. Los peores patrones oscuros son intencionales. Una página lo engaña para que haga algo que no pretendía porque la interfaz de usuario o la redacción manipulan sus acciones. Los usuarios son cada vez más sabios con las técnicas más dudosas, pero alguien, en algún lugar, no se dará cuenta de que ha sido engañado hasta que sea demasiado tarde.

Cuando se usa bien, la web puede ahorrar tiempo, viajes y energía. Por otro lado, los patrones oscuros desperdician millones de horas de trabajo y kilovatios. No avergonzaremos a ningún sitio en particular (ellos saben quiénes son), pero ilustraremos mejoras y opciones alternativas cuando sea posible.

Estas son nuestras manías favoritas.

Interfaces de usuario poco intuitivas

Estos son los patrones oscuros más comunes con los que te encontrarás. Se necesita tiempo y consideración para crear una gran experiencia de usuario... y puedes estropear todo ese esfuerzo muy rápidamente con estos molestos patrones oscuros.

"¡Instala nuestra aplicación!"

Algunos sitios y redes sociales le solicitan que instale su aplicación, por lo general, al hacer clic en una alerta de correo electrónico sobre un nuevo mensaje o seguidor. El enlace se abre en una página web con dos botones:

1. Un gran botón "Usar nuestra aplicación". Al hacer clic en él, se accede a la AppStore, donde debe aprobar, descargar, instalar y luego iniciar la aplicación nativa del sitio (suponiendo que sea compatible con su teléfono). Luego debe iniciar sesión, obtener la contraseña incorrecta, solicitar un restablecimiento, abrir el enlace, crear una nueva contraseña y acceder al sistema. Es posible que haya olvidado por qué estaba allí, así que regrese a la alerta original y comience de nuevo.
2. Un enlace microscópico "continuar en la web móvil" para realizar la acción.

Tal vez la aplicación sea gloriosa y se hayan gastado millones en ella, pero es raro encontrar una con más funciones que el sitio web. Por supuesto, una aplicación puede recopilar más datos personales que un sistema web, por lo que recibe una promoción más intrusiva.

Promocione una aplicación por todos los medios, pero hacerlo al comienzo de cada interacción molesta a los usuarios. Algunos instalarán la aplicación para dejar de molestar, pero otros se irán. ¿Sería más efectivo ofrecer la aplicación cuando el usuario ha estado usando el sitio por un tiempo?

“¿Le Gustaría Recibir Notificaciones?”

En una palabra: no.

Las suscripciones a boletines, las notificaciones automáticas basadas en la web, los widgets de "chatemos" y las indicaciones de encuestas pueden ser útiles, pero sus implementaciones son universalmente horribles.

Los sitios a menudo le solicitan que se suscriba en el momento en que accede por primera vez después de una búsqueda en la web. En ese momento, no tiene idea de si el contenido es relevante, si es bueno o si el sitio es un lugar que consideraría visitar con frecuencia. No es sorprendente descubrir que la mayoría de las personas hacen clic en "No".

No tiene nada de malo ofrecer notificaciones o boletines, pero es mejor asegurarse de que un usuario se haya comprometido primero con el sitio. Tal vez muestre un mensaje al final del artículo o después de que lo hayan visitado varias veces. Es menos intrusivo, distrae menos y es más probable que tenga éxito.

Por último, ¡no solicite a los usuarios que se suscriban a un boletín cuando hagan clic en un enlace del boletín! Los ahuyentará más rápido de lo que los atraerá.

Navegación peculiar

Las barras de encabezado y los menús desplegables pueden ser aburridos, pero la gente los entiende. No queremos detener la evolución de la interfaz de usuario y la inventiva del diseño, pero algunos controles de navegación son extraños e ilógicos.

Reconsidere su diseño si necesita solicitar a los usuarios información sobre herramientas "haga clic aquí" u otros métodos de ayuda. Las buenas interfaces de usuario no necesitan explicación.

Scroll-jacking innecesario

Mostrar animaciones o actualizar elementos de menú activos cuando la página se desplaza puede ser una experiencia atractiva. Es menos útil cuando:

1. Las animaciones están sobreutilizadas. Animar demasiados elementos distrae al espectador: resaltar cada elemento significa que nada llama la atención del usuario. Unos cuantos efectos sutiles para centrarse en los mensajes importantes funcionan mejor.
2. Rompe el contexto. El desplazamiento no debe dar lugar a acciones inesperadas, como la desaparición de contenido, diálogos modales, envíos de formularios, redireccionamientos a otras páginas, etc.

La animación también puede causar mareos y vértigo, así que considere usar la consulta de medios CSS prefers-reduced-motion para deshabilitar los efectos.

¡Deje de crear páginas de desplazamiento infinito! Los enlaces a contenido relacionado son útiles, pero la carga automática de contenido aleatorio sin el consentimiento del usuario desperdicia ancho de banda. Hace que sea difícil marcar cualquiera de las páginas, por lo que es imposible llegar a los detalles de contacto y otra información en el pie de página.

Artículos de varias páginas innecesarios

Todos hemos visto "artículos" que contienen un párrafo de texto seguido de un enlace a la página siguiente. Estas páginas son generalmente un cebo de enlaces sin contenido sustancial, pero no lo descubrirá hasta que haya navegado a través de una multitud de anuncios e impresiones de páginas.

Pedirle a los especialistas en marketing web que detengan esta práctica es inútil, ¡pero tal vez lo reconsideren si los desarrolladores educan a las personas para que no sucumban a estas tonterías!

Marketing manipulador

La web es el mercado más grande del mundo, con capacidad para vender una variedad infinita de productos físicos y digitales. Los usuarios volverán una y otra vez... a menos que elija recurrir a patrones oscuros para impulsar las ventas.

Luchas de suscripción

Darse de baja de las notificaciones o boletines debería ser tan simple como suscribirse, si no más simple. Pedir a los usuarios que superen los obstáculos para darse de baja genera frustración y pérdida de fe en el sitio. No hay ninguna razón creíble para solicitar que los usuarios envíen por fax su certificado de nacimiento original, tres comprobantes de domicilio y los registros médicos más recientes.

Anuncios disfrazados

Los anuncios se usan en exceso en muchos sitios, pero los peores ejemplos:

1. Parecer un menú u opción;
2. Fingir ser noticias o artículos de información del sitio de origen; o
3. Muestre los controles de la interfaz de usuario, como un gran botón "DESCARGAR" en una página sobre un producto de software.

Los sitios no siempre pueden determinar qué diseño de anuncio se utiliza, pero sí controlan la ubicación. Colocar anuncios en lugares destacados para confundir a las personas puede aumentar los ingresos publicitarios, pero ¿volverán esos usuarios?

Adición automática de productos a los carros de la compra

Ver una lista de productos relacionados o recomendados puede ser útil. Añadirlos al carrito del usuario sin su consentimiento es otra cosa. ¿Cuántas personas lo encontrarán útil?

• En el mejor de los casos, una pequeña proporción de usuarios notará el elemento adicional y decidirá conservarlo.
• Una proporción mayor lo eliminará.
• Algunos no se darán cuenta hasta la entrega, luego se quejarán y exigirán un reembolso.

Estas actividades aumentan las ventas a expensas de la atención al cliente, la buena voluntad y las compras de devolución continuas. Tratar las quejas y los reembolsos puede compensar cualquier aumento de la rentabilidad a corto plazo.

Costos de compras ocultos

No es divertido perder el tiempo eligiendo un producto, registrándose, ingresando los detalles de entrega y publicando su información de pago para descubrir que el precio ha subido por encima de los sitios de la competencia. La página de resumen ahora muestra los costos ocultos, como la entrega, el seguro, el manejo y los cargos que esperamos que no note.

Los precios deben ser claros y honestos, o los clientes perderán la fe en el servicio de comercio electrónico. Cuando los costos de envío varían significativamente, solicite al usuario que ingrese su país o código postal antes de comprometerse a comprar.

Temporizadores artificiales de disponibilidad y escasez de existencias

Es útil saber cuándo un artículo está en stock, pero algunos sitios de comercio electrónico estiran la credibilidad. Cuanta más información dan, menos creíbles se vuelven:

"¡COMPRA AHORA! 2 artículos en stock, 15 fueron comprados en los últimos 3 minutos y 597 personas están viendo esta página”.

Estas tácticas de alta presión se vuelven más sospechosas cuando se aplican a artículos digitales o de alto valor, como automóviles y vacaciones.

Los usuarios pronto se dan cuenta de que estos mensajes no tienen valor cuando los artículos permanecen en stock durante muchos días. ¿Continuarán con su compra cuando no se pueda confiar en los mensajes de marketing del sitio?

Opt-Out Vergonzoso

Incluso ciertas grandes empresas de comercio electrónico se entregan a técnicas tontas de vergüenza. Presentarán una pregunta de registro seguida de un botón grande "Acepto" y un enlace de exclusión voluntaria más pequeño, como:

• "No, no quiero envío gratuito ilimitado".
• “No, no me importa la difícil situación de los animales peludos en peligro de extinción”.
• “No, quiero ver arder el planeta”.

¿Funciona esta práctica? Quizás. Pero, ¿establece una relación honesta con el cliente y aumenta la confianza en el sitio?

Cancelaciones de cookies complejas

El Reglamento General de Protección de Datos (GDPR) de la UE requiere que los sitios muestren un aviso de exclusión voluntaria para cookies no esenciales y tecnologías de seguimiento similares. Tiene fallas, pero la legislación tiene buenas intenciones y es un requisito legal en toda Europa. Otros países pueden tener reglas similares, aunque por lo general son menos estrictas.

La mayoría de los usuarios optarán por participar y seguirán adelante sin pensar (lo que anula en parte el objetivo de la legislación). Darse de baja debería ser igual de fácil, pero algunos sitios requieren que:

• hojear páginas/pestañas de jerga antes de encontrar las opciones;
• haga clic en docenas de casillas de verificación aunque esto infrinja las reglas de GDPR; y
• espere hasta un minuto mientras "guardan sus preferencias" (¿a qué?).

Puede persuadir a algunos usuarios para que presionen "aceptar todo", aunque otros abandonarán el sitio o cambiarán al modo de lectura para ocultar el aviso de cookies. En el mejor de los casos, dificultar la exclusión voluntaria da la impresión de que el sitio tiene algo que ocultar. En el peor de los casos, este patrón oscuro está al borde de la legalidad y podría generar multas o mayores costos de abogados.

Terrible tecnología

Las tecnologías como HTML son utilizables, accesibles y compatibles con versiones anteriores listas para usar. Se necesita un esfuerzo especial para desechar esos beneficios.

Rompiendo la funcionalidad del navegador

El botón Atrás fue la mayor contribución de la web a las interfaces de usuario. Es práctico y entendido por cualquier persona con experiencia técnica mínima. Sin embargo, los sitios lo rompen abriendo nuevas ventanas/pestañas, cerrando la página anterior o diciéndoles a los usuarios que no usen los controles del navegador.

No hay razones técnicas para romper la funcionalidad del navegador. Intentar eludir los controles es un problema de diseño que confunde a los usuarios y hace que un sistema web sea menos útil.

Otros problemas a evitar:

1. No deshabilite los menús de clic derecho o toque prolongado.
2. No deshabilite la copia ni agregue más texto "útil".
3. No rompa los marcadores en su aplicación de una sola página al no actualizar la URL.

Pero el peor de todos estos problemas es el siguiente en nuestra lista.

Deshabilitar Pegar en campos de contraseña

No es necesario deshabilitar pegar por ningún motivo. Deshabilitar pegar en un campo de contraseña es desagradable, pero encontrará esta restricción en sitios grandes; deberían saberlo mejor. Lo he visto empleado por los principales bancos internacionales.

La práctica probablemente se implemente por dudosas razones de seguridad. Si el usuario no puede pegar, es lógico que no pueda reutilizar una contraseña de otro lugar. Desafortunadamente, también evita que las personas usen una aplicación de administración de contraseñas. Ya no es posible generar cadenas aleatorias, largas y altamente seguras que no son prácticas de escribir.

Además, los desarrolladores pueden deshabilitar las restricciones de pegado con algunos retoques de DevTool. Otros tendrían dificultades y es más probable que usen contraseñas débiles. Nunca deshabilite pegar: es menos trabajo para usted y mejora la seguridad del sistema.

Restricciones de contraseña tontas

“Su contraseña debe tener entre 8 y 12 caracteres y requiere al menos un carácter en mayúscula, un número y un símbolo, pero no use ` ' ” / \ o ;”

No hay una buena razón para implementar restricciones estrictas de contraseñas. Pregúntese:

1. ¿El sistema almacena la contraseña como texto sin formato en una base de datos en lugar de codificarla?
2. ¿Ha sugerido un experto en seguridad evitar que las personas usen contraseñas fáciles como contraseña , qwerty o 123456 ? Esto es cierto, pero también evita que las personas usen contraseñas más complejas y proporciona una plantilla útil para el descifrado por fuerza bruta.

Una sola regla impone contraseñas seguras: una longitud mínima larga. Cada carácter adicional aumenta exponencialmente la complejidad y los tiempos de craqueo.

Salto de contenido móvil

Leer contenido en un teléfono inteligente puede ser una experiencia frustrante. Estás absorto en un artículo cuando el contenido salta fuera de la pantalla y pierdes tu lugar. Luego pasa varios segundos desplazándose frenéticamente hacia arriba y hacia abajo. O peor aún, hará clic en un enlace o botón en el momento en que se mueve y ocurre una acción inesperada. Algunos lectores perderán su impulso, se darán por vencidos y se irán antes de que pueda convertirlos en clientes.

El salto de contenido se produce cuando una imagen o iframe (normalmente un anuncio) se carga por encima del punto de desplazamiento de la ventana gráfica. Una vez que se ha cargado el contenido, el navegador puede determinar sus dimensiones y colocarlo en la página. Por lo tanto, una imagen de 500 px de altura (mostrada en tamaño completo) empuja el contenido hacia abajo en la misma cantidad.

La métrica Cumulative Layout Shift (CLS) de Google mide los saltos de contenido y penaliza a los sitios en consecuencia. Este fue un problema complejo, pero ahora hay varias soluciones técnicas disponibles:

• Agregue atributos de ancho y alto a los elementos HTML img e iframe o use la propiedad aspect-ratio CSS para reservar espacio en la página antes de que se cargue el recurso.
• Establezca dimensiones para los elementos del contenedor que encierran activos de carga más lenta, como anuncios, imágenes y widgets de redes sociales.
• Solicite imágenes más grandes lo antes posible y considere usar enlaces precargados en su head HTML.
• Optimice el uso de fuentes web y utilice alternativas de tamaño similar para minimizar los cambios de diseño.
• Evite insertar elementos hacia la parte superior de la página, a menos que se trate de una actualización de DOM que se active después de una acción del usuario, como un clic.
• Utilice la contención de CSS para optimizar la representación de bloques de contenido. Puede ser posible definir elementos que no afectarán el tamaño o la posición de los demás.

Cuando el inicio de sesión social apesta

Tecnologías como OAuth permiten a los usuarios registrarse rápidamente en un sitio utilizando otra cuenta como Google, Facebook, Twitter, LinkedIn o Github. Bien implementada, es una opción práctica que proporciona un proceso de registro más ágil, ahorra tiempo y conduce a mayores conversiones.

Si se implementa de manera deficiente, un sitio solicitará posteriormente que ingrese su correo electrónico, detalles personales e incluso una contraseña "para sus registros".

No todos los proveedores pasarán la información del usuario, así que evite OAuth si su sitio requiere que estos detalles funcionen. OAuth nunca debe convertirse en un paso innecesario que ralentice el proceso de registro.

Bajo rendimiento web

Según HTTP Archive, la página web promedio tarda siete segundos en cargarse en un dispositivo de escritorio y veinte segundos en un dispositivo móvil. Una sola vista de página realiza 70 solicitudes HTTP, descarga más de 2 MB de datos y emite 1,3 g de CO² a la atmósfera (consulte la Calculadora de carbono del sitio web). Este es un promedio: muchos sitios son peores.

Nadie se propone hacer un sitio lento, pero agregar funciones a menudo supera las mejoras de rendimiento. Dado que es posible crear un clon jugable de Quake en 13Kb, debe preguntarse por qué dos párrafos de waffle de marketing en una página "Acerca de nosotros" requieren una descarga 154 veces mayor.

Abordar el rendimiento requiere una combinación de técnicas, pero debe recordar solo un punto clave: ¡no envíe tantas cosas!

Widgets furtivos de redes sociales

Los widgets de las redes sociales, como los botones "Me gusta", parecen inocentes, pero:

1. Cada uno agrega cientos de kilobytes de código JavaScript que afecta el rendimiento de la página.
2. El código es un riesgo para la seguridad ya que se ejecuta con los mismos permisos que el JavaScript del sitio.
3. Los widgets implementan el seguimiento de usuarios incluso cuando no están activados. Esto podría conducir a problemas legales en algunos territorios.
4. Casi nadie los usa: tendrás la suerte de ver un 1% de participación de los usuarios.

Los widgets también son innecesarios. La mayoría de los sitios de redes sociales proporcionan enlaces estándar que conservan el uso compartido sin ningún riesgo para el rendimiento, la seguridad o la privacidad, p.

• Correo electrónico: 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]

Donde [url] es la URL de la página actual y [title] es el encabezado principal. Un vínculo <a> estándar funciona bien, pero puede mejorarlo para abrir la página en una ventana emergente si desea que se comporten de manera idéntica a los botones estándar.

CAPTCHA

CAPTCHA es la abreviatura de la prueba de Turing pública completamente automatizada para diferenciar a las computadoras de los humanos. Ayuda a evitar que los bots u otras máquinas accedan a los sistemas web. A menudo se le pide que ingrese el texto que se muestra en una imagen indescifrable o que haga clic en cuadrados que contienen bicicletas. (¿Cuenta una bicicleta montada en un automóvil? ¿Qué pasa con ese triciclo? ¿¡Hay una bicicleta detrás de esa pared!?)

Los CAPTCHA tienen tres problemas fundamentales:

1. Son deliberadamente difíciles para humanos no discapacitados con una visión perfecta. ¿Cómo se espera que se las arreglen las personas con discapacidades visuales o de otro tipo?
2. Tienen que volverse más complejos a medida que mejoran los bots y las técnicas de IA.
3. Colocan la responsabilidad de la seguridad de acceso en los usuarios, no en los propietarios o desarrolladores del sitio, los principales beneficiarios.

Los CAPTCHA son excesivos en la mayoría de los sitios web. Podría considerar opciones alternativas a los CAPTCHA que requieren menos esfuerzo humano:

• Los campos ocultos del honeypot bloquean el envío de formularios cuando los bots agregan datos.
• Compruebe que los eventos del teclado, como la input o la keydown de tecla, se activen correctamente.
• Compruebe el tiempo que lleva completar y enviar un formulario: la actividad del bot suele ser instantánea.
• Cree un proceso de envío de dos etapas que le pida al usuario que confirme sus datos o una pregunta adicional antes de enviar.

Estos detendrán a la mayoría de los bots. Es posible omitir cualquiera de las técnicas, pero requiere un esfuerzo de desarrollo adicional específico para su sitio. Pocos desarrolladores de bots se molestarán cuando haya miles de otros sitios con vulnerabilidades conocidas.

Resumen

La web es un gran lugar, pero algunas prácticas dudosas pueden arruinar esa percepción. Por supuesto, puede ser estafado en cualquier lugar, pero la web permite que los perpetradores lleguen a miles de personas con poco costo o esfuerzo. Y cuando las grandes empresas multimillonarias usan patrones oscuros de manera imprudente, ¡es francamente vergonzoso!

Los sitios usan patrones oscuros porque funcionan. Pero es un pensamiento a corto plazo. Los visitantes siempre se vuelven sabios con las técnicas nefastas y es posible que nunca regresen.

Haga lo correcto, genere confianza en su marca y retendrá a los clientes sin tener que recurrir a patrones oscuros.

¿Tienes alguna otra idea sobre patrones oscuros que hayas encontrado? ¡Por favor compártalos en la sección de comentarios a continuación!