Patrones de UI

Recomiendo que se vean este video https://www.youtube.com/watch?v=kxkrdLI6e6M&feature=emb_title acerca de los Dark Patterns. Muy interesante.

Patrones de UI:

Un patrón de diseño es una solución probada a un problema común, con la finalidad de que el usuario sepa que hacer y que esperar al momento de interactuar con nuestra interfaz (Ley de Jacob)
• Soluciona problemas comunes.
• Reusables.
• Comportamiento conocido por el usuario.
• Lenguaje común entre diseñadores.

Dark Patterns: Es un uso incorrecto de los patrones de diseño con la finalidad de manipular al usuario, es común encontrarlos en sitios de e-comerce.

Patrones de UI
Un patrón es una solución probada a un problema común.
¿Porque son importantes?
Soluciona problemas comunes
Reusables
Comportamiento conocido por el usuario
Lenguaje comun entre diseñadores
Dark Patterns(confunden al usuarios ejemplo: Sneak into Basket )
-poco éticos
-intentan manipular o confundir al usuario (acciones que el no
quiere realizar)
-Comúnmente usados en e-commerce

Go daddy como siempre brillando por sus prácticas poco éticas

A propósito de Dark Patterns… acaba de estrenarse este documental en Netflix: “The Social Dilemma”

https://www.netflix.com/browse?jbv=81254224

A veces siento que la profesora usa términos que no son muy conocidos y asume que nosotros debemos saberlos dado que apenas estamos empezando…

Cuando se desarrolla software es muy importante conocer estos patrones.
Hay herramientas “por defecto” para hacer tu trabajo más sencillo.
Si se necesita sacar una app rápido, estos patrones son indispensables.

Patrones de UI =

• Soluciona Problemas comunes

• Reusables

• Comportamiento conocido por el usuario.

Patrones Oscuros =

• Poco Éticas

• Intentan manipular o confundir a el usuario

• Comúnmente usados en E- commerce.

Este curso va de mas a menos… vamos a ver como terminar. Últimos videos con explicaciones muy deficientes y no tan claras.

Patrones de UI
Un patrón de diseño es una solución probada a un problema común y la finalidad es hacer que el usuario sepa exactamente qué hacer y qué esperar al momento de interactuar con nuestra interfaz (básicamente seguimos la ley de Jacob)
Estos son importantes porque:

• Solucionan problemas comunes
• Reusables
• Comportamiento conocido por el usuario
• Lenguaje común entre diseñadores

Es muy importante que cuando usemos un patrón utilicemos siempre utilicemos el comportamiento que el usuario ya espera porque si lo cambiamos y ponemos algo que no va el usuario se va a sentir frustrado al no tener el resultado que el ya estaba esperando.

Dark Patterns, este es un uso incorrecto de los patrones de diseño que tiene como finalidad manipular a los usuarios y esto no hay que hacerlo, es muy común que se encuentren en sitios de ecommerce.

• Son poco Éticos
• Intentan manipular o confundir al usuario
• Comúnmente usados en e-commerce

Intentar manipular para que el usuario haga acciones que este no quiere realizar, un ejemplo claro es cuando haces una compra y te quieren agregar servicios sin que te des cuenta.

UI Patterns:

1. Un patrón de notificaciones
2. Pasos dentro de un proceso, son para que el usuario siempre sepa en qué paso esta y cuantos faltan.

Si hay un grave problema en varias plataformas para de-suscribirte o anular servicios debes hacerlo desde pc no lo permite desde el teléfono y eso es muy problemático

Hola! Aqui les muestro un ejemplo, que a mi parecer, confunde al usuario y entorpece la navegación. Es un modal para introducir la contraseña en una página web de un banco venezolano. Anteriormente, el botón de “continuar” se situaba de lado derecho y tenía un color de fondo más oscuro que el botón de “cancelar” (era más fácil identificar el botón “continuar”). Sin embargo, hicieron una actualización de la página e invirtieron los botones, además, les colocaron el mismo color a los dos botones…

