UX para principiantes: crea experiencias encantadoras aprendiendo los conceptos básicos

1. Introducción al curso: Bienvenido a mi curso sobre diseño de UX para principiantes. ¿ Por qué creé este curso? He visto a muchos diseñadores, desarrolladores, incluso gestores de productos haciendo y repitiendo el mismo diseño, y diseño de usabilidad e interacción, errores. Por qué no pudieron solucionar esos errores es que no tienen la comprensión de la usabilidad, la experiencia del usuario o los principios de diseño de interacción. Ahora, estos principios son estas ideas de raíz. Van a gobernar la experiencia de usuario de todos los productos, ya sean productos físicos o digitales. Entonces en este curso, vas a dominar estos principios básicos con toneladas de ejemplos del mundo real como Amazon, Walmart y G-mail y Google, diferentes productos de Google. lo que después de tomar este curso, podrás localizar problemas en tu propio sitio web de e-commerce o en tu propia app, y podrás mejorarlos fácilmente. Se puede ver dónde está el problema y cómo solucionarlo. Hola, soy Muhammad Ahsan, y estoy diseñando UI de los últimos ocho años y mejorando su usabilidad y experiencia de usuario de los últimos tres años. Ahora, empecemos y empecemos a mejorar la experiencia de usuario de los productos digitales. 2. ¿Qué es el diseño de UX y de UI de UI de: La primera pregunta es ¿qué es la experiencia del usuario? Hay muchas definiciones en línea o incluso en libros que son muy difíciles de entender así que voy a simplificarlo para ti. El gozo, satisfacción o frustración que tu usuario va a sentir después de usar tu producto eficiente o muy lento, utilizable y agradable. En cuanto a producto, podría ser una aplicación móvil, una aplicación web, smartphone, o cualquier paquete, o una laptop u otra cosa. En términos simples, el viaje de tu usuario con tu producto es básicamente una experiencia de usuario. Vamos a explicar la experiencia del usuario en cuanto a una aplicación móvil. Es posible que hayas usado muchas aplicaciones móviles y no sabes cómo te afecta toda la experiencia del usuario. Para un usuario, encontrar la aplicación o instalación de la app es el primer paso. Quizás lo encuentres en Facebook o tal vez por escuchar a un amigo que “Esta aplicación es realmente genial hombre. Es necesario instalarlo. Puedes hacer diferentes caras divertidas con él o lo que sea”. Por lo que el primer paso es encontrar el o e instalar la aplicación. Entonces el siguiente paso es la experiencia de incorporación, registrándose. Podría haber muchos problemas. Incluso he visto muchas apps que realmente apesta al apuntarme. La mayoría de los usuarios, se van a ir en esta etapa. La tercera etapa es llegar a aprender la app. Las primeras impresiones, cómo fluye la aplicación de manera diferente con diferentes pantallas, y diferentes interacciones, y cómo estás aprendiendo la app. Entonces la cuarta etapa está realizando importante tarea de manera eficiente y fácil. Esta es la efectividad; qué tan funcional es tu producto, cómo puedes completar con eficacia y facilidad tus principales tareas con este producto. Entonces impacto emocional, al final te sentirás frustrado o podrías estar contento con usar esa app y podrías estar satisfecho en general con esta aplicación. Hay una cosa más. Esto podría implicar también ponerse en contacto con su equipo de soporte vía telefónica o correo electrónico. Muchos sitios web y aplicaciones, son realmente buenos y realizan todo pero luego su equipo de soporte o sus retrasos de soporte son por tres días. Tu usuario te va a dar muy malas críticas. He visto productos muy buenos teniendo muy malas críticas solo por su equipo de soporte. Así que asegúrate de que este es también otro paso muy importante en la experiencia del usuario. Ahora vamos a discutir cuál es el producto final del diseño de la experiencia del usuario y quién estará involucrado en el proceso de diseño de la experiencia del usuario. El producto de cualquier diseño de experiencia de usuario serán minuciosas minuciosas junto con especificaciones detalladas de ese producto. Especificación detallada significa cuáles son las características, y qué hará la aplicación, o qué va a cubrir este sitio web, cuánto área sobre cuántas características y funciones. Proceso de UX involucra a los CEOs porque saben mucho del producto, luego gerentes de producto, luego atención al cliente, luego a tus diseñadores y desarrolladores, y así como a otros usuarios, tus usuarios principales, y también al SEO personas o la gente de marketing. Todas estas personas van a estar involucradas en el proceso UX. Definamos el diseño de la interfaz de usuario. Tenemos mucha confusión sobre el diseño de la experiencia del usuario y el diseño de la interfaz de usuario. El diseño de la interfaz de usuario significa el aspecto y la sensación de su aplicación. Interfaz de usuario es el punto donde se va a reunir su usuario y su producto. El usuario va a interactuar con tus botones, el usuario va a presionar diferentes cosas en tu pantalla, pero lo que está viendo en pantalla es básicamente el diseño de la interfaz de usuario. Incluye colores, tipografía, o cómo se espacian los diferentes botones, cómo se debe alinear el texto. Entonces todo esto se trata de la estética y cómo tu usuario va a interactuar con tu app. Una cosa más, esta es la primera impresión que tu usuario va a obtener de tus productos, así que asegúrate de que esta interfaz realmente se vea genial y también funcione bien. Muchos usuarios en estos días, incluso si miras los productos de Apple, tienen una calidad estética específica o son muy guapa. La primera impresión que el usuario va a obtener de su producto es cómo se ve y se siente, por lo que esto es muy importante. El producto final de cualquier diseño de interfaz de usuario o diseño de interfaz de usuario serán maquetas de alta fidelidad junto con guías de estilo. maquetas son básicamente el look y la sensación final de tu producto. Estas son básicamente imágenes y aquellas de ustedes que han tomado mis otros cursos de diseño de UI, saben de guías de estilo y maquetas. Las guías de estilo son básicamente cómo tus colores, tipografías, y diferentes tamaños de botones y cada otro objeto que estés usando, elemento de diseño que estás usando, se van a unir y otras especificaciones de diseño diferentes que eres utilizando. Estas maquetas y guías de estilo se entregan a los desarrolladores para que realmente las implementen en forma de un producto real o código real. Al final, voy a resumir esta conferencia con decir una cosa; que el diseño de la interfaz de usuario es básicamente un proceso de un diseño de UX. El diseño UX es un campo muy amplio. El diseño de la interfaz de usuario es parte del diseño de UX. Ten en cuenta todas estas cosas y si tienes alguna pregunta, pregúntame. Llegarán muchas más cosas sobre el diseño de UX y la interfaz de usuario, así que pasemos a la siguiente lección. 3. Puedo ser un diseñador de UX: Ahora la pregunta es, ¿quién puede ser un Diseñador de UX? La respuesta más simple es, cualquiera puede ser un Diseñador de UX, solo necesita estudiar algo sobre psicología humana y algunas cosas sobre cómo los humanos interactúan y se comportan alrededor de productos digitales o cualquier otro producto. Ya has visto que he mostrado todo sobre los humanos, así que todo esto se trata de humanos. Por eso se le llama diseño centrado en el ser humano. Hablemos de los diferentes trabajos de UX Designer. Existen diferentes tipos de Diseñadores UX. Hacen diferentes trabajos. Hay muchos títulos de trabajo específicos diferentes para diferentes Diseñadores UX. El primero es Intervisor de Usuario o Investigación de Usuario. Yo lo llamo Investigador de Usuario o algo así. Entrevista a diferentes usuarios y obtiene alguna información de ellos. Entonces tenemos los Planificadores son los que planean la información o la arquitectura de la información. Estos se llaman Arquitecto de Información. Después tenemos Diseñadores. Se van a wireframe y prototipo. Después tenemos Diseñadores de Interacción que van a diseñar los flujos y los diagramas e interacciones, planeando todas las interacciones de tu app, tal vez algunas animaciones cómo esta pantalla va a fluir a otra pantalla, algo así. Después tenemos los Testers de Usabilidad o Gurus de Usabilidad que van a observar a los usuarios reales de su producto con sus usuarios y van a evaluar diferentes problemas de UX con él. Ahora Entrevistadores de usuarios también van a involucrar entrevistar a los interesados y directores ejecutivos de esa empresa o producto porque saben mucho del producto. Ahora si fueras Diseñador de UI, puedes convertirte fácilmente en Diseñador de UX porque ya sabes algunas cosas sobre el diseño. Lo que hay que aprender es la psicología humana y el comportamiento humano utilizando productos digitales. Ya conoces la mitad de UX Design, pero porque ya sabes que cómo estos diseños o tipografía o pilares van a captar la atención del usuario o si los usuarios pueden hacer clic en este botón o no, qué tan grande debe ser este botón o algo así. Si eres diseñador de UI, ya conoces la psicología detrás de los diseños y la información visual. Ya sabes cómo diseñar la información. Ya sabes presentar información. Ahora cómo vas a pasar de un desarrollador a un Diseñador UX, si eres programador o eres codificador, entonces sabes cómo se implementan las cosas. Ya conoces la columna vertebral de todo. El equipo de UX podría llamarte ingeniero o desarrollador de software o algo así. Puedes entender fácilmente por qué viendo las pruebas de usabilidad o usuarios o tal vez entrevistas de usuarios o cuando los Diseñadores de UX están planeando algo, ya sabes cómo podemos lograr esto, cómo podemos hacer que nuestro producto se cargue rápido o tal vez algunos cosas valiosas como esa. Ya sabes implementar las cosas. Es necesario conocer la psicología del usuario y cómo las diferentes cosas afectan el comportamiento del usuario. Si dominas esas cosas o lo esencial de los conceptos de experiencia de usuario, puedes convertirte fácilmente en Diseñador de UX. Siempre que los investigadores de usuarios o entrevistas de usuarios llevan al equipo para entrevistar a los usuarios, siempre llevan consigo un ingeniero o un programador porque los programadores pueden ver los panes detrás de la interfaz de usuario. Pueden ver por qué está ocurriendo este problema. lo mejor es un error de conexión a la base de datos o tal vez el error no es visualizable o tal vez esa falla es muy pequeña cuando se renderiza desde el servidor o algo así. Pueden llegar con muchas soluciones prácticas. Eso se trata de convertirse en un Diseñador UX desde un fondo de diseñador o un fondo de desarrollador. Si tienes más preguntas, puedes preguntarme. Lo mismo se aplica a los ingenieros de SEO y a otras personas que tienen desarrollo o antecedentes informáticos. Si tienes alguna pregunta, ¿me preguntas? Esperaré sus preguntas. Ahora pasemos a la siguiente lección. 4. Diferentes roles de diseñadores de UX: Podría haber escuchado que hay muchos tipos de ingenieros, como ingenieros eléctricos, ingenieros mecánicos, ingenieros civiles. De igual manera, hay diferentes roles en el diseño de la experiencia de usuario, hay gente que hace investigación de usuarios, hay gente que hace arquitectura de la información o define la arquitectura de la información, luego hay gente que va a hacer el diseño de interacción para el producto, luego hay estrategas de contenido, luego hay expertos en usabilidad. Soy básicamente un diseñador de interacciones porque normalmente trabajo con marcos de alambre, maquetas, y prototipo la mayor parte del tiempo, normalmente también hago algunas de las pruebas de investigación y usabilidad del usuario. Veamos todas estas reglas. Ahora, el investigador usuario es alguien que va a realizar entrevistas de usuario y va a investigar usuario y va a hacerle algunas preguntas al usuario sobre el producto. El propósito principal de la investigación de los usuarios es recabar información sobre cómo, cuándo y por qué los usuarios utilizan ciertos productos y qué características necesitan en cualquier producto. Se puede hacer investigación de usuarios in situ o investigación de usuarios fuera del sitio o investigación de usuarios en línea, hay diferentes sitios web. In situ significa que vas a hacer una investigación de usuarios en la oficina del usuario, donde el usuario realmente utiliza los productos. El fuera del sitio significa que vas a llamar a tu usuario en tu oficina y has configurado, vas a grabar su entrevista de todos los usuarios dentro de tu laboratorio. Una investigación de usuarios en línea es que vas a publicar algunas preguntas en línea y diferentes usuarios que cumplan con tus criterios, ellos van a contestar las preguntas. Estos son diferentes tipos de investigación de usuarios. Ahora, vamos a hablar de diseñador de interacción. Los diseñadores de interacción trabajarán en el flujo de tu app, cómo alguien va a hacer clic o tocar y dónde va a fluir la pantalla y va a llevar al usuario a otra pantalla, caso de que se le haga al usuario algunas preguntas antes de pasar a la pantalla o algo así. Podría haber visto flujo de proceso de checkout en diferentes sitios web, son totalmente diferentes con diferentes sitios web. Si vas a Amazon, son como cinco, seis pasos en el proceso de pago, y si usas Walmart, van a ser solo dos o tres pasos de pago. Es así como el diseñador de interacción va a resolver este problema. Además, diseñador de interacciones te va a decir las interacciones o cualquier misión que vaya a suceder cuando abras o inicies tu aplicación, posible que hayas visto iPhone cuando tocas cualquier icono o intentas cerrar cualquier app, hay un animación de cerrar y abrir una app, por lo que esta va a ser parte de diseñador de interacción. Ahora, arquitecto de la información va a planear toda la información de cualquier app o sitio web y cómo se va a mostrar, cómo el usuario va a llegar o encontrar esta información, si la información debe estar en formato de video, formato de audio, o debe ser sólo el texto con encabezados, o debe ser imagen, imágenes o algo así. Ahora, puedes ver en Facebook hay diferentes tipos de publicaciones, como fotos, y luego tenemos post de video con textos, luego tenemos diferentes enlaces o tipo incrustado de posts. Existen diferentes tipos de bloques de información. Este es el trabajo de arquitecto de la información planear toda esta información y cómo se mostrará y cómo el usuario los va a encontrar. Ahora, el estratega de contenidos va a responder la pregunta de cómo tu empresa o marca o se va a entregar tu empresa o marca otu mensaje de negocio a tus usuarios finales, ¿qué lenguaje debes usar? ¿ Cuál voz y tono del producto debe ser? En resumen, va a enmarcar toda la historia de su producto. Ahora, cómo vas a contar toda la historia de tu producto, vas a usar menos texto y más imágenes, o vas a usar texto detallado o menos imágenes, o si vas a usar un video introductorio al respecto y todo el guión de ese video y todo va a ser el trabajo de los estrategas de contenido. Ahora, también implica todo el contenido escribiendo, compilándolo, cómo producir contenido que realmente necesita el usuario. Si este contenido es necesario por los usuarios, si los usuarios realmente están buscando este contenido, si realmente necesitan descargar este archivo PDF, por lo que estas son las decisiones que el estratega de contenidos va a tomar. Ahora, los expertos en usabilidad, realmente me encantó este trabajo. Expertos en usabilidad van a obtener comentarios de los usuarios después de verlos usando el producto. Darán al usuario la oportunidad de utilizar el producto o realizar diferentes tareas, y luego van a ver al usuario haciendo diferentes tareas y obtener todos los problemas y anotarlos y anotarlos. Es así como van a llegar al punto pin del usuario y cómo podemos mejorar el producto. Al final van a preparar un informe de usabilidad. Estos son todos los diferentes roles de los diseñadores de experiencia de usuario. Si te gusta alguno de ellos, puedes penetrar en ese campo. Si tiene alguna pregunta, pregúntame. Pasemos a la siguiente lección. 5. Partes principales del diseño de UX: Ya sabes de la UX, ¿qué es UX? Pero vamos a ver cuáles son las diferentes partes principales del proceso UX. Voy a simplificar todo. Vamos a empezar con cuál es el problema. Obtener conocimiento de un problema. ¿ Cuál es realmente el problema? Este es el primer paso. Entonces, ¿quién tiene el problema o quién tiene el problema? Estos son básicamente nuestros usuarios. Entonces tenemos cómo se va a utilizar? Este es el contexto. Cómo van a usar nuestra cámara nuestros usuarios. ¿ Lo van a usar bajo la lluvia o algo así? Cómo usarán los usuarios la solución, cómo van a interactuar con ella. Esta es básicamente la interacción, si van a usar su comando de voz o si van a ingresar personalmente usando sus dedos, o si van a vibrarlo con las manos o algo así. Esta es la interacción. Entonces al final, cómo vamos a probarlo y mejorarlo. Se trata de pruebas de usabilidad y ver a tus usuarios usando tus productos. Si no tienes tu producto en este momento, entonces puedes darles productos similares o sitios web similares, o el sitio web de tu competencia y ver cuáles son las carencias y problemas a los que se enfrentan tus usuarios. Esto puede darte mucha idea de cuál es el problema y cómo puedes solucionarlo. Ahora esta es una palabra de zumbido. Podría haber escuchado mucho diseño centrado en el ser humano. Ahora, el diseño centrado en el ser humano es básicamente un enfoque que fue adoptado por el equipo de diseño en IDEO. En realidad lo que hicieron es poner primero las necesidades y capacidades humanas y el comportamiento humano y luego diseñaron todo de acuerdo a eso. Básicamente diseñaron todo en torno a las necesidades y capacidades humanas y comportamientos. Hay un consejo más que te voy a dar es, aunque estés diseñando para humanos, no olvides que hay titulares de estaca y otros directores ejecutivos, tienen sus propias metas y tienen sus propios objetivos en su mente. También es necesario atenderlos también. Ahora hablemos de Contexto de Usuario. Esto es muy importante. Puede cambiar todo el proceso de su producto o puede agregar muchas características necesarias a su producto. Basta pensar que el contexto de usuario significa que las condiciones y el ambiente o la habitación o la oficina donde se va a utilizar su producto. Toma un ejemplo de una cámara. Es tal vez cámara DSLR y soy un shooter paisajista y disparo mayormente afuera. A lo mejor mostré la mayoría de los paisajes bajo la lluvia, entonces esta cámara necesita un escudo si. En estos días, mucha gente dispara en cada ambiente. Disparan al sol, a la lluvia, a la luz del sol, podrían disparar mientras nadan o algo así. Estas cosas van a cambiar el contexto de uso. Tomemos otro ejemplo de una aplicación de reserva de trenes. Es posible que tengas prisa y estés reservando tu tren mientras viajas, por lo que podría haber ruido a tu alrededor y podría haber señales bajas, señales Wi-Fi, o tal vez algunas restricciones más y el contexto del usuario es totalmente diferente. Podría haber gente a tu alrededor, podría haber mucho ruido, podría haber mucha reunión y estás reservando tus asientos. Necesitas cuidar todas estas cosas. Podrías estar al sol, así que tu pantalla no es tan brillante o estás teniendo problemas al hacer clic o tocar diferentes botones. Esto se llama Contexto de usuario. Ahora cuáles son las características de un diseño de experiencia de usuario muy bueno o gran. Lo único que tiene el diseño de experiencia de usuario o el gran diseño de experiencia de usuario es nuestra interacción con la tecnología. Nosotros como humanos cometemos muchos errores. Un buen diseño requiere comunicación, especialmente de máquina a persona o persona a máquina, indicando qué acciones son posibles o qué está sucediendo en este momento, ¿qué está pasando con mi app? He hecho clic en el botón, ¿envía esto mi formulario o está funcionando en segundo plano? ¿ Qué va a pasar después? ¿ Me va a cobrar ahora mismo o me va a disparar cobrarme a fin de mes o algo así. Estas son las cosas que necesitas tener en cuenta que la comunicación entre máquina y persona o tu producto y el usuario es realmente importante en crear diseño UX. Si tienes alguna duda sobre diseño de experiencia de usuario o si no entiendes nada de esta conferencia, hazme preguntes y podré contestar cualquier pregunta respecto al diseño de experiencia de usuario. Pasemos a la siguiente lección. 6. Diseño de humanos: Hablemos del primer enfoque para la UX que es el diseño centrado en el ser humano. Ahora en este enfoque, lo que realmente hacemos es enfocarnos solo en nuestros usuarios, ¿de acuerdo? Cada usuario tiene necesidades diferentes y límites de memoria diferentes o tal vez límites físicos, por lo que vamos a cuidar todos estos límites y vamos a crear un producto eficaz y eficiente que pueda satisfacer a nuestro usuario y que pueda aumentar efectividad general o tarea importante que el usuario va a hacer con su producto y pueden fácilmente hacer esa tarea. Ahora, el HCD se utilizó básicamente en plantas industriales y plantas de producción donde los usuarios necesitan revisar un centenar y miles de artículos y se estaban cansando y enfermando, así que lo que hicieron es que comenzaron a investigar que cómo podemos crear nuestro flujo de trabajo para que los usuarios o nuestros empleados, puedan ser más efectivos y es más fácil en sus límites físicos. Todo esto se trata de un diseño centrado en el ser humano. Nos vamos a centrar en nuestros usuarios primarios y sus necesidades y sus límites, ya sean límites físicos o mentales. IDEO es una agencia de diseño y están trabajando en el diseño centrado en el ser humano y son conocidos por este enfoque, así que les voy a mostrar su definición de diseño centrado en el ser humano. IDEO definición para el diseño centrado en el ser humano es que vas a construir una empatía profunda con tu gente o con los usuarios primarios para los que estás diseñando entonces vas a generar toneladas de ideas con bocetos, con diferentes wireframes, entonces vas a construir sobre estas ideas y vas a crear prototipos de trabajo. Ahora, todos estos pasos son casi similares en cualquier proceso de experiencia de usuario y al final, lo que vamos a hacer es que vamos a compartir nuestros prototipos con los usuarios y los vamos a probar y eventualmente al final vamos a mostrar nuestro producto refinado al mundo. Estos son los cuatro pasos que están involucrados en el diseño centrado en el ser humano. En primer lugar, vas a absorber e investigar sobre cuáles son las necesidades del usuario. necesidades de los usuarios y su límite es nuestro primer enfoque, luego vamos a pasar a la generación de ideas y explorar diferentes soluciones, esto puede ser decenas o cientos de soluciones. Entonces vamos a refinar y elegir pocas de las soluciones y vamos a construir prototipos o prototipos de trabajo ficticios de esas ideas. Entonces vamos a probar con usuarios reales para ver qué tan bien nuestras ideas son percibidas por nuestros usuarios y qué tan bien funcionará este producto en el mundo real. Todo esto se trata de un diseño centrado en el ser humano. Ahora al final, voy a compartir con ustedes kit de herramientas de diseño centrado en el ser humano, que está libre de IDEO. Se puede descargar y se puede utilizar. Esta es una guía de campo. Es un documento PDF por aquí. Se puede ver por aquí la guía de campo del diseño centrado en el ser humano. Se puede descargar y se puede utilizar y se puede leer. Si tiene alguna pregunta, pregúntame, estaré esperando sus preguntas. Pasemos a la siguiente lección. 7. Modelo de doble diamond de diseño de Don Norman: Es necesario seguir algunos modelos básicos o algunos enfoques básicos de diseño de experiencia de usuario. Uno de ellos es modelo de diseño de doble diamante. Esto fue de Don Norman y es uno de los pioneros del diseño de experiencia de usuario y en su libro, “El diseño de las cosas cotidianas”, pensó en este modelo de doble diamante, y qué es este modelo, tiene básicamente dos diamantes. Uno es encontrar el problema correcto, y el segundo es encontrar la solución adecuada. Ahora veamos el diagrama. Ahora este es el diagrama del modelo de doble diamante de Don Norman, y se puede ver en el lado izquierdo tenemos diamante el cual va a estar encontrando el problema correcto y en el lado derecho, tenemos encontrar la solución correcta. Vamos de izquierda a derecha. Ahora cuando vamos a empezar por este punto amarillo izquierdo, vamos a explorar y sondear nuestro verdadero problema. Cual es el verdadero problema. ¿ Nuestros usuarios realmente necesitan esta solución? Lo que están diciendo los usuarios es lo que realmente necesitan. La mayoría de las veces los usuarios cuál es la necesidad, no lo que dicen. Estas cosas se van a contradecir entre sí. Nuestros usuarios nos van a contar muchas cosas, pero es nuestro trabajo encontrar el verdadero problema. Ahora, en medio de este diagrama, se puede ver a la izquierda tenemos una línea punteada. En esta etapa, lo que estamos haciendo es que estamos sondeando en muchos problemas diferentes. Divergencia significa que vamos a divergir y crear muchas opciones diferentes para el problema. Esto podría ser un problema o esto podría ser un problema, o este podría ser el problema correcto. Entonces nos vamos a centrar y converger en un problema que es la verdadera raíz de todo. En este punto, vamos a empezar a buscar soluciones. Vamos a bosquejar diferentes ideas, diferentes soluciones. Estas pueden ser decenas o miles de soluciones o tal vez cientos de soluciones y en este punto, en el medio, hemos explorado muchas alternativas. Se puede ver de este lado, esta flecha significa que en este apartado en dirección vertical, básicamente estamos expandiendo nuestras alternativas. Estas podrían ser soluciones alternativas o podrían ser problemas alternativos. Después de encontrar estas alternativas, vamos a volver a converger en la solución real. En realidad, vamos a probar diferentes prototipos con nuestros usuarios, y al final, vamos a producir la solución real. Ahora hablemos de por qué necesitamos encontrar el problema correcto? La mayoría de las veces, lo que la gente te va a decir no es lo que realmente necesitan. Van a decir muchas cosas. Tengo este problema, tengo este problema, pero el verdadero problema es que lo encuentres. Empieza a cuestionar a tus usuarios y indaga sus problemas y amplía el alcance de esos problemas. Podría haber muchos temas detrás de ese problema o relacionados con ese problema, y entonces es el momento de converger en el verdadero problema al final. Una vez que hayamos encontrado el verdadero problema, entonces vamos hacia la solución. Antes de eso, nunca deberíamos intentar explorar soluciones ni tratar de encontrar ninguna solución. Ahora explorar posibles soluciones significa que vamos a crear muchos bocetos, muchos prototipos ficticios, y mostrarles a nuestros usuarios cuál funciona realmente o cuáles son sus problemas reales y al final, vamos para converger a la solución correcta. La mejor y única solución que está funcionando bien al probar con usuarios reales. La esencia de la experiencia del usuario es que estamos diseñando una solución a un problema que nuestros usuarios están teniendo en este momento. Veamos un ejemplo para ilustrar modelo de doble diamante. Usuario viene a mí y me dice que tengo un problema, mi auto no arranca y no sé cuál es el problema. Ahora, tu idea inicial es resolver el problema del usuario y mostrar el estado del auto o el estado de los problemas en la pantalla del auto o en su aplicación móvil o algo así. Ahora vamos a ampliar ese problema. ¿ Cuál podría ser la razón detrás de ese problema? ¿ Por qué el auto no está mostrando ningún problema? ¿ Qué errores o problemas podrían estar relacionados con problemas de ignición del automóvil? ¿ Las baterías están bajas o el combustible es bajo? ¿ Cuántas razones podrían estar detrás de los problemas de encendido de automóviles? Una vez que vas a encontrar el verdadero problema, y al final, te enteraste de que la batería estaba baja. Ahora vas a expandirte, avanzar hacia las soluciones. ¿ Realmente necesitamos una app para eso, o hay alguna forma de mostrar todos estos problemas o el indicador de baja batería o hay algún icono que el usuario no pueda reconocer? ¿ Sólo necesitamos cambiar un icono? A lo mejor necesitamos alguna batería con resaltado rojo o tal vez con algún sonido para mostrar al usuario que este es el problema o tal vez necesitamos algún indicador con la batería que es baja, entonces puedes converger a la solución correcta. Quizás cambiar solo un ícono o tal vez la retroalimentación a ese ícono de que lo que le está pasando a tu auto puede ser la solución correcta. Todo esto se trata de modelo de doble diamante. Espero que lo hayas disfrutado si tienes algún problema, avísame. Pasemos a la siguiente lección. 8. Habilidad de análisis de caos de la raíz: Hay una técnica más que me gustaría discutir, que es Análisis de Causa Raíz. Esta técnica es realmente esencial para cualquier diseñador de experiencia de usuario. Si quieres ser diseñador de experiencia de usuario, necesitas dominarlo. Es muy fácil y sencillo de aprender. Ahora, encontrar el problema de causa raíz es esencial en cualquier proceso de diseño de experiencia de usuario porque vamos a encontrar el verdadero problema detrás de lo que el usuario está tratando de decir. Se llama cinco Why's. Este proceso fue desarrollado por Sakichi Toyoda que se está utilizando en la Planta de Producción Toyota. Lo que vas a hacer es solo seguir preguntando Por qué es hasta el momento en que llegues a la causa real o raíz de ese problema. Veamos este análisis de causa raíz con algún ejemplo. Ahora el problema es que el usuario no pudo iniciar sesión. La primera pregunta es, ¿por qué el usuario no falló al iniciar sesión? La respuesta es que ella escribía la contraseña equivocada. ¿ Por qué escribía la contraseña equivocada? Porque ella lo olvidó. ¿ Por qué olvidó la contraseña? Porque teníamos una restricción de hacer contraseñas fuertes. ¿ Por qué no usó la contraseña olvidada? Ella intentó usarlo, pero no recibió el correo en 30 segundos. ¿ Por qué el retraso ocurrió con la contraseña de restablecimiento? Porque estamos usando algún plug-in de terceros. Ahora el verdadero problema fue que la usuaria intentó usar la función olvidar contraseña, pero ella no pudo recibir la contraseña debido a retrasos el. El verdadero problema detrás de su inicio de sesión fallido no era la contraseña incorrecta, pero el restablecimiento de la contraseña se retrasa. Es así como vas a encontrar el verdadero problema detrás de cualquier cosa. Puedes aplicar esta técnica a cualquier situación de tu vida o en el diseño de experiencia de usuario, o mientras estás diseñando algo o estás cuestionando a los usuarios. Todo esto se trata de análisis de causa raíz. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, háganme preguntas, pasemos a la siguiente lección. 9. ¿Qué son siete etapas de acciones?: Siempre que usamos un producto o un sitio web, o una app en nuestra mente, tratamos de crear un conjunto de acciones. Primero voy a hacer esto, luego voy a hacer esto y todas estas acciones se basan en nuestra percepción, lo que estamos percibiendo, cómo estamos percibiendo esa app o un resultado de nuestras acciones. Por lo que todas nuestras acciones, van a estar basadas en la percepción, que también se llama modelos mentales y nuestras metas, lo que queremos lograr al final. Hablaremos de modelos mentales más adelante. Veamos cuáles son esas siete etapas de acciones. Estas siete etapas de acciones también fueron propuestas por don Norman. A ver, cuáles son esos siete pasos. número 1 es, ¿qué y por qué quiero lograr? En primer lugar están nuestros objetivos y desencadenantes. ¿ Qué está desencadenando para lograr este objetivo? En segundo lugar, ¿cuáles son las secuencias de acción alternativas? ¿ Podemos lograr el mismo objetivo que hacer algo más o con otra secuencia de acciones pulsando este botón e yendo a esta URL y tal vez copiando y pegando todo? ¿ Puedo crear un documento de Google así? Entonces esta es la secuencia de acciones. Cada usuario tiene una secuencia de acciones diferente. Podrían usar alguna otra secuencia para lograr el mismo objetivo. Entonces pensarás que ¿qué acciones puedo hacer ahora? ¿ Puedo presionar este botón? ¿ Está activada o está desactivada? Entonces el siguiente paso es, ¿cómo lo hago? Cómo voy a hacer clic en este botón usando mi teclado o usando mi ratón o tocando sobre él. Entonces el siguiente paso es la retroalimentación. ¿Qué pasó? El app es una necesidad de contarte qué pasó cuando hiciste clic o cuando hiciste esta acción. Entonces el siguiente paso es que vas a percibir esa retroalimentación de lo sucedido. Por ejemplo, estás usando un horno de microondas y cuando presionaste “Start”, no arranca y dio algún error. Es necesario entender lo que significa ese error. ¿ Qué significa, qué pasó? Entonces al final, ¿está bien? ¿ He cumplido mi objetivo? Al final, vas a ver si has creado un documento de Google, nuevo documento con éxito, o has calentado tu leche en el horno microondas. Por lo que se trata de siete etapas de acciones. Si puedes dominar estos, puedes aplicarlos en cualquier app, cualquier sitio web, cualquier producto. Elaboremos las siete etapas de acciones con una pantalla de Gmail. Esta es mi captura de pantalla de mi app Gmail para iPhone. Ahora puedes ver mi gatillo y objetivo es eliminar correos electrónicos. Mi gatillo fue, deshazte del correo electrónico innecesario. Ese fue mi principal impulso de eliminar correos electrónicos. No quiero correos innecesarios. Por lo que mi objetivo era que quisiera eliminar correos electrónicos. Ahora estoy en la pantalla y se puede ver cuántas posibles secuencias de acción alternativas de búsqueda son. Puedo presionar durante mucho tiempo en un correo electrónico para seleccionarlo. O bien puedo presionar alternativamente en el lado del círculo izquierdo, acuerdo, y seleccionar varios correos electrónicos. A lo mejor puedo seleccionar solo un correo electrónico. Existen dos formas posibles de seleccionar los correos electrónicos. O puedo tocar en el círculo o puedo presionar durante mucho tiempo en el correo electrónico. Siguiente fue, ¿puedo presionar “Eliminar”? ¿ Qué acciones puedo saber? ¿ Está habilitado o deshabilitado el icono de borrar, verdad? No, no puedo decir que esto esté habilitado o deshabilitado porque la mayoría de mis correos electrónicos, están resaltados en color negro. Tan resaltados o habilitados son básicamente en color negro, pero los iconos superiores están en gris. Ahora lo siguiente es, tomé la acción, presioné el botón “Eliminar”, que es cómo hacerlo. Voy a presionar el botón “Eliminar”. Entonces el siguiente mensaje que voy a ver en pantalla será una barra de notificación amarilla que, “¿Quieres deshacer los mensajes se ha eliminado”. Esto es lo que pasó. Necesito percibirlo necesito son traducirlo si soy capaz de entender el mensaje, este es el siguiente paso, lo que significa esta notificación. Por lo que acabo de comprender que he completado con éxito. Notificación fue que has borrado los correos electrónicos y ¿quieres recuperarlos? ¿ Quieres deshacer tu acción? Al final, mi objetivo se cumplió. He borrado todos mis correos electrónicos que quiero. Por lo que estas siete etapas de acciones, puedes aplicarlo en cualquier pantalla móvil, cualquier app, cualquier producto, cualquier cosa que estés diseñando o desarrollando. Espero que hayan entendido las siete etapas de acciones. Pasemos a la siguiente lección. 10. ¿Qué son los Affordances y los Signifiers?: Afordances y significantes es uno de los conceptos principales en el diseño de experiencias de usuario o uno de los conceptos básicos de UX. Ahora, lo que significan los asequimientos es justo cómo se puede utilizar cualquier objeto o qué se puede hacer con él. Por ejemplo, la asequibilidad del smartphone es que se puede encender, se puede apagar. Normalmente vemos una pantalla adjunta a ella, por lo que podemos tocar la pantalla, podemos tocar la pantalla. También puedes insertarlo en tus bolsillos por su pequeño tamaño. Estos son pocos de los precios de los smartphones. De igual manera, las puertas, se pueden abrir, se pueden cerrar, puede esconder detrás de una puerta, esto también es un affordance. Ahora, veamos qué son las antiasequiciones. Anti-Affordance es lo contrario de la affordance. Muestra lo que no se puede hacer con ese elemento u objeto. Por ejemplo, no podemos usar los smartphones como martillo porque podemos ver que hay una pantalla de cristal en ella. Sabemos que es sensible, y se puede romper si trato de golpear algo con él. De igual manera, si has utilizado Photoshop o algún software de diseño, sabes que siempre hay un lienzo presente, y hay un cuadro delimitador alrededor del lienzo. Ese cuadro delimitador o esa pantalla ancha o ese documento límites en Microsoft Word o Google Docs que demuestra que este es el límite de ese documento. No se puede salir de este límite, o no se puede realizar esta acción con él, por lo que esto es anti affordance. Son pocas las características incorporadas cualquier producto. puede mirar y se puede ver que tiene esquinas agudas por lo que debo evitarlo. No puedo ponerlo en mi bolsillo. Podrían pegarme en la piel. Estos affordances en antiaffordances, vuelven a estar relacionados con tu percepción. Si no puedes percibir que es una puerta, nunca intentarás cerrarla, o nunca intentarás abrirla. Para eso, necesitaremos significantes. Afordances son todo acerca de qué acciones son posibles con este objeto. Ahora significa básicamente díganos que este es el signo, o este es el botón que hay que presionar para hacer esta acción. Los significantes se comunican donde se puede realizar la acción como se puede ver las manijas en la puerta. Sabes que esta manija se puede mover hacia abajo o hacia arriba o puedes abrirlo o puedes girarla para abrir la puerta. Esta manija o perilla de puerta es básicamente un significante. En el diseño de interfaces, los significantes están en diferentes formas. Se puede ver el campo de búsqueda, los botones en el campo de búsqueda, para que sepas que puedes hacer clic en el campo de búsqueda para escribir algo. Este es un significante. También se pueden ver los botones en una interfaz. Están un poco elevados, o tienen sombras debajo de él. Eso es un significante. Es una señal de que esta acción es posible con este elemento. Puedes presionar este botón. Ahora, pasando a cómo vamos a utilizar estos asequidores y significantes. Para crear una experiencia de usuario agradable, necesita tener asequidances y anti-asequidances perceptibles. ¿ Qué significa eso es que vas a usar significantes muy fuertes para mostrar qué acciones son posibles y dónde el usuario necesita presionar o hacer la acción. Por eso tenemos barras de búsqueda muy grandes y botones grandes en las principales tiendas de comercio electrónico como Amazon y Walmart. Especifica que esta acción primaria es posible en este sitio web, y es necesario realizarla. Ahora, tener un significante muy grande o muy significativo ayuda mucho. El usuario puede ver al instante que se trata de una tienda de comercio electrónico, necesito encontrar o buscar por aquí. La mayoría de los usuarios van a utilizar barras de búsqueda. Todo esto se trata de significantes, de asequibilidad, y de antiasequibilidad, pero voy a mostrar algunos ejemplos. Ahora bien, si miramos este sitio web, Amazon.com, puede ver que hay una barra de búsqueda muy grande por aquí con un icono de búsqueda, y Si me aferro a él, puede ver que significa que esto es tocable o presionable. Puedo utilizar este para buscar cualquier producto que quiera. Entonces puedes ver que tenemos estas flechas por aquí, mi registro de cliente, y hay pocos botones más. Si paso el cursor sobre estas áreas, puedes ver que se están convirtiendo en botones, y me va a mostrar una lista. Puedo ver que todos estos son significantes, estos botones, estos estados flotantes, el color descarado de esta zona. Se puede ver por aquí, este es un significante de que esta área es importante, se pueden realizar acciones por aquí. Ahora bien, si tomamos el ejemplo de Walmart.com, se puede ver por aquí, nuevo, el mismo patrón se repite por aquí. Tenemos un bar azul muy grande por aquí. La mayor parte de la acción se está llevando a cabo en esta materia. Este es un significante. Entonces tenemos este botón amarillo muy grande, color potente, y de nuevo una barra grande para buscar por aquí. Esto es de nuevo un significante. Se puede ver estos son estados flotantes. Estos son significantes de que estas acciones son posibles. Puedes usar estas áreas para hacer estas acciones, así que puedo dar click en esta. Además, se puede ver en mi hover, se puede ver un pequeño icono de mano. Significa que esto es presionable, o puedo hacer clic en él. Estos son todos los significantes utilizados para elaborar la acción, qué acciones son posibles, y cómo vas a completarla, donde debes hacer clic en “Ok”. Todo esto se trata de significantes y de asequibilidad, de antiasequibilidad. Pasemos a la siguiente lección. 11. Aplanados y Signifiers: Permítanme explicar más sobre los asequidores y significantes. Ahora todos ustedes han visto este iPhone. Entonces en el iPhone, las asequiciones son que lo puedo sostener en mi mano y me permite ponerlo en el bolsillo, y además se va a permitir encender y apagar. Esta es propiedad de todos los teléfonos móviles. Sé que esta pantalla está oscura, así que necesito encenderla, pero donde la voy a encender o qué botón voy a presionar va a ser significado usando significante. Entonces te voy a mostrar los botones por aquí. Aquí tenemos un botón en la parte superior y si lo ves de cerca, entonces tenemos tres botones de este lado, puedes ver por aquí. Se puede ver que tienen plus, déjame mostrarte un poco acercar. No se está acercando, pero hay un símbolo más en un botón y menos símbolo, lo que significa que va a aumentar o disminuir el volumen de este teléfono móvil, y el botón de silencio. Por primera vez, no sabía qué va a hacer en este botón, si va a silenciar o va a atenuar los colores de mi pantalla o lo que sea, pero después de usarlo una vez supe que esto lo va a silenciar. Si hubieran puesto algún ícono por aquí que se va a silenciar, entonces eso sería más útil. Siempre habrá algún intercambio entre diseño y significantes. Se puede ver por aquí que pueden hacer este botón, este encendido pero en la parte superior se puede ver por aquí. Entonces esto no se está enfocando de todos modos. El botón en la parte superior, si es un color un poco diferente como el rojo o tal vez el verde, sé que voy a presionar esto para encenderlo. Ahora mismo cuando uso esto por primera vez, no voy a estar seguro de qué botón va a encender este dispositivo. De igual manera, si ves mi iMac por atrás, puedes ver por aquí, este es mi iMac y cuando por primera vez le mostré mi iMac a uno de mis amigos, puedes ver que hay un logotipo de Apple por aquí y lo que hizo es que intentó golpea aquí así y lo están tocando tres o cuatro veces. No estaba seguro de que esto lo vaya a encender. Entonces intentó buscar alrededor de este dispositivo que ¿dónde está el botón de encendido? Este es un intercambio de diseño. Hicieron el botón en la parte posterior y apenas es visible. Es todo de plata por lo que necesitas encontrar el botón. Incluso ahora mismo lo estoy usando desde seis meses todavía tengo dificultad para llegar poniendo mi mano por aquí y tratar de encontrar el botón donde está. Entonces esto es un poco de historia sobre significantes y asequibilidad. De igual manera, si les muestro esta botella, esta es una botella de medicina que estoy tomando. Se puede ver que tenemos tapa por aquí en la parte superior. Ahora los affordances son que puedo sostenerlo en la mano. Se puede equilibrar en una mesa como esa y una affordance más es, puedo ver que es una botella, así que necesito abrirla. Por lo que puede ser abierto y cerrado. Ahora donde se puede abrir y ¿qué parte de ella va a ser la tapa? Es el significante. Entonces tienen, déjame mostrarles que han hecho esta tapa está un poco separada de esta botella. Para que veas que esto va a significar que puedo abrirla desde aquí o tengo que darle la vuelta así. De acuerdo, entonces todo esto se trata de significantes y de asequibilidad. Te veré pronto en otra lección. 12. Ejemplos de perfeccionadores y Signifiers: Ahora permítanme mostrarles algunos ejemplos más de asequibilidad y significantes para elaborar más al respecto. Ahora y se puede ver esto es Photoshop He abierto un documento. Se puede ver que estos son el límite delimitador de este documento, que está en blanco y todo lo demás es negro. Se trata de un affordance que no se puede escribir ni hacer nada en esta área. Cualquier cosa que necesites que vas a crear, necesitas estar haciéndolo en esta área. Por lo que se trata de una antiasequibilidad que Photoshop ha delimitado este documento con un límite. Lo mismo está en Microsoft Word. Si abro algún documento en Microsoft Word, ahora, misma es la situación en Microsoft Word. Se puede ver que hay una anti affordance que no se puede ir más allá de esta zona. Entonces si sigo escribiendo, va a estar en la siguiente línea. Por lo que muestra que no se puede salir de este margen están fuera de este documento, este límite de documento, esto es anti affordance. Ayuda al usuario a entender lo que no puede hacer con este software. Ahora si hablamos de las asequiciones, se puede ver que he abierto este documento o este software. Sé que puedo escribir algo por aquí. Entonces si tengo un documento vacío como este, puedes ver que este es el cursor. Ya veo que puedo escribir algo por aquí. Puedo copiar o pegar algo por aquí. Estas son las asequiciones. Si hablamos de significantes, entonces se puede ver estos son los significantes, Esto se destaca. Entonces si cambio a éste o a éste o a éste, estos son estilos diferentes. Ya puedes ver este cursor se ha cambiado al texto más grande. Entonces estos son significantes. Estos son todos los botones que puedes ver por aquí. Esto es clicable, desplegable, y muchas otras agrupaciones diferentes de botones. Estos botones todos son significantes de que estas acciones son posibles con este bonito software suave u objeto. Igual es la situación aquí en Photoshop. Se puede ver por aquí, hay pocos controles resaltados y pocos están desactivados. Entonces así es como me van a ayudar a entender que estas acciones ahora mismo no son posibles con este documento. Puedes ver por aquí puedes mostrar estos controles de transformación y todo y unas cuantas acciones o pocos botones. Estos son posibles con él. Otros no son posibles. Entonces esto se trata de softwares. Ahora voy a cambiar a hardware o productos diferentes. Se puede ver este es uno de los ejemplos. Ahora de mirarlo por primera vez, creo que es algún tipo de tetera y tengo que ponerlo en mi estufa u horno para calentarlo. Pero creo que estos son oradores. Si miramos de cerca, se puede ver aquí el significante de que estos pequeños agujeros en él, estos están mostrando que esto es básicamente un altavoz. Ahora si miras los botones alrededor de esto, puedes ver por aquí, aquí tenemos los botones de este lado. Estos son para activarlo o encenderlo, apagarlo o algo así. Ahora, si miramos este dispositivo, productos muy nuevos que entran en el mercado y, y que son producto realmente nuevo o innovador. Van a tener mucho este problema. Que es que no podemos decir cómo encenderlo, los significantes y los asequidores. A lo mejor creo que tiene plática así que tal vez es un teléfono o tal vez es micrófono o algo así. Pero en realidad, te voy a decir y te sorprenderá que sea un paraguas de colina. Crea una grúa aérea para detener las gotas de agua que vienen de la parte superior para puedas sostenerla en tu mano y puedas estar fuera de la lluvia. Entonces este es un producto muy innovador y desde mirarlo, no puedo ver la mayoría de los controles. No sé cómo encenderlo o apagarlo. Por lo que las asequiciones están básicamente relacionadas con tu percepción. Entonces si no puedo percibir lo que es esta cosa, entonces no voy a conseguir las asequiciones y podría poder ver algunos de los significantes, pero no sé qué van a hacer. Aquí hay otro ejemplo. Esto es un fan. Es fan muy, muy innovador, pero de mirarlo, no puedo decir qué va a hacer este dispositivo o cuáles son los asequidances, si voy a sacar aire de él y todo, voy a ver mi cara en él o un holograma en él. No lo sé. Ahora si miramos la parte inferior de ella por aquí, y si hago zoom, se puede ver aquí en la parte inferior, puede ver que hay diferentes perillas y botones para apagarlo o encenderlo, o tal vez acelerarlo. Aquí hay una perilla de volumen para darle la vuelta. Por lo que estas son las asequiciones. Estos son los significantes que muestran que este dispositivo se puede encender y apagar. También debe haber algo para aumentar o disminuir. Podría ser su velocidad o podría ser otra cosa. Entonces esto se trata de las asequiciones y significantes. Voy a compartir otro video donde te voy a mostrar botella de champú para mostrarte las asequiciones. Entonces pasemos a la siguiente lección. 13. Mapeo natural: mapeo es la relación entre dos conjuntos de cosas. Supongamos que hay muchas luces en un aula y una fila de interruptores de luz está en la pared. Ahora bien, ¿puedes adivinar cuál está relacionado con cuál? Esta es la pregunta más grande. Mucha gente, han numerado sus botones e interruptores escribiendo F o light one, L_1, L_2, algo así en los interruptores. Este es un concepto realmente importante. Otro concepto es el mapeo natural. El mapeo natural es que cuando se tienen dos conjuntos, y su mapeo coincide entre sí de manera natural. El primer botón es la primera luz, y el segundo botón es una segunda luz en el techo y el tercer botón. Por ejemplo, si tengo tres luces seguidas, en una columna y presiono primer botón entonces ilumina la primera luz, entonces esto es básicamente mapeo natural. Cada vez, si quiero encender cualquier luz que deseo, naturalmente puedo mapearla al botón que necesito presionar. Pocos ejemplos de mappings en diseño de software o diseño de hardware es cuando has utilizado tus teclas de controlador X-box, y también ves que hay diferentes teclas de acceso directo en diferentes software y aplicaciones, incluso Photoshop o cualquier editor de texto. Existen controles similares, como control S o comando S, para guardar el archivo. Es común en todos los diferentes sistemas operativos o en todos los softwares diferentes. Por lo que el usuario puede memorizarlos fácilmente. Son naturales salvados. S es para Save, por lo que es más fácil recordarlo. Es nuestro mapeo natural que si presiono control S o comando S, Se va a guardar el documento. Veamos algunos de los ejemplos de mapeo y cómo las diferentes mappings son buenas o malas, y cómo puedes usar estos principios para mejorar tus programas o sitios web o juegos o aplicaciones. Ahora se puede ver por aquí, esta mujer es, lo que está haciendo es que está etiquetando la idea principal en la parte superior o la categoría principal o el área principal en la parte superior y la inferior, está etiquetando lo que estos botones van a encender. A qué van, a qué luz van a encender. Estos son botones diferentes, está usando diferentes etiquetas en toda su casa así. Entonces esta es su solución. Ahora, hay un artículo más de Don Norman, Designing For People. Ya puedes ver que hablo mucho de él. Ahora en su libro, trató de proponer una solución, algo así. Este es el plano de planta de una casa y dice que, “Coloque los botones en los lugares donde realmente están las luces ahí”. Entonces si la luz está en esta pared, necesitas colocar el botón en el plano del piso por aquí. Entonces si enciendo esto, va a encender la luz justo por aquí. Este es su plan. Ahora, un diseñador llamado Hwang, creo que es un ingeniero civil y desde Corea, trató de resolver este problema. Creo que ha resuelto la mitad del problema, y se puede ver hay un panel entero con toda la planeamiento de piso de la casa. Se puede tocar cualquier luz ADR, si quiero encender mi recámara, voy a tocar este ADR, Se va a encender, encender y apagar todas las luces. Este es su diseño. Se llama interruptor de luz plano de piso. Ahora veamos algunos de los diseños más confusos como este. Este es el panel dentro de un camión y no se puede decir qué van a hacer estos botones o dónde están realmente vinculados. Esto es realmente confuso. Te voy a mostrar algunos ejemplos más de esta estufa u horno. Si le acercamos, se puede ver que hay, uno, dos, tres, cuatro, cinco estufas y hay, uno, dos, tres, cuatro, cinco, seis botones por aquí. Esto es un poco confuso. Si voy a acercar, se puede ver por aquí que este botón de la izquierda, que pensé que debería encender este arriba, es para la parte trasera. Entonces se va a encender este quemador por aquí y no este. Creo que han mencionado este plan porque no es Mapeo Natural. Se puede ver aquí, en mi mente, yo estaba pensando que esto debería estar relacionado con éste y esto debería ser para éste, o tal vez alguien más está pensando que esto es para el trasero y esto es para el delantero, pero desde mi perspectiva creo que esto debería estar encendiendo este quemador. Esto es para el centro uno que está por aquí, y creo que debería estar por aquí en alguna parte. Entonces más Mapeo Natural en esta zona, pero creo que reservan esta zona para este control de horno. Si vamos por el lado derecho, se puede ver por aquí este botón es para el horno en la parte inferior. Esto es de nuevo, delantero y trasero. Ahora se puede ver que esta posición es totalmente diferente a ésta. Aquí el botón trasero está al principio, y aquí la trasera está al final, lo cual es muy confuso para mí. Todo esto se trata de este mapeo confuso de este dispositivo. Ahora veamos algunos de los más ejemplos. Ahora ya has visto este mando a distancia en muchos juguetes. Juguetes controlados a distancia o por radio controlados. Se puede ver que esto es un poco confuso porque uno del panel y este control es para adelante y atrás y uno es para girar. Por lo que en algún momento un niño nuevo están realmente confundidos cómo convertir esto o usar esto. Pero en cambio, si vas a este, estos son un poco nuevos. Se puede ver que estos son realmente naturales. Si giraste esta rueda de conductor, a la derecha o a la izquierda, va a girar a la derecha o a la izquierda. Es muy fácil para los niños. Es más natural porque está ligado a nuestros autos, quienes manejan autos con estas ruedas. Ahora permítanme mostrarles algunos de los ejemplos de juegos y cómo se mapean los controles en un teclado. Has jugado muchos juegos, puedes ver que la mayoría de ellos usa los mismos controles como W, S, A, y D por un momento. Uno es uno, mouse-click es para pelear, y segundo es para cargar, algo así. Por lo que la mayoría de estos controles serán similares en muchos juegos. Se puede ver por aquí, este es otro juego ZMR. Tiene también casi los mismos controles. Se puede ver esto es “Atacar” este “Apuntar”, estos se llaman mapeo y básicamente son por qué están usando el mismo patrón porque nuestras mentes están cableadas con botones. Si he jugado como dos o tres partidos antes, seré adoptado a este juego fácilmente. Puedo empezar fácilmente a jugar este juego porque ya estoy acostumbrado y ya he visto esos patrones de mapeo. Al igual que se puede ver W. Es muy natural efectivamente porque W está en la parte superior. Entonces si presiono esto, va a ser movimiento en la dirección hacia adelante, y S es para atrás, E es para izquierda y derecha. Entonces cualquiera que sea la posición de estos botones, va a mover a mi personaje de juego en la misma dirección. A esto se le llama concepto de mapeo de la experiencia del usuario, y cómo podemos usarlos en nuestro software o en nuestro hardware, o en nuestros dispositivos, o en nuestros dispositivos electrónicos para mejorar la experiencia del usuario. Ahora al final, les voy a mostrar el mapeo de autos y vehículo. Esto es de Mercedes-Benz 2014 Modelo S 550. Se trata de mapeo de ajuste de asientos. Hace unos años, no usaban algo así. Tenían pocos botones por aquí para presionar y manejar esto. Ahora si intentas presionar este botón, este asiento de cabeza, y si lo arrastras en la parte superior, o intentas presionarlo en la parte superior, o en la parte inferior, se va a mover en la misma dirección. Ahora lo que tienes que hacer es justo, tienes que presionar este botón en esto y esta área está ligada a tu asiento. Es muy fácil mapear con lo que estoy tratando de ajustar. Entonces si estoy tratando de ajustar mi asiento trasero, esta porción voy a presionar este o voy a empujar éste desde atrás o desde aquí y puedo ajustarme fácilmente a él. Este es mi asiento de descanso o lo que sea. No sé cómo lo llamas. Este es el fondo. Por lo que todos estos controles están realmente mapeados de forma natural. Cualquiera puede ajustar fácilmente los asientos en Mercedes-Benz. Este será mi último ejemplo. Espero que hayan disfrutado de esta lección, ahora, pasemos a la siguiente lección. 14. Modelos conceptos y mental para mejorar UX: Es posible que hayas leído muchos manuales cuando compras algo nuevo o producto nuevo, cámara nueva, un horno microondas nuevo, y podrías haber leído muchos manuales técnicos y cómo usarlo. Ahora, modelo conceptual y modelos mentales, son realmente necesarios para entender la experiencia de usuario de cualquier producto, o si quieres mejorar la experiencia de usuario de cualquier producto digital. El modelo conceptual es básicamente una explicación en términos muy simplificados, cómo va a funcionar esta cosa, esta app , este producto. Idealmente, sus usuarios deberían poder comenzar a usar su producto, o aplicación, sin leer ningún manual, ni ningún documento de modelo conceptual, o algo así. Ahora, hablemos de modelos mentales. Los modelos mentales son básicamente modelos conceptuales, pero van a estar en la cabeza de tu usuario. Tu usuario va a ver y construir su propio modelo en su mente después de ver tu producto que va a funcionar desde este botón, o tengo que hacer algo así para encender esto, o tal vez usar este producto, o utilizar este horno de microondas, o utilizar esta aplicación. Esta es la comprensión de tu usuario en su mente, cómo va a funcionar tu producto. Diferentes personas pueden tener diferentes modelos mentales del mismo ítem porque es relativo a tu percepción. Si tengo conocimientos diferentes, o he interactuado con el diferente tipo de productos, o autos, entonces tal vez no pueda conducir el auto automático de lujo por primera vez. Podría estar confundido, entrando en él. Mi modelo mental podría no coincidir con el modelo conceptual de ese producto. Ahora, ¿cuáles son las cosas que van a crear un modelo mental? Estos van a ser asequiciones, restricciones, mapeo y significantes. Estas son todas las cosas que van a mostrar o decirle tu usuario que esto es posible con este dispositivo. Puedes presionar este botón desde aquí, no puedes usarlo sin conectarlo primero al socket, esto es una restricción, y mapeo es que este botón va a controlar estas cosas. Como diseñador o diseñadores de experiencia de usuario, tu trabajo es alinear modelo mental de tu usuario con el modelo conceptual de tu producto, tu app. Vas a usar significantes, y vas a usar los asequidores, y vas a guiar a tu usuario para que use tu producto. Es posible que hayas visto aplicaciones. Casi todas las apps en estos días, te van a mostrar alguna guía de uso, o alguna guía de intro cada vez que inicies una app por primera vez. Esto es para cerrar la brecha entre un modelo mental y un modelo conceptual. Es así como vamos a capacitar a nuestro usuario y decirles que vas a utilizar este producto, esta app de esta manera. Una sola persona podría tener modelos mentales diferentes o múltiples del mismo artículo. Por ejemplo, si estoy usando horno microondas, podría pensar que para calentar los líquidos, necesito usar estos botones, y para calentar la carne, o alguna otra cosa, necesito usar estos botones o esta secuencia. Además, hay una cosa más que necesitas para atender a usuarios expertos y usuarios novatos. Si estás desarrollando una app, es posible que necesites saber que podría haber algunos usuarios expertos que van a usar la app de manera totalmente diferente, y tienen un modelo mental totalmente diferente al que sois usuarios novatos. Por lo que necesitas cuidar ambos de estos modelos mentales, o ambos de estos usuarios. Ahora, veamos algunos de los ejemplos de modelos mentales. Aquí es cómo vas a despejar esa brecha entre un modelo mental y un modelo conceptual. Vas a mostrar diferentes pantallas de Walk-through en el inicio de tu app. Se puede ver por aquí, un ejemplo está aquí. Otro ejemplo es esta pantallas de incorporación, se puede ver por aquí. Estas son tres pantallas y están destacando cada característica de tu app. Ahí hay uno más. Esto es mejor porque puedes verlo poco a poco te está llevando al primer paso. Te está guiando hacia el primer paso, que es este login con Facebook. Esto es realmente bonito. Esto es lo que deberían estar haciendo tus apps, tus productos. Deberían guiar al usuario en su primer uso, cómo usar su aplicación, en lugar de abrir su manual y leer a través diferentes páginas y navegar por lo que necesito hacer antes de usar esta app. Ahora, aquí hay algunas imágenes de los tiempos de ensueño, y ésta también es de los tiempos de ensueño. Estos son los viejos hornos microondas. Podría haberlos usado. Tienen botones como este. Estos son diferentes niveles de calor, y este es el temporizador. Esto es muy sencillo de usar. Simplemente hay que seleccionar el temporizador y la capacidad en lo que va a funcionar. Esto es muy fácil. Sólo tienes que girar la perilla. Durante muchos años, tendemos a usar algo como esto, por lo que nuestro modelo mental se construyó sobre él. Siempre que vemos algunos diseños como este, es de Samsung. Si trato de empezar a usar esto, después de usar estos, me va a costar mucho usarlo porque no sé por dónde empezar. ¿ Debo presionar el botón Inicio, y me va a guiar? O debería empezar a escribir en estos botones? Aquí no hay orientación. Ahora bien, si miras estos modelo, estos creo que los últimos modelos que vienen ahora, puedes ver que han combinado los viejos conceptos, o viejos modelos mentales con el nuevo. Se puede ver lo que tenemos aquí, tenemos la perilla, y aquí tenemos diferentes botones que son muy atrevidos, y tienen efecto build, así como botones viejos. Aquí puedes ver esto es básicamente un panel táctil, y estos son botones. Ya puedes ver, es creo que un poco más fácil empezar, tener menos controles, solo necesitas seleccionar a cualquiera y solo girar este perilla y empezar. Este es mi modelo mental. Todo esto se trata de modelos mentales y modelos conceptuales. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, pregúntame. Pasemos a la siguiente lección. 15. Trabajar la memoria y la atención: Una de las mayores limitaciones de la mente humana es la memoria de trabajo. La memoria de trabajo es nuestro foco de atención a corto plazo, y tiene un lapso de tiempo muy limitado. Es el recurso más limitado que poseemos los humanos. Es básicamente nuestra atención y esta atención es altamente enfocada y muy selectiva. Estás sentado en un restaurante y estás hablando con tu amigo, comiendo fuera y no estás al tanto de la mayoría de las personas que te rodean que están sentadas en el mismo restaurante. Pero no estabas al tanto de unas pocas cosas delante ti y de algunas cosas que tu amigo está diciendo. Entonces así es como nuestra memoria de trabajo es limitada. Concepto similar se aplica a ti. Ahora mismo estás consciente de las últimas palabras o ideas que has escuchado de mí. Pero probablemente no sepas cuál es el color de la pared detrás de ti. Por lo que estas son las limitaciones de las mentes humanas, la memoria de trabajo o la atención, nuestra memoria a corto plazo, también se llama memoria a corto plazo, es muy limitada. Ahora, hablemos de la limitación o capacidad real en segundos o en números de memoria de trabajo. El promedio de la capacidad de la memoria de trabajo fue de cuatro más o menos un ítem. Antes de eso, había una vieja investigación diciendo que tiene algo con los siete más dos o menos dos. Pero la nueva investigación es que son cuatro más o menos uno. También depende del artículo, qué artículo intentas almacenar, si es solo un número grande o es nombres diferentes de frutas diferentes. También depende de eso, pero el rango promedio es de cuatro más o menos uno, por lo que es de tres a cinco. Ahora cuánto tiempo se va a quedar la información en tu brillante mente y la duración es de 10-15 segundos por Goldstein. Creo que la investigación realizada por Goldstein, hay un término más que está relacionado con la memoria de trabajo, que es la carga cognitiva. Se muestra y se habla mucho en diseño de experiencia de usuario que esta cosa va a aumentar la carga cognitiva. Se refiere a la carga colocada en tu memoria de trabajo o tu poder de procesamiento de tu mente. Podría ser cualquier cálculo, cálculo duro, o podría estar memorizando cosas. Por lo tanto, ten en cuenta que esta carga cognitiva significa la carga colocada en tu memoria a corto plazo y cómo vas a procesar esa información. Ahora el principal problema con la memoria de trabajo es que es altamente volátil. Si estás trabajando en algo y alguien simplemente te interrumpe, vas a perder todo lo que estaba en tu memoria de trabajo. Ahora bien, esta volatilidad también se aplica a los objetivos y a los detalles de los objetos. A lo mejor estás tratando de recordar la lista de artículos y saliste fuera de tu casa a agarrar algunas cosas de la tienda de abarrotes y conociste a un amigo y él te pregunta cómo estás hombre, ¿qué pasa? Esto y aquello y de repente olvidaste toda la lista de artículos que estás tratando de comprar en la tienda de abarrotes. Es muy volátil no lo vas a mantener por duraciones más largas en tu mente. Si pierdes algún artículo, también vas a perder la pista de lo que estás tratando de hacer o eres gol. A lo mejor intentaba ir a la cocina a sacar un poco de leche del refrigerador. Pero cuando acabo de llegar a la cocina, me olvidé de lo que estaba haciendo aquí, no me acuerdo. A lo mejor estuve aquí para conseguir un vaso de agua. Entonces así es como funciona nuestra memoria de trabajo y esta es la mayor limitación que tiene. La información en la memoria de trabajo va a desaparecer rápidamente. Voy a compartir con ustedes muchos ejemplos de memoria de trabajo y luego su aplicación en diseño de interfaz de usuario o diseño de experiencia de usuario o aplicaciones móviles. Pero ahora mismo voy a mostrar sólo la única aplicación que es la longitud titular. Ahora, de acuerdo con la investigación publicada por una de las empresas de plataforma de intercambio de redes sociales que se llama Buffer y en realidad investigaron que cuál es la longitud ideal de cualquier titular. Descubrieron que seis palabras es la longitud ideal porque seis palabras están dentro de nuestro límite de memoria de trabajo. Está muy cerca también, Jakob Nielsen, es uno de los pioneros en el diseño de experiencia de usuario. su estudio también se muestra que los titulares con la longitud de 5-6 palabras funcionan de manera muy efectiva. En realidad todo esto está relacionado con nuestra capacidad de memoria de trabajo. Tenemos una capacidad de tres a cinco palabras, o tal vez de tres a cinco ítems. Es más fácil para nuestra mente procesar estos muchos trozos de datos. Si tenemos como un título de 10 palabras, nuestros ojos y mente van a saltarse algunos de los verbos con demasiada facilidad o rapidez, agarrar la idea o percibir la idea lo que este titular está diciendo en realidad. Ten esto en cuenta mientras estás diseñando aplicaciones móviles, o estás diseñando formularios o todos estos productos. Ten en cuenta que no vas a meter a tu usuario en una situación donde él o ella tenga que recordar muchas cosas, o tienen que recordarlo por duraciones más largas. Pasemos a la siguiente lección. 16. Ejemplos de la memoria de trabajo: Veamos algunos de los ejemplos de memoria de trabajo y cómo diferentes objetos o elementos de diseño pueden levantar la carga en tu memoria de trabajo. Ahora este primer ejemplo es Google Maps, y se puede ver este IM aquí localizador de mapas me va a ayudar a memorizar que estoy por aquí. Además, se pueden ver todos los símbolos a mi alrededor como esta mezquita y este Centro e-Salhulat. Esta es una escuela. Después tenemos este club de comida o área de comida. Entonces tenemos este banco por aquí. Entonces todas estas cosas me están ayudando. Mi memoria de trabajo de que aquí hay algo se encuentra. Por lo que fácilmente puedo pin point que quiero ir por aquí o quiero ir por aquí. Tengo que tomar el turno. Estos mapas y las aplicaciones que utilizan, utiliza mapas para localizar a los clientes o usuarios ubicación actual. Esto es realmente útil. Otro ejemplo es que si quieres que tu usuario tenga menos memoria de trabajo o procesamiento, entonces puedes usar algo como esto. Se puede ver por aquí en el pago de envío con tarjeta superior. Ahora mismo estoy por aquí. Esta es también otra implementación que estoy ahora por aquí. Sólo necesito un paso más como este, revisarlo y confirmarlo. Yo quiero entrar a la tarjeta. Esto me puede decir fácilmente que cuántos pasos he hecho y cuánto necesito ir más allá. Un ejemplo más son los modos. Modos significan que ahora mismo estoy en modo incógnito u modo oculto en mi navegador Chrome. Se puede ver como cambio a este Incognito, se puede ver por aquí se puede ir en esto por aquí, una nueva ventana de incógnito. Todo acaba de cambiar. Estoy en este momento en otra ventana y esos temas enteros se vuelven negros. Aquí hay un letrero o símbolo. Esto me está diciendo cada vez, cada minuto, cada segundo que ahora mismo estoy usando este modo de este software, así que estoy desplazado a otro modo si quitan esto, todo esto, y podría estar pensando que estoy usando mi navegador normal a través de este navegador me está pidiendo que vuelva a iniciar sesión en este sitio. Esta es otra forma. Usando modos, podría haber visto diferentes videojuegos. Si estás cambiando a otro modo y puede cambiar toda la interfaz o alguna indicación de que estás en este momento en este modo, estás jugando en este modo, modo red o modo jugador en equipo o algo así. Algo que también puede ayudar a elevar tu carga de memoria de trabajo es esto, puedes ver en esta esquina, esto se llama pan rallado. Este es el camino, otra vez que estoy ahora por aquí. También se pueden ver las selecciones. Si he hecho clic, seleccionado este, esto me está diciendo que en este momento estoy en esta selección. Se destacan todas estas indicaciones y significan. Me están diciendo que ahora mismo estoy por aquí y ahora mismo estoy en este estado. Tomemos otro ejemplo de walmart.com. Se puede ver de nuevo, tienen muy bonito pájaro viene y son realmente visibles. En este ejemplo, se puede ver esto no es muy visible también, está muy empacado. Aquí tenemos migas de pan muy visibles. Entonces de nuevo tenemos todo el rastro y un botón más, edita aquí de nuevo a la página anterior. Entonces si alguien quiere volver atrás y hacer otra página, esto es muy útil. Ahora otro ejemplo es la historia. Ya puedes ver si vas a YouTube, todos los videos que has visto, mantiene la historia de todos esos videos para que pueda buscar dentro de mi historia como puedes ver por aquí. Puedo ver lo que busqué. Entonces esta es mi historia de relojería, y esta es mi historia de mando. Podría haber olvidado que la última noche, qué video estaba viendo por ejemplo, como MacBook Pro, botón de encendido, arreglar. Yo puedo agarrar esos de aquí. Además, si vas a este historial de navegadores, todos estos navegadores, guardan el historial de qué páginas o sitios web has visitado en qué momento. Esto está ayudando a nuestra memoria de trabajo porque no podemos mantener toda esta información en nuestra memoria de trabajo. De igual manera, si nos fijamos en diferentes softwares nuevos como Photoshop o incluso este Microsoft OneNote, puedes ver ahora que han habilitado el autoguardado. Si trato de cambiar algo, puedes ver por aquí, muestra el nombre de la persona que cambia en este documento, escribe notas en Cloud. Se sincroniza a través de mi iMac y PC con Windows. Estoy usando sólo este documento y se guarda automáticamente y carga a mi Cloud o la sincronización a través de diferentes dispositivos. Esta es una característica realmente ordenada, autosave, muchas apps, están usando autosave. Déjame volver a las cartas de aquí. Este es otro ejemplo de autoguardar. Se puede ver por aquí estos son los artículos que dejé en mi tarjeta y cuando regresé, me está mostrando los mismos artículos por aquí. Significa que está llevando registro de mis artículos por aquí y de todos mis pedidos, todos los pedidos. Estos también son buenos para mi memoria de trabajo. Otro ejemplo de memoria de trabajo es que has visto estos archivos recientes en muchas aplicaciones y software. Esto es sólo para memorizar que la última vez que abro todos estos archivos o este archivo o este archivo o este archivo. Me ahorra tiempo ubicando todos estos archivos. Se puede ver por aquí en estoy ahorita en Photoshop o se está mostrando, creo que casi 10-12 últimos archivos abiertos y está ordenándolos por esta última abierta bien. Mi más reciente está por aquí. Esto es realmente lógico y está coincidiendo con mi modelo mental que este es el primero, el último que utilicé luego éste luego éste. Estos son todos los expedientes. Este es otro ejemplo, archivos recientes. Esto puede ayudar mucho a hacer menos carga en la memoria de trabajo. Todo esto se trata de memoria de trabajo y ejemplos y cómo podemos implementarla para elevar la memoria de trabajo. No necesitamos que nuestros usuarios piensen todo y los mantengan en su memoria. Eso es todo. Si tienes alguna pregunta hazme. Pasemos a la siguiente lección. 17. Recognition y recordación: Si ves a alguno de tus amigos viniendo de como 500 metros o incluso 200 metros, puedes reconocerlo fácilmente, incluso mirando todo el cuerpo o movimiento de que esta es esa persona o este es John o esta es Sara. Nuestros cerebros están cableados para reconocer las cosas a gran velocidad. Puedes reconocer fácilmente una cara que has visto hace 20 años. De igual manera, los patrones o rostros familiares, o los íconos familiares que has visto en ya pocas apps, tu mente los va a procesar muy rápido y van a ser reconocidos muy rápido. Tomará mucho menos tiempo reconocerlos. En lugar de recordarlos o sacarlos de tu memoria a largo plazo y pensar que, “¿dónde vi a esta persona? No lo recuerdo”. Pero si ves a uno de tus amigos, rápidamente lo vas a recordar. No necesitas recordar nada, solo lo reconoces, solo sabes quién es. Se puede aplicar el mismo principio. Este reconocimiento es más fácil que recordar. Recordar significa que vas a traer esa información de tu memoria, arrastrarla hacia fuera. Pero el reconocimiento, funciona igual que snap. Vas a saber que lo que esto realmente significa. Por lo que el usuario no debe recordar información de una parte de la pantalla a la otra, no necesita recordar la información que acaban de ver. Además, no intentes usar ningún nuevo tipo de iconos o patrones con los que el usuario no esté familiarizado. De igual manera, si mostramos a un usuario desvelando nuevo patrón o comportamiento muy nuevo de una app que no ha visto antes, va a ser muy difícil para él usar ese producto o incluso inscribirse o iniciar sesión. Por lo tanto, evite recordar e intente implementar el reconocimiento, intente usar patrones similares. Vamos a tener otra conferencia completa sobre patrones en el siguiente apartado. Elaboremos este reconocimiento usando algún ejemplo. Has llenado muchos formularios en línea o formularios de inicio de sesión, has visto que hay iconos de candado en el campo de contraseña. Si lo has visto varias veces antes, al instante vas a reconocer que sin ningún trabajo o sin ninguna ayuda que necesitas para poner contraseña en este campo. Al usar iconos y patrones familiares en tu sitio web o aplicaciones móviles o software, realidad estás reduciendo la carga cognitiva de tu usuario. Así que ten en cuenta que vas a usar patrones e iconos similares o familiares. No intentes crear un nuevo tipo de letra o campo que un usuario no pueda reconocer. Ahora hay otro concepto que está relacionado con este reconocimiento, que son las expectativas del usuario o la anticipación del usuario. Intenta siempre cumplir con tus expectativas de usuario o anticipación. Lo que significa este concepto es que si nuestro cerebro está cableado para ver una y otra vez un patrón similar, lo seguirá. Entonces si estás tratando de crear un nuevo tipo de barra de pestañas que esté flotando dentro o en medio de tu aplicación, entonces el usuario no lo va a reconocer. El usuario no espera que la barra de pestañas esté flotando dentro de la aplicación en medio de la misma. Además, si intentas mirar el icono del carrito o los iconos de la lista de deseos, están en la parte superior derecha de cualquier sitio web de comercio electrónico. Entonces si estás tratando de colocar el icono del carrito a la izquierda o en el medio, usuario no está esperando ese patrón. lo van a perder, no lo van a reconocer, y les llevará mucho tiempo encontrar esto y empeorar la experiencia del usuario. Entonces, no intentes crear un nuevo patrón, un nuevo icono para confundir a tus usuarios. En la siguiente lección, vamos a ver muchos ejemplos sobre el reconocimiento o reconocimiento de patrones y las expectativas de los usuarios. Si tienes alguna pregunta, pregúntame, pasemos a la siguiente lección. 18. Ejemplos de reconocimiento en lugar de recordar: Veamos algunos de los ejemplos de reconocimiento en lugar de recordar. Es un principio muy básico y he visto muchos diseñadores usándolo de una manera muy equivocada. Entonces este es nuestro primer ejemplo. Ahora puedes ver por aquí hay algunos iconos que reconocemos al instante como este icono de “Atrás” y el icono de “Teléfono”, y también el icono de “Chat” tal vez. Pero para estos tres puntos, tal vez esto sea “Más”, pero la mayoría de los usuarios, creo que no lo van a reconocer, nuevos usuarios. Entonces en la parte inferior puedes ver esta es nuestra barra de pestañas principal, y esta es nuestra barra de navegación principal de esta app. Se pueden ver dos usuarios y un usuario, entonces esto es, no sé qué es este signo y esto es para Setting. Esto es muy común, y esto no es muy común. Esto podría convertirse y como tal vez sea mi perfil o cuenta, y esto tampoco está muy claro. Podrías meterte en alguna ambigüedad que no sé si es mi red de usuarios o si estos son mis seguidores o lo que sea. Así que asegúrate de que si estás usando o introduciendo dichos iconos, los usuarios deben ser reconocibles fácilmente. Así que trata de usar iconos estándar por aquí. Si no puedes encontrar iconos estándar, entonces pon algunas etiquetas debajo de ellos como este es quizás mis partidos o este es mi perfil, y este es mis seguidores, y estos son mis ajustes. Si puedes escribir algo en tu interfaz de usuario, es lo mejor que puedes explicar solo con una o dos palabras, que este ítem va a hacer las cosas. Una vez que los usuarios estén familiarizados con estos iconos mirándolos y leyendo sus títulos, podrá eliminar títulos más adelante o las etiquetas con estos iconos porque los usuarios ya están capacitados. Para los nuevos usuarios, esto siempre será un problema. Ahora veamos otro ejemplo. Se puede ver por aquí esta es una pantalla de Login diseñada por este Vitaly Rubtsov Creo que es un tiro de regate. Ahora se puede ver que esto es bastante estándar, pero hay pocas cosas que podrían ser confusas que esto va a ser siempre correo electrónico. Entonces esto es básicamente un icono de “E-mail”. Por lo que cualquiera que use esta pantalla siempre asumirá poner su correo electrónico por aquí y esto es por contraseña, pero tal vez pocos usuarios o tal vez usuarios antiguos que apenas están empezando en móviles o aplicaciones inteligentes podrían no poder iniciar sesión usando esto. Pero aún así creo que este es un buen ejemplo porque están usando casi los iconos estándar por aquí. Otro ejemplo, este Entra y Regístrate puedes ver por aquí. Aquí nuevamente tenemos este icono de “Usuario”. Ahora, ¿qué opinas? ¿ Debería usar su nombre de usuario por aquí o debe usar su e-mail por aquí? Esto es bastante estándar para la contraseña, pero esto es un poco ambiguo. Podría confundir a tu usuario. Por lo que estas son pocas cosas que necesitas tener en cuenta ese reconocimiento en lugar de recordar. Puedes usar un icono de “Correo electrónico” por aquí, o simplemente puedes usar algo como esto. Este es el mejor ejemplo de Regístrate y Regístrate que he visto en mi vida. Intenta siempre usar las etiquetas en la parte superior. Entonces cuando el usuario está escribiendo, él sabe o ella sabe que esto es lo que están escribiendo aquí o esta es la información requerida. Si estás usando algo como esto dentro de las etiquetas, estas no son muy buenas si tienes un formulario como cuatro o cinco campos. Nunca intentes usarlo. Pero si solo tienes dos campos, tal vez el usuario pueda recordar esto. Esto está en el límite de la memoria de trabajo. Por favor intenta recordar te mostré que es casi como de tres a cinco artículos. Entonces el mejor ejemplo que diría es éste. Cada etiqueta es clara entonces tienen campo de texto por aquí; contraseña, confirmar contraseña, código de invitación. Esto es claro corte. ¿ Por qué? Porque está usando texto para explicar que se requiere esta información. Además, se puede ver una manera divertida de decir esa basura, me olvidó la contraseña. Pero si ponen subrayado a su alrededor, entonces tal vez sea más fácil hacer click. Entonces tenemos este Login and Create cuentas. Por lo que estos también son muy buenos indicadores que necesitamos Entra aquí, esta es la pantalla de Login, esta es una pantalla de Crear Cuenta. Esto es bastante estándar si estás usando algún símbolo, cualquier ícono, intenta usar los estándar. Si estás usando un nuevo icono, intenta usar una etiqueta con él, como nombre de usuario o pon tu e-mail aquí, algo así para ayudar al usuario a resolver la confusión que significa este ícono. Ahora, veamos esta pantalla. Esto es bastante estándar. Esta es una vieja pantalla de Facebook. Al principio, mostraron algunas etiquetas alrededor de estos iconos si recuerdas, tal vez algunos de ustedes podrían recordar. Después una vez que los usuarios se familiarizaron y familiarizarse con estos iconos, entonces pueden saber fácilmente que este icono es para mis solicitudes o red. Esto es para mis mensajes. Estas son todas las últimas actualizaciones y estos son mis feeds y estos son los extras. Entonces aunque están usando algo como esto, pero aún así es mejor que le pongas algunas etiquetas alrededor y lo hagas más utilizable. Vale un ejemplo más de Google YouTube, y se puede ver por aquí, hay algunos iconos en la parte inferior de este video, como, Me gusta y no me gusta. Siempre que pase el cursor sobre él, muestra un popup. Es otra forma de mostrar al usuario que este icono va a hacer esto. Entonces los primeros tres iconos me resultan bastante familiares y sé lo que estos dos y recientemente agregaron éste por aquí, que es un poco nuevo para mí. Entonces si lo pasé por encima, dice “Añadir a”. Tengo que dar click en él para ver qué opciones están disponibles. Se puede ver por aquí puedo agregar a mi lista, playlist. Esto es un poco confuso para mí. Creo que lo cambiaron recientemente y estas cosas pueden crear confusiones. Creo que antes fue yo creo aquí en esta zona y recientemente lo trasladaron por aquí. Esto es buena idea para mostrar los textos en hover. Pero creo que sólo es posible en web. Por lo que en las aplicaciones móviles, no se puede mostrar algo así. Así que asegúrate de que estás atendiendo a todos estos problemas o todas estas confusiones que los usuarios pueden obtener de tu interfaz. Entonces todo esto se trata de usabilidad y diseño de experiencia de usuario y lo que debes tener en cuenta mientras estás diseñando tus pantallas, pantallas inicio de sesión o desarrollando o diseñando. Si tiene alguna pregunta, pregúntame. Pasemos a la siguiente lección. 19. Expectativas de usuarios: Hablemos un poco más de las expectativas de los usuarios. Ahora, la expectativa del usuario ocurre en dos pasos. En primer lugar, vamos a reconocer el objeto, lo que es este objeto, es esta una barra de búsqueda, es esto un botón, es esta una barra de navegación desplegable o un icono de cierre. Entonces en el siguiente paso vamos a ver cómo se va a comportar y a trabajar. Lo que necesitamos hacer en una mejor experiencia de usuario es que vamos a minimizar la brecha entre lo que espera el usuario y lo que experimentando o cómo se está comportando esta cosa. Todo lo que estás diseñando, debe comportarse de la manera que el usuario espera que sea. Ahora, la pregunta es cómo se forman estas expectativas. Lo que esperamos está todo en nuestra mano. Se trata del conocimiento que hemos adquirido del mundo exterior o de experiencias similares que se reúnen en nuestra cabeza. Se llama conocimiento en cabeza. Es el término definido por Don Norman en su libro, El diseño de las cosas cotidianas y lo que significa es que si hemos experimentado o utilizado productos similares entonces van a formar nuestras expectativas. La primera vez que vi la burbuja emergente del chat de Facebook, no pude quitarla de mi pantalla por unos 30 minutos. Ahora, diseñadores y desarrolladores, han creado una biblioteca de patrones de diseño o patrones de diseño. Ahora estas bibliotecas de diseño, nos ayudan a hacer frente a las expectativas de los usuarios y comportamientos familiares para que el usuario pueda reconocer instantáneamente que se trata de una navegación desplegable o esta es una barra de navegación, o esta es una barra desplegable de navegación de cualquier sitio web . Hay toda una conferencia sobre este patrón de diseño entonces te mostraré estos patrones de diseño y sus sitios web en la siguiente sección. este momento solo necesitas saber que estas son bibliotecas de patrones diseñadas que se basan en experiencias familiares y artículos familiares que los usuarios pueden reconocer instantáneamente. Nosotros como diseñadores y desarrolladores, primero debemos buscar esos patrones y usarlos en nuestros productos digitales en lugar de inventar o crear un nuevo patrón o un patrón propio. Por lo tanto, mantener todas estas cosas en las expectativas de los usuarios. Veamos sólo un ejemplo. Te voy a mostrar más ejemplos en la próxima conferencia solo para darte algún indicio de las expectativas de los usuarios. Esta es la pantalla de Microsoft Edge que es con Windows 10 y se puede ver que no hay barra de búsqueda en la parte superior. puede ver que debe estar en ese lugar de aquí. Lo que hicieron es que no lo sé, intentaron tal vez modernizarlo o lo que sea. Lo ponen por aquí como Google. Esperaba la barra de búsqueda en la parte superior y por como cinco minutos, sigo presionando por aquí en esta zona. No esperaba que la barra de búsqueda se mueva aquí abajo o esta es la primera página donde necesito buscar por aquí o ingresar mi dirección web por aquí. Entonces por como 5-10 minutos, solo sigo tocando, dando click aquí en esta área y diciendo donde tengo que escribir la URL del sitio web. ¿ Qué está pasando con este navegador? lo sé pero ahora creo que han solucionado este problema con estas nuevas actualizaciones pero esta es la captura de pantalla que tomé del problema que estaba teniendo. También se puede ver en la parte inferior de este sitio web, se siente como si fuera una página web. Entonces en una página web si hay una barra de búsqueda, significa que se va a buscar dentro de este sitio web. Este fue un patrón muy desconocido y un patrón muy nuevo, ahora creo que lo han arreglado pero esto es muy confuso para cualquier usuario. Todo esto se trata de expectativas de los usuarios, patrones de diseño y cómo se forman. Si tienes alguna pregunta hazme. Pasemos a la siguiente lección. 20. Expectativas de usuarios con video con video con la: Ahora voy a explicar el concepto de las expectativas de los usuarios y cómo se forman mediante el uso de los mismos dos teléfonos que te mostré antes. Este es un juguete y éste es iPhone. Se puede ver que esto tiene un área de pantalla por aquí. Lo que pasó es mi hijo, tiene dos años, mayoría de las veces usa este teléfono. Por lo que ve videos de YouTube tocando en diferentes áreas de la pantalla. Había construido expectativas de que cada teléfono va a ser funcional. Puedes usarlo tocando en la pantalla. Cuando le di este teléfono por primera vez, intentó usar esta pantalla. Trató de tocar aquí para activarlo, pero no se estaba activando. Durante como 15 minutos, no le estaba dando la idea de que necesitaba apretar estos botones así. Este es el problema mayor. así como se forman las expectativas de los usuarios. Están formados por el conocimiento en tu cabeza y lo que has aprendido antes o lo que has vivido antes de la manera similar. Si tienes dispositivos similares como estos, los vas a utilizar de la manera similar si ves uno nuevo. Así son las expectativas de los usuarios. Me encanta ver a los niños cuando tratan de mostrarme algún problema de experiencia de usuario. Me encanta verlos. Ellos son el mejor ejemplo de confusiones de usuarios y problemas de usuarios. Cuando van a ver un nuevo producto, van a reaccionar y tratar de usarlo. Este es el momento que necesitas para ver dónde van a poner las manos, si van a levantarlo, si van a arreglarlo. Todo esto se trata de las expectativas de los usuarios y nos vemos en otra lección. 21. Ejemplos de expectativas de usuarios: Ahora, comencemos con algunos de los ejemplos de las expectativas de los usuarios y cómo se forman y lo que estamos esperando, y cómo la mayoría de los diseñadores y desarrolladores están cometiendo los mismos errores. Ahora bien, si te muestro este sitio web, este es casi un sitio web de comercio electrónico bastante estándar, busco un modelo de este tipo muy grande aquí, entonces busco correo de soporte. También, busco mayormente en el lado derecho, esquina derecha, el carrito de compras. Entonces también tengo registro de salida, así que todos estos están por aquí. Ahora, una cosa que no esperaba es que, estos ajustes están a la izquierda, pero aun así creo que estos no importan, estos no son ajustes muy grandes ni problemas muy grandes. Esto es casi bastante estándar, como yo en su mayoría necesito las categorías por aquí, esto es bastante estándar y todo lo demás. Ahora se puede ver por aquí agregar al botón del carrito es muy prominente, esto es lo que estaba esperando. Ahora, permítanme mostrarles algunos de los problemas y ejemplos donde muchos diseñadores y desarrolladores lo han hecho realmente mal. Experiencia de usuario muy pobre y usabilidad. Entonces permítanme mostrarles un ejemplo. Entonces en este ejemplo, el tema es muy minimalista, pero el problema con él es, es barra de búsqueda. Se puede ver por aquí tengo que dar click sobre él, y una vez que haga clic mis ojos van a estar bloqueados en esta zona. Te voy a mostrar este problema, que es la visión periférica, es en la próxima conferencia supongo, y se puede ver la barra de búsqueda y el icono está a la izquierda por aquí. Entonces una vez que le doy clic, no sé qué está pasando, así que solo seguí mirando por aquí, y luego miré por este lado y encontré esto. Esto está demasiado lejos, tal vez si quieren usar este patrón, solo pueden usar esta zona por aquí. Aún así este patrón no es muy reconocible y los usuarios no esperan este comportamiento. Entonces esto es bastante estándar y al mirarlo, no me dice que esto es cero artículos o cero por el número de $ o el costo, así que esto también es un poco ambiguo y esto no es lo que esperaba. Esta barra de búsqueda es todo, aunque es muy única y moderna, pero aún así creo que es un problema muy grande con los sitios web de comercio electrónico. Ahora si vamos a esta tienda, muy bonito diseño, muy buen equipo, muy bonito todo, pero si buscas barra de búsqueda por aquí o en el medio, no puedes encontrarla, porque lo han movido a la izquierda. Entonces esto es realmente, de lo que debo decir, es realmente inesperado que esta barra de búsqueda se pueda encontrar en el lado izquierdo donde debería estar el logotipo. Por lo que deberían cambiar estos lugares, por lo que el logotipo debe estar por aquí, y las barras de búsqueda deben estar en el medio. Ahora bien, si voy a este sitio web, hay muchas expectativas de los usuarios, realmente han estropeado. Se puede ver ajustes y tarjeta está en el medio izquierdo, debe estar por aquí y prominente, entonces la barra de búsqueda es muy extraña. Tienen dos barras de búsqueda por aquí, una esta y otra por aquí, que es, yo diría realmente no un patrón muy común y familiar. Se puede ver el logo y simplemente sentado en el medio. Esto es muy gracioso. Yo diría que esto es realmente inutilizable usabilidad del sitio web apesta y experiencia del usuario también. Todo lo demás está bien, pero estas cosas realmente van a doler mucho, aunque hayas diseñado esto muy bien y todo está creado, pero aún así, estas pocas cosas van a confundir a tu usuario. Permítanme mostrarles más ejemplos, este es el mismo tema, mismos problemas. Entonces tenemos esta zona y se puede ver por aquí, tarjeta está por aquí, barra de búsqueda por aquí, ya basta. ¿ Dónde está mi login y dónde está mi configuración a cuenta? Lo cambiaron por el lado izquierdo. Esto es realmente mal la experiencia del usuario y la usabilidad. Te estoy mostrando estos temas desde inventar en el mercado, y estos son desarrollados por diferentes desarrolladores y diseñadores. Deberían mirar estos elementos. Entonces esto también está realmente mal, esto no es lo que el usuario está esperando, busca por aquí, y ningún icono para carros de la compra, así que tengo que buscar todos estos textos, leer todos estos textos para ir al carrito de compras, esto también está violando la regla del reconocimiento en lugar de recordar. Esto también le va a dar muchos problemas a tus usuarios. Entonces puedes ver que no hay información para todos estos productos, puedes ver, no sé cuál es el precio de estos productos. Este es realmente mal ejemplo de un sitio web o tema de comercio electrónico. Esto está realmente bien diseñado, todo se ve genial, pero este ícono del corazón, no sé si son mis artículos de gusto o lista de deseos. A lo mejor creo que un poco de texto por aquí como lista de deseos es realmente útil, aunque tienen algún vértice como este, por lo que muestra que esta es una lista de deseos. Nuevamente, han violado la regla, han utilizado la barra de búsqueda de la izquierda, y este es un patrón muy extraño, no debería ser así. Nuevamente, por aquí se puede ver la barra de búsqueda está a la izquierda. Por lo que se puede ver que hay toneladas de estos temas que necesitan mucha fijación. Incluso he visto muchos sitios web de comercio electrónico que lo están usando o haciendo de manera muy diferente, y están sorprendiendo a sus usuarios con las expectativas y confundiéndolos, así que asegúrate de no estar cometiendo estos errores. Este es el último. Todo parece bastante bien en este, pero les voy a mostrar un comportamiento muy extraño el cual he encontrado por aquí. No estoy esperando, así que no estoy viendo ningún botón de “Agregar al carrito” en este producto. Entonces una vez que me muevo, veo estas opciones o algo así, y no estoy seguro de qué es esto, así que si paso el cursor sobre este botón plus, y realmente no sé qué va a hacer, así que si lo presiono, puedes ver que ha añadido este artículo a mi carrito. Por lo tanto, intenta evitar estos nuevos patrones o las expectativas que los usuarios realmente no están esperando, y no van a reconocer estos objetos, y no los van a utilizar. Estarán en confusión, y la mayoría de las veces no van a usar esta característica. Por lo que todos estos son ejemplos de realmente mala experiencia de usuario, principios de usabilidad y violando la mayoría de los principios básicos de las expectativas de los usuarios. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 22. Limitaciones de visión Peripheral: Otro concepto realmente impresionante es cómo funciona nuestra visión o nuestro ojo funciona. Estamos limitados en la visualización por lo que este concepto se llama visión periférica. A lo que ves directamente delante o en medio de tus ojos se le llama tu visión central la cual es muy clara. Lo que ves fuera a los lados o a los lados de tu visión principal es la visión periférica. El límite básico de la visión periférica es que no se puede ver claramente en su visión periférica, todo está borroso. Un ejercicio sencillo para ver cómo funciona nuestra visión periférica. Si intentas enfocarte en esta pantalla, o deslizarte, o el encabezado de esta pantalla, y si intentas leer el texto debajo de ella, fallarás, será un poco borroso no puedes verlo con claridad. Si te estás enfocando en algún área, el área alrededor de ella está todo borrosa no puedes ver lo que está pasando ahí o lo que está escrito ahí. Veamos cómo funcionan nuestros ojos con este diagrama y cómo esta visión periférica y central afecta nuestra experiencia de usuario o cómo vemos e interpretamos las cosas. Ahora como se puede ver en el medio nuestro centro de mirada es más claro, son cuatro detalles, en el medio podemos ver muy claramente, es sólo alguna área de enfoque. Te voy a mostrar cuánto es, lado derecho a los lados la primera zona está cerca de visión periférica tenemos alguna área borrosa, por aquí no tenemos demasiado desenfoque, luego en la zona media periférica tenemos más desenfoque. Ahora en la visión periférica lejana izquierda no podemos ver nada con claridad, todo está muy borroso. Ahora hablemos del límite de la visión periférica, tu visión periférica es muy débil a la derecha y a la izquierda, o en los bordes, y está muy clara en el centro. La visión central se utiliza para ver detalles mientras que visión periférica tiene más experiencia al ver movimiento, por lo que si alguien simplemente se mueve en el lado derecho de tu hombro y él trata de golpearte, te vas a agachar al instante. ¿ Por qué? Porque tu naturaleza ha implementado esta visión periférica que podemos responder al movimiento de manera muy clara. Si algún animal, o alguna cosa peligrosa, o algún auto, o algún ciclo viene de la derecha, está borroso en esa región, y si algo se mueve muy rápido lo vas a adivinar o nuestra mente va a interpretar ella. Es así como funciona la visión periférica, es mejor para detectar movimiento. Hablemos de cuánto es el campo visual para la visión periférica y la visión central. Nuestro campo visual es de casi 170 grados a nuestro alrededor y 100 grados comprendidos por la visión periférica. La mayor parte es visión periférica, no podemos ver claramente la mayoría de las cosas que nos rodean. Tratemos de ver cómo esta visión periférica es importante en el diseño de interfaces digitales. Cuando estás diseñando algunos mensajes o notificaciones, necesitas mantenerlos en la visión central, y si no puedes mantenerlo en la visión central o muy cerca de dónde está mirando el usuario, entonces necesitas moverlo, necesitas usar algún movimiento para mostrar al usuario que algo sucedió o ocurrió algún error. Lo que hacen los diseñadores es que intentan usar el movimiento llamado efecto pop o efecto pop-up para enfocar la atención de los usuarios para que el usuario pueda ver al instante que algo está pasando a la derecha o a la parte inferior de la pantalla, y lo hará permiten al usuario encontrar la información fácilmente. Otra forma de atender esta visión periférica es el sonido. Puedes mover cosas y también puedes dar algo de sonido como si hubieras visto que aparecieran burbujas de ayuda. En diferentes sitios web, se les ocurre algo de sonido y animación, por lo que fácilmente se puede llamar la atención de que algo está sucediendo en esta área. La visión central es muy limitada, todo en la pantalla que no está en los uno o dos centímetros de tu ubicación click entonces va a caer en la visión periférica donde la resolución es muy baja, todo está borroso. Si estás usando algún formulario o botón y el usuario va a hacer clic en él, entonces tu mensaje de error o mensaje de éxito debe estar muy cerca de ese botón que acaba de hacer clic, por lo que si el usuario está viendo en algún objeto o se está enfocando en algo en tu pantalla, el mensaje de error o cualquier cosa que quieras darle retroalimentación al usuario sobre lo que está haciendo, necesita estar muy cerca de la visión central del usuario, por lo que así funciona la visión periférica y la visión central. Te mostraré algunos ejemplos en la siguiente lección así que pasemos a la siguiente lección. 23. Ejemplos de límites de visión de visión Peripheral: Permítanme mostrarles algunos de los ejemplos de visión periférica y cómo podemos potenciar nuestros diseños y productos implementando estas limitaciones de visión periférica. Ya sabes que nuestros ojos son limitados. Ahora permítanme mostrarles algunos de los ejemplos de visión periférica y cómo podemos evitar las limitaciones del valor de la visión periférica mientras diseñamos para aplicaciones web y móviles. Esos problemas más comunes que vemos son cuando los usuarios están usando algo. Por ejemplo, estoy usando esta configuración de creación de código de cupón en esta plataforma Udemy. Si trato de hacer clic aquí, y creo un cupón, por ejemplo, muestra gratis o algo así. El precio con descuento es de $50 y se puede ver ahora por aquí estoy enfocado en esta área. Si ocurre algo o algún error y se muestra por aquí en esta área, no lo voy a revisar. Voy a crear diez cupones y los plazos serán el día siguiente. Una vez que hago click en esto, puedes ver que no recibí ningún mensaje en dos segundos. De acuerdo, este es el momento. Una vez que algo se movió, estaba buscando en esta zona, por aquí, se puede ver que estaba enfocado en esta área. Pero una vez que mi visión periférica vio algún movimiento en la parte superior, fui dirigido al mensaje. Si este mensaje no aparece por cuatro o cinco segundos o se retrasa por más de uno o dos segundos, entonces me voy a confundir, mi cupón no tuvo éxito. Esta es una forma de utilizar la visión periférica y cómo evitar las limitaciones de la visión periférica. Al mostrar esto idealmente, esto debería aparecer en esta área. A modo de mensaje y con algunos borrosa que se haya creado esta cosa. Déjame mostrarte un ejemplo más. Ahora mismo estoy en Amazon dot com y esta es mi lista de deseos o lista de deseos de productos para caligrafía. De verdad me interesa este tema. Está bien. Tengo estos pinceles y si trato de eliminar esto, puedes ver por aquí donde estará apareciendo el mensaje. Eliminemos esto y en cuanto eliminé, se puede ver que el mensaje ha sido borrado en el lado izquierdo. Es en la misma zona donde estaba buscando. Yo estaba mirando por aquí y estaba por aquí. Tan pronto como vi el cambio, vi este mensaje pero idealmente creo que debería ser en esta área, en el medio o tal vez en este lado. Yo lo voy a deshacer y te voy a mostrar algo más. Eliminemos algo del medio, como éste. El único es lo que hicieron es que están usando algún efecto borroso, si lo hubieras visto. Están usando algún efecto borroso del texto para mostrarme que he borrado este mensaje sólo para llamar mi atención sobre el mensaje. Esta es otra forma. Déjame mostrarte un ejemplo más. Este es otro ejemplo y esto es realmente mala implementación de esta visión periférica y visualización de errores de forma. Lo que hice es que estaba creando un formulario en esta tienda y esa era tienda TeeChip. Estaba llenando todos los campos del formulario y cuando presiono el botón Guardar al final, aparecía este error. Podrías haber sabido que muchos de tus usuarios, usuarios web, no están usando sus navegadores en pantalla completa. ¿Qué estaba pasando? Esta parte del mensaje de error estaba escondida detrás y no pude verlo. Estaba por debajo del redil. Fold significa que no pude verlo, mi navegador no estaba maximizado. Durante cinco a diez minutos, seguí llenando esto y haciendo clic en esto. Pero entonces vi este mensaje de error. No pude relacionarlo con ninguno de estos campos. Lo que hice es que estaba cambiando el campo de descripción en lugar de campo de título. Se puede ver por aquí dice que el campo de título debe contener estas muchas letras. Lo que estaba haciendo es que pensaba que está mostrando el error relacionado con esta descripción porque se puede ver si movemos este error por debajo de este campo de título o por encima de este campo de título, entonces va a tener más sentido y es en nuestro visión periférica. También, nuestras mentes están enchufadas con el agrupamiento, que es nuestra psicológica. Se puede decir psicología visual, que si algo está agrupado, consideramos que está relacionado. Si este error se agrupa con este título, entonces tendría más sentido. Nunca cometas estos errores o si el error está fuera de la visión periférica. Por ejemplo, si tuviera el botón por aquí y el mensaje de error debajo de él por aquí, entonces podría estar mirando el botón y podría perderme el error. Estos son los ejemplos que debes tener en cuenta que los mensajes de error o cualquier información o notificación que estés mostrando a tus usuarios, deben estar en la visión periférica. Permítanme mostrarles otro ejemplo de visión periférica y cómo este sitio web no lo está utilizando adecuadamente. Este es Shophive y uno de los sitios web de comercio electrónico más grandes de Pakistán. Si intento iniciar sesión, les mostraremos la página de inicio de sesión. Ahora, si intento iniciar sesión, puedes ver por aquí no hay botón de inicio de sesión. Lleno éste, luego llene éste. Cuando fui a presionar mi botón por aquí, no hay botón. ¿ Por qué? Porque mi visión periférica se limita a esto. Durante unos segundos intentaba encontrar el botón y luego de repente lo encuentro por aquí. Esto es realmente extraño. Esto no es usuario, lo que el usuario está esperando primero. Entonces lo segundo es que está fuera de mi visión periférica, me estaba enfocando en esto. Esto está realmente confundido. Asegúrate de que si el usuario está viendo y llenando el formulario así, en esta línea, en este ángulo sus ojos se están deslizando de arriba a abajo, entonces debería encontrar los botones por aquí en esta línea. Por aquí no. Espero que hayan disfrutado de esta lección. Si se me ocurre otro ejemplo, realmente lo voy a compartir con ustedes chicos. Creo que usted ha entendido los problemas con nuestra visión periférica y cómo es limitada. Pasemos a la siguiente lección. 24. ¿Qué es el contexto de uso?: Para ser un mejor diseñador de experiencia de usuario, una de las cosas es que estudias el comportamiento humano o la psicología. El segundo es que vas a buscar el entorno de los usuarios o el contexto del uso. Si sabes que qué se va a usar tu app y cómo se va a usar y dónde el usuario la va a usar mayormente y en qué situaciones, entonces puedes diseñarla mejor. Por ejemplo, si diseñas una aplicación, por ejemplo, la app para rastrear una dirección o algo así y sabes que el usuario la va a usar mayormente bajo la luz del sol, entonces sabes que vas a diseñar un esquema de color brillante para o tal vez más oscuro esquema de color para ello si lo va a usar en la noche. Te vas a asegurar que el contraste sea alto y él pueda ver o él o ella puede ver toda la pantalla de la aplicación mientras la sostiene al sol. De igual manera, si soy fotógrafo paisajístico y tomo fotos durante lluvia y cerca de lagos y ríos, entonces necesito una cámara con algún escudo meteorológico integrado en ella. Se acercan muchas cámaras nuevas, tienen escudo meteorológico en él y muchos fotógrafos se inclinan a comprar esas cámaras. Si conoces los contextos, va a cambiar toda la dirección del diseño de tu producto. Veamos otro ejemplo del contexto de uso. contexto también puede decirnos sobre las limitaciones de nuestro software o uso, por ejemplo, si estoy desarrollando un software o una aplicación para bancos, entonces podría necesitar ver la configuración de su estación de trabajo. Necesito ver cuál es el sistema operativo que están usando o qué navegador están usando o qué versión de sistema operativo tienen. También me puede decir cuánto tienen las distracciones, por ejemplo, tienen muchas multitudes en el banco o hay mucho ruido en el banco, ruidos de ventilador o cómo se configura su oficina, cómo se configuran sus habitaciones y sus sillas. También, ¿cuál es el brillo de la pantalla, o qué monitores están utilizando? Por lo que el 95 por ciento del tiempo, los bancos tienen muchos navegadores y sistemas operativos obsoletos instalados. Pasó conmigo una vez que estaba corrigiendo y diseñando un sitio web para un banco muy grande en Australia y el cliente sigue pidiéndome arregle los bancos para Internet Explorer 8 y en ese momento, creo que había Internet Explorer 10 se lanzó y muchos usuarios usaban Chrome y Firefox. Siempre me quejé de él, ¿por qué necesitas que arregle para Internet Explorer 8? Lo que aprendí fue que todos los bancos, tenían sistema operativo Windows, Windows 7 instalado y tenían Internet Explorer 8 y no había opción para descargar Internet Explorer 9 ni actualizar porque estaban arreglados. Ves que los contextos de uso y cómo se va a utilizar tu producto es muy importante. Ahora, cómo vas a consentir en los contextos que cómo vas a explorar el contexto de uso. Vas a tomar fotos del entorno de usuario. Necesitas salir donde realmente use el producto. Puedes seguir adelante y puedes ir a sus oficinas, a sus casas, pasar unas horas con ellos, pasar unas horas mientras están usando tu producto para ver en qué situaciones lo van a usar. Algunos usuarios investigan, pasan días o incluso meses averiguando el contexto cómo se va a utilizar el producto, por ejemplo, si tenemos bebé alarmante o baby monitor, necesitamos pasar un día entero averiguando cómo los patrones de sueño de los bebés son y qué van a hacer los bebés con el monitor. A lo mejor se lo van a agarrar y se lo van a meter en la boca o lo van a tirar a la basura. ¿ Es demasiado brillante en la habitación o está demasiado oscuro en la habitación del bebé y su monitor no puede funcionar, su cámara no puede funcionar en la atmósfera oscura? Estas son todas las cosas que debes tener en cuenta mientras estás diseñando un producto o construyendo un producto o una aplicación o un sitio web. Espero que hayan disfrutado de esta lección sobre contextos de uso y cómo este contexto de usuario juega un papel importante en la experiencia del usuario. Pasemos a la siguiente lección. 25. Contexto de uso con video de la headshot: hoy voy a explicar el contexto de uso mostrándote estos dos móviles. Ahora, este es un móvil seco y este es iPhone. Ahora la mayor diferencia es que esto está destinado para niños. El contexto de uso es totalmente diferente para estos dos dispositivos. Este es para niños, lo van a tirar al piso. Se lo van a tocar en la pared. Pero por otro lado, este teléfono no está destinado para golpearse en la pared. Por lo que esto se va a poner en el bolsillo para que puedas ver la forma delgada. Puedes ponerlo fácilmente en el bolsillo. Puedes sostenerlo fácilmente en tu mano. Por otro lado, este no está destinado para ponerlo en el bolsillo por lo que es muy enorme, se puede ver por aquí. Si lo ves de cerca, es un poco gordo, por lo que está destinado a los niños para que puedan sostenerlo fácilmente. El cuerpo es algo así. Se puede ver que estos dos productos son totalmente diferentes porque sus contextos de uso son diferentes. De igual manera, cuando se usan algunas cámaras, son diferentes porque su contexto de uso es diferente. Algunos de ellos son solo apuntar y disparar. Son de tamaño muy pequeño y algunas de ellas son de uso profesional. Son muy pesadas y tienen un muy buen agarre. Puedes agarrarlos fácilmente. Esto se trata más de contextos de uso y yo estaba guardando este juguete de como seis meses en mi cajón. Sólo para mostrarte éste. Nos vemos en otro video. Cuídate y nos vemos pronto. 26. ¿Por qué los actores son importantes en UX?: Ya hemos aprendido que los usuarios son realmente importantes en cualquier proceso de diseño de experiencia de usuario o en cualquier producto que estés diseñando. Ahora bien, el otro lado de la moneda o el otro lado que es realmente importante, igual que los usuarios, son partes interesadas. Podrían tener a las personas y personas más conocedoras sobre su producto. Conocen los ins y outs de sus productos, sus características, que son diferentes a otros productos. Estos interesados, incluyen a los directores ejecutivos o a los gestores de productos, o a los comercializadores, o incluso a los inversionistas, que son terceros. A ellos les interesa cierta característica de ese producto. Por ejemplo, podría haber utilizado impresoras de color. Ahora, en las impresoras de color, sabes que los cartuchos de color o cartuchos extra cuando terminas tus colores en un cartucho son realmente caros. Por lo que tal vez los inversionistas están buscando las impresoras que tienen cartuchos que son caros por lo que las personas que compran su producto podrían necesitarlos o podrían aumentar sus ventas. Ahora, los inversionistas podrían estar interesados en las ventas globales de su producto. Podrían estar buscando mercados diferentes como Europa o tal vez Asia. Están apuntando al mercado específico y necesitan que el producto esté en un lenguaje específico para ser golpeado. Por ejemplo, si quieren golpear a los países árabes, o Emiratos Árabes Unidos, o a personas de los países árabes, necesitan tener su producto traducido árabe o tener un apoyo del idioma árabe. ¿ Por qué realmente importan estos interesados? ¿ Por qué necesitamos tomar sus entrevistas o necesitamos ver qué metas tienen? ¿ Cuáles son sus objetivos? Debido a que podrían no estar buscando ingresos, beneficios, o tal vez algunos interesados podrían estar buscando las ventas globales, y algunos podrían tener interés en una característica específica de ese producto. Entonces si estás tratando de omitir esa característica que requiere que el usuario se registre por $5 mensuales o algo así, estás recortando el beneficio real o beneficio de las partes interesadas. Por lo que necesitas equilibrar entre ambos. Es necesario equilibrar entre los usuarios y los intereses de los interesados. Desde mi punto de vista, si estás diseñando o desarrollando algún producto, el equilibrio adecuado entre las partes interesadas, intereses y metas, y las metas e intereses de los usuarios es el verdadero gran producto de experiencia de usuario. Es posible que tengas que quitarte algunas de las características, o es posible que necesites agregar algunas características en tu aplicación o en tu sitio web o en tu sitio de comercio electrónico, teniendo en cuenta que los objetivos de tus stakeholders. Todas las decisiones que se toman en cualquier organización las toman en su mayoría sus directores ejecutivos, por lo que son los grupos de interés más poderosos. La mayoría de las startups que ves, tienen directores ejecutivos que realmente están involucrados en el producto y son los creadores de pensamiento ese producto. Por lo que podrían estar buscando más firmas, o más penetración en el mercado, o más usuarios fluyendo hacia su producto en lugar de los ingresos en el inicio. Una vez que se alcanza esa concentración de usuarios, podrían estar buscando los ingresos. Lo mismo que hizo Microsoft con la actualización de Windows 10. posible que lo hayas tenido gratis por primera vez, entonces debes pagar para actualizar a las actualizaciones recientes. Es así como algunos de los interesados intentan ingresar al mercado o están buscando más usuarios. Estos son objetivos diferentes. Es necesario cuidarlos todos. Al diseñar su producto, necesita ver qué objetivos están buscando los grupos de interés. Todo esto se trata de las partes interesadas y sus metas, y sus objetivos, y sus entrevistas. Es necesario tomar una o dos o incluso todas las entrevistas de los interesados para obtener su punto de vista e ideas sobre el producto. Necesitas tener en cuenta todas estas cosas mientras estás diseñando o desarrollando tu producto. Ahora, pasemos a la siguiente lección. 27. Behavior, humanos, paralysis y patrones de escanea: Todos los humanos son perezosos, somos perezosos, yo soy perezoso, tú eres perezoso. ¿ Por qué? Porque está en nuestra naturaleza. Si le das a algún humano una tarea donde haya demasiados obstáculos para lograrlo, entonces se van a dar por vencido. Lo mismo sucede en nuestra industria del juego. Si el juego es demasiado difícil, ni siquiera puedes cruzar el primer nivel, vas a dejar de fumar, vas a desinstalar ese juego. De igual manera, en diseño web o diseño de aplicaciones móviles, formas más largas no van a convertir mejor. Así que intenta evitar tus formularios muy largos o no dejes que los usuarios llenen cientos de campos de entrada antes de intentar usar la app. Lo mismo sucede con la industria del comercio electrónico. tasa de abandono del carrito es de 69 por ciento. El segundo motivo importante de este abandono es la creación de cuentas. A la hora de crear una nueva cuenta o registrarse en cualquier sitio web de comercio electrónico, 70 por ciento de la gente va a renunciar. Se puede ver cómo esto se va a aplicar a nuestra naturaleza que somos perezosos si vemos muchos obstáculos y si vemos que esto es muy difícil de lograr, vamos a rendirnos. Otro comportamiento del usuario es la parálisis de decisiones. Lo he visto cientos de veces con mi esposa. Ahora, lo que tienes que hacer es que si intentas abrumar a tu usuario con demasiadas opciones o demasiadas cosas para seleccionar, ella va a entrar en un estado de parálisis de decisiones. La mente humana se rinde y no pueden tomar ninguna decisión. Se realizó una investigación sobre la parálisis de decisiones, cómo sucedió es un investigador, pone como siete u ocho sabores diferentes de mermeladas en un estante y deja que los usuarios tomen la decisión. Por lo que los usuarios se estaban tomando la mayor parte del tiempo y no intentaban comprar uno de ellos porque no podían decidir. Entonces lo que hizo es, simplemente puso dos o tres sabores de la misma mermelada en ese estante y los usuarios empiezan a comprar uno de ellos. A esto se le llama parálisis decisoria. Podría haber visto en muchos sitios web que los paquetes de precios o modelos de precios de cualquier sitio web o de cualquier aplicación web no son más que modelos de precios completos o paquetes de precios completos. ¿ Por qué es eso? Porque no quieren que te metas en una parálisis de decisiones. Ahora, para evitar esta parálisis de decisiones, es necesario dar a los usuarios pocas opciones para elegir. Hay un comportamiento más que quiero compartir con ustedes, que es en su mayoría la gente hace es que no leen el escaneo. Esto sucede en cualquier dispositivo digital, cualquier sitio web, cualquier sitio de comercio electrónico, nuestros ojos y mentes están cableados para escanear el objetivo que estamos buscando. Entonces si estamos buscando algo, vamos a escanear, no vamos a leer. Hay dos patrones de escaneo. Uno es el patrón Z y el otro es el patrón F. Te voy a mostrar las dos imágenes de ejemplo en la siguiente lección. Ahora mismo, solo ten en cuenta que existen dos patrones para escanear información. Z, mueve nuestros ojos en patrón Z, y F es que normalmente vemos los sitios web o patrones en forma de F. Todo ser humano comete error. Incluso si tu puntuación de aplicaciones es del 100 por ciento en escala de usabilidad, que es perfectamente utilizable, no hay problema si siguen siendo usuarios cometerán errores. Si crees que tu app es muy fácil, muy intuitiva, aún así los usuarios van a cometer muchos errores. Hay dos vías para limitarlo. Primero es eso, no dejes que pasen en primer lugar. Utilizar algunas asequiciones, significados, o restricciones para limitar que ocurra ese error. En segundo lugar, es necesario guiar al usuario para que arregle los errores fácilmente. Ya has visto que cuando eliminas algunos correos electrónicos de G-mail, te da la opción de deshacer. Puedes volver fácilmente a los correos electrónicos, puedes recuperar fácilmente los correos que has borrado. Otro problema con los humanos y el cerebro humano es la atención y la distracción. Tenemos una atención muy mínima y si alguien nos distrae, vamos a perder el foco. Por lo que necesitas siempre apartar la carga del cerebro del usuario, o se llama, necesitas bajar la carga cognitiva del usuario. Se puede ver el ejemplo es la predicción de término de búsqueda de Google. Cuando empieces a escribir algo, Google te va a dar algunas sugerencias. Por lo que es más fácil para ti que no necesites teclear toda la línea, solo necesitas dar click en la sugerencia y te va a buscar. Te mostraré algunos ejemplos de este comportamiento humano en la siguiente lección. Ahora, pasemos a la siguiente lección. 28. Cómo aneja y nuevo cerebro tomar decisiones: Hablemos de cómo funciona la mente humana y cómo tomamos decisiones. Tenemos dos tipos de mentes. uno se le llama el viejo cerebro y a otro se le llama cerebro nuevo. Ahora, la mayoría de las veces el viejo cerebro está tomando la mayoría de las decisiones, y la mayoría de las decisiones que tomas diariamente las toma tu mente inconsciente, eso también se llama viejo Cerebro, y la mayoría del procesamiento mental se hace inconscientemente. Entonces si piensas que estás pensando y tomando, y comprando decisiones, mayormente con tu mente intelectual, o con tu mente de toma de decisiones, Entonces te equivocas. En su mayoría estás usando tu mente inconsciente o viejo cerebro que está tomando decisiones por ti. Algunas de las decisiones donde tenemos que comparar muchos productos, es por nuestro nuevo cerebro. Nuestro viejo cerebro es muy rápido y la mayoría de las veces va a tardar sólo 0.05 segundos en hacer una opinión sobre un sitio web, sobre un producto, sobre un iPhone de Apple, o un nuevo modelo de una cámara. Por lo que todo lo que el cliente necesita decidir es apenas menos de un segundo. Entonces esto es muy importante. Necesitas aprender sobre este viejo cerebro. Necesitas abordar este viejo cerebro cuando estás diseñando tus productos, deben lucir muy cool, y muy atractivos, y muy sólidos y confiables. Hay un dicho de que la primera impresión es la última impresión, aunque no es muy cierto, pero en la experiencia del usuario, es casi 80-90 por ciento cierto. ¿ Por qué? Porque el 75 por ciento de los usuarios, admiten que cuando ven por primera vez algún diseño de sitio web de una empresa, van a adivinar la credibilidad o la confianza de esa empresa a partir del primer look de su sitio web. Entonces esto es muy importante. Este es tu viejo cerebro jugando aquí. Por lo que las personas son más propensas a comprar productos si perciben que se trata de un producto de alta calidad o tienen una gran confianza en su sitio web. Ahora bien, si miras algún sitio web y se ve muy poco profesional, y muy desordenado, o no está diseñado muy bien, es poco probable que compres en esa tienda de comercio electrónico o ese sitio web. Todo esto está influenciado por la experiencia general del usuario y la calidad percibida del producto. Entonces estamos percibiendo en la primera impresión que esta cosa va a funcionar o esta es una empresa confiable, y este producto es confiable. Ahora, la mayoría de las decisiones calculadas donde necesitas comparar cosas entre sí, o necesitas comparar las características de dos smartphones, aquel que necesito comprar, tu nuevo cerebro va a patear. Necesitas comparar cosas, necesitas hacer cálculos. Este PC tiene más potencia de procesamiento o algo así. Entonces cuando intentas comparar o usar el modo de comparación de cualquier producto que estés intentando comprar, y ver sus diferencias y características, entonces este es tu nuevo cerebro ayudándote a tomar decisiones. Entonces todo esto se trata de nuevo cerebro y viejo cerebro, y primeras impresiones, y la confianza y credibilidad de cualquier producto o aplicación. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta, pregúntame, pasemos a la siguiente lección. 29. Los humanos odita: Otro comportamiento humano y psicología humana es que odiamos el cambio. La mayoría de los humanos, van a resistir el cambio. Siempre que una app o un sitio web hagan más, o el rediseño de su sitio web o aplicación, la mayoría de los usuarios no les va a gustar. Empezarán a quejarse de ello”, Que no nos gusta el diseño. ¿ Cuál es el fondo? ¿ Dónde están mis cosas”, algo así. La solución es crear un cambio progresivo, y también consistencia es Si estás intentando diseñar una nueva versión de Facebook, no necesitas cambiar todos los colores ni todo el diseño de la publicación. A lo mejor puedes usar un poco de iconos diferentes, uno o dos tal vez, solo un poco diferentes, no totalmente diferentes. Sólo un ejemplo, si estás usando Facebook y trataron de mover su botón Me gusta en la parte superior y moverlo a la parte superior del poste. ¿ Qué crees que pasará? La mayoría de los usuarios, se van a confundir ya que van a empezar a quejarse ¿por qué cambiaste estas cosas? De igual manera, se puede ver en sitios web, esto sucede y creo que sucedió con eBay hace años. Introdujeron un fondo gris de blanco y de repente ven que la mayoría de los usuarios empiezan a quejarse de ello y escribieron un algoritmo, para cambiar el fondo de blanco a amarillo, supongo que fue muy lentamente en años. Cada día el valor del color se desplazaba a otro tono de amarillo y que estaba muy cerca del blanco. Los usuarios no esperan que algo esté cambiando, acaban de introducir el cambio gradualmente. Siempre que quieras cambiar algo en tu sitio web, tu aplicación web, necesitas usar algún cambio progresivo, introducir el cambio gradualmente, no instantáneamente. Ahora la mayoría de nosotros, he visto muchos clientes, quieren rediseñar sus sitios web. Ahora, el problema es que ¿realmente necesitamos una nueva solución o realmente necesitamos un rediseño de nuestro sitio web? Antes de realizar cualquier cambio en tus sitios web, debes asegurarte de que los usuarios realmente necesiten un cambio de imagen o un rediseño del sitio web, o solo necesitas cambiar algunas cosas para crear una mejor experiencia de usuario. Hay un ejemplo muy grande de Yahoo y Digg, ambos son gigantes muy grandes en el campo. Cuando introdujeron un nuevo sitio web rediseñado, era el correo de Yahoo, y creo que fallaron y el tráfico de Digg cayó en más de 25 por ciento en Estados Unidos y Reino Unido. Te mostraré las imágenes de ejemplo en la siguiente lección, así que pasemos a la siguiente lección. 30. Nuestros objetivos y cambio la ciegos: Sea lo que sea que hagamos todo el día, nuestras todas las acciones están orientadas a objetivos. Realizamos, o hacemos cosas, o tareas basadas en nuestros objetivos. Asegúrate de que sabes cuáles son las metas y motivaciones de tus usuarios por eso en entrevistas de usuarios, registramos diferentes metas y motivaciones de otros usos. Por ejemplo, si estoy buscando en Google un medicamento analgésico, este es mi objetivo. Estoy buscando un medicamento. De igual manera, alguna otra persona a la que podría estar buscando un video. Existen diferentes metas relacionadas con una misma herramienta. El mismo producto se puede utilizar de múltiples maneras cuando los objetivos son diferentes. Si estás diseñando un producto o estás diseñando una pantalla, necesitas saber qué usuario va a hacer en la pantalla o en esta pantalla de aplicación. Ahora, el objetivo podría ser diferente, por ejemplo, si estás usando una pantalla de inicio de sesión, necesitas saber que el usuario va a usar un login. Pero cuáles son los [inaudibles] es que podría olvidar su contraseña o podría necesitar inscribirse en lugar de iniciar sesión. ¿ Hay alguna manera de que pueda cambiar a ese modo o puede cambiar a ese gol y usar la misma pantalla para otro gol. Ten en cuenta todas estas cosas. Otro concepto que es similar o relacionado con los objetivos es la ceguera del cambio. Cambiar la ceguera es que cuando estás ciego a cosas que no estás buscando. Por ejemplo, si tu objetivo es encontrar un enlace a un archivo PDF en un sitio web, entonces tus ojos estarán escaneando el enlace o cualquier botón que diga PDF. Tus ojos saltarán cualquier información o cualquier otra cosa que no esté relacionada con cuál es tu objetivo. Nuestros ojos y nuestras mentes están ciegos ante cambios que no nos interesan. Por ejemplo, si estoy buscando un artículo o un video en Google, y si busco por un video, por ejemplo, h o para crear una mejor experiencia de usuario o algo así, siempre que salgan los resultados de búsqueda, mi ojos estarán buscando sólo las miniaturas de video. Me saltaré cualquier otro encabezamiento o artículos, solo buscaré videos. Aquí estamos usando nuestro comportamiento humano llamado escaneo. Estamos saltando información, estamos buscando nuestro objetivo y la única información que realmente necesitamos. Ten en cuenta todas estas cosas mientras estás diseñando un producto o un sitio web o una aplicación. 31. Ejemplos de la decisión de comportamiento de humanos que paralysis: Déjame mostrarte algunos de los ejemplos para el comportamiento humano y cómo tomamos la decisión con dispositivos digitales, y cómo funciona la mente humana mientras estamos decidiendo, y qué cosas vas a recortar para tomar esta toma de decisiones y el comportamiento humano más fácil. Necesitas menos carga en la cognición humana y las mentes humanas para facilitarles este proceso de toma de decisiones. Voy a empezar con este proceso de pago de Amazon. Se puede ver por aquí, ahora mismo estoy revisando, y en cuanto seleccioné mi dirección donde necesito enviar, se puede ver en esta página sólo estoy viendo el logotipo de Amazon.com y nada más. Simplemente puedo ir y dar clic en este botón continuar, no hay otras decisiones, no hay otras opciones. Yo solo tengo tres opciones para el envío, nada más. Una tarea a la vez y una decisión a la vez. Si le das a tu usuario para que decida múltiples cosas al mismo tiempo, le va a dar algunos dolores de cabeza. Ahora si trato de dar click en Continuar, puedes ver que ni siquiera puedo volver a mi carrito o a la página web principal. No se puede hacer clic en el logotipo de Amazon. Lo que puedo hacer es que sólo puedo ir en una dirección. Si hago click en continuar, puedes ver por aquí me está pidiendo la dirección y todo y dándome el total para el pedido. puedes ver ahora debo agregar este lugar, etapa de pedidos, y solo hay una acción primaria que puedo hacer. Esto es hacer su pedido. Por otra cosa que puedo elegir es esta opción de entrega en la fecha de entrega. Soy muy limitado con estas opciones. Siempre que estés usando un sitio web de comercio electrónico o diseñando para ello, o app de comercio electrónico, o donde quieras que el usuario gaste algo, o tome la decisión, trata de evitar toda la distracción, trata de evitar toda la distracción,quita todas las distracciones de él. Esta es la regla principal. Ahora, hablemos de la pereza humana. Los humanos son perezosos y por eso creamos todos estos mandos a distancia. Se puede ver este es el último. Este mando a distancia se puede transformar en un montón de cosas que realiza muchas funciones, y se puede ver que también tiene el mismo diseño que los antiguos. Déjame mostrarte los viejos. Aquí se pueden ver los viejos. No son tan antiguos, pero también son versiones más recientes y también son similares en forma y botones como los antiguos. Déjame mostrarte los viejos. Estos son los viejos mandos a distancia de TV, y muestra que los humanos son perezosos, queremos todo ahora mismo y aquí estuvimos sentados. De igual manera, si quiero alguna información o quiero algún video, lo quiero ahora mismo. Si intentas crear un montón de barreras en mi camino para obtener esa información, si quiero algo de información, debes evitar tantos de círculos y trató de quitarlos de mi puerto. Si busco un archivo PDF para descargar, debería descargarse al instante. Simplemente debo dar click en el botón de descarga y obtengo el PDF. Si vas a crear muchas otras formas que intenten instalar este software antes, te voy a dar esta descarga, voy a dejar de fumar. Ten en cuenta todas estas cosas, somos perezosos, queremos la información y todo ahora mismo. Veamos algunos de los ejemplos de parálisis de decisiones. Se puede ver por aquí, y esta es la herramienta proto.io, herramienta prototipado para diseñadores. Se puede ver que hay cuatro opciones para elegir. Se trata de corporativos, de agencias, de startups, y freelancers. Ahora puedes ver que acaban de dar cuatro planes. Es así como vamos a limitar las decisiones del usuario a tres o cuatro opciones máximas. No les des demasiadas opciones, va a confundir más. Pocos sitios web más, puedes ver esto son los modelos de precios de giro UX. Se puede ver aquí tenemos 1 y 2 o 3 opciones y el precio se adjunta a sólo dos. O puedo elegir éste o éste. Si soy una empresa muy grande o corporación muy grande, podría necesitar llamarlos. Sólo dos opciones. Por lo que puedes ver estos UX spin, es una herramienta muy prominente y de imagen en el diseño de la interfaz de usuario y el diseño de la experiencia del usuario. Se pueden diseñar marcos de cable y muchas cosas. Un ejemplo más de avocode, se puede ver por aquí también tienen tres planes y solo dos opciones para seleccionar. Se puede ver que esto no se va a seleccionar la mayor parte del tiempo, y en su mayoría el usuario va a cambiar de éste o éste. O van a seleccionar éste o éste. Sólo dos opciones y es muy fácil tomar decisiones. puede ver que tienen apenas tres dólares de diferencia entre estos dos paquetes. La mayoría de la gente va por este porque tienen muchos miembros del equipo y muchas cosas. La mayoría de las empresas u agencias, van a caer en esta categoría. Así es como están, puedo decir, atrapando a los clientes o están jugando con nuestras mentes dándoles menos opciones para elegir. Ahora hemos hablado de por qué los humanos odian el cambio. Se puede ver por aquí, este es un gran sitio web viejo y este es un artículo desde punto lateral, te enviaré el link. Lo que hicieron es que lo transformaron en este sitio web muy distinto. Ahora los usuarios, no esperaban este layout, no estaban ansiosos por ver este cambio. Lo que pasó es que se puede ver por aquí, su tráfico cayó 26 por ciento en EU y 34 por ciento en Reino Unido. Esta es una pérdida muy grande. Se puede ver por aquí. Se agotó en 2012 por esta razón, medio millón, perdieron su popularidad y todo. Asegúrate de que tu usuario realmente necesita el cambio. El segundo ejemplo es el correo de Yahoo. Este es el correo viejo y este es el nuevo que cambió muchas cosas. Se puede ver por aquí, componer y los botones, los iconos, todo el fondo, todo. No parecía el viejo correo electrónico. Debido a este cambio de Yahoo, sólo el 25 por ciento del personal de Yahoo siguió usando el correo electrónico de Yahoo. Yahoo no reveló cuántos usos perdieron debido a este diseño j. El tercer ejemplo fue target.com. Cuando el rediseño, también perdieron gran parte de sus ingresos. Tan pronto como el encadenó o creó la nueva versión, muchos de sus usuarios comenzaron a quejarse. Esto es lo primero. Este es el mayor problema. Nuestras mentes y nosotros los humanos no aceptamos muy bien el cambio. Hazlo muy sutil. Trajeron mal esta izquierda categorías barra de menú por aquí debido a sus usuarios y quitan las sombras. Se puede ver por aquí sombras pesadas en la interfaz, este nuevo diseño, lo quitaron. Al final, te voy a dar solo una cosa que no intentes fluir con las tendencias. Trata de ser leal a tus clientes y ve si realmente necesitan un cambio o tu sitio web realmente necesita una actualización. ¿ Los usuarios están teniendo algún problema con mi sitio web? Necesito solucionar ese problema en lugar de diseñar todo el sitio web. Todo esto se trata de la conducta humana y de cómo no aceptamos cambios y decisiones en la parálisis y todas las cosas. Si me he perdido algún ejemplo, voy a crear otro video, y te veremos en otro video. Con más ejemplos, ahora pasemos a la siguiente lección. 32. Patrones de F y Z, Abandonment, de la de carro: Ahora, en esta lección les voy a dar algunos de los ejemplos de patrón Z o patrones de lectura, cómo leemos y tamizamos el contenido, patrones Z, patrones F, y también el carro de abandono, problemas de tasa de abandono y los campos de formulario. Empecemos. Ahora esta es una imagen del patrón Z. Ahora el patrón Z se basaba en cómo leíamos los libros de izquierda a derecha. Si tenemos un sitio web escrito en urdu o árabe o cualquier idioma que sea de derecha a izquierda. Esto es lo contrario por lo que será de derecha a izquierda así, pero seguirá siendo Z. Significa que vamos a empezar, nuestros ojos arrancarán desde el lado izquierdo y luego irán a la derecha, luego nuevamente cambiarán a la izquierda, y luego otra vez a la derecha. Este es el patrón que usamos al leer párrafos, anuncios, cualquier cosa. En su mayoría nuestra línea irá de arriba a abajo como esta en estas áreas o intentará ver esta área o esta área. La mayoría de las veces, los diseñadores intentan usar este patrón Z para su ventaja mientras diseñan sitios web o aplicaciones móviles. El segundo patrón fue el patrón F. ¿ Por qué se llamaba F? Porque la mayoría de las veces también está relacionado con nuestro patrón de lectura o escapes de pasillo o descremados a través del contenido. Normalmente vamos esta línea en esta dirección vertical así y así. Para el contenido top como este, vamos a ir así y esto, y luego vamos a saltarnos todo. Ahora bien, si ves que hay pocos anuncios de este lado y no hay contenido en esta área. La mayoría de las veces vamos a empezar a mirar de este lado y entonces tal vez vamos a mirar por aquí. Por lo que nuestro patrón de escaneo de ojos hace este patrón F. Permítanme mostrarles un ejemplo más. Se trata de las reservas de búsqueda de Google. Estos son diferentes otros sitios web que todos están haciendo el patrón F. El patrón F está básicamente relacionado con nuestros patrones de lectura y cómo nuestros ojos van a escanear una página. Asegúrate de usar este patrón de ojos a tu favor y pon cosas importantes en tu producto o en tu sitio web de comercio electrónico o lo que sea en estas áreas. Ahora hay una nueva investigación de este tipo conversión XL. Este es Peep Laja creo. Está investigando sobre la conversión, todo sobre la conversión y dice que surgen nuevos patrones que no son patrones F. Aquí está su nueva investigación de Google. Se puede ver qué aquí. Esto es Google en 2005 y este es 2014, creo que es su investigación. Ahora puedes ver este patrón F casi se ha ido. Pero aún así el patrón de lectura siempre está partiendo de esta zona izquierda. Se puede ver por aquí. Después algunos de los usuarios, miraron esta zona. Las áreas que son más activas o más vistas por los usuarios están en rojo, se puede ver por aquí. Entonces el siguiente color es amarillo, el verde son un poco menos. Los usuarios empiezan a mirar la parte superior de esta zona. Es por ello que la mayoría de las empresas ejecutan diferentes campañas SEO para estar en los 10 primeros resultados de los resultados de búsqueda de Google. Todo esto se trata de patrones, patrón Z y patrón F y un nuevo patrón que es éste. Ahora pasemos a la optimización de sus campos de formulario. Ahora, los campos de formulario son realmente necesarios para la conversión para ganar dinero en diferentes sitios web, como páginas de aprendizaje y también sitios web de comercio electrónico. Los formularios son parte esencial para obtener información del usuario. Se puede ver en esta investigación de Unbounce, dijeron que esta empresa de saltos de imagen, redujeron sus formularios de contacto de 11 a cuatro y ganan 120 por ciento aumento de conversión de 5.24 por ciento a 12 por ciento por lo que casi se duplicó, su tasa de conversión casi se duplicó al reducir los campos. Tenga en cuenta que esto está directamente relacionado con su psicología, psicología humana. ¿ Por qué? Cuando los humanos ven menos obstáculos en su forma de logro o su cool, lo van a perseguir. Si ven muchos obstáculos tendidos en su camino, van a renunciar. Se puede ver por aquí, esta es la tasa de conversión óptima que 3-5 campos es un estándar dorado. No intentes aumentar más de cinco campos, lo contrario vas a perder 10 por ciento de conversión de luto. Se trata de la conversión y de cómo los humanos se sienten reacios a la pereza y cuando su objetivo es difícil de lograr, van a renunciar. Un ejemplo más. Esta es otra investigación con todas las principales empresas y esta también es la estadística de tasa de abandono de 37 carros. Ahora, esto se hace en muchos sitios web más grandes, gigantes más grandes como Adobe list, Star Trek, IBM, grandes empresas como esa. Estas son las principales regiones que se encuentran en esta investigación. Utilizan 144 personas. Estas son sus respuestas, primero fue, los costos extra demasiado altos. Este es un tema relacionado con otra cosa, que voy a cubrir en otra lección que se trata de mostrar cada detalle para la toma de decisiones. Si le estás ocultando algunos detalles al usuario los cuales le van a ayudar a decidir, va demasiado rápido. El segundo motivo más por el que nos interesa en este momento es el sitio quería que yo creara una cuenta. Se puede ver a mucha gente, van a ser empujados por esta configuración de cuenta. Si el formulario de registro va a tener como 10 campos, van a dejar de fumar. Ahora, el tercero también está relacionado con nuestra pereza y naturaleza humana que somos perezosos y no nos gustan demasiados obstáculos en nuestra meta. Demasiado largo, complicado proceso de pago. Si tu proceso de pago en tus sitios web de comercio electrónico es muy largo, como si estuviera dando seis o siete pasos, vas a perder muchos clientes e ingresos. Estas son las cosas que están relacionadas con la naturaleza humana, la pereza, y cómo se sienten los humanos cuando hay demasiados trabas en su objetivo y quieren lograrlo. Trate de minimizar los obstáculos en el camino de la meta del usuario y sus objetivos y cuál es la tarea principal que van a utilizar. Por ejemplo, si van a utilizar proceso de pago o proceso de creación de cuentas o inicio de sesión, estas son las dos o tres cosas que van a utilizar en cualquier aplicación o en cualquier sitio web, sitio web comercio electrónico, intenta hacerlos simples y lo más fáciles posible. Espero que hayan disfrutado de esta lección, si tienen alguna pregunta, háganme. Pasemos a la siguiente lección. 33. ¿Cómo avala un producto?: hoy vamos a hablar de descubribilidad. Aquí está la cosa. Si entras en la habitación de alguien y no encuentras ninguno de los interruptores para encender la luz o el ventilador, ¿qué harías? Lo primero en usar cualquier tipo de producto, ya sea un producto digital o un producto físico, es descubribilidad. Si puedes descubrir cómo usarlo, son botones o sus características, no puedes usarlo en absoluto. Descubribilidad significa que con qué facilidad y rapidez los usuarios pueden encontrar las características y botones y elementos de cualquier producto, cualquier producto industrial o de cualquier aplicación móvil. Permítanme compartir con ustedes una historia muy pequeña. Uno de mis amigos, vino a mi casa y le mostré que acabo comprar este iMac de 27 pulgadas y para él, incluso para mí, ese fue el primer iMac que compramos. Ahora cuando compré este iMac como los primeros dos minutos, no pude encontrar su botón de encendido o el botón donde necesito apretar para encenderlo. A pesar de que este iMac es diseñado por Apple y tienen el mejor diseñador de experiencia de diseño y usuario final, pero aún así comerciaron del diseño con descubribilidad. Para que puedan poner el botón de encendido y apagado en la parte frontal de la pantalla para que se pueda descubrir fácilmente, pero lo ponen en la parte posterior del lado izquierdo. Entonces lo que hice es entonces se lo mostré a uno de mis amigos y salí de la habitación. Lo que hizo es lo mismo, lo que hice por primera vez. Traté de tocar este ícono de Apple en el frente. Pensé que este es el botón donde necesito solo tocarlo y se va a encender. Él hizo lo mismo. Por lo que se puede ver esto cómo la descubribilidad juega un papel vital en cualquier producto, ya sea un producto digital o físico. Ahora permítanme mostrarles algunos ejemplos más. Ahora, descubrir habilidad no siempre significa que necesites descubrir las características. También es otra cosa que lo que este producto puede hacer o lo que se puede hacer con él. También se puede comunicar con su usuario mediante el uso de texto. Entonces en los sitios web se puede ver por aquí, aquí está mi titular principal fuera de este maquetas del lado de la cabeza, el subtitular y el botón. Por lo que estos 3 textos acogedores, van a definir lo que puedes hacer aquí. Esto es una cosa. Ahora, déjame mostrarte otro. Esta es la misma herramienta de maqueta y podría haber pensado que muestra el espacio de trabajo similar a Photoshop, Sketch o cualquier otra herramienta. Incluso las herramientas de codificación como Visual Studio, Microsoft Visual Studio, tienen el mismo diseño. Lo que tienen es, aquí tenemos en el lado derecho más controles o alineación u opciones de texto para controlar o personalizar nuestros objetos. Aquí tenemos los objetos, y aquí tenemos diferentes controles que podemos arrastrar por aquí y colocarlos por aquí. Contamos con 1, 2, y 3 paneles y esta es nuestra área de trabajo. Por lo que estas características son muy visibles. Se puede ver por aquí, algunos de ellos están habilitados. Se puede ver así. Ahora en esta interfaz podrás descubrir fácilmente las características de esta app. Se puede ver que se pueden hacer todas estas cosas con la pestaña. Se puede ver ahora estos han sido habilitados para que pueda alinearlo en el medio o algo así. Entonces veamos algunos ejemplos más. Este es el espacio cuadrado. Ahora puedes ver este sitio web muestra un mensaje muy sencillo y muy sencillo. Haz tu propia página web. No hay juicio. No se requiere tarjeta de crédito. Empezar. Por lo que esta es una forma muy sencilla, muy poderosa de descubrir la capacidad y los usuarios pueden descubrir al instante que este lado va a hacer esta tarea. Veamos un ejemplo más. Esto es send-grid, y no sé qué es. Por lo que vine aquí por primera vez y se puede ver que tiene algo que ver con la personalización del correo electrónico, boletines de correo electrónico, y algunas otras cosas que se pueden ver por aquí, ver Planes y Precios. Pero después de leer este, te vas a sacar la idea completa. Asociarse con un servicio de correo electrónico en el que confía Dwell presenta a los comercializadores, escalabilidad y experiencia en entrega. Por lo que básicamente está más orientado hacia la entregabilidad y tal vez el comercio electrónico. No lo sé. Entonces veamos un ejemplo más aquí tenemos este sitio web de Shopify y le dice al instante la plataforma de comercio electrónico hecha para ti. Se trata de una plataforma de comercio electrónico. Entonces estas son las cosas que realmente pueden ayudar a averiguar que qué características están presentes en este sitio web, este producto, esta aplicación web , la aplicación móvil, y deben ser prominentes, deben ser fácilmente descubribles si ocultar todos estos botones en una barra de menús por aquí, menú hamberger, entonces esto no es lo que estoy buscando. Se puede ver por aquí tenemos centro de ayuda y empezar. Podría dar click en esto. Entonces estas son todas las cosas que están relacionadas con la descubribilidad. Aprendamos un poco más sobre la descubribilidad. La descubribilidad también nos dice qué acciones son posibles y cuál es el estado actual del dispositivo, si está encendido, si está apagado, ¿puedo encenderlo? Por lo que todas estas preguntas son respondidas por descubribilidad. Por lo tanto, no intentes ocultar características que realmente quieres que tus usuarios vean en tu producto. Por ejemplo, el menú hamberger somos el peor ejemplo de diseño de experiencia de usuario y estos hambergers, menús, van a enterrar muchas características de tu sitio web o de tu aplicación lejos de tus usuarios. Así que asegúrate de que todas las características principales de tu aplicación o de tu producto, se descubran fácilmente. Ahora has aprendido mucho sobre la descubribilidad. Pasemos a la siguiente lección. 34. ¿Qué es el aprendizaje aprender?: Hablemos de otra característica de cualquier producto o de cualquier aplicación que sea realmente útil para el diseño de la experiencia del usuario. Ahora lo que es esto es si no puedes aprender a usar ninguna app, vas a desinstalarla. aprendizajabilidad juega un papel muy importante. Ahora lo que es aprendibilidad es. Es lo fácil que es para un usuario aprender y usar sus productos y sus características. Es la parte de usabilidad de tu producto, lo útil que es. Ahora bien, si tu aplicación es nueva, necesitas que tu usuario la aprenda rápidamente. Necesitas mostrarle, entrenarlo. Es necesario orientarlo hacia las diferentes características, e introducirlas tiempo, tiempo a tiempo, que puedas hacer esto con este producto. También hay diferentes fases en aprendizajabilidad. Hay un aprendiz que está justo en el principiante y hay usuarios avanzados y hay usuarios intermedios. Es necesario que te encargues de esto. Ahora cómo se puede mejorar la aprendizajabilidad. Son pocas las cosas que puedes poner en tu producto o tu aplicación o en tu software para mejorar la capacidad de aprendizaje. número uno es controles descubribles, como te mostré en la lección anterior, y descubribilidad que botones más grandes, controles más grandes, botón habilitado o botones resaltados, pueden mostrarme que puedo realizar esto tarea. Después notificaciones, diferentes notificaciones, diferentes videos de ayuda notificándome que, oye, mira este video si no puedes enviar el email o algo así. Hay una característica más que puedes agregar a tu app es el usuario en el embarque. Es posible que hayas visto muchas aplicaciones o software diferentes que te muestra diapositiva por diapositiva uno por uno, y te mostró diferentes características, resaltar las características de un producto o una aplicación móvil, y tal vez algunos videos sí mostraron te pequeños videos como diez 10-15 segundos sobre cómo administrar tus correos electrónicos, o cómo eliminar tu email, o si introducen una nueva característica, te van a enviar un email con un video que esta característica ha sido agregada y puedes usarlo así. El número cuatro son inicios de sesión sociales. ¿ Por qué los inicios de sesión sociales? Ellos, debido a que son patrón familiar, tus usuarios ya saben iniciar sesión en una app usando tu Facebook o Google. Se va a ayudar a aprenderlos rápido, pueden iniciar sesión fácilmente o iniciar una aplicación. Pueden empezar a usarlo fácilmente sin ningún obstáculo. Permítanme mostrarles algunos de los ejemplos de aprendibilidad. Ahora muchas grandes empresas como esta app de boceto, esta es una nueva app para tus diseñadores. Se puede ver que hay una sección de aprender por aquí. Si haces clic en aprender, puedes aprender diferentes características de forma gratuita de esta app. Es realmente necesario que vayas a contar con algo así en tu app. Se puede ver por aquí, aquí hay diferentes áreas o diferentes contenidos que puedes aprender al respecto. Entonces incluso Adobe, esa es una empresa muy grande, tienen sus propios tutoriales en línea, en su propia página web que son libres editar imágenes y de hacer diferentes cosas puedes ver por aquí si quieres. También lo han ordenado por experimentado y principiante. esto estaba hablando, de que necesitas cuidar a tus dos usuarios, si tienen experiencia o si son principiantes. Proporcionar experiencia de préstamo para ambos, que puedan aprender fácilmente su aplicación y comenzar a usarla. Esto también es una parte muy importante del diseño de la experiencia del usuario. Ahora, hay una cosa más que puedes hacer, así es como funciona los videos. Podrían haberlos visto en muchos sitios web y aplicaciones diferentes, y creo que esta es una de las mejores características para Learnability. Realmente puede aumentar la velocidad de aprendizaje de tus usuarios. Eso es todo acerca de la capacidad de aprendizaje, si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 35. ¿Cómo avala en UX?: La retroalimentación es lo único que puede elevar la confusión de tu usuario. Entonces, si alguien está usando tu producto y él no sabe lo que está pasando y lo que acaba de hacer, entonces se va a confundir. La retroalimentación es básicamente el resultado de la interacción del usuario, si alguien presiona un botón o si alguien intentó enchufar tu producto, intentó encenderlo o intentó usar su función, debería decir qué está pasando y cómo debería ser fijo o cómo debe ser operado. Todo depende de la retroalimentación. Basta con tomar un ejemplo de que alguien presionó un botón de inicio de sesión y no pasó nada durante cinco segundos. ¿ Qué haría el usuario? Va a presionar ese botón de inicio de sesión, 10 veces en frustración de que no pasa nada, algo anda mal. Aquí tenemos una necesidad de retroalimentación, retroalimentación adecuada, retroalimentación oportuna, de manera oportuna y dentro del contexto. Voy a mostrar muchos ejemplos en la siguiente lección. Entonces no te preocupes por ello, habrá bastantes ejemplos en la siguiente lección. Ahora bien, ¿qué debe decir una retroalimentación? La retroalimentación va a decirle al usuario que lo que acaba de pasar. Si presionaste un botón, ¿qué acaba de pasar? ¿ Qué hace el sistema? ¿ Está ocupado el sistema? ¿ Se está cargando el sitio web? ¿ Se está cargando la aplicación? ¿ Fue un éxito? Después se carga la app y fue un éxito. ¿ Hubo algún error? Estos son todos los retroalimentación, también el estado actual del dispositivo. Entonces, si abro un dispositivo o lo enciendo y muestra que configuro la hora, entonces este es el estado actual que necesito establecer la hora primero para seguir usando este dispositivo. En caso de error, si hay un error, cómo el usuario puede corregir o salir de ese error, esto también forma parte de la retroalimentación. Experimentas retroalimentación en todas las formas diferentes mientras interactúas con todos los dispositivos electrónicos, como tu smartphone, que te informa de su estado de batería baja por pitido, dando alguna indicación de batería baja en su pantalla y también con alguna voz o sonido. Ahora existen diferentes formas de retroalimentación como puedes informar al usuario por movimiento, moviendo alguna caja emergente y puedes usar colores nítidos, como el color rojo para errores y para notificación. Colores amarillos o colores verdes que ha sido todo un éxito. Además, tu cerebro reacciona a cualquier sonido. Si le diste un sonido de error de sonido o sonido de pitido, esa batería está baja o algún timbre que enviaste el mensaje, va a dar al usuario comentarios de que algo está sucediendo. actualidad, podrías estar usando WhatsApp o Viber y sabes cuando aparece algún mensaje en WhatsApp, sabes que incluso el teléfono está en tu mesa y no lo estás viendo, sabes que alguien te envió un mensaje en WhatsApp o Viber. Todos estos formularios de retroalimentación se pueden combinar juntos. Puedes combinar movimiento con sonido, o puedes combinar movimiento con el efecto intermitente o puedes combinar diferentes tipos de sonidos y colores. Eso se trata de retroalimentación. Si tienes alguna pregunta hazme. Pasemos a los ejemplos de retroalimentación. 36. Ejemplos de comentarios: Ahora permítanme mostrarles algunos de los productos físicos así como los productos digitales y los ejemplos de retroalimentación. Esto es parte muy importante de cualquier diseño de producto ya sea que estés diseñando aplicaciones móviles, aplicación web, sitio web, o incluso producto físico. Entonces el primer ejemplo que voy a mostrar es que quizá hayas visto todos estos botones o paneles de interruptores en tus paredes. De verdad me encantan los que me muestran que está encendida o que en ella se está ejecutando electricidad. Cuando está encendido, muestra la auditoría de luz que la luz está encendida que la electricidad está funcionando y está encendida. Por lo que este es realmente bonito formulario de retroalimentación. Permítanme mostrarles algunos ejemplos más. Entonces esto es una última, creo que es WiFi Smart panel y también se puede ver esta es otra forma de retroalimentación. Está mostrando dos posibles acciones o estado. momento el estado de este dispositivo que puedes o bien bloquear tus puertas o puedes abrir tu puerta. Pocos ejemplos más, este es otro enchufe de pared y se puede ver también tiene un botón de encendido y apagado y se va a encender una vez que esté encendido. Pocos ejemplos más que puedes ver este es el sitio web de Nest. Tienen cámaras, termostatos y muchas nuevas tecnologías de vanguardia. puede ver esta cámara, Sepuede ver esta cámara,tiene un indicador de luz verde que está funcionando en este momento en la cámara está encendida. De igual manera, en todas estas formas se puede ver que está mostrando el estado de ese termostato. Luz verde otra vez en todas las cámaras incluso puedes ver la luz verde encendida en tu mac-book Pro cuando la cámara está funcionando. Estas son todas las formas de retroalimentación. Se puede ver por aquí, Nest, está demostrando que ahora mismo está ejecutando más lo económico o ahorro de energía. Ahora mismo la temperatura está ajustada a 72 Fahrenheit. Está mostrando reloj en este momento, la fecha y la hora, y está mostrando el clima afuera. Entonces estos dos son realmente útiles. Se puede ver por aquí estos dos están mostrando el estado de este dispositivo. Ahora, veamos algunos de los ejemplos de productos digitales como sitios web y aplicaciones móviles y sus comentarios. Se puede ver He buscado en la página web de Adorama, es una tienda de cámaras y una vez que busco Panasonic gh4, puede ver que se devuelve con 84 productos. Por lo que estas son formas de retroalimentación. Me está mostrando que estos muchos productos se encuentran para su sistema. También se puede ver el estado actual como se puede ver por aquí, las bolsas en cajas, dos cámaras 22. Estas son también formas de retroalimentación diciéndome que ¿cuántos artículos de este tipo hay disponibles? Ahora, una app móvil te voy a mostrar esto es una pantalla de aplicación móvil y de Mobile Patterns.com, y puedes ver que en esta primera pantalla de la izquierda, el usuario ha seleccionado cualquier vibra, por lo que hay un tick y el todo el color de esta zona se cambia. Entonces este es básicamente el feedback de selección que has seleccionado este ítem de todos estos ítems, entonces esto básicamente está cargando. Se puede ver por aquí la pantalla de carga, y esto es una vez que se haya cargado. Entonces hay una opción más puedes ver si tengo una opción para ti. Entonces esta es otra forma de retroalimentación. Es tan básicamente una notificación. Ahora, estos son mis favoritos. Realmente me encantaron estos botones porque me van a dar retroalimentación una vez que los presione. Entonces esto se está cargando ahora mismo o me gustan mucho. La mayoría de los formularios en línea en nuestras aplicaciones web tienen tipo de patrones que van a entrar en este formulario para que no se puedan hacer clic, por lo que todo el estado y todo cambia y comentarios realmente agradables. Un ejemplo más, este es un bolígrafo de Ken y puedes hay una animación de carga por aquí, botón de carga de archivos. De verdad me gusta. Esta es muy bonita animación y le dice al usuario cuánto se ha cargado el archivo. Pocos ejemplo más, este es un tuit de Luke Wroblewski y es un tipo muy grande de Estados Unidos, en su mayoría trabaja con formularios. Se puede ver que este es otro formulario de retroalimentación. Si alguien ha hecho clic, es necesario mostrarles que esto ha sido seleccionado con un color muy nítido. También en Twitter, podría haber notado que este es otro formulario de retroalimentación. Entonces si voy a hacer clic en esto, se produce una pequeña animación. Esto es básicamente una retroalimentación. Entonces si voy a dar click a uno más por aquí, así lo verás. Esta micro animación es realmente una gran forma de retroalimentación. Estos se llaman micro animaciones. Ahora este es otro ejemplo que es de Dropbox. Se puede ver que estos son los pop-ups de notificación. Pueden informar fácilmente a tu usuario los comentarios. Es así como Dropbox le dice al usuario que tienen un nuevo look, han cambiado su interfaz. Se puede ver esta es la primera pantalla luego hay una baliza pulsante para llamar la atención de que esto está pasando por aquí o esto se ha cambiado y también están mostrando cada característica con este pop up en la parte inferior y una vez todo se hace completado, puedes ver este es otro feedback, ya estás listo para ir. Por lo que en cada paso, la retroalimentación es necesaria. Ya sea que esté utilizando un producto físico o un producto digital, debe informar a su usuario en cada paso. Ahora, este es el futuro. Veamos algunos de los últimos dispositivos que son controlados por voz o alimentados por voz o utilizan básicamente formas de retroalimentación combinadas de voz y color. Este es Google home. Vendedor Google home está cargando. Se va a mostrar esta animación. Esto es cargar animación y luego tenemos esto encendido las luces. Entonces si está encendida, se va a iluminar. Hay una retroalimentación más de este dispositivo. No estoy seguro de cuál es el nombre de este dispositivo. Mi-Croft, creo. Cuando alguien está hablando, dando el comando, muestra una línea wiggly por aquí porque así el usuario sabe que está recibiendo su retroalimentación o reconociendo su voz o su voz. También se puede ver este es otro dispositivo. Da a la luz retroalimentación con luces emisoras que te está diciendo algo. Este es otro. Muestra una luz de anillo en el interior para mostrar el mando y todo. Entonces esta es otra forma de retroalimentación. Esta es otra forma de retroalimentación. Estás reduciendo el volumen y te está mostrando al instante y dándote retroalimentación que has logrado este volumen o has reducido el volumen al 50 por ciento. Se puede ver por aquí, este es otro formulario de retroalimentación. Esto se apaga el volumen, por lo que básicamente está apagando el audio. Por lo que esta es otra luz y está mostrando luz roja para mostrar al usuario que has desactivado alguna característica. Por lo que estas son todas las diferentes formas de retroalimentación. Los vas a encontrar por todas partes a tu alrededor. Asegúrate de que tu retroalimentación sea significativa y sea comprensible y comprensible por el usuario de lo contrario no hay beneficio de mostrar al usuario códigos L de otros que él o ella no puede comprender. Por lo que todos estos son ejemplos de retroalimentación. Pasemos a la siguiente lección. 37. Comentarios de contacto - ejemplo de Walmart: Ahora voy a hablar de retroalimentación dentro de contexto. Ahora bien, si voy a este Walmart y si he pedido algo en Walmart, me va a mostrar el proceso que usted hace el pedido, entonces está procesando, y ahora mismo se envía el estado. Es una muy buena forma de retroalimentación. Además, me está mostrando cuándo va a llegar, también el número de caja. Ahora, una vez que haga clic en este ítem de pista, aquí es donde comienza el problema. Te voy a dar cómo vas a usar realmente la retroalimentación en términos muy bonitos. Ahora una vez que hagas clic en los ítems de pista, vas a ver esta pantalla. Mi memoria, memoria de trabajo es muy limitada. El problema aquí en esta pantalla es que no sé cuál era el paquete, y si he abierto como tres o cuatro pantallas múltiples de diferentes artículos de seguimiento, no sé cuál era el artículo. Me está mostrando la entrega estimada, pero ¿dónde está el nombre del artículo o el nombre de la caja o los artículos que pedí? Esto es realmente confuso para mí. Están violando el problema que está dentro de contextos. Siempre que utilices tus comentarios, debe ser dentro del contexto. Dentro de los contextos significan que debe mostrar el estatus de la cosa y también con qué se relaciona el estatus. Este estado está relacionado con una caja que pedí, y debe ser en algún lugar de esta pantalla donde esta caja va a llegar el 24 de mayo. Esto es muy importante cuando estás usando feedback. Pocas cosas más que han violado por aquí es memoria de trabajo. Han aumentado la carga en la memoria de trabajo. No puedo recordar si he abierto tres o cuatro de estas páginas. No puedo recordar de qué elemento está hablando esta página. Esto es realmente importante en cualquier diseño de experiencia de usuario que debes permanecer en el contexto y no intentes violar las reglas, o pongas algo de carga cognitiva en la mente de tu usuario. Esta es otra cinta que me vino a la mente después de usar este Walmart, pensé que debería compartir con ustedes. Pasemos a la siguiente lección. Si tiene alguna pregunta no me pregunte, nos vemos pronto. 38. 4 Consistencia con ejemplos 8: Ahora hablemos de consistancia. También es uno de los principales conceptos detrás de cualquier diseño de experiencia de usuario. A medida que la tecnología avanza en estos días, consistencia no se limita a simplemente llenar su producto o los colores utilizados en su producto. Se ha ampliado a dispositivos de red inteligentes muy complejos en su hogar por ejemplo, las cocinas inteligentes. Ahora las Apps y sistemas, están conectados y todo se puede rastrear o ubicar desde una sola interfaz. Además, una aplicación no se limita a un dispositivo. Puedes usar WhatsApp en tu PC. Puedes usar WhatsApp en tu Tablet. Puedes usar WhatsApp en tu teléfono móvil, iPhone, IOS, Android. está utilizando una App, o un producto en diferentes plataformas. Ahora esa consistencia es muy importante ya el usuario va a pasar de una plataforma a otra. No debe sentir la diferencia. Las aplicaciones deben ser consistentes de un dispositivo a otro, una plataforma a otra plataforma, un sistema a otro sistema. Qué puedes hacer para aumentar el nivel de consistencia de tus apps o dispositivos digitales. número 1 es que todo debe funcionar y funcionar igual y la colocación de esos ítems funcionales debe ser la misma. Si has posicionado un botón que va a enviar mensaje en cada dispositivo, debería ser enviar mensaje en lugar de hacer otra cosa. Si tenemos un tema oscuro y un tema claro, entonces ese interruptor debería hacer la misma función en cada dispositivo o en cualquier plataforma que esté instalada la aplicación. Ahora lo segundo, en consistencia es la consistencia de los elementos de la interfaz de usuario. Los elementos de interfaz de usuario son botones, elementos de lista descendente, todos estos elementos interactivos de interfaz de usuario El tercero es la consistencia de la tipografía, los colores, y los temas. Si tu aplicación está usando el tema verde en un dispositivo, debería usar el mismo tema y tipografía y teléfonos y colores en otro dispositivo. Usuario, no te confundas que se ha abierto y en cualquier otra app o cualquier otro producto. contexto de uso de la app podría cambiarse, pero la consistencia no debe cambiar demasiado. Puedes cambiar, por ejemplo, si tu app es un poco diferente en iOS o iPhone, y es un poco diferente en Android, no pueden ser 100 por ciento similares en diseño porque son diferentes sistemas operativos o diferentes sistemas móviles. Se puede variar un poco, pero no se puede desviar mucho de ella. Ahora, cómo puedes mantenerte consistente y mantener la consistencia del diseño de tus productos. Hay sistemas de diseño y guías de estilo. He discutido el diseño atómico en mi curso de flujo de trabajo de diseño web moderno y es un Full Stack Design System by Intercom y estos sistemas de diseño básicamente van a mantener nuestros diseños y funcionalidad consistentes en diferentes medios, en diferentes dispositivos, en diferentes plataformas. Te voy a mostrar algunos ejemplos de guías de estilo y sistemas de diseño para que sepas de lo que estoy hablando. Veamos algunos ejemplos. Este es sistema de diseño de carbono y es realmente genial. Puedes ver todos los lineamientos por aquí. Estos son los estilos, estos son los colores, rejillas, iconografía, capas. Puedes ver todo aquí, así es como se ve nuestra guía de estilo o sistema de diseño. Entonces tenemos esto, otro elemento de diseño y componente de interfaz de usuario, componentes JS, VS, JSS , utilidades, todos los colores, textos , interfaces, todo se describe aquí. Si voy a esta interfaz, puedes ver por aquí tienen todos los iconos, los colores, todo listado por aquí. Ahora, Atlassian también es una gran manera de ver cómo han alineado a todos sus veteranos de diseño y todo lo que tienen. También cuentan con su guía de estilo. Si vamos a esta personalidad atlassiana, puedes ver estas son las guías de estilo de marca, ilustración, tipográfica, logos, colores, estilo de escritura. Incluso tienen un tono o personalidad similar escribir su sitio web o aplicación móvil o lo que sea el contenido. El contenido también debe ser consistente en todas sus plataformas. También puedes ver diferentes otras guías de estilo, como puedes ver por aquí, guía de estilo Yelp. Te compartiré los enlaces de estas guías de estilo. Ahora, les voy a mostrar el ejemplo de WhatsApp. Me parece un poco raro cuando veo una aplicación muy grande usando cosas así. Si has usado WhatsApp en Android, sabes que todo el tema está construido con color verde oscuro como este. Se puede ver por aquí, zona verde superior. Esto también es verde cuando llamas a alguien. Pero una vez que te mueves a dispositivo iOS, puedes ver esto es el mismo WhatsApp, y desde hace algún tiempo cuando lo abro por primera vez en iOS, mi iPhone 5S, me confundió que si estoy usando WhatsApp o algún otro chat app de Apple. Lo que hicieron es que han quitado todo el tema. Se puede ver por aquí no hay barra verde en la parte superior. Nada parecido al tema real ni a su consistencia de estilo. Rompieron su consistencia de estilo. A lo mejor tienen sus propias razones. A lo mejor tienen algunas secciones de iOS o secciones de plataforma, o tal vez quieran hacerlo rápido. Pero aún así creo que debieron haber mantenido el fondo verde atrás para hacer el tema similar a la app para Android. Esta es una diferencia muy importante entre las aplicaciones de WhatsApp iOS y WhatsApp para Android. Realmente rompieron la consistencia de su diseño. Estos son todos los ejemplos de consistencia. Pasemos a la siguiente lección. 39. 4 limitaciones con ejemplos: Hablemos de las restricciones y cómo hacen que nuestro producto o nuestra aplicación web o móvil sea más utilizable y más útil. Podría haber visto que Twitter tiene un límite de 140 caracteres por tweet. No puedes superar los 140 caracteres. Este límite nos ayuda a hacer que nuestros productos sean más útiles y más utilizables. Te mostraré muchos ejemplos de restricciones que se pusieron deliberadamente en los productos para hacerlos más utilizables y útiles. A continuación se presentan algunos ejemplos de restricciones. Te voy a mostrar las imágenes de estos ejemplos en un rato. Podría haber visto muchos sistemas de seguridad, cerraduras de seguridad en armas de fuego, equipo peligroso y bloqueo del ADF, o operación peligrosa. Por qué existen estas restricciones porque pocas cosas no deben ser utilizadas por algún otro usuario o el novato o los niños. Estas restricciones van a hacer que esos productos sean más útiles. No están destinados a ser utilizados para esa persona específica o esa edad específica o ese grupo de edad específico. Es por eso que ponen algunas restricciones. Un ejemplo de restricción muy común es un cuadro emergente guardar y no guardar. Es posible que hayas visto aparecer muchos diálogos cuando estás usando Photoshop o cualquiera del software, cuando intentas cerrar ese software y el documento sin guardar, va a avisar, te va a te constreñe, te va a dar límite que no voy a cerrar esta app hasta que guardes, o quieres realmente guardar o salir de la app. Estas son básicamente restricciones. Pocos ejemplos más de restricción, si nos fijamos en cualquier lavadora nueva o moderna tienen incorporado Child Lock. Creo que estos Cerraduras Infantiles están incluso presentes en muchos otros dispositivos como hornos microondas. Si alguien intenta abrirlo o si algún niño intenta meterse con tu lavadora, va a dejar de funcionar o se va a apagar o no va a dejar que el niño abra la tapa. Estas son todas las restricciones que están haciendo que estas lavadoras sean realmente útiles. De lo contrario, si algunos accidentes como estos empiezan a ocurrir, será mucho lío. También si utilizas horno microondas y mientras el horno microondas está girando, si intentas abrir su tapa, se va a detener al instante. Esto es para mantenerte a salvo y además es un muy buen ejemplo de restricción. Permítanme ilustrar más con algunos ejemplos. Aquí tienes un ejemplo de Twitter. Si empiezo a escribir, se puede ver que me va a constreñir a 140 caracteres y me va a mostrar que estos tanto se quedan. Este es un ejemplo. Ahora un ejemplo de restricción es este modelo de precios. Se puede ver que cada modelo de precios tiene un fijo proyectos activos. Si estás usando uno libre, solo puedes tener un proyecto, por lo que es una restricción. Es ayudar a estos productos, estas aplicaciones web a las que los usuarios están más dispuestos o van a ir al siguiente paso y les van a pagar. Van a aplicar una restricción para mantenerla bajo su control. Esta es otra herramienta maqueta gratuita que uso, y se puede ver a la izquierda aquí, dice plan libre y puedo colocar solo 300 objetos en este plan gratuito. Este es otro ejemplo de restricción. Un ejemplo más es que puedes ver esta es mi caja delimitadora. Esta es la caja de documentos. Demuestra que necesito dibujar o crear algo dentro de este contenedor. Este es otro ejemplo de restricción. Entonces tenemos este muy buen ejemplo de restricción. Se puede ver que hay un espacio redondo, espacio circular para CDs. Una vez que trato de poner mi DVD por aquí, sé que este es el lugar en el que necesito ponerlo. También si has usado CDs muy pequeños, se van a poner en el círculo interior. Otro ejemplo son los bloques lego. Podría haberlos usado mucho. Son perfecto ejemplo de restricciones. Si no aplican estas restricciones que los bloques lego van a caber en los otros bloques lego con restricciones. Estas restricciones hacen que estos bloques lego sean utilizables. Ahora aquí hay una lavadora de Samsung, y esta es su característica. Se puede ver por aquí. Dice lavado seguro. Ahora lo que es el lavado seguro es que, puerta AddWash sólo se puede abrir cuando la temperatura del tambor está por debajo de 50 grados centígrados, y el Child Lock está desactivado. Por defecto, creo que el Bloqueo Infantil siempre está activado. Si algún niño, incluso con un error e incluso el Child Lock no está activado, todavía no va a abrir la tapa hasta que la temperatura esté por debajo de los 50 grados para que el niño no se quemara. Este es otro ejemplo, y aquí hay otro ejemplo de su hijo. Los niños están en buenas manos. Tienen Bloqueo Infantil, y se puede ver por aquí que no se abrirá cuando se active el Bloqueo Infantil. Si vas a utilizar la función de bloqueo infantil, no va a abrir la tapa. puede ver que están anunciando mucho su seguridad y todas estas cosas están relacionadas con las restricciones. Han puesto muchas restricciones para que este dispositivo sea utilizable en todas las condiciones. Aquí está el menú. Creo que están mostrando que si presionas estos dos botones, puedes ver aquí hay un ícono de Child Lock por aquí. Si sigues presionando estos dos botones durante tres segundos, y creo que activará ese Bloqueo Infantil. Una vez que actives Child Lock, cada vez que intentes reiniciar tu dispositivo, cada vez que intentes reiniciar tu dispositivo, volverá a estar en el modo Child Lock. Esto es realmente útil y muy gran ejemplo de restricciones. Todo esto se trata de restricciones. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 40. Slips y errores con ejemplos: Incluso si tu producto es 100 por ciento utilizable y no tiene ningún problema de usabilidad. Aún así, los usuarios van a cometer errores. Tengan eso en mente. Hay dos tipos de errores, resbalones y un error. Ahora, resbalón es cuando estás haciendo la elección correcta, empezaste lo correcto, pero diste los pasos equivocados o te saltas uno de ellos. Por ejemplo, olvidé apagar el quemador de gas de mi estufa. O fui al refrigerador y saqué la leche de mi refrigerador y vertí en el café, y luego, volví a poner la taza de café en lugar de la leche. Este es un ejemplo de un resbalón. No hay errores. Por otro lado, se basan en la decisión equivocada desde el principio que diste el paso equivocado. Los errores ocurren cuando el usuario ha seleccionado metas y planes incorrectos. Están empezando paso está mal. Desde el inicio han dado el giro equivocado. Entonces, por ejemplo, si te han calculado o vuelto a calcular el peso del combustible del combustible, en libras más que en kilogramos. Ahí hay otro ejemplo. Por ejemplo, si has puesto tu producto en eBay y estás haciendo negocios en libras y tu usuario está comprando en $. A lo mejor está viendo el precio del producto equivocado en $. Entonces, por ejemplo, podría haberla fijado en cinco libras y la tarifa tal vez indicando cinco $. Esto te va a dar muchos problemas. Esto es básicamente un error. Permítanme mostrarles algunos de los ejemplos para ilustrar más sobre resbalones y errores. Ahora bien, este es un cuadro de diálogo que normalmente ocurre cuando intentas eliminar algo o desinstalar algo. Ahora, ¿por qué los sistemas operativos se pregunta si realmente necesitas desinstalarlo, porque podría ser un error, porque alguien podría haber hecho clic en él sin ningún consentimiento. A lo mejor no quiere reinstalarlo o a lo mejor no quiere desinstalarlo. Preguntando a tu usuario antes de cometer, eliminar o eliminar su copia de seguridad o relacionar su sitio web, debes pedirles que hagan una copia de seguridad o debes limitarlos con estos cuadros de diálogo que, realmente quieres hacer esta acción? He visto algunos de los sitios web aquí. Ahora un ejemplo más de resbalón es, podrías haber instalado si eres un usuario de Windows o un usuario de PC, podrías haber instalado mucho software o aplicaciones. Creo que hace tres o cuatro años, si alguien me pregunta, un novato, que acaba de empezar a usar PC, normalmente le digo que si quieres instalar algún software, solo sigue presionando si o siguiente. A esto se le llama resbalón. Entonces, por ejemplo, está presionando sí, y la siguiente pantalla que ve es ésta la siguiente. No está mirando estas opciones por aquí, así que no mirará en estas opciones y seguirá presionando esto a continuación. Ahora estas pantallas están en sucesión continua y estas son susceptibles a resbalones. Mucha gente que, diariamente usan software a diario, o tienen 4-5 pasos de copiar y eliminar o fusionar archivos. Van a hacer muchos resbalones porque están acostumbrados a los mismos patrones. Si falta algo o algo simplemente faltó un paso, no lo van a notar. Esto sucede cuando tienes una rutina similar o una configuración de trabajo similar. Al final, voy a resumir esta lección con sólo decir unas cosas, que si estás diseñando tu aplicación web o aplicación móvil o cualquier tipo de software o aplicación o producto. Es necesario tener en cuenta que no le proporcionan al usuario algo como podría haber visto móviles. Hay un botón de reinicio de fábrica. Si proporcionas solo un reinicio de fábrica de tap, muchos niños van a presionar eso y se va a restablecer cada vez que entre, se perderán todos los datos. Ten en cuenta que antes de usar o decidir una decisión tan grande para el usuario, pregúntale una o dos veces eso, que realmente necesitan hacer esto o ¿quieren omitir esto? Todo esto se trata de resbalones y errores. Pasemos a la siguiente lección. 41. Cómo diseñar errores con ejemplos: Siempre que alguien esté usando tu dispositivo o tu aplicación móvil o tu producto, es muy fácil si alguien lo está usando o demostrando con la acción pretendida o los límites dentro de los límites. Es muy difícil diseñar cuando empiezan a ocurrir algunos errores o excepciones. El verdadero problema comienza cuando algo sale mal. Solo ten en cuenta que la interacción de tu usuario y tu producto es como una conversación entre dos personas. Una persona está haciendo acciones y la segunda lo está guiando o respondiendo con retroalimentación, o diciéndole qué hacer. Cuando algo sale mal, la otra persona debe guiar a la primera persona que esto está mal y debes arreglarlo así. Esto debe ser muy sencillo y fácil de entender para su usuario. Es igual que tu enseñando a tu abuela, abuela muy vieja sobre computadoras, o Facebook, o Twitter, o WhatsApp. ¿ Cómo puedes diseñar los errores para que tus productos sean más utilizables y más fáciles de usar? Lo primero es que impidan que ocurran los errores. Este es el primer paso. Puedes usar restricciones, puedes usar cuadros de diálogo, puedes usar campos de entrada con límites, puedes usar contraseñas, todo, para limitar estos errores. Entonces lo segundo es que necesitas conseguir esa causa cómo ocurrió este error, y cómo podemos minimizarlo. ¿ Por qué los usuarios están cometiendo los mismos errores una y otra vez? ¿ Existe algún problema de usabilidad? ¿ Hay algo que esté confundiendo a nuestros usuarios? Necesitas minimizar eso. Entonces necesitas hacer una comprobación de sentido común. La comprobación de sentido común es que, por ejemplo, si estás usando un horno de microondas y la tapa está abierta, y dejaste la tapa abierta, no la cerraste herméticamente. Si intentas presionar el botón “Inicio”, te va a dar error. Esta es una comprobación de sentido común muy básica que si la tapa está abierta, no se debe encender el microondas, también es una restricción. El tercero es que necesitas darle a tu usuario revertir fácilmente esos cambios. Si algo malo sucede o si por un error borró sus correos electrónicos, puede revertirlos fácilmente, puede deshacer fácilmente, puede volver a cambiarlos fácilmente. También es necesario asegurarse de que los errores deben ser fácilmente detectables y arreglados. Cómo va a ver el usuario que ocurrió algún error porque es necesario darles algunos comentarios. Necesitas darles una retroalimentación oportuna y debes darles la forma de corregir ese error. Estas son todas las cosas que debes tener en cuenta mientras estás diseñando para aplicaciones móviles, cualquier producto físico, o cualquier producto digital. Permítanme mostrarles algunos buenos ejemplos de diseño para errores. Ahora bien, si has usado Dropbox, es un servicio de almacenamiento de archivos, y si has almacenado algunos archivos y los has eliminado, va a conservar tu copia de seguridad durante tres meses. Si recuerdas que eliminé alguna carpeta por error, ¿dónde necesito encontrarla? Vas a ir a estos archivos eliminados y al hacer clic, vas a ver todos esos archivos eliminados con fechas cuando los borres eliminados. Esta es una gran característica de arreglar cualquier problema o cualquier error, o cualquier cosa que puedas restaurarlo fácilmente. Esta es otra característica que puedes restaurarla. Otro ejemplo es Gmail. Si tienes un Gmail usado y cuando intentas eliminar algunos e-mails, te va a dar la retroalimentación y además te va a decir la forma en que puedes deshacerla, cómo puedes revertir este cambio si lo has hecho con un error. También hay un aprender más para entrenar al usuario si el usuario no sabe lo que acaba de pasar. Estos son pocos ejemplos. Hay muchos más ejemplos que puedes ver y podrían haber visto en línea cuando intentas eliminar algo, o cuando intentas crear algo, hay algún error. va a dar cómo solucionar esos errores. También algunos sitios te dan pasos que hacen esto. Anoche, tuve un problema con mi canal de YouTube que mi cuenta de AdSense no funcionaba con ella. Fui a la guía de guía de YouTube y traté de abrirlo. Había como cinco y seis pasos, y me fueron muy difíciles de seguir. Te aseguras de que necesitas hacerlas muy fáciles de entender para tu usuario. Incluso puedes usar un video para guiar al usuario cómo solucionar este error. Estos son todos los consejos y trucos y el diseño para errores. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 42. 8 usuario siempre en control con ejemplos: Sea lo que sea que poseamos los humanos o las cosas que tenemos, necesitamos controlarlo nosotros mismos. Esta necesidad humana de control puede remontarse a nuestras raíces más tempranas cuando éramos cavernícolas. Cuando empezamos a montar el caballo, usamos cinturones para controlarlo. Podemos detener fácilmente a nuestro caballo, podemos fácilmente dejarlo correr. Estas son las necesidades humanas. Este comportamiento está construido en la naturaleza humana. Como diseñadores de UX, necesitamos darle a los usuarios control total o casi el mejor control de sus aplicaciones, o los sitios web que están utilizando, o sus cuentas, o los sitios de comercio electrónico que están utilizando, por lo que los usuarios sienten que son a cargo. Se van a sentir muy bien. Esto también forma parte de la experiencia del usuario. Aunque veas a los niños y los observas cada vez que tienen un año y medio, ellos mismos tratan de comer con una cuchara. Si intentas agarrar su cuchara, van a llorar, y van a decir eso: “Tenemos que comernos nosotros mismos”. Incluso están tirando todo por todas partes y se están tirando comida sobre sí mismos, pero siguen tratando de usar cuchara porque se sienten en control. Hoy en día, en nuestras tecnologías en todas partes a tu alrededor, incluso los autos , tus teléfonos móviles, tus laptops, tus computadoras, tienen controles de brillo. Cuentan con controles de audio. Puedes reducir el audio, puedes apagarlo. Tienen temas oscuros y claros. Puedes aplicar si sales al sol. También puedes conectar y desconectar Wi-Fi y Bluetooth. Todos estos ajustes y servicios, puedes apagarlos y puedes encenderlos. Todos tus dispositivos están en tu control. Ahora bien, ¿por qué le damos al usuario tanto control? Porque es la naturaleza humana la que nos sentimos satisfechos cuando estamos en control. Déjame mostrarte algunos otros ejemplos de usuario en control. Es posible que hayas visto algunas páginas de aterrizaje donde vas a esa página de aterrizaje y el video empieza a reproducirse por sí mismo y no hay forma de controlarlo o detenerlo. Ahora, puedes ver que se está reproduciendo este video, pero si tiene un audio fuerte, vas a matar a esta página. Vas a dar click instantáneamente en esta cruz. Este botón se llama reproducción automática. La reproducción automática no es mala si la usas de buena manera, pero si intentas limitar al usuario en control y no le das opción para apagar el audio o cerrar la ventana del reproductor de video, se van a irritar. Permítanme mostrarles algunos de ejemplos de diferentes sistemas operativos como Google, sistemas operativos móviles Android y Windows, e iOS, Macs, y cómo están dando control a sus usuarios. Este es un ejemplo que puedes ver, puedes apagar cualquier app, incluso puedes obligarlas a detenerse. Todas estas aplicaciones están listadas por aquí. Entonces, tenemos esta pantalla de ajustes para iPhone, y puedes ver, puedes personalizar todo, Wi-Fi, Bluetooth, modo avión, notificaciones, todo. Esta es la pantalla de ajustes de Gmail y puedes ver que hay toneladas de ajustes que puedes hacer. A pesar de que no está muy bien definido o no muy bueno, aquí hay mucha información o configuraciones abrumadoras, pero aún así es un buen ejemplo. Entonces, esta es nuestra pantalla, Windows 10, y he cambiado un poco su tema. Estos son todos los ajustes, gestión del color, dispositivos, fuentes, opciones de Internet. Cientos de configuraciones que puedes hacer para cualquiera de tu dispositivo conectado o cualquier programa que tengas instalado. Puedes desinstalarlos, o puedes volver a instalarlos, o puedes deshabilitar diferentes servicios. Entonces, esta es la pantalla del iMac o del sistema operativo de Mac, preferencias del sistema. Aquí hay muchas cosas que puedes hacer. Puedes controlar el dock, salvapantallas de escritorio, equipos, modo de ahorro de energía, pantalla si tienes múltiples pantallas, tu sonido, escáneres, Bluetooth. Todos estos ajustes están ahí para que el usuario pueda sentirse en control y quedar satisfecho de que soy dueño de esta app o de este producto. Todo esto se trata de usuario en control. Espero que hayan entendido el concepto y la necesidad humana y la psicología humana detrás de él. Pasemos a la siguiente lección. 43. 9 Agrupar y cortar, con ejemplos: Podrías haber leído muchos libros, y alguna vez te has preguntado por qué dividen cada libro en diferentes capítulos, y diferentes secciones, diferentes párrafos con el uso de diferentes encabezamientos, son más fáciles de escanear. Mentes humanas pueden consumir fácilmente esa información y entenderla fácilmente. Nosotros los humanos no podemos procesar una gran cantidad de datos o mucha información a la vez, pero nos encantan trozos de información de tamaño mordida. Ahora, ¿por qué necesitamos agrupar nuestros controles o nuestros botones o nuestras opciones? Sólo toma un ejemplo, si te doy una lavadora y tiene como un 100 botones y controles y ajustes en ella, te quedarás abrumado con esto son funciones, y no lo preferirías con un lavado más sencillo máquina que tiene apenas 10 botones en ella. Qué puedes hacer para mejorar tus productos, puedes agrupar controles relevantes juntos, tienen sentido para el usuario que este conjunto de controles lo va a hacer. Déjame mostrarte la imagen de la lavadora que estoy usando en mi casa. Esta es la lavadora Samsung que estoy usando en mi casa, y te voy a mostrar cuáles son estos controles, y por qué agruparlos tiene sentido. Ahora, se puede ver en el medio que han agrupado estos dos, Power y Start. Este es un apague esta máquina y para arrancarla. Esto tiene mucho sentido que casi hacen las funciones similares. Después tenemos todos los controles personalizados del lado izquierdo. Se puede ver por aquí, estos son los tres controles personalizados, y luego el mouse prefabricado donde solo se puede seleccionar a cualquiera, y estos se agrupan por aquí. Si quiero un lavado rápido, voy a seleccionar esto y sólo va a hacer todos los ajustes por mí. Este es un diseño muy bonito de todos los controles de interfaz y están agrupados para darle sentido al usuario. Además no están violando la función de control. El usuario siempre quiere tener el control en el lado izquierdo, y en el lado derecho tienen modos prefabricados y usan agrupación para diseñar toda esta interfaz, esto tiene sentido. De igual manera, si ves alguna app, hay toneladas de apps, Mac, Windows, Sistemas operativos, incluso iOS Android, tienen toda la configuración agrupada en diferentes áreas. Están apilados en diferentes secciones. Déjame mostrarte algunas de las secciones. Estas son Configuración de Windows y puedes ver estas son configuraciones de Windows 10 y puedes ver que son más simples, y hay como siete u ocho categorías, y puedes ir fácilmente con cualquiera de ellas. Tienen su descripción debajo de ellos, y puedes hacer el ajuste y personalización. Han utilizado la agrupación para acomodar una gran cantidad de configuraciones en una sola categoría. Entonces tenemos, esta es la captura de pantalla de Sketch App. Se trata de una aplicación popular para los diseñadores de UI y se puede ver así es como están usando el agrupamiento. Ahora, este primer grupo es para la alineación, otro es para lo siguiente, después tenemos estos para el posicionamiento. Después tenemos todos los controles de textos en este cuadro delimitador, después tenemos la apariencia y afecta por aquí. Es así como tiene sentido al agrupar diferentes controles en grupos. Este es también otro ejemplo que puedes, quizá lo hayas visto en muchas barras de navegación en menús que todos estos estén agrupados en secciones. Se puede ver esta es la primera sección para archivos, y abrir archivos, creando otros nuevos. Esto es para cambiar el nombre y guardar y revertir archivo. Estos son exportar y estos son reducir archivo y estos lo son, lo han agrupado para que el usuario pueda comprenderlos fácilmente y tener algún sentido sobre ellos. Nuevamente, puedes ver aquí en la parte superior tenemos diferentes pestañas. Si hago clic en alguno de ellos, lo siento. Si hago clic en alguno de ellos, me va a llevar a la configuración de herramientas. Es más fácil para mí si tienen como una página larga, y toda la configuración que reside en esa página, será demasiado difícil para mí no cambiarlo todo. Esto se agrupa en dos categorías diferentes y es más fácil para mí cambiar la configuración del teclado. Estas son las Preferencias del Sistema. Nuevamente, puedes ver que estas son las preferencias del sistema Mac o iOS y también están en diferentes porciones. Al igual que se puede ver este es el primero, luego éste es el segundo, este es el tercer bloque, y este es el cuarto bloque, y este es el último bloque. O puedes ver Grupos de Usuarios, y controles parentales, y controles extra, accesibilidad, Siri, están casi relacionados están por aquí. También fecha y hora. Los controles que están relacionados con el uso compartido de redes, Bluetooth, todos están en esta área, iCloud se puede ver. Esto tiene sentido. Todos están casi todos relacionados. Se trata de dispositivos de hardware que puedes ver en esta área, impresoras de sonido, trackpad, mouse, estos son casi todos los hardwares. Estas son las personalizaciones de su propio sistema operativo como Desktop, Dock, Mission Control, idiomas, seguridad, privacidad. Todas estas preferencias del sistema, tienen sentido. Ahora bien, este es un muy mal ejemplo en Google adsense. Estaba tratando de hacerla desaparecer. Lo que pasó es que estaba buscando o leyendo esta zona, y el siguiente ícono está apareciendo un poco en el lado derecho, y está mucho lejos de esta pantalla, este pop-up. Durante como cinco minutos, no pude hacer lo que tengo que hacer aquí, cómo puedo cerrar este cuadro emergente. Después de mirar alrededor, vi que esto está por aquí. Si algo está lejos de su contexto de uso, estoy usando esta ventana. Este siguiente debería ser por aquí, o por aquí, o por aquí, también pueden colocar un botón por aquí. Tiene sentido. Está dentro de un grupo. Agrupar también tiene sentido porque el usuario piensa que estas cosas están relacionadas. Esta es una ley, esto se le llama Ley Gestalt de agrupamiento. Hay más leyes Gestalt. Podría incluir otra sección entera sobre eso pero ahora mismo no está en mi plan. De todos modos, agrupar tiene sentido así que intenta usar la agrupación de manera inteligente en tus IU. Si tiene alguna pregunta, pregúntame. Pasemos a la siguiente lección. 44. 10 humanos tienen límites: Todos los humanos son limitados. Tenemos límites en cuanto a límites físicos y mentales. No podemos operar ni usar ningún dispositivo o máquina por demasiado tiempo. Tenemos limitaciones físicas y mentales. Siempre que estés diseñando para cualquier app o desarrollando cualquier producto, necesitas tener en cuenta todas estas cosas. Ahora si hablamos de smartphones y límites humanos, entonces hay que saber que hay una investigación Stephen Hoober y Josh Clark y según ellos, 50 por ciento de los usuarios sólo sostienen sus smartphones con una mano, y 75 por ciento de su interacción es impulsada por el pulgar por lo que en su mayoría utilizan el pulgar para presionar diferentes botones y para pedir algo en línea. Necesitas tener estas cosas en tu mente. Estos límites físicos también juegan un papel en la UX industrial. Personas que solían ensamblar diferentes partes o diferentes máquinas o diferentes paquetes que usaban para empacar diferentes artículos en diferentes cajas. Solían trabajar durante horas y horas en plantas industriales de pie ahí como 10 horas o 12 horas. Empezó a enfermar a la gente. Lo que hicieron fue a los chicos de UX iniciaron estas cosas ergonómicas que cómo podemos usar humanos y no usarlos como máquina. Cómo podemos mejorar su salud y su espacio de trabajo utilizando la experiencia y usabilidad del usuario. De igual manera, si estás diseñando una silla o una puerta, necesitas que alguien la pruebe durante 8-10 horas o tal vez más que eso. Necesitas a alguien que lo vaya a probar por días o semanas tal vez para ver adecuadamente que si está generando algún dolor de espalda o el dolor de pierna o cualquier otra molestia. A continuación te presentamos algunos artículos e investigaciones sobre estos patrones. Eso como los humanos sostienen sus smartphones y usan diferentes dispositivos. Estos son los diferentes patrones de sujeción acunados, sostenidos, y tocan. Se puede leer todo este artículo. Voy a compartir estos artículos con ustedes y luego tenemos esto, se puede ver u oír, en este patrón. Esta es básicamente la zona segura donde puede llegar el pulgar del usuario. Se trata de un smartphone. Esta es la zona donde el usuario puede tocar fácilmente con el pulgar o el pulgar. Esta es zona bien y esta ninguna zona. Aquí, si colocas algo por aquí, algunos botones, no van a alcanzarlo. Es posible que hayas visto la mayoría de los botones están en esta zona por aquí para que el usuario pueda tocarlo fácilmente. Además, estas zonas de confort son diferentes para diferentes dispositivos. Puedes leer este artículo, puedes ver por aquí, esta es la zona de confort para tablet, móvil más grande, o tal vez la pantalla más grande. Muchas empresas como Apple, lo tomaron en consideración y se puede ver en Apple iPhone 6 o 7. Creo que tienen esta característica de accesibilidad en accesibilidad. Puedes encenderlo y va a mover cada app o cualquier ícono de tu pantalla hacia abajo hacia esta zona. puede ver que están limpiando el área donde tu pulgar no puede llegar por lo que fácilmente puedes usar esto, y se va a encender algo como esto por aquí que puedas volver a la pantalla y a los ajustes que tenías. Ahora, algunos de los [inaudibles] diseñadores y muchos gurús de gran usabilidad, están diseñando aplicaciones como estas. Me sorprendió mucho ver que se puede ver por aquí han dejado todo este espacio vacío en la parte superior. ¿Por qué es eso? Porque el pulgar de los usuarios no puede llegar a esta zona. Para que sea más fácil para el usuario, están colocando todos sus controles en la parte inferior de la pantalla. puede ver por aquí, Sepuede ver por aquí,está un poco arriba, hay un margen por aquí, un espacio por aquí, y después han enumerado todos sus controles o categorías o cualquier cosa que quieran hacer. Todos estos ajustes se cuentan, todo se mueve hacia abajo. Esto se hace intencionalmente para apoyar el uso del pulgar, limitación física del usuario. Estos fueron todos los ejemplos de limitaciones humanas y cómo podemos usarlas para mejorar nuestras aplicaciones o nuestros productos cotidianos. Si tienes alguna pregunta hazme. Pasemos a la siguiente lección. 45. Uso de patrones de diseño: Lo único donde nuestras mentes humanas son superiores a cualquier supercomputadora es reconocer patrones de fase o diseño o patrones que han visto antes. Por lo que nuestros cerebros reconocen las cosas fácilmente si hemos visto o hemos experimentado un patrón similar en el pasado. Cuando estás diseñando algún producto o cualquier aplicación o cualquier sitio web, si te desvias mucho de los patrones que ya han visto los usuarios o tienen imágenes de esos patrones en su cerebro, les será difícil reconocerlo. Sólo un ejemplo, si estás inventando un auto, no intentes poner avión como cientos de controles en él para moverse. Será difícil para los usuarios reconocer esos patrones. Por lo que necesitas tomar esos patrones forma autos ya hechos y tal vez puedas alterarlos o mejorarlos un poco. De igual manera, en el diseño web, en el diseño de aplicaciones móviles en productos digitales, ya hay patrones hechos que los usuarios ya han utilizado, como barras de búsqueda, diferentes downs, acordeones. Antes de empezar a usar cualquiera o crear cualquier patrón nuevo, intenta encontrar el patrón similar que los usuarios ya están usando. Entonces te voy a mostrar pocos sitios web relacionados con patrones de diseño y para desarrolladores, es realmente necesario usar esos patrones ya hechos. También ahorra mucho tiempo. Aquí tienes un sitio web llamado patterns.com y pttrns.com y voy a compartir todos estos enlaces para enlaces en los recursos. Entonces lo que tienes que hacer es que puedes ver en el lado izquierdo hay categorías.Así que si voy a este patrón de tarjetas, puedes ver esto es muy popular en estos días. Se va a filtrar y mostrarme sólo los patrones de tarjetas. Se puede ver esta es una y luego tenemos estas tarjetas, tarjetas pequeñas, y luego tenemos esto, se puede ver en ella, si se cierne, se va a mostrar cuál es la App y cuáles son las etiquetas y categorías relacionadas con ella. Entonces esta es una forma en que puedes encontrar todos los diferentes patrones y puedes ver si puedes usar alguno de estos patrones ya hechos en tu app. Segundo es éste. Esto también es mobilepatterns.com y ahora mismo he abierto la lista. Se puede ver en la lista de la izquierda, hay diferentes formatos de listas. Hay diferentes estilos. puede ver que son imágenes basadas Lista uno, dos, tres imágenes con títulos. Después tenemos estas listas de diferentes revisiones. Estos son en formato diferente, y luego si bajamos puedes ver estas también son listas. Tienen formato diferente. En el lado izquierdo se pueden ver todas las listas sin clasificar, valoradas, gustadas. Por lo que estas son todas las cosas que necesitas encontrar antes de empezar a esbozar tus ideas o tu aplicación o los diseños y si eres desarrollador, entonces debes usar patrones y bibliotecas ya hechas que puedas implementar fácilmente. Incluso hay patrones de diseño codificados o bibliotecas de diseño. Puedes usarlos al instante en tus aplicaciones para iPhone o Android o en cualquier aplicación web digital. Este es otro sitio web, uipatterns.com, y hay muchos patrones con diferentes categorías, por ejemplo, si voy a la ventana más pequeña, me va a mostrar cuál es el problema, por qué el usuario lo necesita, y también algunos buenos ejemplos que puedes ver por aquí. Me ha mostrado un ejemplo también su uso. Por lo que este es otro sitio web y muestra muchos patrones de diseño de interfaz de usuario diferentes. Entonces aquí tenemos otro sitio web de la biblioteca de patrones, Welie.com, y puedes ver que de nuevo hay diferentes categorías. Pasemos a la búsqueda avanzada y veamos qué patrones existen para la búsqueda avanzada. Parece un poco viejo. A lo mejor no lo han actualizado en unos años. Pero puedes ir a este sitio web y ver algunos de los ejemplos. Creo que son muy viejos, pero creo que es bueno que tengamos algún problema y solución. Creo que deberías atenerte a estos tres sitios web. Son más recientes en lugar de éste. Esto es un poco viejo y voy a compartir todos los enlaces contigo. Se trata de welie.com. Se siente un poco viejo para mí. Por lo que estos tres serán perfectos. Entonces todo esto se trata de bibliotecas de patrones y cómo puedes usarlas. Nuestros cerebros humanos están cableados para reconocer patrones similares, por ejemplo, estas ventanas modales. Puedo reconocerles instantáneamente que esta es una ventana de modelo y esta tal vez sea para alguna información o tal vez pueda dar click en ella y si es tener un botón, puedes ver por aquí en este ejemplo, puedo dar click en ella y realizar alguna acción. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 46. No dejes que tus usuarios piense: Todos los humanos son perezosos por naturaleza, así que si les está haciendo difícil usar algo, lo van a dejar. O si estás poniendo mucho estrés en su mente o dándoles muchos cálculos difíciles o cosas que recordar. No les va a gustar. El consejo aquí es, no cargue a sus usuarios con cálculos difíciles o deje que memoricen contraseñas difíciles o largas. Intenta resolver todos los problemas difíciles para tus usuarios en el lado del desarrollo o en el lado del diseño. Estas son algunas formas que puedes usar para hacer que tu aplicación o tu sitio web de comercio electrónico o cualquier producto digital sea más fácil para que tus usuarios elijan. Resolver problemas duros no significa que necesites calcular cosas diferentes, sino que también está relacionado con las contraseñas, la ubicación del usuario. Se puede localizar automáticamente usuario por GPS, rastreándolo automáticamente. Incluso los sitios web están haciendo eso. También puedes mostrar contraseñas mientras el usuario está escribiendo para que cometa menos errores. Es adoptada por la app de Amazon, y este es el patrón al que se me ocurrió. No sé si Amazon se le ocurrió antes que yo o tal vez soy yo. En realidad inventé este patrón de diseño que cuando el usuario está escribiendo, hay que mostrar la contraseña del usuario en formato muy tenue, formato gris muy opaco para que otros no puedan leerlo, pero el usuario puede verlo y leerlo mientras está escribiendo. Entonces saben lo que están escribiendo, así que van a cometer menos errores. Es más fácil para ellos. Estás haciendo más fácil para ellos escribir contraseñas en lugar de cometer errores, eliminándola una y otra vez, escribiéndola una y otra vez. Déjame mostrarte algunos de los ejemplos, cómo puedes calcular las cosas por tu cuenta en lugar de dejárselo a los usuarios. Hay algunos ejemplos como este podómetro Runtastic. Hay muchas apps. Pueden calcular tus calorías y luego velocidad, frecuencia, cuáles fueron los pasos por minuto también la distancia, todo, incluso tu velocidad. Por lo que los usuarios no solo necesitan preocuparse por esto. Simplemente van a conseguir que todo de estos pasos se calcule automáticamente. Esta es una app más Caminar con Mapa Mi paseo. Ya puedes ver que va a tomar toda tu parte con el mapa y también la distancia, duración, base promedio, calorías quemadas, y ganancia de elevación, cuánto vas por encima del suelo, y cosas por el estilo. Entonces tenemos otro ejemplo, esto es pillowise. Una almohada que se personaliza a tu cuello. Tengo muchos problemas de cuello y dolor así que fui a su página web. Tienen videos cómo medir diferentes anchuras de hombros y luego puedes seleccionar por aquí, como por ejemplo, yo tenía este 44, supongo 43 o 40. Entonces puedes cuello la circunferencia del cuello. Entonces se puede la altura del cuello, que es que han demostrado cómo calcularlo. Entonces también puedes seleccionar si duermes de lado estomacal y el colchón firme, puedes hacer click aquí. va a aconsejar qué almohada coincide con tus anchuras y alturas. De verdad me gusta esta almohada. Creo que lo voy a comprar pronto. Entonces tenemos este login, que es login con Facebook y Twitter en lugar usuario memorizando todas y cada una de las contraseñas para cada sitio web, pueden iniciar sesión fácilmente con estos inicios de sesión sociales. Entonces puedes ver aquí tenemos app Uber, y ya hay tres presets realizados. Al igual que puedes ver el gimnasio, el hogar, y el trabajo. Estas son las tres direcciones que podrías haber guardado. No lo he usado, ni una sola vez, así que no lo sé. Pero hay una opción para guardar tus presets o tus rutas para que puedas usarlos fácilmente en lugar de escribirlos una y otra vez. Entonces tenemos esta entrada telefónica internacional muy inteligente. Si seleccionas alguno de tu país como Afganistán, o si selecciono mi país, déjame seleccionar Pakistán. Se puede ver el formato de este número de teléfono de ejemplo se cambia a lo que tengo en Pakistán. Todos los números móviles están en este formato. Esto es muy ordenado. Si vas a Estados Unidos o Reino Unido, puedes ver nuevamente el formato cambia al plus 44 y luego tu número de teléfono. Esto es muy inteligente y entrada telefónica. Entonces tenemos pocos ejemplos más. Al igual que puedes ver por aquí Calculadora de asequibilidad de Zillow. Creo que esto se trata de hipoteca de la casa. Si cambias tu nivel de ingresos desde aquí como 60 mil, te va a mostrar cuánta casa puedes permitirte hasta, para que yo pueda permitirme así. Si tengo deuda mensual como 800. Va a cambiar todo desde aquí. Si cambio algo desde aquí, también puedes acudir a reportes de desglose de pagos anticipados, reporte completo. Estos son muy prácticos. El usuario no necesita calcular nada, lo están calculando por ti. Ahí hay otra calculadora. Esta es Calculadora hipotecaria por el mismo Zillow y se puede calcular por aquí como si tengo. Me va a mostrar cuánto tengo que pagar cada mes. Entonces de nuevo, este es otro ejemplo, tylko. Podrás personalizar todo este estante. Por ejemplo, quiero usar la altura de 26 centímetros para esta área y para esta área quiero 38 centímetros. Entonces voy a quitar ese grado. A lo mejor puedo usar este o éste. Hay muchas opciones. Solo necesitas seleccionar el material y puedes cambiar la densidad con todo lo que se esconde desde aquí. No necesitas calcular todas estas, solo necesitas seleccionar tus personalizaciones y te va a hacer una estantería muy bonita. Entonces tenemos esta co app y co, y así es como crean un contrato. Si selecciono un cliente, así no tengo clientes. Tan solo un cliente para hacer línea. Por ejemplo, mi cliente es Charlie. Estas son todas las cosas que puedo poner por aquí, contrato, nombre, correo electrónico todo, y puedes pulsar Continuar. Se va a construir todo el proyecto y todo el contrato por sí mismo. Voy al proyecto X 002. Se puede cambiar la moneda y se puede continuar. También puedes comprobar que mi trabajo será mío. De todos modos, voy a continuar. Ya puedes ver ahora han preparado todo el contrato. Se puede ver por aquí, son mis firmas y esa es mi dirección, y ese es el contratista. Esto es muy útil. Puedo descargar el PDF Puedo firmar y enviar este contrato. Esto es muy bonito. Guardar como borrador, vamos a guardarlo como borrador. Este es muy bonito ejemplo de cálculos automáticos están generando cosas automáticamente en lugar de poner toda esa carga en mi mente. Entonces tenemos otra calculadora, calculadora automática en este sitio web. Es de Australia. Se puede ver esto también es sitio web hipotecario o tal vez préstamo, cómo solicitar los préstamos para vivir. Se pueden cambiar estos valores y todo lo que sigue va a cambiar. Si voy así, o si voy así, va a cambiarlo todo. Todos estos son ejemplos de cálculo automático y carga la carga en las mentes de tus usuarios y su capacidad mental. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 47. ¿Por qué los usuarios necesitan velocidad y cómo mostrar de forma de delays?: Nosotros los humanos somos impacientes en la naturaleza no podemos esperar mucho tiempo. Es por eso que inventamos controles remotos, smartphones que son procesadores muy rápidos, aviones rápidos. Entonces si ves alguna cola y es muy larga, ya hay 200 personas en la fila, entonces la mayoría de las posibilidades son que vas a dejar de fumar y dejar esa cola. De igual manera en aplicaciones digitales y aplicaciones móviles los usuarios van a comportarse de la misma manera. Si tienes un sitio web o una aplicación web que tarda como 15 segundos en cargarse. La mayoría de las posibilid