No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Patrones de UI

17/29
Recursos

Un patr贸n de dise帽o es una soluci贸n probada previamente a un problema com煤n, implement谩ndolo de forma repetida (reusable), y dando una consistencia que sea familiar para todo tipo de usuario, incluso otros dise帽adores. La intenci贸n de usarlos, es que el usuario sepa con precisi贸n qu茅 esperar y qu茅 hacer al momento de interactuar con la interfaz (Ley de J谩kob).

Se debe evitar la frustraci贸n cuando alguien usa una interfaz, creando o aplicando patrones demasiado radicales. Refiri茅ndose a esto, existen algunas t茅cnicas de dise帽o y 鈥渦sabilidad鈥 llamados dark patterns.

Estos son patrones que intentan manipular o confundir al usuario para que tomen decisiones que sean ventajosas para dicho sitio donde se inserten. Son muy com煤nes en e-commerces., por lo que no son para nada 茅ticos. Puedes visitar darkpatterns.org para conocer m谩s de ellos.

Apegarse a las convenciones 鈥渟anas鈥 del dise帽o es una excelente idea. De esa manera, no solo se otorga la posibilidad de disfrutar de una experiencia que nadie dudar谩 en recomendar, sino que, adem谩s, se mantiene un ecosistema evolutivo y accesible para todos aquellos que deseen aportar ideas de dise帽o que poco a poco integren cosas innovadoras y patrones que en el futuro, signifiquen un paso m谩s adelante para la usabilidad de productos digitales.

Aportes 48

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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: 鈥淭he 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 鈥渃ontinuar鈥 se situaba de lado derecho y ten铆a un color de fondo m谩s oscuro que el bot贸n de 鈥渃ancelar鈥 (era m谩s f谩cil identificar el bot贸n 鈥渃ontinuar鈥). 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