Como cuando vas al cajero y el botón de aceptar cambia por el de SI QUIERO DONAR xD

Utilizar los patrones correctos son la base para brindar experiencias duraderas con los usuarios

Recomiendo este video sobre 3 principios para un mejor diseño web: https://www.youtube.com/watch?v=GJN7TemsZtY&ab_channel=Flux

Los patrones de UI van cambiando conforme las tendencias en apps. Es importante siempre ver las apps más modernas y también las de otros contenidos cuando hacemos benchmarks.

Vivaair, el rey de los Dark Patterns.

en el minuto 3:05 vean el Privacy Zuckering… LOL…

Patrón de diseño: es una solución probada a un problema común.

• Solucionan problemas
• Son reutilizables
• Tienen un comportamiento conocido
• Lenguaje común entre diseñadores

Ejemplos buenas prácticas:

1. Notificaciones
2. Bullet
3. Paso a paso (wizard)
4. Lista

Ejemplo de Dark patterns:

1. Al comprar te ofrecen otro servicio seleccionado.

Patrones de UI = No reinventar la rueda

Me disgusto mucho una vez que iba a comprar unos boletos de avión y tenían estos dark patterns donde me añadían una cantidad de servicios y tocaba darse cuenta, me imagino la cantidad de gente que por desprevenida le cobraron un tiquete mucho más costoso,

Patrones de UI:

Un patrón de diseño es una solución probada a un problema común, con la finalidad de que el usuario sepa que hacer y que esperar al momento de interactuar con nuestra interfaz (Ley de Jacob)
• Soluciona problemas comunes.
• Reusables.
• Comportamiento conocido por el usuario.
• Lenguaje común entre diseñadores.
ej ui patterns: notificaciones , pasos para un proceso

Dark Patterns: Es un uso incorrecto de los patrones de diseño con la finalidad de manipular al usuario, es común encontrarlos en sitios de e-comerce.

ej DARK patterns: Selecciones automáticas de productos adicionales o plus

En Colombia, los duros en Dark Patterns son los de VIVA AIR… Cuando estás comprando un tiquete aéreo te agregan montones de adicionales y al usuario le toca ir quitándolos uno a uno.

Es interesante el modo en el que se expresa la diferencia entre UI Patterns y Dark Patterns sobretodo porque he pasado por paginas donde abundan dark patterns y no los habia identificado de esa manera.

una vez me paso que estaba en un proceso que me decia que eran 4 pasos pero realmente fueron10. mostraban los iconos casi completados pero ponian mas y mas preguntas.
Otro ejemplo fue cuando quise cancelar la subscripcion de linkedin prime y me canse de buscar la opcion en el cell, tuve que ir a google a buscar la solucion y dicia que no puede ser por movil, solo por desktop.

Algunos patrones oscuros lo utilizan antivirus, pues algunos que quieren instalar software sin tu consentimiento

Goddady tiene unos Dark Pattern. muy marcados. me imagino que tienen todo calculado y les funciona. porque se supone que tiene gente brillante. Pero se nota a cada instante

Este sitio análisis diversos patrones de empresas desde una perspectiva de UX - https://growth.design/case-studies

😃 GRACIAS

Los Dark Patter una vez me sucedieron con una pagina de Hosting, al renovar uno, en un parte decia que valia tanto y al finalizar la compra estaba añadiendo rubros que no habian mencionado anteriormente y que solo aparecen al momento de facturar.

PATRONES DE DISEÑO:
Es una solución probada a un problema común, la finalidad es hacer que el usuario sepa exactamente que hacer y qué esperar al momento de interactuar con nuestra interface, básicamente estamos siguiendo la ley de jakob.
Son importantes porque:
Soluciones a problemas comunes
Reusables
Comportamiento conocido por el usuario
Lenguaje común entre diseñadores.
OJO: es muy importante utilizar el patrón que el usuario ya espera, porque si lo cambiamos el usuario puede sentirse frustrado al no tener el resultado que esperaba.

