Nos encanta la web. Todos habríamos tenido que buscar otras 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 desventajas de una función que implementó. Los peores patrones oscuros son intencionados. Una página te engaña para que hagas algo que no pretendías porque la interfaz de usuario o la redacción manipulan tus acciones. Los usuarios son cada vez más conscientes de las técnicas más dudosas, sin embargo, alguien, en algún sitio, no se dará cuenta de que ha sido engañado hasta que sea demasiado tarde.
Cuando se utiliza 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.
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 echar a perder todo ese esfuerzo muy rápidamente con estos patrones oscuros molestos.
«¡Instala Nuestra Aplicación!»
Algunos sitios y redes sociales te piden que instales su aplicación, normalmente 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:
- Un enorme botón «Usa nuestra aplicación«. Al hacer clic en él, se accede a la AppStore, donde debes aprobar, descargar, instalar y lanzar la aplicación nativa del sitio (suponiendo que sea compatible con tu teléfono). A continuación, debes iniciar sesión, equivocarte con la contraseña, solicitar un restablecimiento, abrir el enlace, crear una nueva contraseña y acceder al sistema. Posiblemente, hayas olvidado por qué estabas allí, así que vuelve a la alerta original y empieza de nuevo.
- Un enlace microscópico de «continuar en la web móvil» para realizar la acción.
Puede que la aplicación sea gloriosa y que se hayan gastado millones en ella, pero es raro encontrar una con más funcionalidad que el sitio web. Por supuesto, una app puede recopilar más datos personales que un sistema web, por lo que recibe una promoción más intrusiva.
Promociona una app por todos los medios, no obstante hacerlo al principio de cada interacción molesta a los usuarios. Algunos instalarán la app para acabar con el fastidio, pero otros se irán. ¿Sería más eficaz ofrecer la app cuando el usuario lleve un tiempo utilizando el sitio?
«¿Te Gustaría Recibir Notificaciones?»
En una palabra: No.
Las inscripciones a boletines informativos, las notificaciones push basadas en la web, los widgets «chateemos» y los avisos de encuestas podrían ser útiles, pero sus implementaciones son universalmente horribles.
Los sitios web suelen pedirte que te suscribas en el momento en que accedes por primera vez tras una búsqueda en la web. En ese momento, no tienes ni idea de si el contenido es relevante, si es bueno o si el sitio es un lugar que considerarías visitar con frecuencia. No es sorprendente descubrir que la mayoría de la gente hace clic en «No».
No hay nada malo en ofrecer notificaciones o boletines informativos, pero es mejor asegurarse de que el usuario se ha comprometido con el sitio primero. Tal vez mostrar un aviso al final del artículo o después de que lo hayan visitado unas cuantas veces. Es menos intrusivo, distrae menos y tiene más posibilidades de éxito.
Por último, ¡no pidas a los usuarios que se inscriban en un boletín informativo cuando hagan clic en un enlace del mismo! Los alejará más rápido de lo que los atraerá.
Navegación Extravagante
Las barras de cabecera 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, sin embargo, algunos controles de navegación son extraños e ilógicos.
Por favor, reconsidera tu diseño si necesitas indicar a los usuarios que hagan «clic aquí» u otros métodos de ayuda. Las buenas interfaces de usuario no necesitan explicaciones.
Desplazamiento Innecesario
Mostrar animaciones o actualizar los elementos activos del menú cuando la página se desplaza puede ser una experiencia atractiva. Es menos útil cuando:
- Se abusa de las animaciones. Animar demasiados elementos distrae al espectador: resaltar cada elemento significa que no se llama la atención del usuario. Unos pocos efectos sutiles para centrarse en los mensajes importantes funcionan mejor.
- Rompe el contexto. El desplazamiento no debe provocar acciones inesperadas, como la desaparición del contenido, diálogos modales, envío de formularios, redireccionamientos a otras páginas, etc.
La animación también puede provocar mareos y vértigo, así que considera utilizar la consulta de medios CSS prefers-reduced-motion para desactivar los efectos.
Por favor, deja de crear páginas de desplazamiento infinito Los enlaces a contenidos relacionados son útiles, pero la autocarga de contenidos aleatorios sin el consentimiento del usuario desperdicia el ancho de banda. Además, dificulta la marcación de una u otra página, y hace imposible acceder a los datos de contacto y otra información en el pie de página.
Artículos Innecesarios de Varias Páginas
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, por lo general, un cebo de enlaces sin contenido sustancial, pero no lo descubrirás hasta que hayas vadeado una multitud de anuncios e impresiones de páginas.
Pedir a los vendedores de la web que abandonen esta práctica es inútil, pero quizás lo reconsideren si los desarrolladores educan a la gente para que no sucumba a esta tontería.
Marketing Manipulador
La web es el mayor mercado del mundo, con capacidad para vender una infinita variedad de productos físicos y digitales. Los usuarios volverán una y otra vez… a menos que decidas recurrir a patrones oscuros para impulsar las ventas.
Lucha por la Suscripción
Darse de baja de las notificaciones o boletines debería ser tan sencillo como suscribirse, si no más. Pedir a los usuarios que salten los obstáculos para darse de baja conduce a la frustración y a la pérdida de fe en el sitio. No hay ninguna razón creíble para pedir a los usuarios que envíen por fax su certificado de nacimiento original, tres pruebas de domicilio y el último historial médico.
Anuncios Disfrazados
Los anuncios se utilizan en exceso en muchos sitios, pero los peores ejemplos:
- Parecen un menú o una opción;
- Fingen ser noticias o artículos informativos del sitio de origen; o
- Muestran controles de interfaz de usuario, como un gran botón de «DESCARGA» en una página sobre un producto de software.
Los sitios no siempre pueden determinar el diseño de los anuncios, pero sí controlan su colocación. Colocar anuncios en lugares destacados para confundir a la gente puede aumentar los ingresos por publicidad, pero ¿volverán esos usuarios?
Añadir Automáticamente Productos a los Carritos 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 cuestión. ¿Cuántas personas lo encontrarán útil?
- En el mejor de los casos, una pequeña proporción de usuarios se dará cuenta del elemento extra y decidirá conservarlo.
- Una proporción mayor lo eliminará.
- Algunos no se darán cuenta hasta la entrega, y entonces se quejarán y exigirán un reembolso.
Estas actividades aumentan las ventas a costa de la asistencia al cliente, la buena voluntad y las devoluciones continuas. La gestión de las quejas y las devoluciones puede compensar cualquier aumento de la rentabilidad a corto plazo.
Costes de Compra Ocultos
No es agradable dedicar tiempo a elegir un producto, registrarte, introducir tus datos de entrega y publicar tu información de pago para descubrir que el precio ha subido por encima de los sitios de la competencia. La página de resumen muestra ahora los costes ocultos, como la entrega, el seguro, la manipulación y los gastos de «esperamos que no lo notes».
Los precios deben ser claros y honestos, o los clientes perderán la fe en el servicio de comercio electrónico. Cuando los gastos de envío varíen significativamente, pide al usuario que introduzca su país o código postal antes de comprometerse a comprar.
Escasez Artificial de Existencias y Temporizadores de Disponibilidad
Es útil saber cuándo hay existencias de un artículo, pero algunos sitios de comercio electrónico estiran la credibilidad. Cuanta más información dan, menos creíbles resultan:
«¡COMPRA AHORA! Hay 2 artículos en stock, se han comprado 15 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 coches y vacaciones.
Los usuarios pronto se dan cuenta de que estos mensajes carecen de valor cuando los artículos permanecen en stock durante muchos días. ¿Continuarán con su compra cuando los mensajes de marketing del sitio no son de confianza?
La Vergüenza de la Exclusión Voluntaria
Incluso algunas grandes empresas de comercio electrónico se entregan a técnicas tontas de «shaming». Presentan una pregunta de registro seguida de un gran botón de «Aceptar» y un enlace más pequeño de exclusión, como:
- «No – no quiero la entrega gratuita ilimitada»
- «No – No me importa la situación de los animales peludos en peligro de extinción»
- «No – sí quiero ver arder el planeta»
¿Funciona esta práctica? Tal vez. ¿Pero establece una relación honesta con el cliente y aumenta la confianza en el sitio?
Cancelaciones Complejas de Cookies
El Reglamento General de Protección de Datos (RGPD) de la UE exige que los sitios web muestren un aviso de cancelación de cookies no esenciales y tecnologías de seguimiento similares. Es defectuoso, pero la legislación tiene buenas intenciones y es un requisito legal en toda Europa. Otros países pueden tener normas similares, aunque suelen ser menos estrictas.
La mayoría de los usuarios se acogerán a la ley y seguirán adelante sin pensar (lo que en parte anula el objetivo de la legislación). Excluirse debería ser igual de fácil, pero algunos sitios lo exigen:
- navegar por páginas/pestañas de jerga antes de encontrar las opciones;
- pulsar docenas de casillas de verificación, aunque esto infrinja las normas del GDPR; y
- esperar hasta un minuto mientras «guardan tus preferencias» (¿a qué?).
Puede persuadir a algunos usuarios para que pulsen «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 dar lugar a multas o a un aumento de los costes de los abogados.
Tecnología Terrible
Las tecnologías como el HTML son utilizables, accesibles y retrocompatibles desde el principio. Hace falta un esfuerzo especial para desechar esas ventajas.
Romper la Funcionalidad del Navegador
El botón de retroceso fue la mayor contribución de la web a las interfaces de usuario. Es práctico y lo entiende cualquier persona con un mínimo de experiencia técnica. Sin embargo, los sitios lo rompen abriendo nuevas ventanas/pestañas, caducando la página anterior o diciendo a los usuarios que no utilicen 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 utilizable.
Otros problemas que hay que evitar:
- No desactives los menús de clic derecho o de pulsación larga.
- No deshabilitar la copia ni añadir más texto «útil«.
- No rompas los marcadores en tu Single Page App al no actualizar la URL.
Pero el peor de todos estos problemas es el siguiente de nuestra lista.
Desactivar el Pegado en los Campos de Contraseña
Desactivar el pegado por cualquier motivo es innecesario. Desactivar el pegado en un campo de contraseña es odioso, no obstante te encontrarás con esta restricción en sitios grandes, que deberían saberlo. Lo he visto en grandes bancos internacionales.
La práctica se aplica probablemente por dudosas razones de seguridad. Si el usuario no puede pegar, es lógico que no pueda reutilizar una contraseña de otro sitio. Por desgracia, también impide que la gente utilice una aplicación de gestión de contraseñas. Ya no es posible generar cadenas aleatorias, largas y muy seguras, que son poco prácticas de teclear.
Además, los desarrolladores pueden desactivar las restricciones de pegado con algunos retoques de DevTool. Otros tendrían dificultades, y es más probable que utilicen contraseñas débiles. Nunca desactives el pegado: es menos trabajo para ti y mejora la seguridad del sistema.
Restricciones de Contraseña Tontas
«Tu 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 por favor, no uses ` ‘ » / o ;»
No hay ninguna buena razón para aplicar restricciones estrictas a las contraseñas. Pregúntate a ti mismo:
- ¿El sistema almacena la contraseña como texto plano en una base de datos en lugar de hacer un hash?
- ¿Ha sugerido algún experto en seguridad que se impida a la gente utilizar contraseñas fáciles como password, qwerty o 123456? Esto es cierto, pero también impide que la gente utilice contraseñas más complejas y proporciona una plantilla útil para el cracking de fuerza bruta.
Una sola regla impone contraseñas fuertes: una longitud mínima larga. Cada carácter adicional aumenta exponencialmente la complejidad y los tiempos de crackeo.
Salto de Contenido en el Móvil
Leer contenido en un smartphone puede ser una experiencia frustrante. Estás absorto en un artículo cuando el contenido salta fuera de la pantalla, y pierdes tu sitio. Entonces pasas varios segundos desplazándote frenéticamente hacia arriba y hacia abajo. O lo que es peor, haces clic en un enlace o botón en el momento en que se mueve, y se produce una acción inesperada. Algunos lectores perderán el impulso, abandonarán y se irán antes de que puedas 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 cargado el contenido, el navegador puede determinar sus dimensiones y colocarlo en la página. Por lo tanto, una imagen de 500px de altura (mostrada a 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 era un problema complejo, pero ahora hay varias soluciones técnicas disponibles:
- Añade atributos de anchura y altura a los elementos HTML
imgyiframeo utiliza la propiedad CSSaspect-ratiopara reservar espacio en la página antes de que se cargue el activo. - Establece las dimensiones de los elementos contenedores que encierran activos de carga lenta, como anuncios, imágenes y widgets de redes sociales.
- Solicita imágenes más grandes lo antes posible y considera el uso de enlaces de precarga en tu HTML
head. - Optimiza el uso de las fuentes web y utiliza fallbacks de tamaño similar para minimizar los cambios de diseño.
- Evita insertar elementos hacia la parte superior de la página, a menos que se trate de una actualización del DOM desencadenada tras una acción del usuario, como un clic.
- Utiliza la contención CSS para optimizar la representación de los bloques de contenido. Es posible definir elementos que no afecten al tamaño o la posición de otros.
Cuando el Social Sign-On Apesta
Tecnologías como OAuth permiten a los usuarios registrarse rápidamente en un sitio utilizando otra cuenta como la de Google, Facebook, Twitter, LinkedIn o Github. Si se implementa bien, es una opción práctica que proporciona un proceso de registro más sencillo, ahorra tiempo y conduce a mayores conversiones.
Si se implementa mal, un sitio te pedirá posteriormente que introduzcas tu correo electrónico, tus datos personales e incluso una contraseña «para sus registros»
No todos los proveedores pasarán la información del usuario, así que evita OAuth si tu sitio requiere estos detalles para ser funcional. OAuth nunca debe convertirse en un paso innecesario que ralentice el proceso de registro.
Bajo Rendimiento de la Web
Según el Archivo HTTP, la página web media tarda siete segundos en cargarse en un dispositivo de escritorio y veinte segundos en el móvil. Una sola vista de la página hace 70 peticiones HTTP, descarga más de 2 MB de datos y emite 1,3 g de CO² a la atmósfera (ver la Calculadora de Carbono del Sitio Web). Esto es una media – muchos sitios son peores.
Nadie se propone hacer un sitio lento, pero la adición de funciones a menudo supera las mejoras de rendimiento. Teniendo en cuenta que es posible crear un clon jugable de Quake en 13Kb, hay que preguntarse por qué dos párrafos de palabrería comercial en una página «Sobre nosotros» requieren una descarga 154 veces mayor
Abordar el rendimiento requiere una combinación de técnicas, pero debes recordar un punto clave: ¡no envíes tantas cosas!
Widgets de Redes Sociales Furtivos
Los widgets de las redes sociales, como los botones «Me gusta«, parecen inocentes, pero:
- Cada uno de ellos añade cientos de kilobytes de código JavaScript que afectan al rendimiento de la página.
- El código es un riesgo para la seguridad, ya que se ejecuta con los mismos permisos que el JavaScript del sitio.
- Los widgets implementan el seguimiento del usuario incluso cuando no están activados. Esto podría dar lugar a problemas legales en algunos territorios.
- Casi nadie los utiliza: tendrás suerte si consigues 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 mantienen la posibilidad de compartir sin ningún riesgo para el rendimiento, la seguridad o la privacidad, por ejemplo:
- 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 título principal. Un enlace estándar <a> funciona bien, pero puedes mejorarlo para que abra la página en una ventana emergente si quieres que se comporten de forma idéntica a los botones estándar.
CAPTCHA
CAPTCHA es la abreviatura de Completely Automated Public Turing test to tell Computers and Humans Apart. Ayuda a evitar que los bots u otras máquinas accedan a los sistemas web. A menudo se te pide que introduzcas el texto que se muestra en una imagen indescifrable o que hagas clic en cuadros que contienen bicicletas. (¿Cuenta una bicicleta montada en un coche? ¿Y ese triciclo? ¿Hay una bicicleta detrás de ese muro?)
Los CAPTCHA tienen tres problemas fundamentales:
- Son difíciles a propósito para los humanos sin discapacidades y con una visión perfecta. ¿Cómo se espera que se las arreglen las personas con deficiencias visuales o de otro tipo?
- Tienen que ser más complejas a medida que los bots y las técnicas de IA mejoren.
- Hacen recaer la responsabilidad de la seguridad de acceso en los usuarios, y no en los propietarios o desarrolladores del sitio, que son los principales beneficiarios.
Los CAPTCHA son excesivos en la mayoría de los sitios web. Podrías considerar opciones alternativas a los CAPTCHA que supongan menos esfuerzo humano:
- Los campos honeypot ocultos bloquean el envío de formularios cuando los bots añaden datos.
- Comprueba que los eventos de teclado como
inputokeydownse activan adecuadamente. - Verifica el tiempo que se tarda en completar y enviar un formulario: la actividad de los bots suele ser instantánea.
- Crea un proceso de envío en dos fases que pida al usuario que confirme sus datos o una pregunta adicional antes de enviarlo.
Estas detendrán a la mayoría de los bots. Es posible eludir cualquiera de las técnicas, pero requiere un esfuerzo de desarrollo adicional específico para tu sitio. Pocos desarrolladores de bots se molestarán cuando haya otros miles de sitios con vulnerabilidades conocidas.
Resumen
La web es un lugar estupendo, pero unas pocas prácticas dudosas pueden arruinar esa percepción. Por supuesto, te pueden estafar en cualquier sitio, pero la web permite a los delincuentes llegar a miles de personas con poco coste o esfuerzo. Y cuando las grandes empresas multimillonarias utilizan patrones oscuros de forma imprudente, ¡es francamente vergonzoso!
Los sitios web utilizan patrones oscuros porque funcionan. Pero es un pensamiento a corto plazo. Los visitantes siempre se dan cuenta de las técnicas nefastas y puede que no vuelvan.
Haz lo correcto, genera confianza en tu marca y retendrás a los clientes sin tener que recurrir a patrones oscuros.
¿Tienes alguna otra idea sobre patrones oscuros que hayas encontrado? ¡Compártelas en la sección de comentarios más abajo!
Deja una respuesta