Introducción al diseño UX: Principios de Usabilidad para Diseñadores UX/UI (+Ejercicio de Wireframe de Figma)

1. Promo: [ MÚSICA] Hoy vamos a aprender sobre los principios de usabilidad. En este curso, combino conceptos y ejemplos de la vida real para asegurarme de que puedes aplicarlos a tus diseños y modelos de albaranes de inmediato. Aprenderemos por qué las referencias del mundo real son la base de tu configuración, qué son los modelos mentales y cómo crearlos. Te presentaré principios clave como Jacobs Law, Hicks Law, y te diré por qué cuatro es el número mágico. Aprenderemos sobre la consistencia, estado del sistema y por qué el desorden es clave. Te mostraré patrones de escaneo comunes que llevarán tu diseño a otro nivel. Por último, nos sumergiremos en uno de los temas más importantes pero a menudo descuidados diseño de UX, prevención de errores y el manejo de errores para garantizar que su experiencia de usuario se esté ejecutando sin problemas pase lo que pase. Al final, te cuento el pequeño secreto sobre por qué las redes sociales son tan adictivas. Este curso es para ti si eres un principiante total o un diseñador experimentado y quieres retocar tus habilidades de UX. Se trata de una clase por molearning.io. 2. Desmitificación: ¿qué es el diseño UX/UI de UX?: Tenga en cuenta que este es un curso de dos partes. Por lo que podría estar viendo la parte sobre los principios de UX o la parte sobre los principios de la interfaz de usuario, idealmente usted combinando los dos de ellos. En cualquier caso, quiero asegurarme de que tengas muy claro los dos términos diferentes y lo que significa combinarlos. Una vez que empieces a sumergirte en el mundo de UX/UI, notarás que hay mucho ruido y discusión en torno a estos términos. Qué incluyen exactamente, si UX y UI deben o no combinarse en un solo término. Permítanme arrojar algo de luz sobre eso desde mi punto de vista y experiencia. Sin duda, el diseño de UX es donde comenzarás el viaje. ¿ Qué incluye el diseño UX? En resumen, tratarás de entender los patrones generales, el comportamiento y las expectativas. Todo eso para crear una estructura general y orden de cómo debe funcionar el producto. Como resultado, normalmente tendrías algún tipo de esqueleto y una forma de marcos de alambre y diagramas de flujo que delinean un producto o característica que estás sugiriendo. Otro trabajo muy importante del diseño de UX es probar e iterar a lo largo del ciclo de vida de un producto. No hay productos terminados en línea nunca. Si bien la experiencia del usuario, como lo indica el nombre, intenta mejorar la experiencia general que tiene el usuario, diseño de la interfaz de usuario se ocupa de los elementos de diseño reales. Ahora el diagrama de flujo y los marcos de alambre previamente diseñados cobran vida. Un buen diseñador de UI generalmente tiene una excelente idea de lo que sucede durante el proceso de UX y viceversa. Durante el proceso de la interfaz de usuario, luego definirá guías de estilo, color, tipografía, componentes y el diseño general para todo el diseño receptivo. Lo más probable es que crees un prototipo que se probará, que es donde vuelves a vincular al diseño de UX. Del mismo modo que trabajamos de la mano desde UX hasta UI, tendrás que hacer lo mismo desde la interfaz de usuario hasta el desarrollo. Cuando se trata de desarrollo, se escuchará sobre dos partes principales. Desarrollo front-end, donde se escribe CSS y HTML, el llamado marcado, y aquí es donde se crea la interfaz que vemos. Esto es lo que nos interesa como diseñadores de UI. Después está el llamado back-end. Aquí es donde se escribe el código. Eso podría ser JavaScript, Java, Python o cualquier otro lenguaje. Realmente no nos molesta como diseñadores. Aquí es donde sucede toda la lógica detrás de las escenas. Nosotros, diseñadores de UI, rara vez tenemos mucho que ver con esto. Front-end y back-end obviamente están conectados y podría haber marcos en su lugar tratando con front-end como ReactJS. Pero todo eso puede dejarse con seguridad al equipo de desarrollo. No necesitas codificarte. No obstante, debes entender los requisitos técnicos y los principios básicos del diseño front-end como diseñador de UI. Esto te ayudará a configurar tus archivos y diseños de la manera correcta. Ahora, en una gran empresa o en un proyecto ocupado, podría simplemente lidiar con el diseño de la interfaz de usuario. Podrías simplemente configurar diseños en Figma y eso es todo. Sin embargo, aún tendrás superposición con el diseño de UX así como con el desarrollo y necesitas conocer tus conceptos básicos. También podría trabajar como diseñador UX solamente. En ese caso, lo más probable es que no hagas ningún trabajo de diseño, pero estarás ocupado con la investigación, estrategia y las pruebas, y definiendo nuevas características. Sin embargo, aún necesitarás estar al tanto de cómo las decisiones de diseño de interfaces impactarán e influirán en la experiencia del usuario. Si estás trabajando en una investigación profunda de usuarios, tal vez solo hagas eso en realidad, pero normalmente tendrás tanta suerte y saldrás a la diseñadora de vez en cuando. En algunos casos, sin embargo, sobre todo en empresas más pequeñas o proyectos freelance, podrías usar muchos sombreros. Cuando hablamos de diseño de UX/UI, suele ser este tipo de área la que ves resaltada aquí. Probablemente empieces con alguna investigación, configurando personas y configurando tus propios wireframes. Después traducirás esos wireframes en diseño y los entregarás al desarrollo. La mayoría de los diseñadores de UX/UI tienden a perder un poco de la parte en profundidad del diseño de UX. Eso es cierto. Pero no es gran cosa en proyectos sencillos más pequeños. Este es también el área que me ocuparé durante esos dos cursos. Tenga en cuenta que la investigación en profundidad de UX no es parte de este curso. Es cierto que en algunos puestos de trabajo, el término UX y UI a menudo se confunden. Podrías ver el diseño de UX anunciado sin embargo te están pidiendo configurar cualquier cosa, desde wireframes hasta terminar manejar archivos. Si alguna vez tienes dudas, simplemente dibuja este sencillo diagrama aquí en una hoja de papel, y muéstrale a tu potencial cliente o empleado dónde estás operando y asegúrate de que esta operando y asegúrate de que esta es la zona que también están buscando, y no sólo una palabra de moda que estaban usando. Además, seamos honestos, lo general no es un proceso directo donde se trasmiten las cosas. También en la mayoría de la empresa ni siquiera pretenden que sea así. Siempre serán mucho de ida y vuelta y mucha discusión. Esto en realidad es algo bueno porque solo cuando UX, UI y desarrollo trabajan de la mano, realmente grandes productos cobran vida. No escuches a los guardianes. Encuentra tu pasión, y disfruta de la superposición y aprendizaje de diferentes campos del diseño digital. 3. Introducción: Hoy estaremos viendo los principios clave de diseño de UX de una manera muy práctica para que puedas usarlos de inmediato en tu estructura de alambre y diseños. Ahora los principios quehoy les voy a presentar,se hoy les voy a presentar, basan en la famosa Heurística de Usabilidad de Nielsen, así como en mi propia experiencia de más de 10 años de UX, diseño de UI y muchos libros y investigación. Ahora antes de empezar, quería mencionar una cosa. Siempre hay mucha discusión sobre si UX, UI es una cosa que va de la mano o dos tareas completamente separadas. Soy un fuerte creyente de que interfaz de usuario, la experiencia de usuario, así como el desarrollo front-end, son una gran historia de amor y no un fan del gatekeeping en absoluto. En este curso, realmente encuentras que estamos viendo las áreas donde el diseño de UX y UI se superponen. A pesar de que en tu trabajo probablemente tengas un foco principal. Al final, estamos entregando un producto al usuario. Si eso es para ti, entonces estaremos investigando juntos los siguientes temas. Vamos a ver referencias del mundo real y por qué crean modelos mentales. Vamos a hablar de la ley de Jakob y otras páginas. La consistencia es clave, la ley de Hick y las opciones de limitación. Por qué el número mágico es realmente cuatro. Posicionamiento de páginas y patrones de escaneo. Hablaremos de retroalimentación y datos de sistemas , manejo de errores, prevención de errores y al final, les voy a contar un poco de esa cosa mágica llamada dopamina. 4. Referencias mundo real y modelos mentales: A pesar de que estamos diseñando productos digitales, las referencias del mundo real son cruciales. Las referencias del mundo real son un gran tema en la llamada heurística de Nielsen. Básicamente establece que el partido entre el sistema y una convención del mundo real es necesario para la lógica y la comprensión. Cuando decimos referenciar al mundo real, eso va mucho más allá que simplemente usar símbolos familiares. Ya en 1943, mucho antes de que Internet y la heurística de Nielsen Norman, Kenneth Craig, filósofo y psicólogo, escribió la naturaleza de la explicación, donde habló de una cosa llamado modelo mental. Un modelo mental es básicamente la idea de cómo va a funcionar algo. Las personas crean modelos mentales basados en experiencias pasadas y los almacenan como concepto en su mente. Esperan experiencias nuevas y similares para seguir el mismo patrón. Si hay un desajuste entre un modelo mental y el llamado modelo conceptual del producto que estás construyendo, entonces los usuarios primero que nada, enrealidad no lo entenderán ni tomarán realidad no lo entenderán mucho esfuerzo para hacerlo, y en el peor de los casos, podrían simplemente rechazarlo. Si sin embargo logras descubrir esos patrones familiares, eso se suele hacer a través de la investigación o investigación, entonces puedes usarlos y crear una transición suave entre mental y lo modelo conceptual. No van a ser idénticos, y eso está bien. Perderás algo de lo antiguo y añadirás algo de lo nuevo, pero tendrás este núcleo familiar sobre el que construir. Un buen ejemplo para ello es un proceso de registro. Podría haber tenido esto antes. Se descarga una app, y lo primero que se obtiene es una pantalla de registro para llenar toda la información y a veces incluso los datos de su tarjeta de crédito antes de que incluso haya visto un solo cosa. ¿ Cómo te hizo sentir eso? Imagina que vas a entrar a una tienda y en la puerta antes incluso de entrar, te detienen. Se te pide que rellenes tus datos personales y que des tu número de tarjeta de crédito. Te van a decir que quieren verlo por si acaso para asegurarte de que todo está cubierto por si después decides comprar. Probablemente te encuentres un poco extraño e incómodo, y francamente dicho, simplemente innecesario. Porque en tu modelo mental funciona así, entras a una tienda, miras a tu alrededor y eliges un producto. Una vez que hayas elegido ese producto, decides pagar o registrarte, en nuestro caso, para luego recibir el producto o servicio que elijas. Es un enfoque mucho más natural para la pronta inscripción en una tienda en línea una vez que un usuario decidió comprar o probar algo. Para quedarse con nuestro ejemplo de tienda, es importante señalar que el modelo mental no sólo es un comportamiento estricto, sino también reglas sociales que aprendimos. Si entro a una tienda y el asistente de tienda está ocupado, entonces probablemente me den un asentido rápido o sonríen solo para hacerme saber que me vieron y solo están terminando lo que están haciendo. En nuestra tienda online, esto podría traducirse en una sencilla barra de progreso mientras nuestro contenido aún se está cargando. Esto es lo mismo para los formularios que ya se llenan, cosas que se colocan en mi carrito de compras, y luego se fue a mirar otra cosa. Espero que eso deba recordarse sólo porque en la vida real, aprendí que funciona de esa manera. Además, asegúrate de usar lenguaje del mundo real en lugar de terminología técnica. En lugar de hacer clic para enviar, usa algo así como, compra ahora. Si tu contenido es demasiado precioso, entonces al menos dale un pequeño vistazo a la gente. Se ve que con muchos portales de noticias, se puede navegar por los titulares, pero para leer más, se le pide que compre una membresía o que pague lo contrario. Sorpresa, como un quiosco de la vida real. Ahora es importante tener en cuenta que usar convenciones de la vida real no significa imitar la vida real. Como viste con nuestro ejemplo de tienda, solo usamos el modelo mental. No recreamos una tienda en todo su look y sensación online. Además, se asegura de que los patrones elegidos se basen en investigaciones y pruebas sólidas. No puedo recalcar eso lo suficiente. Nunca asumas que tu modelo de comprensión o mental coincide con el del usuario. En ocasiones, sin embargo, podrías tener tus razones para arrojar por la borda esas convenciones todas juntas, o tu producto podría ser tan radicalmente nuevo que tu investigación demuestra que realmente no hay un modelo mental fuerte sobre el que construir. En este caso, básicamente estás creando un nuevo modelo mental. Esto generalmente se hace a través de la capacitación. entrenamiento podría ser algo realmente sencillo, como pantallas de incorporación o tutoriales en video. Eso podría ser algo realmente pequeño o un curso intensivo. Seguirás usando elementos como el lenguaje del usuario, reglas sociales, y ciertos modelos mentales incrustados. Como de costumbre, todo es posible, pero hay que estar al tanto del camino para el que estás diseñando. Para resumir, utilice referencias del mundo real. Base tu diseño en modelos mentales existentes. Referencias del mundo real no significa imitar al mundo real. Si no hay un modelo mental subyacente, entonces asegúrate de entrenar, educar, y a bordo del usuario para crear un modelo mental. 5. Ley de Jakob: otras páginas: Además de Realworld, otros sitios web y aplicaciones son el principal lugar donde la gente crea modelos mentales sobre cómo se supone que funcionan las cosas. La ley de Jakob, acuñada por Jakob Nielsen, establece que los usuarios pasaron la mayor parte de su tiempo en otros sitios, ahí que prefieran que tu sitio funcione igual que cualquier otro lado al que ya están acostumbrados. Digamos, te estoy pidiendo que encuentres a una persona en Facebook o LinkedIn o cualquier página de comunidad nueva similar. No has usado esa página antes, pero probablemente seguías buscando una barra de búsqueda. Sabrías más o menos cómo sería, es decir, un lugar para escribir y un botón para llamar a la acción de búsqueda. En ocasiones, es posible que ni siquiera necesites ese botón porque ya aprendiste que presionas “Enter” para activar la búsqueda. Ahora, le pedimos a tu abuela de 90 años que haga lo mismo. probable es que estés más cómodo y mucho más rápido en completar la tarea ya todo ya te resulta familiar. Si todos los sitios siguen una determinada convención, pero rastreas esas convenciones en demasiados lugares de tu página, entonces estás pidiendo al usuario que se comprometa bastante tiempo con el fin de averiguar cómo están las cosas trabajando. No conviertas a tus usuarios en una abuela de 90 años sin razón alguna. Echemos un vistazo a una estructura típica. Por lo general, comenzamos con el encabezado que contiene información como el logotipo y por cierto, aprendimos, cada vez que hacemos clic en ese logotipo, volvemos a casa. Además de eso, el usuario estará buscando la navegación en el encabezado, cosas como un símbolo de búsqueda, botones de inicio de sesión, botones de compra ahora, y checkout y, por supuesto, estarían esperando cosas como cambiar el idioma para toda la página como una característica en el encabezado. Obviamente no tienes que poner todo esto en tu encabezado si no es relevante. Si estás vendiendo un pequeño producto en algún lugar de tu página, entonces no necesitas un botón Checkout en tu encabezado. En ocasiones, es posible que también veas que la gente agrega una información de contacto o algo para configurar una videollamada al encabezado. Si este es el propósito principal de su negocio, entonces esto es realmente importante tenerlo en la cabecera. puede jugar con él, pero se debe apegar a las reglas básicas. Justo debajo del encabezado, solemos encontrar un área llamada nuestra área de héroes o nuestra principal intro. De lo que eso hace, comunica la idea principal de tu página. Este es el espacio para realmente brillar, explicar tu idea, producto o servicio y además ofrecerás un llamado a la acción pidiendo a los usuarios que compren o se inscriban en esta zona. Este es también el lugar para volverse salvaje. Aquí, puedes ser realmente creativo. Puedes tener videos, puedes tener animaciones, solo puedes tener imágenes o texto increíbles, pero este es el lugar donde tu marca llega en vivo. Debajo de la sección de héroes, se encuentra el contenido. Estos son todos los detalles, toda la información, y todo lo que quieras decirle al usuario. De nuevo, aquí sí seguimos la ley de Jakob todavía. Eso significa que si tengo un texto y subrayo una palabra en el texto, el usuario asumirá que puedo hacer clic en eso y es un enlace. Si muestro un acordeón, espero que se abra y cierre. Formularios, los usuarios intentarán llenar y así sucesivamente. Mi consejo sería atenerse a esas reglas básicas de comportamiento aprendido, así como establecidas como sólida jerarquía visual. Dentro de estos límites, realmente puedes hacer lo que quieras. Al final de tu página, encontrarás el pie de página. El pie de página es siempre el último elemento. Aquí, verás lo poderosa que es la ley de Jakob porque los usuarios siempre esperarán cosas como detalles de contacto o información que no encontraron en el encabezado al final del pie de página. La mayoría de las veces, simplemente se desplazarán hacia abajo si, por ejemplo, están buscando tu ubicación. Por eso, agregar Google Maps justo encima del pie de página suele ser una buena idea. Este también es un gran lugar donde la gente busca enlaces a páginas como la publicación de empleo sobre sección en caso de que no incluyeras eso en tu encabezado y, por supuesto, enlaces a páginas como como términos y condiciones y huella. Ahora bien, eso no quiere decir que no se pueda romper ni jugar con esas convenciones ni inventar algo completamente nuevo. Incluso deberías romperlos de otra manera, todas las páginas serían iguales. Pero hazlo con deliberación y propósito hacia las necesidades de tus usuarios. Simplemente mover tu carrito de compras y la barra de búsqueda en la parte inferior izquierda podría no ser tan revolucionario, sino simplemente confuso. Antes de terminar, veamos un ejemplo de la vida real. Aquí, tenemos la página web de Slack y se puede ver que aquí está el encabezado y por ejemplo, hablar con las ventas y tratar de forma gratuita como los puntos principales del menú. Se puede ver, realmente se puede enterrar eso. Entonces aquí, tenemos nuestras secciones de grandes héroes donde vemos lo que es Slack, nos vuelven a llamar a la acción para probarlo o para iniciar sesión y conforme nos desplazamos hacia abajo, obtenemos el contenido y podemos ver que realmente bonito animaciones explicando diferentes características. Aquí, tenemos pequeños tutoriales cómo empezar, y terminamos aquí abajo con el pie de página, donde nuevamente tenemos, enlaces a todas las partes importantes de la página. Vamos a resumir. Los usuarios pasan más tiempo en otras páginas, ahí, esperan que tu sitio funcione igual que cualquier otro. Usa patrones a los que los usuarios están acostumbrados. Estos patrones pueden ser estructurales, como la estructura de la página o el diseño general, así como comportamentales. Por ejemplo, esos botones se pueden hacer clic. Siéntase libre de romper esos patrones, pero hágalo con deliberación y propósito hacia las necesidades de sus usuarios. 6. Consistencia es clave: La consistencia es un principio clave del diseño UX. Consistencia significa que las mismas palabras, elementos, y acciones, deben significar lo mismo y seguir las mismas convenciones para ser predecibles y aprendibles para el usuario. Existen dos tipos de consistencia en el diseño de UX: consistencia interna y externa. Un ejemplo para una consistencia externa será una convención aprendida en su campo. Al igual que en una tienda, verías un pequeño carrito de compras y esperas encontrar allí tus bienes guardados. Un botón, esperas que sea clicable y accionable. Un menú de hamburguesas, para mostrarte más opciones de menú. Además, como sabemos por la ley Jacobs, no sólo aprendimos lo que hacen, sino que también aprendimos dónde esperarlos. Al igual que el carrito de compras y nuestro menú de hamburguesas, esperaríamos que esto se encontrara en algún lugar la esquina superior derecha de nuestra navegación. Ahora la consistencia interna, por otro lado, trata de todo lo que diseñamos dentro de nuestra propia página web y nuestra propia marca. Por ejemplo, un botón, podría haber elegido un color de resaltado específico , en este ejemplo, estamos usando un naranja como nuestro color de resaltado, por lo que estamos enseñando algo a nuestros usuarios aquí. Básicamente estamos vinculando el color a una acción, así que si ahora utilizarías esta naranja para un titular que no se puede hacer clic, confundirá al usuario y también regaríamos la fuerza de este significado de color de señal. Si sin embargo lo utilizarías en un enlace dentro de un texto, eso tendrá mucho sentido porque ese enlace es accionable y se puede hacer clic. A través de tu página, tendrás muchas llamadas a acciones, por lo que necesitamos asegurarnos de que sean consistentes tanto en apariencia como en redacción. También podemos crear un botón como botón primario como ves aquí en nuestro color de resaltado y una versión secundaria debilitada para algo que aún queremos resaltar, pero no es nuestro principal prioridad. Esta consistencia recorre todo tu diseño y generalmente se establece en las llamadas hojas de estilo en nuestro diseño. Se trata de elementos como el color, la tipografía, jerarquía y el espaciado, así como elementos de disposición general como tarjetas, iconos o imágenes. Esta consistencia garantiza que nuestra interfaz de usuario es predecible y aprendible para el usuario. Se podría argumentar que esta consistencia es realmente algo que se desarrolla en las hojas de estilo en nuestro diseño de interfaz de usuario y no en UX. No obstante, creo firmemente que esta consistencia y el sistema detrás de ella deben ser el núcleo de su diseño UX. Resumamos, las mismas palabras, elementos, y acciones deben significar lo mismo. Consistencia externa significa convenciones ya establecidas por el usuario. Consistencia interna significa la consistencia visual y funcional dentro de su producto. Asegúrese de crear un sistema de diseño que contenga guías relevantes para definir la consistencia en todas las áreas. 7. Ley de Hick: elección y limitación: Para no abrumar a los usuarios, es importante minimizar la elección. La ley de Hick establece que cuantas más opciones se ofrezcan, más tiempo tardará en tomar una decisión. Este tiempo de decisión aumenta logarítmicamente. Obviamente no todos tenemos el mismo tiempo de reacción. Depende mucho de cosas como nuestro IQ, si la configuración de la página es familiar, o si incluso la hemos usado antes. Pero en pocas palabras, menos es más rápido. Tenga en cuenta que la ley de Hick solo se aplica a la toma rápida de decisiones, cosas como escoger un producto de productos similares. Si se trata de tomar decisiones en profundidad que involucra investigación, como qué auto comprarías o qué curso universitario tomarías, entonces la ley de Hick no se aplica. La otra excepción son listas ordenadas con artículos conocidos, algo así como escoger un país o un idioma. Siempre y cuando esté en orden, alfabéticamente o numéricamente, y familiar para el usuario, será fácil navegar ya que el usuario estará buscando un elemento específico. De ahí que la ley de Hick no se aplique. Para evitar sobrecargas, siempre ejecuta tu configuración a través de esta lista de comprobación en tu cabeza. Limpio. ¿Realmente necesito este artículo? Cluster. Agrupar artículos similares juntos. Considera también que un grupo de elementos similares se puede mover a una página nueva completa o a una página de submenú. Ocultar. ¿Se puede guardar hasta que sea necesario, como en un botón Mostrar todo? Este concepto se llama revelación progresiva. Un gran ejemplo son los bloques de precios. Toda la información innecesaria se limpia, y solo estás dando algunas opciones relevantes. Tenemos un conjunto de tres rangos de precios diferentes y dentro de esos rangos, tenemos una jerarquía clara. Obviamente vemos lo más dominante, el precio, luego vemos algunas de las características incluidas, y el llamado a la acción para cada una de ellas. Una vez que te interese una de las ofertas, puedes hacer clic en el pequeño enlace diciendo “más”, y se te mostrará toda la información adicional hasta ahora oculta. Cuando se habla de limitar la elección, podría ser tentador sólo ofrecer una. Se pueden definir en algunas situaciones. No obstante, la elección, cuando se presenta de la manera correcta y la cantidad, también le da al usuario una sensación de estar en control. Un gran ejemplo de reducción de elección para contenido mixto que en realidad podría usar bastante sin siquiera darse cuenta son los tres pequeños puntos. Los encontrarás en tu navegador, o muchas veces en artículos o redes sociales. Si haces clic en ellos, obtienes más opciones que probablemente no vas a usar todo el tiempo pero siguen siendo relevantes. En ocasiones sin embargo, es posible que tengas una página donde necesites incluir toda la información y todos los detalles. Esto podría ser por razones legales, o porque es una compra como un contrato telefónico o abrir una cuenta bancaria, donde realmente quieres que el usuario esté al tanto lo que está comprando y que asegurarse de que obtengan el correcto. Esta página es un gran ejemplo de cómo se podría hacer esto. Nuevamente, no tengo relaciones con esta marca o página. Simplemente te estoy mostrando esto porque creo que la UX es excelente. Aquí, realmente se puede ver el principio de limpio cluster y ocultar. Se puede ver que mucho de lo que se limpió ya aquí haciendo esos desplegables, y luego se agruparon en esos tres modelos que podemos elegir. Entonces aquí abajo, todavía se puede ver hay mucha información, pero todo estaba agrupado realmente, muy bien, dado un titular, y se puede ver que dentro de cada una de estas categorías, no hay más de tal vez cinco artículos. Entonces tenemos el tercer aspecto de la piel. Este es un gran ejemplo de revelación progresiva, y se puede dar click y se puede ver que luego me da, una vez que me interesa, toda la información adicional que estoy buscando. En resumen, cuantas más opciones, tiempo se tarda en tomar una decisión. Eso no se aplica a la toma de decisiones compleja, ni se aplica a listas ordenadas con artículos conocidos. Siempre trate de seguir el método limpio, cluster, y hide para optimizar. 8. ¡El número de magia es 4 4 cuentos de magia: ¿ Cuántas cosas podemos recordar realmente? o temprano, al trabajar en UX, te encontrarás la llamada ley de Miller que establece, nuestra memoria de trabajo puede, en promedio, contener siete artículos, más o menos dos. Bueno, en realidad no. En realidad, la ley de Miller es un poco una leyenda urbana. psicólogo Alan Baddeley, en 1994, revisó el trabajo de Miller ya que sentía que hay algo raro. Sorprendido, encontró que en realidad no era un papel, sino una charla de Miller que acuñó la famosa ley. Era más como si Miller estuviera pensando en voz alta sobre esta teoría que tenía. No se basó en una investigación sólida. Baddeley y algunos otros, como Nelson Cowan, regresaron e hicieron algunas investigaciones más. Lo que en realidad encontraron fue que el número mágico era cuatro. Cuatro es la cantidad de cosas que una persona promedio puede almacenar en su memoria de trabajo. Un buen ejemplo de ello son los números telefónicos que normalmente agrupamos en tres o cuatro patas. Echemos un vistazo a algo más relacionado con UX. Aquí hay una navegación y tiene ocho puntos de navegación, por lo que se ve bastante concurrida. De acuerdo con la ley de Miller, esto seguiría estando bien. Pero seamos honestos. Simplemente es un poco demasiado para agarrar y recordar. Veamos qué pasa cuando aplicamos nuestra nueva regla. Lo desglosé hasta el mínimo de puntos que necesito para que mi navegación esté funcionando. Ahora, aún terminé con cinco. Ya se ve mucho mejor, pero creo que aún podemos mejorarlo. Podríamos, por ejemplo, agregar alguna jerarquía. Lo que hice aquí es que saqué un contacto y decidí que este es mi punto más importante en la navegación y lo convertí en un llamado a la acción. Por cierto, al posicionar esos ítems, los usuarios tienden a recordar mejor el primero y el último ítem. Este es un hallazgo no por mí, sino por Hermann Ebbinghaus, quien llamó a esto el efecto de posición serial. A veces es posible que no puedas reducir estrictamente las cosas a cuatro. Por ejemplo, si está teniendo una barra de herramientas en un software. Lo que puedes hacer aquí como un gran ejemplo es que los agrupes, añades algunos espacios en blanco y también añades algunos iconos. Ahora en nuestro ejemplo aquí, si necesitabas agregar algunos puntos de navegación más a la capa superior, podrías hacerlo agregando algunos más aquí a la izquierda con el logo, dejar algo de espacio en el medio, y luego tener tu navegación a la derecha. Lo importante es que hay algún tipo de estructura o estrategia sobre cómo se agrupan. En nuestro ejemplo, sin embargo, decidí agregarlos como submenú. También es mucho más claro porque ahora tengo todo lo que tiene que ver con el servicio bajo un punto. En ese momento, el usuario puede olvidar el resto de mi primera navegación de capa y concentrarse en esto. Además, si quisiera añadir más puntos de navegación más adelante, eso no sería un problema y no tendría que cambiar toda la configuración de mi navegación. Si se vuelve demasiado largo, yo, sin embargo, añadiría algunos iconos o alguna estructura para dar una mejor orientación. Vamos a resumir. Siete más menos 2, llamado Ley de Miller, es un poco una leyenda urbana. En promedio, nuestra memoria de trabajo puede contener cuatro artículos. Utilice la jerarquía visual para crear grupos de máximo cuatro. Por ejemplo, los espacios en blanco o agregar una llamada a acción pueden ser una buena forma de hacerlo. Agregar iconos o imágenes podría ser una buena solución para elementos de lista más largos. 9. Posicionamiento de página y patrones de escaneo: investigación del Grupo Nielsen Norman encontró que el 80 por ciento de los usuarios solo escanearon cualquier sitio web nuevo con el que se encontraron. Con la tecnología de control ocular, se identificaron diferentes patrones de escaneo. Dependen de diferentes factores, como el contenido que estás mostrando, los antecedentes del usuario y sus conocimientos. Yo quisiera presentarles hoy algunos de esos patrones. No estás obligado a seguir esos patrones. Hay otros sitios web exitosos por ahí que usan un enfoque completamente diferente. No obstante, debes estar al tanto de los patrones ya que resultan en la familiaridad, por lo que puede ser una forma muy suave introducir a un usuario a tu página, permitiendo más enfoque en el contenido real ya que la estructura general es familiar. Antes de empezar con los patrones reales es importante mencionar la dirección de lectura. Al leer en un idioma que se mueve de izquierda a derecha, los usuarios también comenzarán a escanear de esa manera. Si leen de derecha a izquierda, entonces es sólo un contrario. Ya que la mayoría de las lenguas se escriben de izquierda a derecha. Este es el enfoque más popular en línea. También es el lenguaje con el que estoy más familiarizado y en el diseño, así que usaré este para mi ejemplo. No obstante, si estás apuntando a otra dirección de lectura específica, asegúrate de adaptarte. Los usuarios suelen escanear pasajes informativos con el llamado patrón Z, mediante el cual escanearon de izquierda a derecha, luego bajan y luego vuelven a escanear de izquierda a derecha. A continuación se muestra un ejemplo de un patrón Z típico. Encontrarás mucho esto en secciones de héroes. Lo importante es terminar siempre en un llamado a la acción. Encontrarás muchas páginas como esta con un llamado a la acción en el lado izquierdo. Ahora se podría interpretar esto como un patrón Z extendido, un llamado patrón en zigzag. Pero la investigación sugiere que debido a que los usuarios esperan que la parte superior izquierda sea el logotipo y la navegación, a menudo se ignora en la primera vista por lo que los usuarios se enfocan justo en el contenido. Esto podría llevar a algo así llamado el Triángulo Dorado. Que estás usando tecnología de control ocular, no vas a saber si es una u otra, pero lo importante es que se basan en el mismo principio y terminan con exactamente el mismo diseño. También tenga en cuenta que nuestros puntos de escaneo están conformados por texto, imágenes, y llaman a la acción un trío hecho en el cielo. En páginas con mucho texto como artículos, sin embargo, escaneamos en el llamado patrón F. Esto significa que empezamos de nuevo por arriba, escaneamos hacia la derecha, pero luego bajamos, escaneamos hacia la derecha otra vez, pero no hasta la primera vez, y de ahí en adelante, escaneamos verticalmente. El patrón F es un poco malentendido. No se trata de escanear páginas enteras. Realmente se trata de páginas que son realmente pesadas en información, como artículos, especialmente en dispositivos más pequeños como teléfonos. El último pero uno de los patrones más importantes que me gustaría mostrarles es el llamado escaneo de pastel de capas. Eso muestra una fijación en encabezamientos, subtítulos, e imágenes, por lo que cualquier cosa que hagas envía por jerarquía visual. De acuerdo con Nielsen Norman Group Research, esta es la forma más efectiva para que los usuarios escaneen una página. Una y otra vez, un buen ejemplo sobre cómo UX y UI van realmente de la mano. Al ingresar a esta página lo que probablemente más te va a llamar la atención es el gran titular que te dirá inmediato de qué se trata un tema. También verás una llamada a la acción que está en el color más destacado para que puedas suscribirte a algo. Después tienes un texto con palabras resaltadas. Si te desplazas, obtendrás pequeños bloques para que te digan que hay principios de UX, Figma y conceptos básicos de código, y luego a medida que escaneas, obtendrás más trozos. Aquí, por ejemplo, obtienes los trozos del titular y luego la información revelada. El modo en que vas a escanear esto es probablemente desde la característica más grande más prominente hasta los pequeños detalles una vez que te interesen los titulares. Vamos a pasarlo paso a paso. ¿ Cuáles son las cosas que podemos usar para generar el patrón de escaneo y llamar la atención? Bueno, el paso 1 es usar titulares fuertes. Esto significa titulares fuertes en redacción, muy claros y también en jerarquía como asegurarse de que haya una jerarquía que ya se definió en UX, cuáles son las cosas importantes y cuáles son las categorías abajo? Sólo escaneando los titulares, ya debería saber todo lo que está pasando en su página web. El siguiente es destacar las palabras clave. También asegúrate de usar enlaces, aquí, por ejemplo, que sean descriptivos. No hagas cosas como hacer clic aquí y luego solo subrayar para aquí realmente usar la información y hacer que destaque. Utilizar viñetas, iconos, y otros acortadores gráficos. Presentar una conclusión primero, los llamados párrafos invertidos. Asegúrate de que el usuario entra y ya obtiene el gran beneficio si aún les interesa, seguirán escaneando. Para resumir, nuestros patrones, el patrón Z es para contenido informativo, como tus secciones de héroe, o la introducción, todo lo que es como rápido y en un solo look y generalmente donde quieres un llamado a la acción. El patrón F es para páginas de contenido pesado, pero realmente hablando aquí de artículos, información pesada de texto, especialmente en dispositivos pequeños como teléfonos móviles. El escaneo de tartas de capas es realmente sobre cómo estructurar toda tu página de arriba a abajo y todo se trata de crear una jerarquía. 10. Comentarios y estado de sistema: El estado visible del sistema nos ayuda a empoderar a nuestros usuarios. El usuario siempre debe estar informado de lo que está pasando y recibir una retroalimentación inmediata a cualquier acción. Piénsalo como un botón de elevador. Imagina que lo presionas y absolutamente nada pasaría. Lo volverás a presionar y lo considerarás roto. No obstante, simplemente iluminando, entiendes que tu acción fue entendida y el ascensor está en camino, sólo va a tomar un poco de tiempo. Es lo mismo o aún más en línea. Toda acción necesita una retroalimentación. Esta retroalimentación puede ser una retroalimentación visual, como una retroalimentación de audio, un pitido, una retroalimentación háptica, eso es como cuando tu teléfono está vibrando, cuando recibes un mensaje, o puede ser una retroalimentación visual. La retroalimentación del estado del sistema se puede dividir en cuatro categorías: retroalimentación constante, retroalimentación de posibilidad, retroalimentación de acción y retroalimentación potenciadora. Echemos un vistazo al número uno, retroalimentación constante. Por eso, nos referimos a retroalimentación que siempre se comunica para evitar frustración o momento de sorpresa. Ejemplos serían algo así como la conexión a Internet, la batería, o podría ser el tiempo restante. Los bancos, por ejemplo, usan esto cuando estás conectado ya que te bloquearían automáticamente después de estar inactivo durante cierta cantidad de tiempo. El segundo tipo de retroalimentación es la llamada retroalimentación de posibilidad. Esto básicamente resalta toda la interacción uno podría tener con la página. Esto son cosas como si pasas el cursor sobre un enlace o un botón y cambia ligeramente de color para mostrar que se puede hacer clic. También podría ser una caja entera cambiando apariencia como el color o la sombra al pasar el cursor, lo que indica una posible interacción. O cosas como un campo de entrada en el que puedes hacer clic o icono de calendario cuando pasas por encima de él, se expandiría. El tercer formulario es retroalimentación clásica a la acción, como al hacer clic en un desplegable o en un botón que envía un formulario. Cualquiera que sea el resultado, es necesario mantener informado al usuario. Posible desenlace podría ser el siguiente , indicando tiempo de espera, como una barra de carga o una cuenta regresiva o algo similar que indica que hay algo sucediendo pero solo toma un segundo para ser cargado. Esto es realmente importante que tengas eso en segundo plano, aunque en tu prueba las cosas sean súper rápidas y casi no hay tiempo para cargar. Esto podría ser muy diferente en otros dispositivos u otras conexiones a Internet. Otro resultado podría ser que la acción esté concluida. Esto podría ser obvio como si apareciera una nueva página o se abriera un desplegable. Pero a veces no es tan obvio, como cuando estás enviando un formulario. Entonces solo necesitarías mostrar un breve mensaje de éxito de confirmación que puede ser tan simple como un tick, o un bien hecho, o gracias. El tercer resultado es que algo sale mal. En ese caso, es necesario que el usuario tenga conocimiento de ello. Es necesario mostrar un mensaje de error y sugieren una solución sobre cómo resolver esto. Ahora el último tipo de retroalimentación es un poco diferente, lo llamaré la retroalimentación empoderadora. Básicamente significa que en cualquier etapa le hacemos saber al usuario dónde está, cómo moverse hacia atrás y hacia adelante, y cómo salir de cualquier situación. Ejemplos de esto podría ser una miga de pan clicable que indique dónde estamos. También en un checkout o regístrate, verás pasos destacados del proceso mostrando al usuario la posición actual. Hay más razonamiento psicológico detrás de hacerlo de tal manera y romper todo en pequeños trozos más pequeños. No obstante, también es realmente genial simplemente por orientación. Entender lo que está pasando a cada paso del camino no solo hace que tus usuarios se sientan en control, sino que también crea una sensación de confianza que da libertad para explorar más tu producto. Vamos a resumir. cuatro categorías principales de retroalimentación: retroalimentación constante, esto es algo así como comunicar el estado actual de la batería, posibilidad de retroalimentación, estoy indicando una posible acción al usuario, like estoy mostrando en qué áreas se pueden hacer clic en mi sitio web, comentarios de acción, comentarios sobre la acción de un usuario, así que esto es una vez que el usuario tomó acción, llenó un formulario, hizo clic en el botón, soy comunicando el éxito o el error, por ejemplo, empoderando la retroalimentación, ¿dónde estoy? Siempre mostrando claramente dónde está el usuario y cómo navegar a cualquier área deseada. 11. Prevención de errores: La prevención de errores es una de las heurísticas de usabilidad más importantes. A menudo se pasa por alto, pero marca toda la diferencia. ¿ Cuáles son las formas comunes de evitar errores? Te quiero mostrar tres categorías. El primero es recordar prevenir, el segundo, sugerencias y restricciones, y el tercero confirmando acciones. Empecemos con el número 1, recordemos prevenir. Esto significa que antes de que ocurra un error o un resultado desagradable, le das un pequeño grito a tus usuarios. Un ejemplo sería que tu teléfono te recuerda que tu batería se está agotando mucho antes de que realmente se acabe. También tenga en cuenta que aquí, además de simplemente volver atrás y cargar su teléfono, se le ofrece otra solución, como ponerlo en un modo de baja potencia si está en movimiento. Esta solución de un solo clic es realmente útil y aprenderemos más sobre esto al hablar de manejo de errores. Recordar prevenir también podría ser algo así como un recordatorio de que una clase a la que te inscribiste está empezando o que tienes que confirmar una cita. Enfrentémoslo. Los pop-ups son molestos, por lo que solo quieres usarlo si tu usuario perdería el acceso o perdería algo. Idealmente, dar a los usuarios la oportunidad darse de alta y salir de dichos recordatorios. Número 2, sugerencias y restricciones. Sin notarlo mucho, estarás usando esto todo el tiempo tú mismo. Echemos un vistazo a un simple ejemplo de reserva. Como de costumbre, solo estoy usando este ejemplo sin relación con la empresa. Solo te estoy mostrando alguna gran UX de la vida real. Lo que auto-sugerir hace, es realmente genial cuando empiezo a escribir. Digamos que voy a ir a este lugar de Berlín, y no estoy muy seguro de cómo se llama, algo así como branden, y entonces ya veo cómo podría ser, así que es Brandeburgo. Digamos que aún escribo esto de la manera equivocada. Pongo brandinbur y todavía va a funcionar lo que estoy buscando. Esto es realmente, realmente genial porque lo contrario simplemente lo habría puesto, lo había escrito de la manera equivocada, y entonces habría terminado sin resultados de búsqueda. El resultado sugerido es algo así como un sistema que funciona en segundo plano. No es necesario definir cuáles son las sugerencias, pero hay que diseñar el espacio para ellas en su estructura de cable, luego asegurarse de que planes de diseño y desarrollo y probar esta característica en consecuencia. Escojamos eso y pasemos a nuestra siguiente cosa, que son las restricciones. Ahora bien, un calendario es un buen ejemplo para las restricciones. Porque aquí necesito escoger una fecha de inicio y una fecha de fin. Ahora mi fecha de finalización de la reserva no puede ser anterior a mi fecha de inicio. Bueno, esto suena realmente obvio. Pero para ser honesto, esto es algo donde suceden muchos errores si solo dejas que la gente escriba las fechas. Entonces solo pasamos al último filtro que nos dieron y aquí también puedes ver que no necesito teclear solo un número, pero ya puedo filtrar. Por ejemplo, si añadiría mascotas, entonces podría filtrar automáticamente todos los pisos donde no se permiten mascotas. Sólo obtendré los resultados con los que realmente puedo trabajar. Este es un gran ejemplo de una experiencia de usuario fluida que evita mucha frustración más adelante. Nuestro último es confirmar acciones. Al hacer clic en un botón normalmente ya confirmas una acción. No obstante, hay acciones con mayores consecuencias. Por lo que quieres asegurarte realmente de que tu usuario esté al tanto de esta acción. Aquí, por ejemplo, tengo la página donde hospedo mi sitio web y obviamente no quieren que la gente borre accidentalmente sus sitios web. Lo que hacen si vas a la cabeza es que, primer lugar, lo llaman Zona de peligro para que quede bastante claro. Entonces si hago clic en Eliminar este sitio, me piden que introduzca el nombre de la página que estoy a punto de eliminar. Doy clic aquí sólo una vez que ingresé un nombre, solo lo llamaré mi prueba de página aquí. Entonces el botón de borrar se activa. Otro ejemplo es enviar algo así como boletines donde obtendrías un resumen de lo que estás a punto de enviar y a cuántas personas y entonces necesitarías confirmar. Estos diálogos son geniales pero asegúrate de usarlos para acciones muy selectivas. Sólo úsalos cuando las cosas realmente pueden salir mal y tener un gran impacto. Ahora, en la mayoría de los casos, puedes cubrir lo obvio y prevenir la mayoría de los errores. los que aún suceden, puedes trabajar y manejarlos apropiadamente. Pero podría estar diseñando productos donde la prevención de errores es crucial. Al igual que un producto financiero o más aún un dispositivo de salud. En ese caso, la prevención de errores debe ser una prioridad absoluta y debes tener una estrategia clara trabajando hacia abajo desde las zonas donde la mayoría de los daños podrían pasar a agradable tener o facilidad de uso. Las correcciones podrían ser bastante pequeñas pero efectivas. Algo así como una alerta diciendo: “¿De verdad quieres transferir cantidad X si está por encima de cierto umbral? También es realmente efectivo dar a los usuarios un resumen para confirmar antes de comprar. Esto es lo que hacen muchas aerolíneas por ejemplo. Esto no sólo es agradable para el usuario porque obtienen una visión general y no reservan un vuelo equivocado y necesitan manejar todo el estrés de cambiarlo, sino que también es realmente genial para el comerciante porque cosas como las reversiones de cargo y el manejo de clientes es una tarea muy costosa y laboriosa. Realmente mapea tu prevención de errores como equipo. La prevención de errores comienza con una buena UX. Está diseñado para en tu UI y ejecutado en desarrollo. Necesitas estar en el mismo barco. Vamos a resumir. Utilice alertas para evitar errores, pero solo si los usuarios pierden el acceso o pierden el acceso. Ten cuidado con esa. Utiliza sugerencias como autorelleno y restricciones para guiar a los usuarios y eliminar resbalones. Agregar una capa de confirmación cuando se trata de acciones destructivas o grandes distribuciones de marketing. Crear una jerarquía de prevención de errores para productos sensibles a errores, como los productos médicos. 12. Manejo de errores: Siempre que sea posible, diseñaremos para evitar errores. Sin embargo, no hay forma de deshacerse por completo de ellos. Entonces, planeemos para eventualidades y ayudemos a recuperar errores. manejo de errores ocurre prácticamente en todas partes de tu página, pero los formularios, filtros, y todo tipo de entrada e interacción son las áreas críticas a tener en cuenta. Yo quisiera presentarles el plan de tres pasos de manejo de errores introducido por el Grupo Nielsen Norman. paso 1 es reconocer, paso 2 es diagnosticar y el paso 3 es recuperarse. Vamos a pasar por ellos paso a paso y empezar por reconocer. Usaré un simple formulario de inicio de sesión aquí para mi ejemplo, pero puedes usar este método en casi cualquier cosa para manejar errores. Tenga en cuenta que el formulario ya está configurado de manera que se eviten posibles errores. Por ejemplo, ya estoy mostrando en el correo electrónico y qué formato tendría que ser ingresado. Pero digamos que el usuario todavía escribe en un error. paso 1 es ahora reconocer este error, lo que significa que informo claramente al usuario que ha ocurrido un error. Hay diferentes formas en que podrías hacer esto, y en realidad se recomienda combinar más de una señal de reconocimiento de errores. En mi ejemplo, el contorno no sólo se vuelve rojo, sino que se vuelve ligeramente más grueso. También estoy agregando un icono de advertencia adicional. ¿ Por qué? Porque a pesar de que el rojo, para la mayoría de nosotros, es el signo más obvio de un error, debemos diseñar también para personas que quizás no vean el color. De ahí que el grosor del borde del campo cambie y agregué un icono de alerta. Paso 2, diagnosticar el error. En este paso, necesito decirle claramente al usuario lo que realmente salió mal. Entonces digo que el correo electrónico ingresado no es correcto. Es muy importante usar un lenguaje sencillo y sencillo en este paso. No obstante, todavía puedo hacerlo mejor. Veamos qué podemos mejorar con el paso 3. Recuperar significa, en lugar de solo decirle al usuario, esto está mal, puedo decirle al usuario, oye, ¿por qué no lo resuelves así? Por lo que mi advertencia de error podría ser algo así. correo electrónico debe incluir un símbolo @. Una vez que el usuario ordena el error, nuestro mensaje de error desaparecería e incluso podemos añadir un pequeño tick extra para mostrar que ahora todo está funcionando bien. Otra área que cada página debe tener para recuperación de errores es la llamada página 404. Si eres nuevo en esto, 404 es una página predeterminada a la que envía a los usuarios al hacer clic en algo que ya no existe, como un enlace muerto o si ingresan una URL incorrecta. Funciona después del mismo principio de tres pasos. Uno, reconoce, tu página no fue encontrada. Dos, diagnosticar, y eso no es tan crucial aquí porque va un poco de la mano con reconocer, pero se podría decir algo como la página que estás buscando ya no existe o se movió. Tres, recuperate. Esto es realmente importante. Muestre siempre su menú en la parte superior, que los usuarios puedan navegar de nuevo a donde quieran ir o también ofrecer una llamada a acción que lleve a los usuarios de vuelta a su página de inicio. También hay ejemplos realmente divertidos sobre 404 páginas por ahí, como esta linda de aquí por Pixar. Como puedes ver, puedes ser creativo con él. Mantenlo simple, pero hazlo tuyo. Vamos a resumir. Ocurrirán errores así que asegúrate de diseñar un manejo apropiado de errores. Utilice los tres pasos de manejo de errores. Reconocimiento, hay un error; diagnosticar, cuál es el error; y recuperar, ¿cómo puedo volver a encarrilar? Intenta usar más de una forma de identificar errores. Por ejemplo, el color por sí solo no es suficiente ya que no todos los usuarios podrían verlo correctamente. No olvides tu página 404. 13. Una palabra sobre la Dopamine y el diseño ético: Cómo configuras tu diseño para desencadenar la liberación de dopamina en realidad juega un papel importante. Averigüemos un poco más. ¿ Qué es en realidad la dopamina? Voy a explicar esto muy brevemente y simplificado porque como se puede imaginar, hay suficiente material para un doctorado o real varios doctorados cuando se trata de dopamina. dopamina es una sustancia química producida por nuestros cerebros que juega un papel importante en motivar el comportamiento. La dopamina se libera cuando, por ejemplo, comes alimentos reconfortantes, terminas una tarea, tienes una interacción social gratificante, o logras algo. ¿ Es este sentimiento bueno, feliz, o gratificante que obtienes? La dopamina te hace desear cosas y te hace querer repetirlas. Casi todo lo que haces libera dopamina, incluso cepillarte los dientes. Pero es el nivel de dopamina lo que marca la diferencia. En resumen, cuanto más dopamina espera tu cerebro de una actividad, más motivado estás para hacerlo y para repetirla. Cuando se trata de diseño de UX y dopamina, existen tres áreas principales de interés para nosotros. Uno está celebrando pequeños triunfos, dos está completando una tarea, y tres es la llamada predicción de recompensas. Empecemos con lo obvio. No hay área para mostrar el efecto de la dopamina en UX mejor que las redes sociales. Los neurocientíficos cognitivos han demostrado que gratificantes estímulos sociales, como rostros de risa, reconocimiento positivo a través de likes y mensajes, nos da casi una ráfaga de dopamina. Todo como en las redes sociales es como un poco de victoria y libera dopamina. La gente puede volverse realmente adicta a ella. Además, el pergamino interminable de imágenes en Instagram, por ejemplo, te deja con este antojo de completar la tarea y querer aún más y más dopamina. La investigación en el aprendizaje de recompensas y la adicción también muestra un patrón llamado predicción de recompensas. Algo que en realidad se usó en los casinos y ahora se usa cada vez más en línea. Cuando obtenemos una recompensa inesperada, obtenemos una dosis alta de dopamina. También aprendemos que en ciertas situaciones, existe la posibilidad de esa recompensa y empezamos a anticipar. En realidad la investigación de escaneos cerebrales ha demostrado que anticipar una victoria estimula nuestro cerebro más que la victoria real. Es ese famoso momento en un juego de ruleta cuando el tazón circula antes de hacer el triunfo. Se puede ver que en muchas películas, lo ponen en un movimiento lento para extender ese sentimiento de anticipación. Ahora lo que pasa es que ya obtienes la dopamina en la fase de recompensa mientras juegas el juego y ni siquiera ganas todavía. Si pierdes demasiadas veces, sin embargo, la dopamina cae y te detienes. Las máquinas tragamonedas, por ejemplo, están diseñadas de tal manera para mantenerte simplemente enganchado en este dulce punto entre la anticipación, el amor, y la victoria, justo lo suficiente para seguir adelante. Ahora, muchas aplicaciones usan el mismo patrón para mantenerte comprometido. Si pensamos que podría haber una recompensa aleatoria, seguimos regresando por más y más. Por ejemplo, la pequeña burbuja en tu mensaje de chat hace justamente eso. Recogemos nuestros teléfonos todo el tiempo porque sabemos que eventualmente este pequeño ser y esta pequeña burbuja estará ahí. Algunas aplicaciones de redes sociales incluso tienen un algoritmo que retiene likes. Te irritas, sigue revisando, y luego se siente increíble cuando todos se liberan de repente. Tienes esta anticipación como con la máquina tragaperras y luego boom, viene tu precio como afluencia de tasación social. Suena todo un poco de miedo? Sí, yo también lo creo. Cuando el producto está diseñado de tal manera para engañar al usuario, entonces llamamos a eso UX oscuro o patrones oscuros. Hay más ejemplos como ocultar costos, casillas predeterminadas, etc. ¿Por qué te digo todo esto entonces? Bueno, porque tú como diseñador de UX también puedes jugar un papel en cómo se construyen los productos. Es genial saber e incluso importante saber qué hace que los usuarios hagan clic, porque entonces puedes usarlo apropiadamente. Ahora hay un movimiento fuerte que pide el llamado diseño ético. Te recomiendo encarecidamente que caves un poco profundo en ese tema y encuentres el lugar donde te sientas cómodo. Estos son algunos recursos gratuitos; humanebydesign.com, humanetech.com, y darkpatterns.org. Como de costumbre, no tengo absolutamente ninguna relación con esas páginas. Simplemente encuentro que tienen contenidos muy valiosos para ser compartidos y son absolutamente libres para iniciar tu investigación. También verás que puedes usar un efecto dopamina de maneras muy bonitas solo para hacer tareas poco tediosas solo un poco más bonitas. Permítanme darles un ejemplo. No es tan espectacular como Facebook o Instagram, pero muy efectivo. Cuando damos retroalimentación como retroalimentación por error, suele ser retroalimentación negativa como si algo saliera mal aquí. obstante, hay mucho poder en la retroalimentación positiva. Por ejemplo, hacer que todas las reglas sobre contraseñas sean correctas, es realmente molesto. Por lo general, escribes uno y luego obtienes un error por símbolo o palabra olvidada demasiado corta, lo nombras. Esta es una forma muy inteligente de resolverlo aquí. Al dar retroalimentación positiva inmediata cada vez que cumples uno de los requisitos, los usuarios se sienten cumplidos y el proceso se vuelve mucho más suave. Básicamente estás creando diminutas versiones de likes. Vamos a resumir. Cierto diseño de UX puede desencadenar la liberación de dopamina, principalmente a través de celebrar pequeñas victorias, completar una tarea y recompensar la predicción. dopamina motiva al usuario a volver por más. La retroalimentación positiva es una gran manera de ayudar al usuario a través de tareas necesarias pero tediosas. Considera siempre soluciones de diseño ético. 14. Descarga de materiales de curso: Quizás quieras trabajar a mi lado, así que preparé algunos archivos para que los descargues. En el curso, estás tomando simplemente navega a Project and Resources, y ahí encontrarás toda la información y el enlace donde podrás descargar el material. O bien puedes navegar a mi perfil donde también encontrarás un enlace directo a la página de descargas. En esta página encontrarás gran variedad de descargas. Simplemente puedes elegir el curso que estás tomando actualmente y luego solo tienes que hacer clic en “Descargar” y se descargará automáticamente el archivo por ti. Para abrir un archivo de Figma que descargaste, es importante que tengas una cuenta de Figma. Dentro de tu cuenta, navega a nuevo y pulsa “Importar”, podrás elegir luego un archivo que te gustaría abrir. Podría tomar un momento ya que son bastante grandes pero una vez que los importaste, estarán a tu cuenta y no necesitas repetir este proceso. Estoy trabajando con fuentes de Google para la mayoría de mis diseños así que si estás trabajando con la app Figma, entonces no necesitas hacer nada. Todas las fuentes de Google se precargan automáticamente. Si quieres trabajar con Figma en el navegador, entonces solo necesitas buscar la fuente que te está mostrando como faltante por ejemplo Poppins Yo uso mucho, y luego puedes descargar directamente esta fuente, instálalo en tu computadora y ya estás listo para ir. Todos los recursos son gratuitos para los estudiantes existentes y no es necesario ingresar ninguna información adicional. Por supuesto también puedes descargar cualquiera de los otros archivos en caso de que te interese, así que bajo general siempre agrego cualquier cosa que creo que pueda ser útil así que hay por ejemplo, una plantilla Bootstrap y luego una lista con enlaces para inspiración, libros y bloques que son realmente geniales para el diseño UX UI. Esta lista de descargas está creciendo constantemente, así que asegúrate de volver y echar un vistazo de vez en cuando. 15. --> EXERCISE: armario de trabajo de espacio de trabajo: Pongamos en práctica toda esta teoría. Preparé un expediente de Figma para ti. En este archivo, encontrarás el ejercicio cuando lo abras en la primera página. Nuestro ejercicio es que vamos a construir una alambrada para un pequeño espacio de coworking de oficina abierta. En el breve, encontrarás una visión general de las cosas que ofrecen, por lo que cosas como el precio y diferentes secciones que el cliente quiere. Ahora en la vida real, obviamente tendríamos mucho más personas de investigación, información en profundidad, sobre todo sobre los usuarios antes de iniciar el wireframe. No obstante, este es un ejercicio para realmente sólo poner sus principios a usar por lo que tomaremos un atajo y les daré toda la información en el breve, y sólo vamos a dar eso por sentado en este momento. También se puede ver una primera configuración de un wireframe para el proyecto con el que, sin embargo, nuestro cliente estaba muy descontento porque la UX no estaba bien así que estamos aquí para mejorar la UX del wireframe dado. Al no tener ningún otro resultado de investigación, simplemente vamos a confiar en los principios de los que hemos estado aprendiendo hoy. Siéntase libre de remodelar, agregar, eliminar, moverse o comenzar completamente desde cero. Realmente trata de convertir esto en un primer borrador con el que podrías volver al cliente para discutir y comenzar algunas pruebas. En la segunda página del archivo, encontrarás la solución que preparé para ti. Ahora es importante tener en cuenta que nunca existe tal cosa como una solución perfecta en el diseño. La solución que se te ocurrió podría ser igual de buena o incluso mejor que la mía. De lo que te estoy brindando aquí es solo una inspiración para que veas cómo manejaría esos problemas y solución que estoy sugiriendo. Realmente puedes tomar esto tan crítico o tan curioso como te gustaría. 16. Parte 2: diseño de UI: Si disfrutaste de este curso y del ejercicio, entonces te recomiendo que saltes justo a la segunda parte de este curso aquí en Skillshare, simplemente busca aprendizaje lunar y encontrarás todos los cursos. Encontrarás en la parte inferior el curso de diseño de UI, que es la segunda parte de la intro de UX UI. En esta clase, vamos a dar vida al alambre-estructura que acabas construir y aprender sobre todos los principios del diseño de la interfaz de usuario. 17. Gracias: Bien hecho por terminar este curso. Siéntase libre de llegar a nosotros en moonlearning.io. Siempre estamos interesados en escuchar sus comentarios. También nos harás un gran favor si tan solo pudieras tomarte un minuto y dejar una opinión aquí mismo. Si disfrutaste de este curso, entonces también asegúrate de echar un vistazo a nuestros cursos adicionales. En moonlearning.io, cubrimos todos los temas desde los fundamentos mismos del diseño de UX/UI hasta Figma e incluso algunos conceptos básicos de código. Asegúrate de visitar nuestro sitio web moonlearning.io donde también puedes suscribirte a nuestro boletín de noticias.