DARK PATTERNS
Son los usos incorrectos de los patrones de diseño que tiene como finalidad manipular a los usuarios, son muy pocos éticos, tienden a confundir o manipular a los usuarios para que haga acciones que este no quiere realizar, comúnmente se usan en e-commerce.

Las aerolíneas como Viva Air o Avianca son un claro ejemplo de malas prácticas, ya que cuando buscas un vuelo te aparece un precio y a medida que te vas acercando al botón de pago te van agregando cosas. Yo he tenido esta mala experiencia con estas dos empresas, porque al llegar al checkout el precio es muy diferente al que me mostraron al comenzar la compra, me ha tocado regresarme a los pasos anteriores para desmarcar servicios que me agregaron sin preguntarme. Es muy molesto.

También Amazon utiliza los dark patterns para confundirte cuando das clic a un artículo para comprarlo, antes de continuar ya te aparece agregado uno o dos artículos extras de complemento a lo que tu diste clic. Ejemplo: Si seleccionas un teléfono celular, te agrega al carrito en automático un protector de pantalla y una funda que su IA considera que van bien con el teléfono que estás comprando, por lo que debes estar muy atento y deseleccionarlos, o de lo contrario terminas pagando más por cosas extra que no te interesan. Por lo que los Dark pattern son un truco de varios e-commerces para vender más y abusar de quien no se dé cuenta.

Desconocía esto del Dark Patterns, aunque en la realidad, lo he vivido muchas veces 😕

Uff mucho por aprender.

Gracias

Alguno ha trabajado con Go-daddy?
Hace vas a hacer la compra de un dominio y resulta que te añaden una cantidad de cosas?

Todos los patrones están probados y son libres de usar?

que grán recurso gracias por los enlaces.

Wingo utiliza mucho el dark patterns

Creo que este video resume muy bien esta y la antrior leccion https://www.youtube.com/watch?v=NUMa0QkPzns

**Patrones de UI
Un patrón es una solución probada a un problema común.
**¿Porque son importantes?

• Soluciona problemas comunes
  Reusables

• Comportamiento conocido por el usuario

Lenguaje comun entre diseñadores

• Dark Patterns(confunden al usuarios ejemplo: Sneak into Basket )
  poco éticos

• intentan manipular o confundir al usuario (acciones que el no
  quiere realizar)
  Comúnmente usados en e-commerce

Muy bien los patrones de diseño facilitan mucho los procesos para los usuarios.

PATRONES UI
Un patrón de diseño es una solución a un problema común, tiene como finalidad hacer que el usuario sepa que hacer y esperar al usar la interfaz. Aplicala ley de Jakob.

• Solucionan problemas comunes
• Reusables
• Comportamiento conocido por el usuario
• Lenguaje común entre diseñadores

DARK PATTERNS
Uso incorrecto (o poco ético) de patrones que tiene como fin manipular a los usuarios. Comunes en sitios de e-commerce.

Qué tal ese Privacy Zuckering como tipo de darkpattern?🤔🙄😅

Patrones de Diseño

Son soluciones ya creadas y familiarizadas con el usuario para resolver problemas en especifico. Esto sigue la ley de usabilidad de Jackob, si ya existe un buen diseño que soluciona un problema de una manera muy intuitiva y es familiar para el usuario, es recomendable decir stop al diseñador que llevamos dentro de querer todo hacer de nuevo de una manera creativa, ya que si lo hacemos vamos a presentar un metodo que no es familiar para el usuario para solucionar un problema. Por eso recomiendo reutilizar.

Entonces los Patrones de diseño:

• Solucionan problemas comunes
• Son reusables
• Comportamiento conocido por el usuario
• Lenguaje comun entre diseñadores.

Dark pattern

Son patrones de diseño que se usa para manipular o confundir al usuario. No se debe usar

Estos nomalmente se usan en ecommerce

-Es poco etico.

Martín Coronel
UX/UI Design

Web: https://martincoronel.com/

Excelente!! muy buenos datos