Hay muchos sitios similares al ejemplo de la clase y algunos son más éticos con sus botones de descarga. Yo daría espacio en una side bar a todo el contenido que es anuncio y promocional para dejar un botón limpio de descarga y eliminaría muchos elementos que confunden al usuario. Así intentaría usar anuncios más atractivos en la side bar y daría una experiencia más agradable al usuario.
Introducción
Presentación y bienvenida
¿Qué son los dark patterns y por qué debemos evitarlos?
Dark patterns más comunes
Dark patterns en e-commerce
Dark patterns en el UX Writing
Dark patterns en modelos de suscripción
Dark patterns en publicidad y marketing
Dark patterns en el diseño de interacción
Despedida y cierre
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What are dark patterns in interaction design?
Interaction design, an essential discipline for creating effective user experiences, looks at how products and users respond to each other. However, there is a lesser-known aspect: dark patterns. These are strategies designed to direct user behavior toward specific actions, often confusing the user. Thus, designers sometimes employ two main tactics: bait-and-switch, and distraction.
How is bait-and-switch used in interaction design?
The bait-and-switch pattern originates when a design leads the user to perform a different action than expected. Often a sense of manipulation is generated, as the user is faced with an unwanted choice. An example is the website "Libros Gratis VIP". When trying to download a book such as "Game of Thrones", the user is redirected to an advertisement instead of the desired file, which can be solved by indicating that it is an advertisement with the label "AD" (Advertisement).
Another example is LinkedIn, where when attempting to access premium features, the user is invited to a one-month free trial. Although the button makes it clear that it is a free trial, moving forward, options to switch to Premium are presented, which may subconsciously induce an unintended subscription. Clarity and transparency in these buttons could mitigate this situation.
How do you implement distraction in design?
Distraction in interaction design focuses the user's attention on one element, diverting it away from another. This is usually achieved by highlighting one option so that the alternative goes unnoticed. An example is found on the LATAM Airlines ticket purchase page, where the seat selection service with additional cost is a secondary element that is not highlighted.
One solution would be to incorporate clear and visible buttons on the seat options. For example, a "do not choose seats" button should specify that there is no cost, accompanied by another "choose later" option, both visible to the user.
A positive example is the Azul Airlines site, which gives users the freedom to decide by clearly displaying fares and avoiding pre-set selections. This emphasizes transparency and trust in the purchasing process.
How to avoid falling into dark patterns?
To prevent dark patterns, it is essential to:
- Be clear and transparent: Clearly state whether an option involves cost and detail the actions that a click will trigger.
- Play fair in the interaction: Always show all options in a fair and accessible way.
- Respect the user's informed decision: Ensure that the user understands all possibilities before making a decision.
Discovering and understanding these obscure practices can transform the way we experience and design digital products. Incorporate these principles into your ongoing learning and contribute to a more ethical and accessible digital environment. Do you have personal examples or ideas for improvement? Share and learn as a community.
Contributions 18
Questions 1
Sort by:
**Dark patterns en el diseño de interacción **
Cebo y Cambio : Cuando quieres hacer una acción determinada pero ocurre otra cosa diferente e indeseable.
Distracción ; El diseño centra la atención a propósito en un elemento para distraerte de otro.
Generalmente se consigue premarcando o resaltando una de las opciones que se deben seleccionar.
Les comparto un ejemplo de distracción. Mi primera opción como usuaria seria la tarifa XS, pero le dan jerarquía a los otros planes, los preseleccionan y XS que es el que quisiera seleccionar lo esconden below the fold.
Para mi el diseño de interacción de la aplicación de Pedidos Ya la parte de aplicar cupones tiene una interacción bastante confusa y tediosa incluso engañosa, tratando de aplicar un cupón terminas completando un pedido.
Para solucionarlo
-Primero notificaría al usuario si su cupón es valido para la compra que esta realizando
-Segundo preguntaría al usuario si quiere aplicar el cupón antes de pagar, actualizaría el precio
y le daría la opción de remover el cupón si es que el usuario se arrepintiera
Sin que esto afecte al estado de su compra actual
-Tercero en caso el usuario tenga un código de descuento dejaría esta opción antes de proceder con el pago, que no este escondido y sea simple de aplicar
¿Tienes un cupón?
[ Introdúcelo aquí 👉 ___________ ][Aplicar]
Precio 2.99 $
Cupón 0.88 $ ❌(retirar)
Precio Final 2.11 $
[Cancelar pedido]
****[Finalizar pedido] ****
Creo que la mayoria de los sitios de aerolineas tienen un checkout basandose en dark pattern. Ademas tienen una publicidad agresiva de “comprame” o “vuelo redondo de $100” y despues en letras chicas vienen los terminos y condiciones:))
Parece que Adobe ha redefinido esto de los patrones oscuros.
No puedes actualizar la aplicacion que estas usando en tu plan basico gratuito a menos de que aceptes el periodo de prueba y canceles antes de proceder al cobro.
Pero no puedes cancelar en este mismo momento que te acabas de suscribir, nuestros sistemas estan muy ocupados.
Otra mala práctica es cuando hay una fotografía de mucho impacto y la quieres ver, la miras como dos segundos ¡y la foto se convierte en un anuncio!!.. luego ya no la puedes ver sino hasta refrescar la pagína o ir y regresar. Y la ves, igual, como dos segundos más… Muy desagradable esa experiencia.
Dark patterns en el diseño de interacción
-
Cebo y cambio: Cuando quieres hacer una acción determinada, pero ocurre otra cosa diferente e indeseable
-
Distración: El diseño centra la atención a propósito en un elemento para distraerte de otro
generalmente se consigue premarcando o resaltando una de las opciones que se deben seleccionar.
Para evitar este par de patrones oscuros expuestos en esta clase (Cebo y cambio y Distracción), se deben colocar siempre botones muy claramente visibles para que el usuario tenga la posibilidad de saltar opciones que no desea, sin tratar de distraerlo para aprovecharse de él. Además que siempre hay que ser honestos con lo que le mostramos en la siguiente pantalla a la que el usuario le da clic buscando algo, es decir, no mostrarle cosas que no está buscando.
Ese ejemplo de elegir asientos con costo es tan común.
Hace unos días compre un boleto de avión y al llegar a la ventana de asientos, parecía deshabilitado el botón de “Continuar” como si fuera obligatorio elegir un asiento antes de continuar; al fijarse bien había un botón tipo enlace que decía continuar sin elegir asiento.
Este es uno en el que caí, la empresa es enviaflores, me llegó un correo en donde muestra una galería de fotos de sus productos con unas flechas para poder desplazarme y seguir viendo las demás opciones pero ¡oh sorpresa!, el dar click en la flecha de la galería no ejecuta la acción esperada e inmediatamente me redirecciona a su Web principal
Cebo y cambio: el diseño trata de que el usuario realice una acción diferente a la deseada.
Distracción: el diseño está centrado en conseguir la atención de la persona usuaria en un elemento para distraerla de otro.
Me encantó este curso.
Dark patterns en el diseño de interacción:
- Cebo y cambio
- Distracción
Lo de las aerolíneas es muy descarado!
Un ejemplo común de este patrón podría ser un sitio web de comercio electrónico que promueve un **producto a un precio muy bajo** o incluso con **envío gratuito**, pero cuando el usuario avanza en el proceso de compra, se le presentan cargos adicionales que no se mencionaron inicialmente, como **gastos de envío ocultos**, **costos de servicio adicionales**, o incluso una **mejor versión del producto** por un precio más alto.
Un ejemplo clásico de distracción en el diseño de interacción es cuando un usuario está tratando de cerrar una ventana emergente (pop-up) y el sitio web presenta un **botón de "Aceptar"** que está muy destacado en comparación con el botón para **cerrar el pop-up** o **rechazar la oferta**. El diseño visual hace que el botón "Aceptar" sea más llamativo, mientras que el botón para rechazar o cerrar la ventana es pequeño o está camuflado, lo que lleva a muchos usuarios a hacer clic en "Aceptar" sin querer.
Se me ocurre un ejemplo, cuando se compran ticketes y ahora la opción de venta de Morral o ya salta a compra de equipaje completo, y si solo se quiere maleta de mano con rodachines cuesta casi, casi que comprar el equipaje completo...
Igual descubrí que es mejor comprar el tickete sólo con morral, y luego comprar la maleta grande completa de 23KG por aparte..., muy mal manejo de ventas de tickete, pero supongo que mucha gente compra el equipaje completo desde el principio pensando que es casi el mismo valor de llevar maleta de mano...
Mi resumen: Recordemos que el diseño de interacción es la forma en que un usuario responde ante el otro
* Hay diseños que están creados de forma que dirija nuestros comportamientos, Hacia una acción determinada.
* Copy’s
* Elementos camuflados
* Incorporación de costes ocultos
* Fijémonos en el producto que necesita que las personas interactúen de una manera específica, y así consigan confundirle
* Generalmente estos diseños son sutiles, y se aprovechan de la atención Que utilizan las personas cuando están interactuando con estos.
* Hay dos estrategias que llevan a cabo en el diseño de interacción:
* Cebo y cambio por un lado y
* distracción por el otro
* Cebo y cambio: cuando quieres hacer una acción determinada pero ocurre otra cosa diferente e indeseable.
* El diseño intenta que realices una acción diferente a la deseada, aunque en ocasiones estos diseños Consiguen su propósito, el hecho de qué Nos encontremos con una opción que no es la esperada Hace que las personas se sientan manipuladas.
* Ejemplo con juego de tronos: link redirigido a esta página, dice que da gratis. Al darle clic en el botón de descargar lo que nos lleva a una anuncio,
* podemos arreglar esto agregándole las cifras a AD de Advertising que sugieren que es un link de publicidad
* Otro patrón oscuro es el de la distracción: ¿cómo se utiliza la distracción?
* El diseño centra la Atencion a propósito en un elemento para distraerte de otro, generalmente se consigue premarcando o resaltando una de las opciones que se deben seleccionar.
* Conseguir la atención del usuario para distraerlo de otro elemento
* Esto suele utilizarse resaltando un elemento con decremento de la otra
* Ejemplo aerolínea Latam Airlines, se introduce un botón de pago llamativo para escoger la opción de pagar extra para escoger asientos, y en la parte superior a mano derecha poco llamativo casi invisible un link donde nos dice que podemos escoger el asiento más tarde.
* Esto puede pasar desapercibido para la persona consumidora.
* Cómo evitar caer en este mal patrón: generando dos botones adicionales en la parte derecha donde están los demás botones la opción visible y agradable a la vista por si el cliente quiere cogerlo
* Buena práctica elegimos la Web azul Airlines
* Aquí simplemente nos indica claramente en azul cuáles son las opciones más económicas, y la tarifa especial que estas tienen.
* Buenas prácticas
Want to see more contributions, questions and answers from the community?