Si alguna vez se suscribió accidentalmente a una lista de correo electrónico, instaló un software que no deseaba o lo engañaron para que compartiera información personal innecesariamente, ya experimentó un patrón oscuro o una interfaz de usuario creada con fines malintencionados.
Uno de los ejemplos más notables de 2018 fue la aplicación MoviePass, que se encontraba en dificultades financieras, y que en agosto envió un mensaje a los usuarios para tratar de engañarlos para que cancelaran sus planes. Es un patrón oscuro. ¿Casillas de verificación confusas con doble negativo? patrón oscuro. ¿Términos ocultos sobre el servicio que nadie lee? patrón oscuro. Las indicaciones emocionales para mantenerlo suscrito a las listas de correo también califican como patrones oscuros, y debido a que a menudo son bastante rentables, aparecen nuevos trucos de UI (interfaz de usuario) todo el tiempo.
¿Por qué “patrones oscuros”?
El nombre que suena ominoso fue acuñado por el diseñador de UX Harry Brignull como una forma de hacer que las personas noten y recuerden la categoría más amplia de interfaces engañosas. La idea general es que el diseño del producto puede ayudar a los usuarios a navegar a través de las opciones de una manera clara y orgánica, o puede aprovechar el hecho de que los usuarios tienden a comportarse de acuerdo con patrones predecibles para que hagan cosas que no quieren.
Hojeamos las páginas web en lugar de leerlas, hacemos clic en el botón verde para decir sí y en el botón rojo para no, preferimos pagar una tarifa oculta que volver a pasar por caja y, en general, esperamos que las cosas sigan ciertas normas y estándares. . Aplicar estas expectativas a una interfaz bien diseñada nos ayuda a navegar por las cosas rápidamente, pero volvernos demasiado cómodos puede hacernos vulnerables a patrones oscuros.
Tipos de patrones oscuros
La página “oficial” (mantenida por Brignull) enumera doce tipos diferentes de patrones oscuros. Aquí hay algunos de los más comunes.
Cebo y cambio
Cuando te hacen creer que algo que haces tendrá un resultado diferente al que realmente tiene. Por ejemplo, durante parte de 2016, si hizo clic en el botón “X” en un recordatorio de actualización de Microsoft Windows 10, no finalizó, sino que comenzó a instalar la actualización.
Costos ocultos
Esto es lo que sucede cuando no puede ver el costo total de un producto hasta que ha trabajado lo suficiente como para que parezca más fácil pagar una “tarifa de conveniencia” o una tarifa de envío adicional al final que comenzar de nuevo.
.u654efaf180f70850fce1a87d2369e072, .u654efaf180f70850fce1a87d2369e072 .postImageUrl, .u654efaf180f70850fce1a87d2369e072 .centered-text-area {min-height: 80px; posición: relativa; } .u654efaf180f70850fce1a87d2369e072, .u654efaf180f70850fce1a87d2369e072: flotar, .u654efaf180f70850fce1a87d2369e072: visitado, .u654efaf180f707;2dfce03;a activo } .u654efaf180f70850fce1a87d2369e072 .clearfix: después de {contenido: “”; pantalla: mesa; Limpia los dos; } .u654efaf180f70850fce1a87d2369e072 {pantalla: bloque; transición: color de fondo 250ms; transición de webkit: color de fondo 250ms; ancho: 100%; opacidad: 0,95; transición: opacidad 250ms; webkit-transition: opacidad 250ms; color de fondo: # 9B59B6; sombra de caja: 0 1px 2px rgba (0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba (0, 0, 0, 0.17); -o-caja-sombra: 0 1px 2px rgba (0, 0, 0, 0.17); -webkit-caja-sombra: 0 1px 2px rgba (0, 0, 0, 0.17); } .u654efaf180f70850fce1a87d2369e072: activo, .u654efaf180f70850fce1a87d2369e072: hover {opacidad: 1; transición: opacidad 250ms; webkit-transition: opacidad 250ms; color de fondo: # 8E44AD; } .u654efaf180f70850fce1a87d2369e072 .centered-text-area {ancho: 100%; posición: relativa; } .u654efaf180f70850fce1a87d2369e072 .ctaText {borde inferior: 0 sólido #fff; color: #FFFFFF; tamaño de fuente: 16px; fuente-peso: negrita; margen: 0; relleno: 0; decoración de texto: subrayado; } .u654efaf180f70850fce1a87d2369e072 .postTitle {color: #FFFFFF; tamaño de fuente: 16px; peso de fuente: 600; margen: 0; relleno: 0; ancho: 100%; } .u654efaf180f70850fce1a87d2369e072 .ctaButton {color de fondo: # 8E44AD! importante; color: #FFFFFF; borde: ninguno; borde-radio: 3px; sombra de caja: ninguna; tamaño de fuente: 14px; fuente-peso: negrita; altura de línea: 26px; moz-border-radio: 3px; alineación de texto: centro; texto-decoración: ninguno; sombra de texto: ninguno; ancho: 80px; altura mínima: 80px; fondo: url (https://se.moyens.net/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png) sin repetición; posición: absoluta; derecha: 0; superior: 0; } .u654efaf180f70850fce1a87d2369e072: hover .ctaButton {color de fondo: # 9B59B6! importante; } .u654efaf180f70850fce1a87d2369e072 .centered-text {display: table; altura: 80px; relleno-izquierda: 18px; superior: 0; } .u654efaf180f70850fce1a87d2369e072 .u654efaf180f70850fce1a87d2369e072-content {display: table-cell; margen: 0; relleno: 0; relleno derecho: 108px; posición: relativa; alineación vertical: medio; ancho: 100%; } .u654efaf180f70850fce1a87d2369e072: después de {contenido: “”; bloqueo de pantalla; Limpia los dos; }
Confirmarvergüenza
Esto sucede cuando una empresa intenta “avergonzarte” para que hagas algo. Por ejemplo, si cancela su suscripción a una lista de correo electrónico, puede llegar a una página que dice “Vaya, ¿no nos gusta?”. Otra versión puede ser un anuncio de un programa de capacitación que le brinde la opción de “Registrarse” o “Mantenerse en forma”. Hay un blog entero dedicado a esto.
Anuncios disfrazados
¿Alguna vez ha hecho clic en un botón de descarga que no era un botón de descarga? ¿Un botón de reproducción que no era un botón de reproducción? Los anuncios disfrazados y los enlaces de descarga están en todas partes, especialmente en los sitios web donde se ofrecen cosas gratis.
Continuidad forzada
Los períodos de prueba gratuitos pueden hacer que algunos se suscriban a la calidad del producto, pero con mayor frecuencia, una vez que han recibido su tarjeta de crédito, solo esperan que se olvide de cancelar.
motel cucaracha
Es fácil entrar en esta situación pero difícil salir. Puede suscribirse a nuestro servicio en línea, pero debe entregar su notificación de terminación certificada en mano en nuestra sede de Nebraska. (Hotel California, ¿alguien? – Puedes irte cuando quieras, ¡pero nunca puedes irte!)
spam de amigos
¡Hola, te acabas de unir a nuestro sitio! ¿Qué tal si nos das acceso a tus contactos de correo electrónico para que puedas ver si tienes amigos aquí, y también podemos enviarles correos electrónicos con otras cosas? LinkedIn es el ejemplo real más conocido de esto, pero el estado de ánimo de trece millones de dólares que resultó puede haber reducido un poco sus ganancias.
dirección del error
Este casi ni siquiera es su propio patrón oscuro, ya que es parte de tantos otros. Juega con sus expectativas de cómo funcionarán las cosas, como usar un botón rojo para continuar y un botón verde para regresar, o usar otro patrón oscuro, como “Problemas engañosos”. “¿No desea darse de baja de nuestro programa de correo electrónico?”
Zuckering de privacidad
Sí, lleva el nombre de Mark Zuckerberg, y sí, es tan difícil de evitar como Facebook. Si bien algunos intentos de obtener sus datos son obvios (haga el cuestionario “¿Qué fabricante de automóviles debería anunciarse para usted?”), Pero gran parte de eso sucede porque no leyó los términos (que es una especie de oscuridad). patrón) y dio permiso para que sus datos sean distribuidos. Y realmente no puedes recuperarlo.
¿Cómo puedo evitarlos?
Actualmente, el cerebro humano contiene el único software que puede detectar y bloquear patrones oscuros de manera confiable, y la mejor manera de usarlo es mirar muchos ejemplos para saber qué buscar. El hashtag “#patrones oscuros” en Twitter es la forma más popular de denunciarlos, pero si eres más una persona de Reddit, hay un subreddit que muestra patrones oscuros y otros pecados de diseño. Siempre aparecen nuevas variedades, pero conocer los conceptos básicos te ayudará a entender cómo funcionan y cómo evitarlas.
.u32a4ca9714119e60417e309f909996b6, .u32a4ca9714119e60417e309f909996b6 .postImageUrl, .u32a4ca9714119e60417e309f909996b6 .centered-text-area {8min0px; posición: relativa; } .u32a4ca9714119e60417e309f909996b6, .u32a4ca9714119e60417e309f909996b6: hover, .u32a4ca9714119e60417e309f909996b6: visitado, .u32a4ca9714111197141111 } .u32a4ca9714119e60417e309f909996b6 .clearfix: después de {contenido: “”; pantalla: mesa; Limpia los dos; } .u32a4ca9714119e60417e309f909996b6 {pantalla: bloque; transición: color de fondo 250ms; transición de webkit: color de fondo 250ms; ancho: 100%; opacidad: 0,95; transición: opacidad 250ms; webkit-transition: opacidad 250ms; color de fondo: # 9B59B6; sombra de caja: 0 1px 2px rgba (0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba (0, 0, 0, 0.17); -o-caja-sombra: 0 1px 2px rgba (0, 0, 0, 0.17); -webkit-caja-sombra: 0 1px 2px rgba (0, 0, 0, 0.17); } .u32a4ca9714119e60417e309f909996b6: activo, .u32a4ca9714119e60417e309f909996b6: hover {opacidad: 1; transición: opacidad 250ms; webkit-transition: opacidad 250ms; color de fondo: # 8E44AD; } .u32a4ca9714119e60417e309f909996b6 .centered-text-area {ancho: 100%; posición: relativa; } .u32a4ca9714119e60417e309f909996b6 .ctaText {borde inferior: 0 sólido #fff; color: #FFFFFF; tamaño de fuente: 16px; fuente-peso: negrita; margen: 0; relleno: 0; decoración de texto: subrayado; } .u32a4ca9714119e60417e309f909996b6 .postTitle {color: #FFFFFF; tamaño de fuente: 16px; peso de fuente: 600; margen: 0; relleno: 0; ancho: 100%; } .u32a4ca9714119e60417e309f909996b6 .ctaButton {color de fondo: # 8E44AD! importante; color: #FFFFFF; borde: ninguno; borde-radio: 3px; sombra de caja: ninguna; tamaño de fuente: 14px; fuente-peso: negrita; altura de línea: 26px; moz-border-radio: 3px; alineación de texto: centro; texto-decoración: ninguno; sombra de texto: ninguno; ancho: 80px; altura mínima: 80px; fondo: url (https://se.moyens.net/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png) sin repetición; posición: absoluta; derecha: 0; superior: 0; } .u32a4ca9714119e60417e309f909996b6: hover .ctaButton {color de fondo: # 9B59B6! importante; } .u32a4ca9714119e60417e309f909996b6 .centered-text {pantalla: tabla; altura: 80px; relleno-izquierda: 18px; superior: 0; } .u32a4ca9714119e60417e309f909996b6 .u32a4ca9714119e60417e309f909996b6-content {display: table-cell; margen: 0; relleno: 0; relleno derecho: 108px; posición: relativa; alineación vertical: medio; ancho: 100%; } .u32a4ca9714119e60417e309f909996b6: después de {contenido: “”; bloqueo de pantalla; Limpia los dos; }
El lado oscuro tiene galletas.
Los patrones oscuros no son nada nuevo. Descuentos por presentación, tamaños de fuente engañosos en carteles, precios mal marcados en los estantes de las tiendas, recargos al comprar un auto nuevo: el arte de tratar de engañar a los usuarios para que tomen malas decisiones tiene una historia bastante impresionante. Con herramientas de seguimiento como las huellas dactilares del navegador, las cookies, el análisis de big data y las pruebas a/b en vivo, cada vez es más fácil para los diseñadores descubrir cómo dirigirse a los consumidores de manera efectiva. Las prácticas realmente fraudulentas pueden ser contrarias a la ley (se demanda a las empresas); sin embargo, si usted no lo hagas quiere no Opte por no participar en todos los patrones oscuros que intentan hacer que se arrepienta, puede hacer su parte para mejorar las interfaces de usuario a) no cayendo en los patrones oscuros yb) compartiéndolos con el mundo.
Crédito de la imagen: Dan Schlosser a través de Medium, Paul Hanaoka a través de Twitter
