Curso universitario sobre diseño de experiencia de usuario, introducción al diseño de UI y UX impartido por un instructor de UX de la universidad.

1. Introducción: Bienvenido al curso de diseño de experiencia de usuario 101. Mi nombre es Erin Lawrence y soy diseñadora Principal de UX y fundadora de una agencia UX llamada UX honey en San Francisco, California. También soy instructor de UX. Ryan imparte diseño avanzado de UX en la Universidad de la Academia de Arte, también aquí en San Francisco. De acuerdo, vamos a empezar con una visión general de alto nivel de la introducción del curso. Y cubriré todos los temas que vamos a pasar. Muy bien, entonces, ¿qué es UX, cuáles son los orígenes de ella? Y si lo miras, lo que estoy presentando aquí es la u y la X viene de la experiencia de usuario. Y el usuario experimenta exactamente lo que dice. Estás diseñando cosas para que la gente lo use. Tan importante saber. Y muchos casos que no eres el usuario de los productos para los que estás diseñando. Tienes que salir y aprender alrededor de estas personas. Tienes que validar que la solución estás diseñando realmente funciona también para estas personas. ¿ Cuál es la diferencia entre la terminología común de UX y el término y la interfaz de usuario? Me gusta la analogía que es una galleta. diseño de la interfaz de usuario en la analogía de una cookie es la cookie en sí misma. Es como se ve. Se ve masticable, parece chocolate. No es verde neón y no parece que te vaya a enfermar. Lo primero que vas a hacer es que vas a comer con los ojos. Entonces la galleta debe de ser atractiva para mí visualmente. Primero, veo la galleta. Es agradable y cálido, bondad del chocolate en ella. Y luego me lo como. Cuando alguien me preguntó cómo era esa galleta, les digo que era realmente bueno, pero ojalá tuviera más pasas en ella. El acto de aprender cómo fue. Eso es UX preguntando a alguien el por qué y cómo fue esa experiencia? Es el arte de la experiencia del usuario, mientras que el arte de la interfaz de usuario está aprendiendo alrededor de cómo crear cosas visualmente. Espero que eso sea de ayuda. Pero por si acaso, vamos a profundizar en este tema de UX e UI. ¿ Qué es la UX exitosa? El diseño exitoso de la experiencia del usuario es conectar los objetivos de negocio las motivaciones de los clientes y crear solutos, creando soluciones que logran buenos resultados para empresas mientras resuelven las necesidades de la cliente. Por lo que es importante que entiendas los objetivos del negocio, también las motivaciones del cliente. Y vas a resolver cosas que benefician al negocio y también a resolver las necesidades del cliente. Lo vamos a hacer es que vamos a hacer experiencia de usuario diseño 101 en general, este es el mismo plan de estudios en clase que imparto a nivel universitario. El resultado de la misma es un estudio de caso. Lo que vas a aprender, todos los métodos y las herramientas necesarias para hacer un estudio de caso sólido de UX. Déjame pasar por todas las cosas que vamos a pasar en esta clase. En esta clase aprenderás a establecer metas, cómo crear una persona, cómo crear un script de entrevista de usuario. Las mejores prácticas al realizar investigaciones, tuvieron hallazgos de investigación sintetizados. Cómo escribir una declaración de problema, cómo crear un mapa de viaje del cliente, bosquejar plantillas y marcos. Cómo crear un diseño de estructura alámbrica, cómo crear un prototipo clicable, cómo hacer pruebas de usuarios, la base de los sistemas de diseño, cómo aplicar el diseño visual a tu wireframe y mejores prácticas cuando se trata de currículums de diseño. Muy bien, vamos a echar un vistazo a todo el material de clase que vamos a cubrir en la siguiente ronda de videos. Voy a cerrar mi preestreno. Voy a venir al estudio de caso. Te daré el ejemplo de estudio de caso al final. Y voy a correr rápidamente por todo el material que vamos a compartir y todos los temas que vamos a cubrir. Pero se puede ver, aquí están todos los temas expuestos en un solo sitio web. Y de nuevo, esto es lo que enseño en la Academia de Arte. Lo primero que vamos a cubrir por aquí es que vamos a venir a la reunión de arranque. Aquí es donde vas a través de todos los objetivos. Y los objetivos que cubriremos serán los objetivos empresariales. Hablaré de eso. Los objetivos del producto, los usuarios y sus metas, los tenedores de la participación. Estas son personas que tienen una participación en tu proyecto. Estos son los clientes que debes conocer de ellos, es la gente que haces diseña reseñas con el riesgo que puedas enfrentar y cómo mitigar esos riesgos. Lo siguiente que cubriremos es que vamos a ir a ver el marco para crear una persona. Y la persona se ve así. Y aprenderemos ri, las personas's son importantes, la cruz el proceso de creación de una persona. Y luego veremos cómo construir un guión de entrevista. Y tengo plantillas para darte también. Por lo que se llega a descargar algunas de estas plantillas y se llega a llenarlas por ti mismo. Te enseñaré a construir un guión. Cuando te pongas a construir uno, en realidad te dará una plantilla para ir a usar. Y puedes llenar esta plantilla preguntas y puedes salir corriendo y puedes entrevistar a personas que te interesen. Y también te daré las entrevistas mejores prácticas, cómo salir a entrevistar a la gente y tomar notas y grabar estas entrevistas. Para que así puedas volver y puedes hacer la síntesis y el clustering. Aquí es donde se toma toda la información que encontró durante la investigación y le da sentido. Buscas patrones. Y estos patrones ayudan a dirigir tus soluciones o los problemas y validar los problemas que estás tratando de enfrentar. Después de eso, te enseñaré a hacer una declaración de problemas. Entonces después de que hayas aprendido alrededor la gente y los problemas, puedes replantear el problema. De esa manera puedes ir y diseñar soluciones en torno a estos problemas validados. Después de eso, vamos a aprender el mapa de viaje del cliente. Puedes venir aquí y puedes mapear el viaje en el que vas a poner a tu cliente. De esa manera podrás empezar a bosquejar para este viaje y te daré ejemplos de esto durante cada video. Este será el video más largo de la clase. La mayoría de los videos que tendrás serán sesiones bastante cortas. Por lo que debería ser fácil para ti recoger, aprender, y hacer por ti mismo. Después de que hayas hecho el mapa de viaje del cliente, pasaremos a conceptos. Lo que vamos a aprender aquí se llama el valor prop, algo así se ve así. Aprenderemos más marcos conceptuales como un cuatro arriba. Aprende otra técnica llamada el marco de fotos. También te apuntaré a otras webs donde podrás encontrar ejemplos más cool de cómo hacer dibujando y hacer conceptos como equipo, como grupo, o por ti mismo. Después de eso, les enseñaré a todos cómo hacer un wireframe. Voy a venir aquí. Estoy usando Adobe XD en este momento. Y he creado un flujo de trabajo de wireframe sobre cómo entregar Baba t a su casa bajo demanda. Por lo que el objetivo de esta aplicación es que se entregue baba t a su casa siempre que lo desee dentro de San Francisco. Así que vamos a seguir adelante y jugar este prototipo. Voy a dar click en ella. Cargado. Voy a hacer mi FirstName, LastName, los enviaré por correo electrónico y me inscribo para la aplicación. Veo el apunte arriba. Puedo ver todas las bebidas de aplicación Bobo t que tengo. Puedo añadir uno. Quiero que éste no sea regular, dulce, sino solo semi dulce. Quiero tapioca grande. Voy a presionar Agregar. Voy a ir a ver hacia fuera. Voy a ver cuántas bebidas de té Bobo me gustaría pedir. Sólo uno está bien. Voy a presionar Next. Voy a poner mi calle, mi dirección en. Voy a pagar por esta baba t Ahora lo veo en un mapa y va a venir entregar a mi casa suite. De acuerdo, entonces lo que aprenderás a continuación es tomar ese wireframe que diseñas para tu caso de estudio no tiene que ser Baba t Sea cual sea el diseño que se te ocurra. Y saldrás y harás pruebas de usabilidad. Pero antes de hacer eso, vas a tener que ver con el script de pruebas de usuario. Tengo una plantilla para que rellenes sobre cómo hacerlo correctamente, y te daré las mejores prácticas de pruebas de usuarios. Después de eso, aprenderemos sistemas de diseño. Entonces te daré todo en torno a lo que un sistema de diseño está fuera de enfoque uno, qué es una guía de estilo, también tiene mucha inmersión aquí. Una vez que entiendas que podemos tomar la aplicación Bobo t, haré otra ronda de video para mostrarte cómo tomar este diseño aquí y hacerlo visual. Para que puedas ver ahora le hemos agregado el diseño visual. Volveré a pasar por esto de una manera más visual. Me inscribí. Podía ver cómo el Buda t, Son dulces. Quiero un té de leche regular. Lo quiero con conjunto regular, nuestro semi dulce. Estoy en tapioca grande. Quiero agregarlo al carrito. Puedo ver que se ha agregado aquí. Voy a venir aquí. Tengo la cantidad que puedo editar, puedo eliminar cosas que aprendí de las pruebas de usabilidad. Presiono Siguiente, bajé mi dirección. También aprendimos que la gente quería que fuera texto cuando son Baba t era, iba a ser entregado. Por lo que agregamos aquí el número de teléfono basado en las pruebas de usabilidad que hicimos. Presionamos Siguiente. Pongo la información de mi tarjeta de crédito y veo esto. El bulbo va a venir a mi casa a la entrega. Y tenemos cinco minutos, dos minutos. Y casi está ahí. Sí, tengo a Bobo t y recibo el texto que se entrega en mi puerta de entrada llamando, ve a conocer a la persona Apple. Wha, lo que podrías hacer al final de la clase, puedes crear un estudio de caso. Entonces voy a hacer una clase sobre el estudio de caso y cuál es el marco de un estudio de caso adecuado. Tienes la imagen wow, el diseño final que has hecho. Puedes hacer un poco sobre ti mismo. Puedes mostrar tus objetivos, los objetivos del producto, los objetivos de negocio. Se puede hablar del problema que sale y enfrenta. Puedes hacer tus personas's y una manera de aspecto muy cool como lo hice aquí. Puedes hablar en torno a tus suposiciones o tus metas de aprendizaje. Estas son las preguntas que quieres ir y aprender para las personas a las que apuntaste. Irás a investigar. Ve a hablar con la gente. Quiero que tomes fotos de esa gente con la que estás hablando. Puedes hacer cotizaciones de usuarios sobre lo que escuchaste. Te enseñaré a hacer esta síntesis. Como si estuvieras viendo fotos aquí. Vas a hacer los aprendizajes y hallazgos que son los patrones que encontraste. Vas a tomar decisiones de esos patrones. Vas a volver y recrear, reafirmar la declaración del problema. Vas a hacer bocetos y conceptos y tomar fotos de esos. Vas a esbozar ideas. Vas a hacer atención al cliente, mapas de viaje de clientes. Vas a crear los wireframes como te mostré en la aplicación Bobo t. Vas a salir y hacer pruebas de usabilidad y pruebas de usuario como llegamos aquí. Muestra fotos de eso. Vas a delinear tus aprendizajes que aprendiste durante las pruebas de usuarios. Vas a marcar la fidelidad, hacerla bonita, ponerle todos los bonitos diseños e iconos e ilustraciones. Y luego puedo hacer clic en él. Y puedo ir a ver la final aquí que has creado. Bastante genial. Estoy emocionado. Espero que lo estés. Adelante y echa un vistazo a todos los otros videos y vamos a hacer una profunda inmersión en cada tema que revisé contigo. Y terminaré en mi página web aquí, Aaron Lawrence, caso design.com. Quieres ver más de mi trabajo. Y les agradezco por pasar los últimos 20 minutos conmigo. Y ojalá disfrutes de la clase. Adiós. 2. Configura objetivos para tus decisiones de diseño de UX: Hola, Bienvenido al video 1 del cómo construir un caso práctico de diseño UX y diseño UX 1011 de las primeras cosas que hacemos antes de pasar por todos los procesos de hacer diseños e investigación. Según entendemos nuestros objetivos es lo primero que hacemos en el diseño de UX. ¿ Y qué tipo de metas debes saber? ¿ Y quién tiene esta, estos, esta información? Y cómo extraes esta información son cosas que te voy a mostrar en este próximo video. Y recuerda que lo que es la UX exitosa. Ux es todo alrededor de conectar los objetivos de negocio con las motivaciones de los clientes, y crear soluciones que logren buenos resultados para el negocio al tiempo que resuelven las necesidades del cliente. Por lo que es importante que entiendas las necesidades del cliente. Pero también estás trabajando en software para negocios. Por lo que hay que saber cuáles son los buenos beneficios y buenos resultados para el negocio cuando planean construir y crear y lanzar software al mercado. ¿ Y qué constituye un mercado? Un mercado es un montón de personas a las que estás apuntando para resolver sus problemas y lo resuelves con contenido dentro del software. ¿ Por qué es importante que entiendas tus metas? Es importante porque nos ayuda a entender las razones y las intenciones de por qué estamos haciendo el trabajo que vamos a hacer. Nos ayuda a evaluar qué es el valor en nuestros diseños, en nuestras soluciones. Y si recuerdas, R es una expresión donde el diseño tiene intenciones y motivos detrás de él. Por lo que toda la decisión de diseño de UX debe mapearse a la razón y la lógica. Y entender diferentes metas son aspectos importantes que se refieren a la razón por la que estás resolviendo un determinado problema y cómo esta solución y tiende a beneficiar a los negocios. Y con el tiempo, los gerentes de producto y los diseñadores de UX tendrán que rastrear y medir estas soluciones y ver cómo están ayudando al negocio a lograr estos objetivos que vamos a aprender en Layout hoy. Entonces en este video, te mostraré lo que se llama una reunión de inicio. Aquí es donde nos encontramos con las personas que tienen estas metas, que tienen esta información. Y les voy a mostrar el marco en el que extraen esa información de estas personas. Muy bien, ahora que tienes acceso a todos los videos, quiero mostrarte donde puedes acceder a toda esta información que te voy a mostrar a lo largo de la clase. Es un sitio web, y este sitio web se llama UX honey.com. Se puede ver el logo justo en el centro. También dispondré de documentación adjunta a cada video que podrás descargar y utilizar para cada tema. Así que vamos a buscar dónde puedes aprender en torno a la reunión de lanzamiento y los objetivos y UX honey.com. Entonces si vienes a x2 aquí, das click en esto y te desplazas hacia abajo. Y ya ves donde dice la reunión de inicio. Esa es la cosa número uno que hacemos primero antes de entrar en el ejemplo de estudio de caso. Y déjenme abrir el caso de estudio. Permítanme mostrarles cómo se verá el resultado del aprendizaje de estas metas en su caso práctico. Por lo que tendrás una reunión de inicio. Estas son las que lucen estas reuniones. Hay mucha gente en ella. Tenemos agenda. El orden del día es que pasa por las metas y mira el inicio de este caso de estudio donde tengo metas trazadas. Y esto es justo antes de empezar a hablar alrededor de los usuarios y de la persona. Entonces volvamos atrás. Voy a ir a dar click en esta reunión de inicio y hablar un poco alrededor de la reunión de lanzamiento. Entonces imagínense esto. Te contactó una startup o una empresa en un mercado específico y te han contratado para hacer investigación y desarrollar una solución de diseño UX que solucione las necesidades, metas del negocio y las personas a las que están apuntando. Vas a tener esta reunión el lunes. Y necesitas conseguir y ellos quieren que dirijas esta reunión y obtienes la información que necesitas para empezar. Suena como si supieras qué hacer. Si no, está bien porque te voy a mostrar qué hacer. De acuerdo, entonces lo que vas a hacer es que vas a tener una reunión de inicio. Es una reunión de día completo. Normalmente son alrededor de las 10 de la mañana hasta las cinco de la tarde. Y tienes una agenda por recorrer. Y la agenda es que se quiere hablar en torno a los objetivos de negocio y los objetivos de producto, los usuarios y sus metas, los titulares de participaciones, estos son los clientes y el riesgo y las mitigaciones que vas a hacer. Por lo que usualmente me veo así. Ahí están los significados. Se puede tener una oficina que es genial. También puedes hacerlo a través de una llamada telefónica está bien. Vas a anotar agendas. Ya te he dado el género, pero asegúrate de hacer introducciones. Tienes que presentarte. Un poco de carrera seca cómo va a ir esta reunión. Y algunos les dieron ejemplos de lo que hemos hecho a lo largo de los años aquí. Y ahora déjame hablar un poco de lo que es una reunión de inicio. Es cualquiera que esté involucrado en tu proyecto debe reunirse en una reunión antes de que todos empiecen a hacer el trabajo. El encuentro de inicio está conformado por gente de negocios, gente producto, y cualquier otra persona que tenga rendición de cuentas por el proyecto. Recuerda que estamos construyendo software. Y el software es caro y el costo del cambio en el software es aún más caro. Por lo que es muy importante como tú como diseñador de UX, sabes cómo obtener tus decisiones. Hay problemas y sus soluciones validadas. Por lo que saben que van a lograr los objetivos que vamos a plantear en esta próxima sesión o en esta sesión aquí mismo. Por lo que la reunión nos ayuda a externalizar la información. Eso es importante para que todos sepan y entiendan. Una vez que todos en esta reunión tengan un entendimiento, podemos aprovechar este tiempo para priorizar una línea y acordar ciertas prioridades. Y nuestra memoria, vas a tomar esta información Eso te va a ayudar a tomar decisiones de diseño de UX a medida que avanzas por el proceso. Entonces pasemos por la agenda aquí, que son los objetivos de negocio, los objetivos de producto, los usuarios y sus metas, titulares de las participaciones, el riesgo y las mitigaciones. Entonces, empecemos con metas de negocio. Voy a volar esto un poco más grande. ¿ De acuerdo? Entonces los objetivos de negocio y el por qué detrás de él, quieres conocer indicadores clave de desempeño. Estos se llaman KPI que Informan Business Analytics. Aquí tienes un ejemplo. La gente quiere construir algún software, dicen que es una empresa solar y quieren bajar la cantidad Llamadas telefónicas de Soporte que tienen dando información sobre qué hacer si algo sale mal. O una cabeza arriba sobre qué esperar cuando compras solar, eso es un número, eso es un indicador. Y estos son indicadores clave de desempeño que queremos utilizar. Queremos bajar este número construyendo software. Por lo que se podría decir en este momento sin software en el mercado a estos clientes, Aquí hay un cierto número, digamos 500. Las llamadas telefónicas llegan en un día. Una vez que lanzamos software, queremos saber que ese número baja. Y esa es una parte importante de un objetivo empresarial. Por lo que quieres entender el objetivo del negocio y cómo mapean a hitos que tu diseño necesitará lograr. Esto también ayuda a conectar las necesidades y metas del usuario con el negocio. Quieres saber qué tan bien tus decisiones de diseño para informar los objetivos de negocio en etapas pequeñas y grandes. Etapas que ahí es muy importante. No estás diseñando soluciones usando software porque es genial y es divertido. estás diseñando porque logran objetivos de negocio. Y es realmente importante que sepas esto y que entiendas cuáles son las intenciones de negocio detrás de la construcción de software y qué tipo de resultados les gustaría después de que lanzáramos el software. Entonces hablemos en torno a la gente de negocios. ¿ Cuáles son, quiénes son? Por lo general tienen preguntas sobre lo que estamos haciendo. En investigación. Tendrás que informar a la gente de negocios que al desarrollar la empatía de los clientes. Esto es empatía del usuario y experimentar con soluciones. Vamos a desarriesgar negocios desconocidos y ayudar a asegurar el éxito del producto. Cuanto más puedas alinearte en sus metas, entender sus iniciativas y hablar en su lingo. Cuanto más valioso estarás a nivel empresarial de cualquier empresa. De ahí que cuanto más tiempo estés en una empresa, de ahí más te pagarán también como empleado. ¿ De acuerdo? Entonces en esta reunión, puedes escribir un marco en un muro o puedes pasar por un documento y te voy a dar ahora mismo y volveremos a la página web aquí en un segundo. Tengo este documento que esboza los cubos de información por los que vas a pasar. Entonces tenemos los objetivos de negocio, los objetivos de producto que los usuarios y sus metas, los titulares de las participaciones y el riesgo. Y en realidad lo he pasado y lo he llenado para ti. Por lo que se pueden ver algunos ejemplos. Por lo que puedes descargar este documento en el video. Y puedes usar esto siempre que vayas a un proyecto UX, UX o comiences tu proyecto. Entonces volvamos aquí y hablemos de eso. Digamos que tenías los objetivos de negocio en una pizarra o estás teniendo una llamada con gente de negocios al inicio de tu reunión. Aquí te dejamos algunas preguntas que puedes hacerles para que se pongan en marcha. Para que puedan preguntarles, ¿qué pretenden lograr construyendo software? ¿ Cómo se va a beneficiar el negocio de esta experiencia de software? Una vez que empiecen a hablar para anotar esa información, Ésos son sus objetivos. También puedes simplemente preguntarles explícitamente cuáles son los objetivos del negocio. También se puede decir, digamos que el proyecto ha terminado y la aplicación está fuera, y es tremendamente exitoso. ¿ Qué aspecto tiene el éxito para el negocio del software? Te dan el éxito. Eso lo mapea como un gol. Eso es algo con lo que puedes hablar. Por lo que esas son dos preguntas que puedes usar cuando estás pasando por metas de negocio. Y si haces estas dos preguntas aquí, la gente de los negocios era realmente como tú, confía en mí. De acuerdo, vamos a hablar en torno a los objetivos del producto aquí y las razones por las que. Por lo que es importante entender lo que piensa el negocio de sus posibles objetivos de producto. Estos no son detalles finos, sino en general, como lo que necesitamos para lograr los objetivos de negocio. Entonces si tu objetivo es ganar dinero, entonces probablemente vas a necesitar una forma en el software de cobrar a la gente usando sus tarjetas de crédito para que el negocio pueda ganar dinero. Esa es una conexión fácil ahí. E imagina esto. No puedes tener una app de toma de fotos si no tienes cámara. Por lo que estos uno de los objetivos del producto habrá que utilizar la cámara de tu teléfono para que así podamos tomar fotos con él. Por lo que estos objetivos se pueden cambiar dependiendo de la investigación y de una solución que prueba los resultados. ¿ Recuerdas eso? Hablemos en torno a la gente de producto. ¿ Cómo se veían? Por lo que estas personas suelen ser expertos en materia. Eso significa que saben mucho alrededor de cierta zona en el mercado. Diga que es arco pero t entonces estas personas sabrían mucho sobre Baba T. También hay gerentes de producto. Los gestores de producto son especialistas y estrategia. Y también podrían ser ingenieros. Y estas personas entenderán el diseño de manera más que la gente de negocios. Y tendrán preguntas en torno a componentes específicos de la interfaz de usuario y los detalles del equipo de diseño de interacción. Pms están, están aquí para ayudarte a recordar eso. No están aquí para squash tu diseño. Están aquí para ayudar a conectarse a su diseño, a los objetivos de negocio y a los objetivos de producto que nos propusimos lograr. Entonces recuerda que tu diseño sirve como herramienta de comunicación. Eso es todo, ¿verdad? Es lo que construyen los ingenieros es lo último que ven los usuarios. Por lo que tus diseños ayudan a todos a entender qué estamos construyendo, por qué estamos construyendo, y el valor que pretendemos salir y aprender. Por lo que los usuarios finales no ven los diseños finales. Ellos ven lo que construyó el ingeniero. Entonces vamos a entrar en preguntas que puedas tener. Para que puedas decir, ¿qué necesita hacer tu producto para alcanzar los objetivos de negocio? Pregunta. También se puede decir, si tu producto fuera un humano, ¿qué pasaría la mayor parte de su tiempo haciendo? Y quieres apuntar y capturar esa información. Y de nuevo, iré a mostrarles ejemplos de cómo se ve esto después de una reunión. Entonces este es tu dominio porque normalmente eres el experto en diseño centrado en el usuario, que se llama UCSD, a gran parte de la filosofía de hacer investigación centrada en el usuario o UX y trabajo de diseño de UX es que estamos tratando de entender los usuarios por estar centrados en torno a los usuarios para diseñar es para los usuarios. Entonces recuerda ese término, ves D, diseño centrado en el usuario. Entonces, ¿por qué es importante entender a los usuarios todos los aspectos que acabo de exponer. También puedes en esta reunión, utilizar este tiempo para priorizar a los usuarios. Si la aplicación tiene muchos, muchos usuarios en ella, esto te dará el enfoque y punto de partida de quién debes acudir hablar en investigación con primero. Entonces recuerda que esta es tu zona. Por lo general, se te puede llamar para que manejes esta parte de la reunión. Si estás con un equipo, necesitas capturar solo información de alto nivel sobre los usuarios. No lo llamó un perfil de usuario. Queremos conocer el mercado objetivo, dicen las personas que aman la petanca. Queremos hablar en torno al usuario objetivo. Podemos llamarlos amantes de los móviles. Y queremos saber en torno a las metas y los problemas dentro de ese usuario demográfico o persona. Se desea hacer preguntas para llegar a la información básica de nivel de perfil de usuario. Por lo que puedes ver a continuación y puedes pedir un nombre de usuario sobre ellos. Quieres saber un poco de sus metas, algunos de sus dolores y problemas, y luego saber cómo, ¿cómo conseguiste un apodo de estas personas para la investigación y las pruebas? Por lo general, el negocio tiene una buena idea y puede iniciarte con algunas conexiones sobre Quiénes son estas personas a las que estás apuntando y cómo encontrarlas. Y luego hay que encontrarlos en la naturaleza. Tienes que reclutar personas para que vayan a buscarlas. Entonces preguntas para que fluyan los jugos y para que la gente hable alrededor de los usuarios es, ¿quiénes son las personas a las que estamos apuntando para lograr los objetivos del producto? ¿ Qué sabes de estas personas? ¿ Cuáles son los problemas más importantes para que resuelvas para ellos? ¿ Cuáles son las metas más importantes de estas personas y qué las está motivando? ¿ Están cerca? ¿ Dónde puedo encontrarlos? ¿ Alguien puede conectarme con ellos? Todas las preguntas que he usado en el pasado con clientes. Esto es probado y verdadero y probado y debes tener un verdadero buen éxito. Pero sólo estas cuatro preguntas aquí. ¿ De acuerdo? Entonces estos son titulares de estacas, estos son tus clientes, estas son personas que son responsables si la solución que estás diseñando y los ingenieros. Esta solución y sale mal. Por lo general, son los que son responsables de ello. Entonces recuerda, estas personas pueden perder sus trabajos si las cosas no salen bien. Las personas de negocios necesitan tomar decisiones sobre presupuesto y resultados empresariales que cumplan con las estrategias e iniciativas de la empresa. Tienen una participación en esto, pero no pueden estar contigo todo el tiempo. Por eso los llamamos stakeholders porque tienen una gran participación en este proceso. Entonces, ¿por qué es importante que los identifiques? Tendrás que hacer revisiones de diseño para mostrar resultados de investigación y solución. Alrededor de cada dos semanas es lo mejor. Y estas son las personas que pueden entrar en tu proyecto e interrumpir tu lógica de diseño centrada en el usuario con sus opiniones. Debido a que pueden no confiar en lo que está sucediendo en el proyecto debido a una falta de participación temprana, llamamos a esa ansiedad de las partes interesadas. Por lo que involucrar a estas personas en el proceso, como hacer sprints de diseño, que haré otro video sobre el que se ve, ayudará a todos una línea y compartir la propiedad en información, decisiones e ideas. Cuanto más puedas involucrar a estas personas en la lógica del usuario al principio del proceso. Y no sólo tirarlos a los diseños. Cuanto menos te dirán cómo diseñar. Y construirán confianza contigo. Cuanto más confían en ti, confía en mí, más feliz diseñadora serás. Por lo que no funcionaría en un equipo. Por lo general, un PM puede llevar esta área Product Manager para usted. Si no, entonces tendrás que llevarte esto. Por lo que normalmente se te puede llamar para manejarlo. De no ser así, vaya a confiar en un gerente de producto. Pero querrás saber lo siguiente. ¿ Quién toma decisiones sobre producto y diseño? Averigua a esas personas. Esas son las personas con las que quieres hacer reseñas de diseño. Se puede preguntar quién tiene conocimientos técnicos, y nosotros podemos usarlos como expertos en materia, quién sabe mucho alrededor de la gente a la que estoy apuntando. Se quiere involucrar a esas personas que nos pueden ayudar a encontrar usuarios, identificar a esas personas. Recuerda saber cuáles son sus horarios y qué hora es buena para tener revisiones de diseño con estas personas. Y quizá quieras entrevistarlos sobre los objetivos de la empresa y el éxito de tu proyecto. A esto se le llama entrevista a las partes interesadas, y lo haces desde el principio en el proyecto. Esta es una herramienta que es igual que la investigación, igual que una entrevista de usuario, pero lo haces con los titulares de las estacas. Y tienes preguntas en torno a lo que te mantiene despierto por la noche? ¿ Cuáles son tus metas e iniciativas? ¿ A qué te parece el éxito en este proyecto? Y si haces eso, Esa ya es una herramienta que puedes usar para construir confianza con ellos. De acuerdo, vamos a hablar de riesgo y cómo mitigamos los riesgos. Entonces el riesgo es cualquier cosa que pueda bloquear, interrumpir o caer un proyecto o software que construimos. Un riesgo se puede convertir en una pregunta. Y eso te puede dar trabajo. Al responder esa pregunta, querrás saber qué hace que un proyecto sea exitoso. Pero igual de importante, quieres saber qué hará que un proyecto no tenga éxito. Después de que hayas aprendido sobre los contextos del proyecto, todos deberían tener tiempo para llamar y priorizar el riesgo. Por lo que como equipo puede empezar a enfocarse en actividades que pretenderán mitigar o resolver los supuestos más riesgosos. Por lo que normalmente la gente de negocios tiene esto y les encanta hablar de esto. Confía en mí. Siempre entienden los problemas más que tú y eres mucho más valioso cuando puedes ayudarlos. Entonces consigue las respuestas a las preguntas hablando con sus clientes. Muchas veces tienen preguntas en torno a cómo piensan las personas sobre su negocio y cómo van a usar su producto. Y puedes trabajar con ellos incluyendo el proceso de diseño centrado en el usuario e ir a hablar con sus clientes y ayudar a obtener respuestas a las preguntas que tienen. Entonces cuando el negocio es software, recuerda esto es UX y aquí es donde eres una de las armas más valiosas que el negocio puede tener. Recuerda eso, y asegúrate de que te paguen muy bien aquí porque esto no es trabajo barato. Estás resolviendo problemas de negocio para negocios que construyen software. Entonces preguntas que puedes platicar y preguntar a los empresarios en torno al riesgo es, cuáles son las cosas que pueden pasar que harán que esto falle éxito y no logren nuestras metas. Digamos que fallamos. ¿ Cuáles son las cosas que crees que causaron que falláramos? Por lo que podemos entender que antes de hacer cualquier trabajo y podemos evitar el fracaso. ¿ Cuál es lo primero que podemos hacer para empezar a mitigar estos eventos fallidos? Mitigación, es decir, ¿qué podemos cómo podemos evitar estos eventos? ¿ Qué tenemos que hacer para asegurarnos de que no sucedan? ¿De acuerdo? Y eso concluye la mayoría de los objetivos empresariales, los riesgos que los usuarios, todos los objetivos. Entonces si tienes toda esta información y a dónde puedes ir eventualmente en tu caso de estudio. Y puedes incluir esto al inicio de tu caso práctico. Estos videos, te mostraré la información y las herramientas y técnicas que te estoy enseñando y cómo meter esa información en tu caso de estudio para que veas que la tengo aquí. Está bien. Lo último que te voy a mostrar es la aplicación en la que estoy trabajando, que es una aplicación bobo t. Entonces te voy a guiar a través de este bot lo experiencia T. Y luego regresaré y te mostraré los goles. Y los objetivos del producto, los objetivos de negocio, los usuarios, y toda esa información que nos ayuda a construir esta aplicación aquí mismo. Entonces lo que pasa aquí es que tienes bokeh, vamos y nos registramos. Proceso normal de inicio de sesión reprimido registro, vemos una lista de bebidas biloba y aplicaciones. Y te puedo mostrar esta página aquí. Bastante pequeño, pero veo que me estoy desplazando hacia abajo, puedo ver todo el arco, pero t's. Una vez seleccionable con T, puedo seleccionar la dulzura regular o semi dulce. También le puedo decir que tenga tapioca grande aquí. Puedo añadirlo al carrito. Ver aquí, el carrito ahora tiene un ícono en él. Ahora puedo empezar a checar. Puedo pedir una cantidad de bot, pero puedo acudir a esta dirección. Y tú eres mi dirección, mi número de teléfono. Puedo poner los datos de mi tarjeta de crédito en. Yo puedo pagar. Y luego voy a ver pero mapa de San Francisco. Y veré a Bowtie venir a mí en la entrega. Y luego boom, mi bobo llegará. Entonces digamos que eso fue un negocio. Y al igual que el documento que está en el video que puedes descargar, puedes usar esto aquí. También tengo ejemplos basados en el barco, el negocio del equipo. Y así vamos a hablar un poco de ese negocio y cuáles son los objetivos. Entonces lo primero es el dueño del negocio y quiero vender más de un arco de 100, pero t es un día con nuestro nuevo software a la carta. Ese es el objetivo de ese software. Queremos asociarnos con un servicio de entrega existente y usarlos para entregar BO. Pero t, Queremos hacer ingresos adicionales cobrando y cuota de entrega por cada Baba t que se haga, que se entregue. De acuerdo, bueno, ¿cómo son los objetivos de nuestros productos para ayudarnos a alcanzar los objetivos de negocio? Si bien necesitamos que los usuarios se inscriban. Vamos a permitir que se seleccionen diferentes sabores de arco, pero t. Vamos a permitir que los usuarios seleccionen preferencias de leche, dulzura y hielo y preferencias de topping. Vamos a permitir que los usuarios interdireccionen números telefónicos y detalles de pago. Y vamos a mostrar actualización en tiempo real de Baba T siendo entregada desde las estaciones de creación de Bobo a las ubicaciones de los usuarios. Vamos a hablar un poco de usuarios y sus objetivos estaban hablando de bot, pero dos amantes en San Francisco. Y estas son personas que quieren que Baba t sea entregado a su casa u oficina. Ya los interesados aquí como yo mismo. Por lo que estoy disponible de diez AM a cinco PM. Entonces si quieres tener reseñas de diseño conmigo, asegúrate de hacerlo dentro de lunes a viernes en esa zona horaria. Y algunos de los riesgos que enfrentaremos al construir esta aplicación es que el equipo Bobo derrite y no se mantenga fresco al momento de la entrega debido a no ser entregado lo suficientemente rápido. Esto provoca un par de cosas. Este Bobo t puede enfermar a alguien. Y ahora tenemos a alguien enfermo. ¿ Cómo vamos a arriesgar el riesgo de que también podamos tener demasiados reembolsos por eso y empezamos a perder dinero por el costo de entrega. ¿ De acuerdo? Por lo que se puede ver, tener ejemplos de toda esta información sobre metas. Muy bien, para que eso cubra cómo establecer metas para nuestro primer video en primer paso del proceso y diseño de UX. Únete a nosotros en el siguiente video mientras aprendemos a crear una persona. Nos vemos. 3. Crear una persona de diseño UX: Muy bien, Bienvenido al siguiente video sobre cómo crear un caso práctico de UX y diseño de experiencia de usuario 101. Y el último video, te mostré cómo establecer metas. Lo siguiente que vamos a hacer en el proceso es que vamos a aprender a crear una persona y qué es una persona. Entonces sin más preámbulos, vayamos a buscar y sumergirnos en una persona. Entonces voy a venir aquí a la página web de UX honey.com. Voy a dar click en UX to goodness es el sitio web que uso con todo el material para enseñar a los alumnos en la Academia de Arte Universidad. Y por aquí veo que tengo los guiones de entrevista de usuario persona invalidados. Voy a dar click en este botón. Y tengo esta sección de la página web que describe a la persona. Entonces lo primero que voy a hacer es hablar un poco de una persona. Entonces te mostraré el marco de una persona. Y también tengo una documentación adjunta al video que puedes descargar, pero puedes usar para crear tu persona's. Entonces hablemos un poco de lo que es una persona. Una persona es un artefacto de diseño que representa un gran mercado de personas, sin importar la edad y el género. Género. En la mayoría de los casos, estas personas tienen los mismos problemas, metas, motivaciones y comportamientos. Y su primera construida a partir de nuestras suposiciones invalidadas. Antes hacemos la investigación. Cuando hacemos investigación, hablamos con estas personas, aprendemos todo un montón de vueltas a ellas. Y luego volvemos después de la investigación y revisitamos el artefacto de la persona y lo actualizamos con sus aprendizajes validados. Por lo que el objetivo de esta persona es capturar el contexto validado del mundo real, problemas, comportamientos y actividades, necesidades y metas y motivaciones que reflejen a la persona a la que estamos apuntando y ponerlo todo en un artefacto de diseño llamado el persona. Por lo que por aquí puedes ver tengo algunos ejemplos, de una persona's. Y algunos de estos ejemplos son bocetos que utilizamos. Tengo el ejemplo del marco en el que me meteré un poco más tarde. Y tengo uno lleno aquí, y tengo otro que está esbozado. Para que puedas ver, puedes bosquejar estas personas usando el marco. Una vez que te sientas más seguro de las personas que has aprendido, puedes crearlas aquí. Y déjame sumergirme un poco más en por qué son importantes. Por lo que una persona es importante porque automáticamente le introduce un diseño centrado en el usuario en nuestro proceso. Y de nuevo, el estudio UX es el diseño de la experiencia del usuario, donde vamos a construir cosas y diseñar cosas para que las personas las usen. Entonces es realmente importante que entienda quiénes son estas personas. Y antes de diseñar algo para ellos, queremos usar esta persona para ayudar a crear conversaciones y mantener conversaciones que estén enfocadas al usuario y no enfocadas a la solución y la opinión. El personaje también nos recuerda diariamente que no somos los usuarios de nuestros productos. Por lo que podemos hacer suposiciones sobre los usuarios primero. Entonces si estoy diseñando algo para, digamos, música pop coreana. Y no soy una estrella pop coreana de 16 años o pop front pan, entonces es importante para mí saber que no soy el usuario de mi producto. Por lo que uso la persona para representar a estos usuarios. También me ayuda a identificarlos cuando estoy fuera en la naturaleza, cuando estoy fuera en mis rutinas del día a día en donde viva. Puede que conozca a alguien. Y como estoy hablando con ellos, puede que me dé cuenta de que en realidad hay el donante al que estoy apuntando para mi producto. Y puede que quiera usarlos para la investigación o prueba de mi producto. Hace que sea fácil entender al usuario durante reuniones, demostraciones, y cuando las partes interesadas, interesadas de las que hablé el último video. Estas son las personas de negocios o clientes que se meten en mis reuniones. Por lo que fácilmente puedo tirar de este artefacto de diseño y ponerlo en una pared. Y podemos apuntarlo y usarlo como referencia. Porque recuerda, no somos los usuarios de nuestros productos. También actúa como medio para resolver preguntas y opiniones que están en conflicto y nos mantiene enfocados al usuario. Por lo que muchas veces cuando tenemos opiniones juntas como equipo y estas opiniones se vuelven en conflicto. Siempre podemos preguntar, bueno, ¿por qué no vamos a hablar con los usuarios alrededor de estas opiniones? Y vamos a ver cuál es su opinión. Porque los usuarios siempre tienen las opiniones que vamos a utilizar durante el proceso y nos ayuda a resolver y resolver las preguntas que tenemos. Entonces hablemos un poco del proceso de pasar de una persona invalidada y trasladarla a una persona validada. Entonces lo primero que hacemos, que aprenderás en el siguiente paso, después de que hable de esto. Es cómo crear una persona invalidada. Entonces hacemos suposiciones sobre la gente a la que estamos apuntando. Y el siguiente video hablaré en torno al aprendizaje de metas y preguntas. Pero lo que quieres hacer a continuación es crear metas de aprendizaje. Crear preguntas para lograr los objetivos de aprendizaje. Y harás investigación, saldrás y hablarás con la gente. Entonces sintetizarás y tu clúster estos temas en patrones. Después de eso, irás a validar o invalidar los problemas son supuestos que tenías. Validarás o invalidarás las metas, necesidades y comportamientos de estas personas con las que hablamos. Y luego revisitarás y actualizarás a la persona con las validaciones. Ese es más o menos el proceso aquí. Entonces vamos a aprender a crear una persona, y hablaré un poco del marco que usamos para persona's. Entonces aquí está el documento que se adjunta al video que puedes descargar y puedes usar. Y el marco de la persona se descompone en cuatro cuadrantes. Aquí vemos el primero, el segundo, el tercero, 1, cuarto 1. Entonces el primero del que hablaré aquí es el cuadrante superior izquierdo, es la persona en los contextos del mundo real. Esta es una fotografía de ellas y puedes ver, te voy a mostrar, también tengo aquí un ejemplo de la persona abierta. Se llena. Pero antes de revisar esa, Vamos a hablar sólo alrededor de los cuadrantes y el marco aquí de una persona. Por lo que también puedes usar esto para bosquejar. Se puede hacer una hoja de papel dibujada en cuatro cuadrados. Dibuja a la persona en los contextos del mundo real y escribe los comportamientos sobre ellos y las necesidades y metas. Pero antes de mostrarles algo, antes de que hagan eso, lo mejor es primero aprender alrededor para qué están todos estos cuadrantes. Entonces el de arriba a la izquierda es una persona en los contextos del mundo real. Y siempre es bueno dibujar una cotización a su alrededor. Y puedes dibujar un poco de cotización charla burbuja aquí. Y quieres tener el problema que pretendes resolver y el objetivo escrito desde la perspectiva y el contexto del usuario. De acuerdo, entonces después de tener a la persona en el contexto del mundo real, tienes aquí la burbuja de charla con el problema que pretendes resolver y el objetivo escrito desde la perspectiva del usuario. Todos ustedes, pueden tener aquí el pequeño área del círculo, ser el área donde ponen su nombre. Este puede ser su nombre de pila, que puede ser cualquier nombre que desee. Pero la costura LastName tiene que representar a este usuario. Entonces déjame mostrarte el ejemplo que tengo aquí. Entonces este es nuestro bot pero T persona. Y tenemos a Franny, y Franny se identifica como una foodie. Por lo que el nombre y apellido de esta persona es Frannie foodie. Lo que me gustaría hacer es que me gusta tener el nombre y el apellido tengan la misma letra empezando. Entonces en este ejemplo tenemos f. Y por qué eso es importante es que me ayuda a hablar alrededor de la persona cuando estoy teniendo conversaciones en torno al diseño. Entonces en este caso, puedo hablar alrededor de Franny foodie. Y también es útil cuando tengo múltiples personas's. Entonces veamos, tengo otra persona de una persona a la que realmente le gustan las bicicletas. Puedo nombrar a esa persona Billy bikes. Entonces ahora cuando estoy usando a ambas personas en una conversación, puedo decir Franny foodie, y puedo decir Billy bike. Y hace que sea realmente fácil crear filosofías de diseño centradas en el usuario dentro de mi conversación. De acuerdo, el siguiente cuadrante del que hablaré es de ellos. Para que te puedas preguntar, ¿qué información crees que es importante captar sobre ellos? Y aquí no tengo demografía porque no importa la edad ni el género. En el 90% de los casos de persona trabajan que hacemos. Siempre y cuando la persona tenga el mismo problema y metas. Podría ser una niña de 21 años, podría ser una de 31 años, podría ser melón o hembra. Y si tengo los mismos problemas y metas, eso no importa. Estoy resolviendo problemas y metas para las personas. Entonces en mi situación, busco construir una aplicación que entregue Bobo bajo demanda a las personas. Entonces, ¿crees que es importante para mí saber si una persona es masculina o femenina en este caso, si estoy entregando arco pero T para ellos, mi opinión probablemente no lo sea. Por lo que algunas de las cosas que puedes preguntarte cuando estás llenando sobre ellas en el cuadrante de personas son los ejemplos que tengo aquí. Entonces, ¿qué niveles educativos tienen? ¿Dónde crees? ¿ Dónde viven? ¿ Trabajan a tiempo completo? ¿ Tienen familia? ¿ Cuál es su rango de edad? Y no importa si son masculinos o femeninos. En algunos casos puede importar. Digamos que estoy construyendo un maquillaje. Aplicación que permite que te entreguen maquillaje bajo demanda, entonces podría ser importante llamar queen entonces podría ser importante llamar que su mayoría las hembras van a estar usando nuestra aplicación. En el cuadrante superior derecho tengo conductas y actividades. Entonces estas son preguntas que puedes hacerte cuando estás llenando esto, ¿cuáles son las actividades cotidianas de estas personas? ¿ Qué comportamientos tienen que se relacionan con el espacio en el que estás trabajando? Entonces en este caso, se puede decir comida, bebidas, o Bhabha. ¿ Con quién comparten estas actividades? ¿ Y dónde se encuentran al hacer estas actividades? El de abajo justo aquí, esto son necesidades y metas. ¿ Qué problemas tienen y por qué tuvieron estos problemas? ¿ Trabajan alrededor de sus problemas? ¿ Están resolviendo sus problemas actualmente? ¿ Cuáles son sus objetivos? ¿ Qué necesitan para lograr sus objetivos? ¿ Cuáles son sus motivaciones y qué los desencadena a tener estas necesidades? Entonces vamos a ver a la persona llena. Entonces puedes usar ese marco que te di antes y puedes llenarlo. Entonces aquí tenemos a Frannie foodie. Frannie está en el trabajo ahora mismo. Está trabajando en algo en su laptop. Está muy ocupada. Y se puede ver el problema aquí y la meta enmarcada en su mundo. No hacemos contextos y perspectiva de usuario. Entonces ahora mismo ella está diciendo que estoy tan ocupada y quiero irme y conseguir un bokeh t Cuando debería quedarme aquí y hacer mi trabajo. Entonces su objetivo, como quiere hacer su trabajo, también le gustaría tener una bombilla, una T. Pero nuestro problema es y no puede porque pidió que terminemos nuestro trabajo. Entonces vamos a aprender un poco sobre Franny foodie. Ella se identifica como una foodie. Su edad es de 21 a 35 años. Ella es educada en la universidad. Vive en San Francisco. Trabaja en una empresa de tecnología en San Francisco. Puede que tenga una familia QUIEN realmente no importa. En este caso. Tengo a Franny representada como mujer, pero en nuestro caso realmente no importa. No estoy llamando a ningún lado que haya mujer o varón. El motivo por el que es no importa con estas necesidades y metas y comportamientos y actividades. No son realmente representacionales de un género específico. Entonces déjame ir a leer las conductas y actividades de Frannie. Entonces ella está mucho en su teléfono. Ella tiene un horario muy ocupado, le encanta salir a comer con amigos los fines de semana. Siempre está buscando nuevos restaurantes a los que salir a comer. Sigue a los amantes de la comida y los blogs de comida en Instagram. Ella toma fotos de comida y comparte con amigos y redes sociales. Ella va a tiendas de café y bebidas, y usa servicios a la carta una vez a la semana. En la parte inferior derecha están las necesidades y los objetivos. Por lo que a ella le gustaría más tiempo en su día o en su día. Más oportunidades para que se entreguen mejores bebidas alimentarias en casa o en el trabajo. No quiere esperar demasiado por las cosas que necesitan en el momento. Quiere lucir buenas bebidas alimentarias a amigos. Le gusta estar en el saber con nuevas oportunidades de comida para que puedan compartir estas experiencias con amigos. Está bien, y ahí lo tienes. Acabamos de aprender un poco de lo que es una persona, por qué son importantes. Cuándo construirlas, cuándo usarlas. Ya has aprendido sobre el marco, y yo te he dado un ejemplo. También puedes descargar este archivo que te he mostrado aquí junto con este video. Y puedes usar esto para tu proyecto. De acuerdo, así que eso termina como crear una persona. Adelante y sigamos adelante. Se puede abrir el siguiente video sobre cómo crear un guiones de entrevista de usuario. Y eso te pondrá para ir a hacer investigación. De acuerdo, ojalá te vea en el próximo video. Gracias otra vez. Adiós. 4. Crear un guion de la entrevista y la investigación del usuario: Muy bien, Bienvenido a la siguiente serie de videos sobre cómo crear un caso práctico de diseño UX y diseño de experiencia de usuario 101. Por lo que en los dos últimos videos, cubrimos cómo establecer metas y cómo crear una persona. Y en este video, aprenderás a crear un guión de entrevista de usuario y las mejores prácticas a la hora de realizar investigaciones. Entonces, empecemos con cómo crear un script de entrevista de usuario. Entonces, ¿qué es un script de entrevista de usuario? Es una pauta de preguntas que llevarás contigo a medida que vayas haciendo investigación y entrevistas a la gente. Esto suele ser de tres a cuatro hojas de papel. Lo imprimirás y saldrás tu oficina o de tu casa e irás a hablar con la gente. Puede que incluso traiga gente a su oficina y a su casa, pero usará el mismo guión cada vez que salga y hable con alguien. Entonces, ¿cuál es el objetivo de la investigación? Y la mayoría de las investigaciones son nosotros saliendo y aprendiendo alrededor de las personas a las que nos dirigimos. Entonces los objetivos son los que queremos, tú eres explorador, las reacciones de otras personas. Queremos identificar y explorar sus conductas. Queremos brillar luz sobre lo desconocido. Entonces realmente significando, tendremos respuestas a muchas de las preguntas de las que no estábamos seguros al principio cuando terminamos la investigación. Entonces, ¿qué haces? Se sale, se reúne insights, y se aprende sobre las personas que nos hemos propuesto a Target. Y mientras estamos haciendo eso, estamos buscando patrones de información que nos ayuden a validar o invalidar nuestros problemas y supuestos de solución. Entonces, cuando estás desarrollando el guión, es una buena idea. Persona a tu lado. Este es el que cubrimos en el último video. Porque esto tiene mucha de la información que quieres ver es en realidad cierta o no cierta. O otra forma de poner que es que quieres o bien validar la información que tenemos sobre esta persona o invalidar esta información. Para que puedas imprimir esto cuando estés desarrollando preguntas para tu script de entrevista de usuario. Entonces aquí tengo un archivo y este archivo se puede descargar junto con el video. Y tiene a Lineamientos para un guión de entrevista de usuario adecuado. De acuerdo, entonces lo primero que quieres hacer es poner tu nombre y la fecha, y luego quieres definir tus preguntas de reclutamiento. Estas preguntas, ¿identificarás a alguien es tu persona? Te ayudarán a indicar si debes entrevistar a alguien o no. Entonces todo depende de la forma en que estas personas respondan a estas preguntas que te ayudarán a identificar si la persona a la que estás apuntando es en realidad esta persona aquí a la que hemos hablado, nos hemos propuesto apuntar. Entonces en el ejemplo bokeh T, tengo aquí una serie de preguntas que me ayudarían a identificar si esta persona es mi persona o no. Por lo que aquí tres preguntas. La primera pregunta es, ¿a menudo te entregan alimentos? ¿ Bebes 0 pero t con frecuencia? ¿ Y te consideras un foodie o te encanta la buena comida y las bebidas? Si responden a sí, a las tres preguntas, quizá quiera jalarlas y en realidad entrevistarlas. De acuerdo, Entonces lo siguiente que tenemos es que queremos identificar nuestras metas de aprendizaje, cuáles son nuestras metas de aprendizaje, metas de aprendizaje son áreas de alto nivel sobre las que queremos aprender más. Y toda esta sección de aquí es sólo para su referencia. Entonces es bueno tener esto en tu guión, pero no compartes la sección de objetivos de aprendizaje con tu gente a la que planeas entrevistar. Esa es la siguiente serie de páginas que aquí tengo puesta a la derecha. Entonces, ¿cuáles son nuestros objetivos de aprendizaje en el tazón? Pero T ejemplo. El primero es lo que están entregando comportamiento bajo demanda. Porque recuerda que estamos construyendo una aplicación bot pero T que permitirá a alguien pedir un bot pero t donde quiera que esté. Y en 10 o 15 minutos, tendrán movilidad entregada a ellos. Entonces esto no va a estar en ninguna parte del mundo. Será sólo para la gente de San Francisco. Entonces otra vez, la idea es que saquen su teléfono móvil. Viven en San Francisco, actualmente están en San Francisco. San Francisco es de siete millas por siete millas. Entonces somos mucho que realmente podemos entregar en 15 minutos en cualquier parte de la ciudad. Y ordenan algunos Mobitz II y se lo entregamos en su ubicación en un plazo de 10 o 15 minutos. Por lo que quieres aprender alrededor de la entrega actual de las personas y sobre el comportamiento de entrega. Queremos saber qué les gusta y les resulta doloroso con la entrega actual y los servicios a la carta e y Y lo siguiente que queremos aprender es ¿cuál es su arco? Pero t comportamiento. Saw mostrarte cómo usas estos objetivos de aprendizaje para desarrollar toda una serie de preguntas que se relacionan y corresponden a cada objetivo de aprendizaje. Antes de hacer eso, te mostraré la introducción que usas durante una entrevista. Por lo que cada vez que entrevistan, antes de hacerle a la gente estas preguntas, quiere compartir con ellos. Esta introducción. Las primeras nueve cosas sobre esta introducción vas a preguntar, pueden decir a tu, a tu entrevistado. número diez es tomar fotos de ellos para su estudio de caso. No les tomes fotos en los primeros cinco minutos de conocerlos. ¿ Quieres esperar hasta el final? Le preguntaron si puede tomar una foto de ellos. Entonces número uno, lo primero que quieres hacer es presentarte. Y si tienes un tomador de notas contigo, introduce a tu tomador de notas. Y se pueden decir cosas como, soy diseñadora e investigadora trabajando en el espacio de alimentos y bebidas. Por lo que introdujo el espacio en el que estás trabajando. En nuestro caso, les estoy dando el ejemplo de entrega de Bobo t. Entonces lo vamos a llamar el número de espacio de alimentos y bebidas para preguntar si está bien grabar. Tan solo con fines de toma de notas. Lo que vas a hacer es sacar tu teléfono y grabarlo con la app de audio en tu teléfono. Quédate cuanto tiempo tardará la entrevista, será de alrededor de una hora. A veces digo es que sigue siendo un buen momento. En la entrevista se llevará alrededor de un 10. el número 4 se indica el objetivo de la entrevista. Esto son cosas que digo. Se puede decir también. Tan solo digamos, solo quiero tener una discusión respecto sus experiencias con la entrega y los servicios a la carta. Además, estoy trabajando en un barco vería aplicación. Y me gustaría conocer tus experiencias omega t. Para que puedas seguir donde diga Solo quiero tener una discusión respecto a tus experiencias con y luego pop en los objetivos de aprendizaje que tengas aquí para tu espacio. Y lo mismo puedes darles los mismos contextos, decirles en qué estás trabajando. Y quieres aprender un poco alrededor de ese espacio también y cómo sus comportamientos se relacionan con ese espacio. Número 5, ley, él o ella saben, no hay nada que digan que van a ofenderte. Digamos que no hay respuestas correctas o incorrectas a las preguntas que tengo para ti. La única respuesta correcta es tu número 6. Hágales saber que pueden hacerte preguntas en cualquier momento. Número 7, hágales saber que también tendrán cinco minutos al final para cualquier pregunta. Número 8, pregúntales, ¿Tienes alguna pregunta antes de que empecemos? Y el número nueve, hágales saber que vas a empezar a grabar y pulsa el botón de grabación de tu aplicación de audio en tu teléfono. ¿ De acuerdo? Y entonces lo que vamos a hacer es meternos en las preguntas. Por lo que la primera pregunta que hacemos se llama la pregunta rompehielos. Realmente no tiene nada que ver con lo que estás tratando de aprender es solo conocerlos. lo que suelo preguntar, ¿qué haces por diversión cuando no estás trabajando? Y esto sólo rompe el hielo. Eso les hace hablar. Me hace hablar. Después de eso. Haremos el sobre ellos. que puedan hacer preguntas que suenan como las cuatro que tenemos aquí. Y puedes decir: Cuéntame un poco de ti. ¿ Cuántos años tienes? ¿Qué haces por el trabajo? ¿ Dónde vives? ¿ Y cómo es tu vida en casa? Después de que se hagan esas preguntas, puedes pasar a las metas de aprendizaje. Por lo que puedes ver aquí tengo el tema de meta de aprendizaje aquí y un tiempo pasado por sección aquí. Y les daré un ejemplo de cómo se ve eso en la siguiente pantalla a la derecha aquí. Y usaremos el ejemplo bokeh T. Por lo que las preguntas que tienes bajo cada objetivo de aprendizaje deben relacionarse con esa meta de aprendizaje y ayudarte a aprender un más a su alrededor. Entonces basado en los objetivos de aprendizaje de los que hablamos antes en la sección de objetivos de aprendizaje. Tengo un objetivo de aprendizaje que es la entrega y el comportamiento bajo demanda. Por lo que voy a pasar unos diez minutos hablando con esta persona sobre su comportamiento en la entrega de servicios bajo demanda. Entonces la primera pregunta que tengo es, ¿con qué frecuencia usas los servicios de entrega? Siguiente pregunta. ¿Por qué y cuándo los usas? ¿ Para qué los usas? ¿ Cómo se enteró de estos servicios? ¿ Alguna vez has tenido una mala experiencia al usarlos? caso afirmativo, describa detalladamente qué fue doloroso al respecto. ¿ Alguna vez has tenido unas experiencias realmente grandes? Pero los servicios, en caso afirmativo, por favor describa con detalle qué fue genial al respecto. ¿ Tienes un servicio favorito? En caso afirmativo, describa por qué es su superficie favorita. ¿ Cuándo fue la última vez que pediste algo a la entrega? De acuerdo, así que ahora pasaré a la sección de objetivos de aprendizaje de comportamiento Bobo t del guión y pasaré diez minutos con preguntas que corresponden al equipo bulbo AT. Entonces el primero es, ¿con qué frecuencia bebes Baba t? ¿ Cuándo lo bebes? ¿ A dónde vas para superar t ¿ Alguna vez has tenido una mala experiencia con Bokeh t? En caso afirmativo, por favor describa con detalle qué fue malo al respecto. ¿ Alguna vez has tenido más alguna vez una experiencia más que grande con una compañía de arco pero té? Si es así, por favor describa en detalle qué fue genial al respecto. Por lo que puede tener de tres a cinco secciones de estas áreas que llamaríamos a nuestras áreas de meta de aprendizaje con preguntas debajo de ella. Y esa es la carne de la entrevista. dedicarse la mayor parte de su tiempo. Hacer preguntas y escuchar a estas personas contar historias sobre sus opiniones o sus experiencias a estas preguntas. Cuando hayas aprendido lo suficiente para el final de tu entrevista, Ve a pasar al outro. Y tenemos que durar la pregunta. Esta es mi pregunta favorita. Aprenderás tanto de sólo esta última pregunta que tenemos. Y puedes preguntar algo que suene así. Se puede decir, basado en todo lo que te pedí, vamos a ver, te voy a dar una solución para resolver cualquier problema que tengas. Y tienes una varita mágica. Se puede conseguir cualquier cosa. ¿ Cuál es tu deseo? Y aprenderás mucho. Es una pregunta divertida. Uno de mis favoritos. Después de eso, puedes subir, finalmente puedes proceder con el outro. Entonces lo primero que quieres hacer es agradecerles tu tiempo. Hágales saber que todas las notas y grabaciones son confidenciales y sólo se utilizarán para la toma de notas. Y también las únicas personas que verán y escucharán esta grabación son ustedes mismos y el equipo. En caso de que se trate de pago, ¿realiza la transacción? En ocasiones pagamos a la gente por su tiempo con nosotros. Dígales que puede ponerse en contacto con ellos de nuevo cuando se le ocurra una solución para que pueda probarla con ellos. Y luego sólo di gracias y adiós. De acuerdo, entonces tienes este expediente. Está adherido al video. Se puede descargar y se puede utilizar para llenarlo. Puedes crear tu propio script de entrevista de usuario. Entonces ahora vamos a aprender por las mejores prácticas cuando realmente sales a entrevistar a la gente. Por lo que de vuelta en UX honey.com. Lo primero que voy, hablaré un marrón son las preguntas como la mejor manera de enmarcar tus preguntas. Por lo que solemos querer empezar con preguntas de alto nivel y abiertas. Digamos que quiero aprender sobre cómo alguien usa un iPad. Si solo empiezo, ¿para qué usas tu iPad? En realidad me estoy volviendo demasiado específico en el principio mismo. Prefiero empezar más alto nivel, más abierta. Por lo que sería mejor tener una serie de preguntas que suenan así. ¿ Cómo se involucra con la tecnología? Y alguien puede contestar, digamos , Bueno, uso mi iPhone, uso un portátil, uso un despertador que es futurista. También uso un iPad. Y luego puedes preguntarles, ¿qué es lo que más usas? Y a lo mejor dirán, bueno, usaré más mi iPad. Y luego puedes decir y. y que te cuenten párrafo o historia de por qué usan su iPhone y iPad. Pero a ver cuánta más información obtuve. Cuando hice una pregunta abierta de alto nivel. Hay zonas a las que quizá quiera volver, que es, ¿por qué tenían un despertador avanzado o un despertador futurista? ¿ Qué usan? También su iPhone 4. ¿ Se conectan sus iPhones a sus iPads? ¿ Hay alguna relación ahí? Inicio de nivel muy alto, muy indefinido. A continuación, puedes despertar conversaciones en torno a escenarios y actividades. Esto se relaciona con los objetivos de aprendizaje en torno al aprendizaje de los comportamientos de las personas. Se quiere saber de su mundo, contextos rurales que están haciendo una actividad. ¿ En dónde lo están haciendo? Quieres aprender alrededor de sus dolores y su alegría. Quieres saber de la primera vez que hacen algo en la última vez que hicieron algo igual que antes. Y el guión que teníamos esa pregunta que sonaba algo así como, cuándo fue la última vez que usaste un servicio de entrega o bajo demanda? Quieres saber sobre el mejor momento en el peor momento. Tan malas experiencias y buenas experiencias. Y quieres darles esa pregunta de lista de deseos de la que hablamos en esa última. Está bien. Estos son avisos de conversación. Entonces a veces si no sabes qué preguntar, Sólo puedes darles avisos de conversación y sonar así. Se puede decir, alguna vez has tenido una experiencia donde y para describir el escenario que piensas, quieres aprender más a tu alrededor. Y está bien si lo tienen. Si lo tienen, puedes decir: ¿ Puedes contarme la historia de principio a fin? Y luego dentro de la tienda, puedes hacer preguntas que suenan como la siguiente que es y luego lo que pasó. Te dicen algo más de información y te vas, ¿Por qué hiciste eso? ¿ O cómo hiciste eso? ¿ Qué amabas u odiabas de eso? Y si pudieras tener una varita mágica, ¿qué harías tú, cómo sería? ¿ Cuál sería tu deseo? siguiente durante la entrevista, lo mejor es simplemente sonreír. Haz preguntas abiertas, consigue sus historias, cállate y escucha. No deberías estar hablando la mayor parte del tiempo. Deberían preguntar cómo, por qué, qué, cuándo. Durante la entrevista, lo que no quieres hacer es hablar de tu producto. Estás aprendiendo sobre lo humano, no sobre el producto. Habla todo el tiempo. ¿ Hay tiempo para hablar, no el tuyo? Pregúntale a un líder. Y preguntas y nos acaban de hacer preguntas muy incompletas. No los lleves a un tema alrededor de un iPad. Deja que se metan en ello. Pregunta sobre comportamientos futuros. Puedes preguntarme, ¿me gustan los caballos? Y te diré que sí. Pero en mi realmente salir alguna vez en el futuro o en mi pase para encontrar caballos o montar caballos? No, yo no. Pero te diré que me gustan los caballos. Entonces el comportamiento futuro no es algo en lo que deberías enfocarte porque la gente no sabe lo que harán en el futuro. Ellos saben lo que han hecho en el pasado. Por lo que enfocarse en el comportamiento actual y el comportamiento pasado. No preguntes, ¿te gusta? ¿ Utilizarías mi producto? Eso no les toca. Te lo dirán otra vez, me gustan los caballos. Sí. Pero está en su comportamiento. Lo que encontrarás en su comportamiento debería aludir a estas preguntas alrededor ¿te gusta y lo usarías? Entonces no están haciendo nada alrededor de los caballos, entonces podrían no usar tu producto, pero te diré, me gusta tu producto de caballo y tal vez lo use. Pero nada en mi comportamiento te está diciendo que salgo buscando montar caballos o estar interesado en caballos. No vendas. Este no es tu momento la célula, este es tu momento de aprender de estas personas. Y no quieres muchas preguntas de sí y no. Quieres un montón de preguntas impulsadas por la historia. Entonces déjame mostrarte cómo enmarcar tus preguntas para que no termines con una respuesta sí o no. Entonces si enmarcan sus preguntas empezando por el principio de cómo y por qué, eso igualará historias. Si enmarcas tus preguntas, harías y luego terminarás con preguntas de sí y no. Está bien. Al igual que yo quería saber alrededor del iPad y le pregunté a alguien, ¿cómo te involucras con la tecnología? Puedes obtener la historia primero y puedes bucear en profundidad. Entonces digamos que le pregunto a alguien cómo se involucran con la tecnología como lo hice antes. Y me dieron su historia. Me dijeron miembro, Dijeron, Bueno, uso mi teléfono. Tengo este despertador futurista. Tengo una laptop. Yo uso un iPad. Yada, yada, yada. Deja que sigan adelante. No te sumerjas aún en el iPad. Consigue su historia y luego haz el tiempo profundo. Van a todo lo que uses, eres como ¿Cuál usas más? Mi iPad y Y luego entrar al iPad y tener un montón de preguntas de por qué y sus comportamientos alrededor de un iPad. Pero no empecé con solo ¿cómo usas tu piso del iPad o qué lo usas? Cuatro, empecé con la pregunta impulsada por la historia que era muy abierta. Consiguió su historia completa. Y puedo sumergirme profundamente en cada sección de su historia y tener un poco más de aprendizaje ahí. De acuerdo, entonces esas son algunas de las mejores prácticas a la hora de enmarcar preguntas, entrevistar, déjame mostrarte cómo será una entrevista y lo mejor. Por lo que estamos de vuelta en UX honey.com. Estas son tus mejores prácticas basadas en dinámicas de entrevistas. Entonces si tienes una dinámica de dos personas, lo que significa que hay un entrevistador y ahí estás, solo hay dos personas. Asegúrate de grabar con audio. No se puede tomar notas y hacer preguntas al entrevistado al mismo tiempo. Entonces lo que vas a hacer es solo hacer preguntas. Vas a escuchar, vas a aprender. Vas a grabar esta sesión. Y luego después de la entrevista, vas a volver y vas a escuchar estas grabaciones. Vas a rebobinar, a ir hacia adelante o rebobinar, escuchar el audio. Y aquí está el verdadero truco para hacer investigación. ¿ Vas a anotar tus insights, tus cotizaciones en tus aprendizajes o algo útil en notas pegajosas? Sí, Notas Pegajosas. Ve a conseguir un montón de notas pegajosas con diferentes colores, notas pegajosas, las vas a necesitar. Te mostraré un poquito a y aquí. Y también aprenderemos mucho más qué hacer con estas notas adhesivas en el próximo video. Por lo que quieres hacer uno dentro o uno aprendizaje por nota pegajosa escrita con un Sharpie negro. Por lo que es realmente fácil de leer desde la distancia. Asegúrate de escribir el nombre del entrevistado en la nota pegajosa para que sepas a qué color corresponde esto? Entrevisté a este individuo aquí, quiero escribir su nombre en amarillo. Por lo que más tarde cuando entreviste a más gente, sabré quién dijo qué en las notas adhesivas amarillas. Y ya verás, terminarás con lo que le llamamos cubo de usuario. Todo un montón de información que pertenece a una entrevista. Después de muchas entrevistas, lo que tendrás es algo como esto. Digamos que entrevisté a Tom y Joe y Jane. Entonces tendré tres colores. Y en cada sección tendremos la representación de insights, citas, y aprendizajes para cada persona. Y te mostraré lo que vas a hacer con esto en el próximo video. De acuerdo, Digamos que sí tienes un tomador de notas contigo. Necesitamos a los investigadores. Entonces la dinámica son tres personas. Es igual que la dinámica de dos personas. Todavía quieres tener nuestra grabación de audio en marcha. Pero esta vez vas a tener un tomador de notas. El tomador de notas sólo va a tomar notas. Simplemente van a anotar información que escuchen del entrevistado. El trabajo de tomadores de notas es no hablar. Ese es tu trabajo como entrevistador. Simplemente toman notas con bolígrafo sobre papel. Después de la entrevista. Ustedes dos se sentarán juntos y leerán juntos las notas. Y escucharán el audio juntos. Escribirás el interior de las citas y aprendizajes o cualquier cosa útil en notas pegajosas juntas. Y escribirás una perspicacia por nota pegajosa escrita con el sharpie negro. Y terminarás con la entrevista o capturado así. Entonces aquí está Tom, representado en naranja. Después de min tus entrevistas, ves que tenemos lo mismo de lo que acabo de hablar. De acuerdo, y déjame darles un ejemplo antes de terminar el video de cómo se ve esto. Aquí te dejamos una herramienta que estoy usando. Se llama tablero en tiempo real. Simplemente imita una pizarra real y te permite crear notas adhesivas. Mira, aquí tengo notas pegajosas. Puedo escribir lo que quiera aquí. Y puedo copiar notas pegajosas, crearlas tan imitas del mundo físico. Pero lo mejor es hacer esto primero en notas pegajosas físicas reales y reales. Ponlos en la pared. Por lo que tu pared debería verse así. Y puedes ver aquí he entrevistado a tres personas y tengo toda su información capturada en notas pegajosas, una perspicacia por nota. Y ahí es donde terminarás con la investigación. Y si quieres aprender qué hacer a continuación, podemos ir al siguiente video de la serie, que es cómo sintetizar los hallazgos de investigación y cómo escribir una declaración de problemas. De acuerdo, así que ahí lo tienes. Es así como se crea un guión de entrevista de usuario y las mejores prácticas a la hora de realizar investigaciones. Ojalá, te veré en el próximo video. Y de nuevo como siempre, gracias y adiós. 5. Cómo hacer la síntesis de investigación de la investigación de UX y escribir una declaración de problemas: Muy bien, Bienvenido al siguiente conjunto de videos sobre cómo construir un caso práctico de UX y diseño de experiencia de usuario 1, 0, 1. Por lo que en el último conjunto de videos hemos cubierto hasta ahora cómo establecer metas, cómo crear una persona, cómo crear una entrevista de usuario, guión y mejores prácticas a la hora de realizar investigaciones. Por lo que ojalá hayas tenido la oportunidad de salir y hacer algunas investigaciones y hablar con algunas personas, hacer algunas entrevistas de usuarios. Si no, está bien. Se puede aprender este proceso y siempre volver atrás y hacer ese tipo de trabajo. Yo estoy así en esta serie de videos, lo que vamos a ver es cómo sintetizar tus hallazgos de investigación y cómo escribir una declaración de problemas. Entonces, ¿qué es sintetizar o síntesis? En realidad es solo organizar tu información y un enfoque sistemático. Entonces lo que voy a hacer es ir a la UX.com o lo siento, sitio web de UX honey.com. Esta es la página web que doy clases en la universidad. Y si haces click en la UX 2 aquí, nos iremos a casa. Encontraremos la síntesis y el clustering. Da clic en este botón y te llevará al lado de la síntesis. Y de nuevo, como ya hablé antes, esta es la definición de síntesis. Es organizar y preparar información. Y así en el último video, te enseñé a realizar investigaciones. Y lo que vas a hacer es que has tomado la información que encontraste durante cada sesión de investigación o de usuario, sesión de entrevista de usuario. Y has tomado esas ideas y las has escrito en notas pegajosas. Una perspicacia por nota pegajosa. Usted ha creado aquí a la derecha, pero nosotros lo llamamos cubo de información de usuario. Y en este ejemplo tenemos a Tom, y Tom está representado por naranja y tenemos toda la información que encontramos perspicaz, capturada en notas pegajosas. Y ese es el proceso que llamamos síntesis. Entonces, una vez que has entrevistado, digamos, cinco a siete personas, suele ser el mejor momento para parar y hacer el trabajo de clustering. El clustering es cuando estás encontrando patrones y temas a la información que tenemos. Y estos patrones nos ayudan a identificar puntos de interés, puntos de prioridad. Y nos ayuda a validar los objetivos de aprendizaje y los supuestos que hicimos en la persona que empezar. Entonces ven un ejemplo que tengo aquí. Podemos suponer que hasta el momento hemos entrevistado a tres personas. Tenemos a Tom representado en naranja, tenemos a Joe representado en rosa, y tenemos a Jane representada en amarillo. Entonces lo primero que haces cuando te agrupas es empezar con una categoría muy amplia. Y en esta categoría tenemos es la tecnología. Y recuerda, cuando hablé en el último video sobre cómo enmarcamos nuestras preguntas. Por lo que solemos empezar preguntas no detalladas, pero muy grandes, abiertas de alto nivel. Entonces en el último ejemplo, tenía una pregunta alrededor, quería aprender sobre el comportamiento del iPad de alguien, pero no comencé con una pregunta que sonara así. ¿ Cómo usas tu iPad? En realidad empecé con una pregunta mucho más amplia, que es, ¿cómo te involucras con la tecnología? Y los entros que tengo de la gente estaban por todo el lugar. Por lo que platicaron en torno a cómo usan sus, usan sus dispositivos móviles. Usan un portátil, usan un iPad, usan un despertador realmente futurista. Algunos usan tecnologías realmente interesantes en la cocina. Pero yo especie de declaración amplia de la información en torno a la tecnología. Entonces lo que hago primero es crear un tema amplio. Entonces llamaremos a esta tecnología. Y lo haré una nota pegajosa o una hoja de papel o categoría. Imagina que este es un espacio físico y dice tecnología. Por lo general uso una nota pegajosa Ese es un color diferente a todas las notas adhesivas que he usado que representan a los usuarios. Entonces en este caso se puede, esta es una nota pegajosa más grande llamada tecnología. Y ahora voy a parar y voy a leer cada interior que tengo, basado en la investigación que he hecho y todos los usuarios que he hecho aquí. Y voy a tirar de ella come perspicacia debajo de este tema que se relaciona con la tecnología. Para que veas que estoy sacando de cada tres entrevistas que he hecho a Tom, Joe y Jane. Y estoy tirando de sus notas pegajosas en este tema llamado tecnología y poniendo sus notas adhesivas debajo de la nota pegajosa que dice tecnología. ¿ De acuerdo? El segundo que hago es una vez que tengo estas amplias categorías llenas de insights, entonces puedo ir y ponerme granular con ello. Entonces semilla. Ahora ya he escuchado de esa pregunta alrededor ¿cómo te involucras con la tecnología? La gente me habló de información en torno a cómo usan su iPhone o iPad y en este caso, cómo usan también la web. Por lo que saqué notas pegajosas que se relacionan con cada tema fuera del tema de tecnología. Y he creado temas que son más granulares, digamos iPad, iPhone, y web. Y este acto de hacer todo este trabajo es agrupar. Es así como encuentro patrones y alto encontrar temas. Eso me ayudó a ir junto con el trabajo que voy a hacer. Entonces más o menos lo que quieres hacer es que quieras pasar por toda tu entrevista y quieres subir y empezar a poner todos tus temas juntos. Y voy a desplazarme hacia arriba y mostrarte cómo luce eso. Entonces puedes ver aquí tengo a todo un montón de personas a las que he entrevistado representadas en lo que tenemos cuatro colores diferentes en ese. Tenemos azul, verde, gris, y amarillo. Y tengo la nota pegajosa rosa que representa el tema real aquí. Entonces el rosa de ahí y toda la gente que han dicho que se relacionan con ese tema debajo de él. Entonces te mostraré, Aquí hay otro ejemplo. Aquí hay toda una pared. Entonces así es como debería verse en tu espacio físico. Deberías tener un montón de notas pegajosas escritas con Sharpie. Y tienes todo un muro de información que puedes tirar de dos y mapear dos para ayudarte a tomar decisiones sobre tu trabajo de UX en el futuro. Aquí hay otra foto de eso. Y mira todo ese trabajo que hemos hecho todas las entrevistas que hemos hecho ahí. Y se puede ver que nuestra persona está aquí que creamos en la pared también. Y aquí está el proceso de que lo hagamos. Aquí hay un puñado de nosotros en una habitación juntándonos. Y aquí tenemos temas en estos tableros. Y estamos juntando información relevante que escuchamos de nuestros usuarios en estos temas aquí. Entonces se ve así. Aquí estoy yo allá con un cliente y se están divirtiendo. Estamos leyendo lo que estoy haciendo ahora mismo mientras estoy leyendo un tema, una perspicacia, lo siento, de toda la gente con la que hemos hablado, una perspicacia específica y leerlo en voz alta. Y le estoy preguntando al equipo, ¿dónde encaja esto? ¿ En qué categoría de escena o tema encaja este sitio? Y luego iré a colocarlo solo a ese tema. Entonces todo ese acto que acabo de mostrarles fue lo que llamamos la síntesis y la agrupación de insights. Entonces déjame mostrarte esto, solo muéstrale en tiempo real cómo funciona esto en realidad. Entonces tengo mi tablero en tiempo real abierto que te mostré en el último video. Se trata de pizarra digital. Y aquí están mis tres personas a las que he entrevistado, y aquí están todos los insights que tengo. Por lo que he entrevistado aquí a Naomi, Jo Han, y a Anna. Y ahora estoy listo para empezar a tirar de algunos temas aquí. Algunos van a empezar bastante amplio. Y voy a usar el ejemplo del que hablamos en el último video, que fue Baba T y una pajarita bajo demanda. Por lo que tuve curiosidad por escuchar cuando salí y entrevisté. ¿ Con qué frecuencia la gente ordena Baba t y cuándo obtienen ambas una T? Entonces ahora mismo voy a seleccionar, digamos amarillo para mi categoría. Y voy a llamar pegajoso a esto. ¿ Al igual que cuando la gente obtiene Omega t? De acuerdo, Ahí lo tienes. Entonces llamaremos a éste. Cuando la gente bebe, beau, pero t, nos ponemos 0 ocupados. Y voy a peinar a través de cada una de mis categorías. Aquí, están mis usuarios aquí y ver dónde decían alrededor ¿cuándo se superan t? Entonces tengo una persona aquí, dice que me dan omega t mayormente en los fines de semana. Entonces Laplace que aquí. Y tengo otra perspicacia aquí. Esto tiene a veces me sale omega t dos veces a la semana. Ponga eso por aquí también. De nuevo, se le ha trasladado a John. También tengo una nota pegajosa aquí que dice En una semana promedio, saturaría bokeh T tres veces a la semana. Entonces voy a ir a colocar eso por aquí. Y en esta nota pegajosa aquí, consigo 0 pero t casi cada dos días. Me encanta esa cosa. Esa es una interesante. Voy a tirar de eso por aquí. Y éste dice que normalmente hago más caminando por San Francisco el fin de semana. Y si veo un lugar bobo t, suelo detenerme conseguir uno. Ahora interesante, comportamiento interesante ahí. Entonces vamos a tirar de estos a esa categoría. Bastante bonito. Vayamos a Anna aquí. Santa tiene uno que dice que consigo 0, pero t solo los fines de semana y estoy tratando de estar sano durante la semana. Y ella dijo que yo diría que probablemente bebería Bobo t dos veces al mes. Entonces esas son ideas interesantes que deberíamos ir a parar a nuestro tema aquí. Entonces ahora tengo este tema, que es cuando la gente bebe más de t? Pero ahora estoy obteniendo algunas ideas sobre la frecuencia con la que lo beben. Entonces vamos a hacer otra aquí y sacar algunos de esta categoría en adelante. Haz éste. ¿ Con qué frecuencia La gente bebe té? Entonces esta persona lo dijo aquí, obtengo 0 pero t mayormente los fines de semana. Este dice A veces consigo omega t dos veces a la semana. De acuerdo, vamos a tirar de eso por ahí. En el sur aquí dice, suelo hacer más caminando por San Francisco un fin de semana y si veo un barco pero lugar T, suelo detenerme y conseguir uno. Está bien. Dejemos que estén en una semana promedio. Yo diría que un trago más de t tres veces a la semana. Pasemos eso a este tema. Y consigo a Bowtie casi cada dos días. Me encanta esa cosa. Vamos a poner eso por aquí. Está bien. Yo consigo Bogotá sólo los fines de semana y estoy tratando de estar sano durante la semana. Creo que eso aparece por ahí. Y mira, estamos empezando a ver un patrón aquí, gente consiguiendo Baba T los fines de semana. Muy interesante. Yo diría que probablemente bebería beau, pero dos veces al mes. Está bien. Forma muy interesante de tópico tu información que tienes. Y ese acto de poner temas y poner notas pegajosas debajo de los temas. Y eso se llama y fomenta el mapeo de afinidad. Pero realmente estamos buscando los patrones aquí. Y así ahora puedo volver y entrevistar a un montón de gente más. También he aprendido durante esta entrevista que la gente quiere a Mobitz II no sólo los fines de semana, sino que también querían en el trabajo. Se van durante el día de la semana en el trabajo y horarios y lo consiguen. Y eventualmente deberás tener algo donde tengas mucha más gente en uno de estos temas con diferentes colores. Entonces has entrevistado a más gente, digamos, haré una naranja, haremos una verde, verde claro, haremos otra, Es morado. Y eventualmente esperemos que tengas muchos más de estos. Digamos que tienes un tema aquí, lo llamaremos como Tema 1. Y muchas más ideas en torno a ese tema. Y luego tendremos otro tema aquí sobre este tema 2. Y eso es de esperar con lo que terminarás, algo así con muchos más temas por los que puedes pasar y leer toda la información de la que aprendiste. Entonces en ese punto, si regresamos y aprendemos en torno a cuál era el objetivo, era una investigación , era explorar y capturar reacciones, explorar y capturar comportamientos, y obtener muchas respuestas a las preguntas que tenías. Entonces este punto, puedes dejar de hacer investigación cuando todavía que has entendido y validado los comportamientos de las personas, tienes sus reacciones y tienes muchas respuestas a las preguntas que te propones aprender cuando primero hizo investigación. Entonces, antes de salir corriendo y empezar a diseñar y hacer soluciones, lo mejor es empezar a enmarcar sus problemas. Entonces en lo siguiente que vamos a hacer ahora mismo es ir a aprender a escribir una declaración de problemas. Por lo que tengo aquí este documento que se adjunta al video que puedes descargar. Y esto es lo que le llamamos marco de declaración de problemas. Y el marco aquí esboza un par de cosas. Y lo que hace es que nos ayude a entender y articular el problema que estamos enfrentando y que vamos a resolver. Y dentro de un problema, es importante entender quién es la persona, tener ese problema, cuál es su objetivo, y cuál es la solución que les gustaría tener que les ayude a resolver eso problema. Entonces el marco es justo como ves aquí, es que comienzas con IM, pones la persona abajo y luego pones, estoy tratando de cuál es el objetivo para esa persona. Pero no puedo porque y tú pones el problema. Y sólo si tuviera cuál es el soluto, la solución prevista, nos gustaría. De acuerdo, así que vamos a usar el ejemplo de declaración de problema de arco pero T. Por lo que hemos estado corriendo con este tema bot pero T todo este tiempo como ejemplos para ti. Y así aquí está la declaración del problema desde el punto de vista bokeh t. Entonces después de nuestra investigación aprendimos mucha gente sí quería pedir por 0 pero t del trabajo. Pero no pudieron dejar el trabajo porque agregan mucho trabajo por hacer. Entonces su problema era la R Esta persona a la que estábamos apuntando, su nombre era Franny Shruti, esa era la persona. Nuevamente, su objetivo era que intentaban conseguir movilidad en su lugar de trabajo. Pero no pueden porque tienen demasiado trabajo hacer y no pueden salir de la oficina. Nuestro problema. Si tan sólo tuvieran forma de ordenar Baba t y que se la entregaran en los próximos 15 minutos. Entonces vea cómo usa esta declaración de problema para enmarcar correctamente el contexto del problema. Y eso es más o menos. Es bastante sencillo. Se necesita mucho trabajo y mucho tiempo para llegar aquí. Pero una vez que estás en este punto, ahora puedes empezar a moverte hacia el lado de la solución, que es la pesca de arrastre, el boceto, el diseño, la fabricación, las tramas de diseño, los prototipos, y salir y hacer usuario pruebas. Por lo que en la próxima serie de videos, voy a cubrir eso. Cubriré cómo crear un mapa de viaje del cliente, que te ayudará a contar la historia en la que vas a diseñar. Vas a usar algunas plantillas de bocetos y marcos utilizados para crear esos diseños de estructura alámbrica. Te enseñaré cómo crear un prototipo clicable, cómo hacer las pruebas del usuario. Y luego una vez que todo lo hecho, harás esa base de un sistema de diseño, que está creando todos los elementos de diseño. Cómo aplicar el diseño visual a tu alambrada. Mejores prácticas a la hora de diseñar tus currículums y el esquema de estudio de caso. Genial, Así que ahí no lo hemos hecho. Te veré en la próxima serie de videos y siempre tengo gracias y adiós. 6. Crea un viaje del cliente: Muy bien, bienvenido de nuevo a cómo diseñar un caso práctico de UX y una clase de diseño de experiencia de usuario uno a uno. Acabamos de terminar toda una serie de videos. Ya hemos aprendido a crear y establecer metas. Cómo crear una persona de diseño, cómo crear un script de entrevista de usuario, mejores prácticas a la hora de realizar investigaciones. Cómo tomar todos sus insights de investigación y sintetizó los hallazgos. Cómo escribir una declaración de problema. Y ahora hoy nos vamos a centrar en cómo crear un mapa de viaje del cliente. Por lo que voy a dirigirme al currículum de la página web, un sitio web que uso para mi docencia universitaria. Tengo dos clases. Enseño serotipos a y2, x2, y enseño diseño avanzado de experiencia de usuario, que llamamos UX S3. El mapa de viaje del cliente es algo que enseño a los estudiantes avanzados. Entonces voy a dar click en Y2, X3. Y aquí están todos los métodos que imparto para esa clase. Y vamos a desplazarnos aquí abajo para encontrar los mapas de viaje del cliente aquí mismo. Entonces donde dice mapas, voy a dar click en eso. Y aquí es donde iniciamos nuestra información de mapa de viaje del cliente. De acuerdo, entonces, ¿qué es un mapa de viaje del cliente? Se trata de un marco que nos ayuda a entender el viaje actual o futuro que sigue nuestro cliente. Por lo general, cuando estás modelando el estado actual, estás modelando el problema actual. Y suele ser un escenario que es la persona o el usuario objetivo está enfrentando. Y cuando estás modelando el estado futuro, normalmente estás usando el viaje del cliente para modelar la solución futura en la que vas a diseñar. Entonces, ¿cuándo lo usas en el estado actual? Al principio, si tienes un experto en dominios o sabes mucho de tu usuario, podrías hacerlo. Podrías hacerlo hacia el final de tu investigación una vez tengas suficiente información sobre el usuario y su problema en tu usualmente modelando el problema. Cuándo usarlo en el futuro viaje es después de tu investigación, has aprendido todo un montón sobre la persona a la que apuntabas sus conductas. Y se puede utilizar este modelo, el mapa de viaje del cliente para modelar un concepto o unas soluciones validadas. Por lo tanto, de nuevo, por lo general estás modelando el escenario de la solución. Por lo que aquí tengo el ejemplo. Entonces tengo un ejemplo en la página web y uno que se llena también. Entonces voy a pegarle a Illustrator. Y tengo un documento ya adjunto a este video que esboza el marco que puedes descargar y usar. Y déjame caminar por este documento. Por lo que aquí en la parte superior tenemos el recorrido del cliente. Por lo general puedes escribir aquí tu estado actual o futuro. Te mostraré el ejemplo que tenemos aquí a la derecha. Aquí en un segundo. Y lo que llamamos a estas filas aquí llamamos a estos carriles de natación. Y así el primer top que tenemos es un entorno físico. Entonces nos estamos preguntando, ¿dónde está el usuario durante cada acción que realizan durante su viaje? Entonces este es el entorno físico. Podría ser como si estuvieran en el autobús. Podría ser podría ser en la oficina. El siguiente carril de natación por debajo de los entornos físicos es la acción del usuario. El clave. Esta es la acción de los usuarios que pasan. Y el de abajo que se llama el frente del escenario. Estas son las interacciones que el usuario puede ver. Entonces piensa en cuando estás viendo una actuación teatral, Hay un montón de cosas que ves en el escenario que está sucediendo. Pero se puede ver la siguiente, la etapa de respaldo, esto está detrás de la cortina. Entonces cuando estás viendo una actuación teatral, Hay mucho trabajo en marcha detrás del escenario para asegurar que el frente del escenario vaya realmente de acuerdo al plan. Por lo que este carril de natación etapa de respaldo aquí se llama el interior se llama la parte trasera del escenario, y son las interacciones que no se pueden ver. El usuario no puede ver estos. Y el último aquí, el de apoyo en la parte inferior se llama carril de natación de apoyo. Y estas son interacciones de soporte podrían ser correos electrónicos, mensajes de texto, notificaciones, ok, así sucesivamente, todas esas series de videos que hemos hecho, hemos mirado el ejemplo siendo el servicio de entrega en línea Mobitz II de pedidos. Esta es una aplicación que vamos a construir aquí en un par de videos más. Y he utilizado este marco de viaje del cliente para modelar todo ese viaje que el cliente va a seguir durante el pedido de un bobo t en línea. Y este es el viaje para el que vamos a diseñar también en los futuros videos. De acuerdo, así que voy a acercarme bastante apretado y desplazarse por ahí para que puedas ver. Entonces lo que he hecho aquí es que he empezado con el actual objetivo estatal cual se ordena Bogan ver en línea para ser entregado a la oficina. Entonces, en realidad, ese no es el estado actual. Esperemos que hayas cogido eso. Vamos a cambiarlo. Este es el futuro objetivo estatal aquí porque estamos diseñando la solución en este momento. Por lo que el futuro objetivo del estado es que queremos pedir BY Bowtie en línea para ser entregado a la oficina. Está bien. Por lo que tenemos nuestro nombre de usuario o usuario era Franny foodie. Ella quiere pedir un Mobitz II en la oficina. Y luego el estado actual ella no puede. Porque tiene demasiado trabajo que hacer y no puede salir de la oficina. Por lo que buscaba la forma de ordenar el botón Bot y que se lo entregue en su oficina. Entonces esa es la aplicación que vamos a construir. Y aquí está el viaje del cliente que Franny foodie va a seguir modelando aquí mismo, para que puedas ver. Está bien. Entonces Frannie foodie está en la oficina. Está en una computadora. Ella va al sitio web aquí, sea cual sea el sitio web, nombrar es, podemos decir que es poco endulzado. Ella ve una página de marketing con mensajes promocionales. Ahí hay ubicaciones de entregas, vistas como mapa para que pueda ver los horarios de servicio y donde entregarán Bobo. Sólo en San Francisco, horarios de servicio son de ocho a nueve en punto. Y ve un botón que dice, ver menú. El backstage aquí tenemos una base de datos back-end. Esto dará los tiempos de servicio y las áreas de entrega que están actualizadas a los horarios de servicio y áreas de ubicaciones más recientes. Permítanme añadir un ahí. Entonces lo siguiente que va a hacer aquí en esta acción de usuario, mientras mira el menú bot, bot team, está en nuestra página web en una computadora en este momento en su escritorio en la oficina. Ella puede seleccionar de diferentes tipos de pajaritas. Algunas bebidas, fotos de toppings, precios, y botón Agregar al carrito. La base de datos back-end detrás del sabio. Sage actualizará toppings fuera de stock y tipos T para que no tengamos un cierto topping. O T will, lanzará un símbolo agotado en el frente del escenario. De acuerdo, Lo siguiente que hace Franny foodie es que selecciona el arco pero T y sus coberturas. Por lo que de nuevo, está en la página web en su escritorio. Ella selecciona y agrega al carrito té de leche con Baba grande, mediano, dulce, y agrega un nombre a la etiqueta de taza. Por lo que esto, puedes pedir la cantidad de dulzura que te gustaría en tu propiedad. Y así hacemos pedidos múltiples. Es importante que pongas el nombre en la copa. Entonces si tenemos cuatro órdenes, Ababa T, nombrará a las personas que se pueden poner los nombres de las personas para cada sabor y especialidad de pedidos. Ella ve el botón Agregar al Carrito y continúa al Agregar al Carrito. En este punto tenemos la base de datos back-end que almacena la información de bebidas y almacena el nombre de las etiquetas de copas. De acuerdo, el siguiente paso que hace Franny foodie es que revisa el pedido. Ella ve las selecciones de té de leche, el precio total, los impuestos, y la cuota de entrega. Y ve un botón que dice checkout. En este punto, el back-end, estás detrás del escenario, calcula el impuesto sobre las ventas y calcula la cuota de entrega es una Estimación. ¿ Crees que ya tienes algo en pierna de apoyo aquí? Está bien. Ahora, ella Abuelita tiene que iniciar sesión. Entonces ve ese formulario de correo electrónico, un formulario de contraseña. Ella puede iniciar sesión a través de Facebook, puede iniciar sesión a través de Google. Ella ve un botón que dice iniciar sesión. En este punto esa base de datos back-end confirmará que la información de inicio de sesión es correcta. Tire la información del cliente como nombre y dirección de entrega que se ingresó en la última pantalla y guárdela en el perfil de esa persona en el perfil del viernes. De acuerdo, lo siguiente que vamos a hacer aquí por Frannie es que va a confirmar su vestido de entrega y los detalles del inter pago. Entonces en el entorno físico, ella sigue entrando das consiguió una computadora, pero ahora saca una tarjeta de crédito. Cuando ve la dirección de entrega, ve la tarjeta de crédito, Florida, ve un tiempo de entrega estimado. Ella ve un total de costos, un desglose de impuestos y cuota de entrega. Ella ve un botón que dice Hacer Orden. Y de nuevo en el backend, vamos a calcular el impuesto sobre las ventas. Vamos a calcular la cuota de entrega real porque ahora sabemos que la propiedad confía en que vamos a entregarla. Está bien. Entonces vamos a tener el pago confirmado es el siguiente paso que va a seguir ese amigo. Entonces ella ha ingresado toda esa información, ella pone el orden. Ella ve que el pago fue exitoso. Ella ve el tiempo de entrega que va a tomar para que la maestra bokeh su oficina. Ella ve la dirección de entrega. La base de datos back-end aquí confirma el orden de información de pago para las tiendas de negocios el pedido del usuario en una sección de perfil de usuario. Por lo que esas frénicas y retroceden a ver registro histórico de sus pedidos y se envía un recibo al correo electrónico. Entonces recuerda que esta última pista aquí fue pista de apoyo. Por lo que el viernes va a recibir un correo electrónico del recibo de su compra. Y esto también creará los pedidos y detalles para el negocio para que el negocio pueda empezar a trabajar en su omega t. Ok. Por lo que el siguiente paso es que Franny está esperando en nuestra oficina que Bobo t sea entregado en su ubicación de oficina. Entonces la etapa final, nada está pasando realmente. Ella sólo está esperando. Pero detrás del escenario hay mucho trabajo pasando en Billy el mensajero en bicicleta. Tiene que empaquetar el Bobo t Informa al sistema que se está entregando la t y se imprime alguna vez. También cuenta con el sistema enviar un texto, enviar una notificación por correo electrónico de la ETA, la hora estimada de llegada. Para que ETA se presente como un texto y un correo electrónico a Franny que estamos en camino y le da un tiempo estimado de cuándo le será entregado su arco pero t. Billy cabalga hacia la puesta de sol y va a entregar este Bobo T en su bicicleta. De acuerdo, entonces ahora vamos a ir a la siguiente acción aquí es que se está entregando el Bobo t. Por lo que el entorno físico es que se puede ver la oficina frenética y ver a Billy, ella puede ver la bombilla, una T un recibo también. Y yo estoy detrás del escenario, el mensajero en bicicleta, Billy, y forma el sistema de que se completó la transacción. Por lo que ahora Franny recibe un impuesto y un correo electrónico agradeciéndole por su servicio. Y este sería un buen lugar también para darle un cupón por una pelea, tal vez un $5 de descuento en el siguiente pedido. Está bien. Entonces ahí no lo has hecho, hay un mapa de viaje del cliente. Te voy a mostrar otra versión de un mapa de viaje del cliente. Y en realidad puedes usar cuando haces pruebas de usuario o cuando estás con tu persona objetivo o con tu cliente. Entonces voy a volver aquí a la UX, cariño. Y vamos a hablar un poco del emotivo mapa de viaje. De acuerdo, entonces, ¿qué es un emotivo mapa de viaje del cliente? Este es un marco que te ayuda a entender el viaje actual por el que atraviesa tu cliente desde un punto de vista emocional. Normalmente lo hacemos con más frecuencia, no hacia ese futuro estado. También puedes hacerlo durante un estado actual. Y tiendo a hacer esto una vez que hayamos diseñado, ya construido en un flujo de trabajo de nuestros diseños construidos. Entonces aquí está el ejemplo aquí en la página web que puedes encontrar. Pero también te he dado el ejemplo en el mismo archivo que puedes descargar con el video también. Por lo que es bastante similar al mapa de viaje del cliente. Tenemos los mismos carriles de natación. Tenemos el entorno físico aquí en la parte superior, si el usuario acciona aquí. Pero en este punto Delaney que tenemos a continuación son descritos por las emociones. Por lo que se puede ver este carril aquí está descrito por la emoción. Tenemos un estado normal. Tienes un poco de estado vacilante. Tenemos un estado confuso. Tienes un estado fronterizo y nosotros tenemos uno que está abierto. Entonces lo que puedes hacer es imprimir este documento. Puedes ir a probar tu aplicación, y puedes hacer que la persona llene cualquier información que sintiera aquí en este punto, pueden dibujarla con un lápiz y un Sharpie. Entonces permítanme darles el ejemplo de cómo se ve esto en el servicio bokeh t a la carta que tenemos. Entonces recuerda a estas alturas ya he diseñado algo. He ido con mi cliente. Soy usuario probando este diseño con ellos. O el diseño ya vive en la naturaleza. Y encontré a alguien que lo usó. Y fui y platiqué con ellos y quería saber en qué estaban sus estados emocionales durante toda esta experiencia de usuario. Y realmente lo que estoy tratando de saber es, cuáles son la alegría para partes de la aplicación y cuáles son las partes del dolor. Por lo que puedo enfocarme en trabajar en mejorar No sólo las cosas que están pagando por la app, sino las, las cosas alegres y continuamente asegurar deleite para nuestro cliente. Entonces es el mismo viaje más o menos que describimos antes. Strand conocido va al sitio web o a la aplicación, gee, mira un menú de arriba. Ella selecciona tanto una t, etcétera, etcétera. Pero este punto solo puedes hacer que el usuario dibuje en una línea cómo se sentían durante toda esta experiencia después de que la atravesaran. Entonces podemos ver que Franny aquí, ella empezó bastante normal Japón en la página web. Busca en los menús, te emocionaste mucho y te preguntamos por qué. Se emocionó y le gustó mucho ver todas las opciones de movilidad. Tienes que seleccionar algunas opciones de movilidad y coberturas. Todavía bastante emocionado por ahí. Revisemos el orden. El Senado era bastante normal. Boom, llegó a iniciar sesión. Ella no era cliente existente. Ella se sintió realmente frustrada aquí porque ella olvidó su contraseña. Por lo que tuvo que pasar por un flujo de contraseña olvidada, eventualmente convirtiéndose cada vez más una vez que consiguió su información allí. Está bien. Ella confirmó su vestido de entrega e ingresando los detalles del pago, por lo que eso fue bastante normal. Una vez fue a confirmar el pago, dijo que se emocionó mucho porque iba a suceder. Y luego dijo por aquí que se aburrió bastante porque tuvo que esperar más de lo que se esperaba. La aplicación le dijo que estaría en su oficina en diez minutos y en realidad terminaría tardando unos 15 minutos. Um, así que ella dijo que estaba bastante aburrida ahí. Pero entonces otra vez, lo que consiguió su arco, pero realmente le gusta 0, pero t es realmente bueno. Ella se emocionó mucho aquí. Entonces así es como puedes usar este método durante una sesión de prueba de usuario o después de una aplicación en la naturaleza. Um, voy a ir a mostrarte otra cosa que puedes ver esto usado. Entonces voy a ir a mi página web aquí y te voy a mostrar un caso de estudio que he construido o reseñas. Esto asegurará ese sitio web. Voy a ir a mi página de trabajo. Haga clic en el caso de estudio ANOVA. Y vamos a meternos demasiado en lo que es la aplicación ANOVA. Eso se puede desplazar aquí abajo y se puede ver cuando salimos probando o probando un flujo de trabajo en la aplicación duda hasta una cocina SUV. Este es un dispositivo que cocina en tu cocina que patea. Estás usando agua, como puedes ver aquí. Y este es el viaje que atraviesa la gente. Van en la pantalla de inicio, hacen un montón de actividad en. Se van al dispositivo y en realidad empiezan a preparar comida y cocinar su comida. Y sólo queríamos saber cómo se sentían durante este viaje. Para que veas cómo lo he usado también en casos prácticos. De acuerdo, Así que tienes este archivo aquí adjunto al video, y puedes sentirte libre de descargarlo y usarlo para tu beneficio. Y ahí lo tienes. Así es como crear un mapa de viaje del cliente. Enfriar como siempre, gracias por ver y quedarse para el siguiente video, que es esbozar plantillas y marcos. Gracias otra vez. Adiós. 7. Dibujo conceptos de boceto y marcos de bocetos de UI: Muy bien, Bienvenido al siguiente video y cómo diseñar un caso práctico de UX y diseño de experiencia de usuario one-on-one. Por lo que hemos cubierto mucho terreno hasta ahora. Hemos aprendido cómo establecer metas, cómo crear una persona, cómo crear un script de entrevista de usuario, mejores prácticas al realizar investigación, cómo sintetizar hallazgos de investigación, cómo escribir un problema declaración. En el último video, cubrimos cómo crear un mapa de viaje del cliente. Y ahora vamos a mirar a esbozar plantillas y marcos. Entonces en este punto, la etapa que hemos hecho la investigación, validamos un problema, entendimos un poco de cómo esa solución y tiende a resolver el problema. Y ahora vamos a esbozar ideas y conceptos en torno a cómo resolver ese problema. Entonces voy a ir a la UX honey.com. Voy a ir a X3. Esta es la clase avanzada que imparto en la universidad. Y desplácese hacia abajo, aquí está todo el contenido que tenemos para la clase. Y voy a entrar aquí en amarillo los conceptos y marcos de bosquejo. Y cuando presiono este botón, y se puede ver tengo un poco de un, alguna información útil. Cuando dibujas como grupo. Sólo recuerda que se trata de divertirte. Es por ahí alentando ideas salvajes. No nos estamos juzgando. Nos diferenciamos del juicio. Nos gustaría construir sobre las ideas de los demás. Vamos a mantenernos enfocados en el tema. Queremos ser visuales y conceptuales cuando estamos hablando del trabajo del otro, o estamos haciendo una crítica o compartiendo trabajo. Una conversación a la vez es mejor e ir por cantidad. Se trata de ir muy amplio y tratar de conseguir tantas ideas como podamos. De acuerdo, Así que déjame hablar del primer concepto que tenemos, o del marco de bocetos y plantilla que tenemos, que se llama el prompt de valor. Y lo que tienes aquí es dibujar a una persona en el espacio problemático aquí. Y junto a ella tienes una persona en el espacio de solución aquí. Entonces parece algo así. También tengo esto en un documento adjunto al expediente aquí que voy a pasar y revisar con ustedes aquí en un segundo. Te voy a dar las razones por las que usan estas plantillas y para qué sirven. Por lo que la prop de valor es una forma rápida de colocar tu persona aquí a la izquierda en el espacio problemático. Y luego hacer la solución conceptual propuesta aquí a la derecha. Y la solución propuesta debe ser conceptual y no incluye flujos de trabajo de IU. Entonces esto es alrededor de generar tantos conceptos como puedas. Entonces si pasamos al documento que está en el archivo aquí, se puede ver que voy a usar el mismo escenario y aplicación Bobo que hemos estado llevando a lo largo de todos los videos. Y tengo la plantilla aquí para el valor prop aquí. Entonces de nuevo, tenemos a la persona en el espacio problemático a la izquierda, y tenemos el espacio de solución aquí a la derecha. Y les daré el ejemplo que pertenece a la experiencia Bobo T que planteamos antes. De acuerdo, entonces aquí tenemos a Franny foodie. Esta es la persona a la que estamos apuntando su en su espacio problemático ahora mismo si recuerdas el problema para cualquiera estaba en el trabajo, yo quería conseguir un Mobitz II, pero tenía demasiado trabajo para salir de la oficina e ir a agarrar un barco con t Así que ella está aquí, ella está en su computadora y tu scout cubículo funciona. Y quieres usar una burbuja de pensamiento o una burbuja de altavoz aquí para enmarcar el problema. Entonces aquí está el problema como estaba, tenía un arco pero t donde no puede salir de la oficina. Entonces cuando haces la persona o la solución aquí a la derecha, lo mejor es iniciarla. Y justo con el nombre del concepto. Se puede ver aquí con abierto ahora. Y luego escribe lo que el usuario puede hacer con este concepto. C puede ver aquí en la parte inferior. En el fondo está que Franny puede pedir omega t a la carta. Por lo que puedes ver aquí ahora tiene un teléfono en la mano y puede ver un mapa, y puede ver el té Bobo llegando a su ubicación. Entonces el nombre conceptual aquí que escribimos se llamaba Bobo ahora. ¿ Y qué puede hacer ahora con Bobo? Ella puede pedir movilidad bajo demanda. Cosas bastante simples. Entonces lo que puedes hacer es imprimir este documento como yo tengo aquí. Puedes hacerlo como sesión grupal y puedes dársela a tus compañeros. O simplemente puedes usar este boceto tantos conceptos como puedas llegar y luego elegir tu favorito. Si haces esto como un entorno de grupo, lo que puedes hacer es que puedas tener los bocetos de todos, muchos conceptos como puedan, ponerlos en la pared y luego revisar los conceptos juntos. Y todos pueden tomar tres votos y pueden votar sobre sus conceptos favoritos. Y entonces ojalá tengas un claro ganador con el que puedas seguir adelante. De acuerdo, vamos a ver otro marco de bocetos en plantilla. Uno que implica un poco más de diseño de interfaz de usuario. Entonces este se llama flora, y esta es una forma rápida de bosquejar para diferentes diseños de pantalla o escenarios sin quedar atrapado en las malas hierbas son los detalles sobre la solución o la solución de Alice funcionará. Aquí se puede hablar a través de los detalles si no se les puede caber. Entonces lo que tenemos es que tenemos aquí el boceto donde hay cuatro cuadrantes y cada cuadrante aquí, la parte superior izquierda es el inicio. Por lo que pones al usuario y a los contextos con el objetivo en mente. Tienes la acción del usuario aquí a la derecha. Tienes otra acción de usuario aquí en la parte inferior izquierda. Y luego tienes el resultado cuando se logra el objetivo. Entonces vamos a ver esto en los mismos contextos de la aplicación Bobo t on-demand. Aquí tengo el documento esto se llama los cuatro arriba. Está adherido al video que tienes. Puedes descargarlo, puedes imprimir esto. Y se puede hacer el mismo tipo de bocetos que hicimos para la prop de valor. Yo, te mostraré el ejemplo de cómo usar esto en el escenario bokeh T. Por lo que puedes ver aquí tenemos a Franny foodie. Ella está de nuevo en la oficina. Y su objetivo en mente aquí es que desee tener un sobre T ahora mismo, pero está afuera, no puede salir de la oficina. Por lo que la acción de usuario uno es, se puede ver un poco de interfaz de usuario. Ahora, estoy seleccionando tanto en t que le gustaría y luego acción de usuario a aquí se puede ver como puede ver en tiempo real cuando Bobo llegará a la entrega. Por lo que tiene un pequeño mapa. Eso se puede ver con el tiempo aquí. Y luego se puede ver el objetivo logra el resultado. En realidad está en la misma área de trabajo que empezó y sigue trabajando. ¿ Pero líquidos en la mano? Sí, lo es. Ella tiene baja pero T y ahora está feliz. Cosas tan bastante simples para el bosquejo aquí. Y de nuevo, se pueden encontrar estos dos archivos adjuntos al video. Digamos que adelante y úsalos, úsalos en grupos. Si haces los cuatro arriba en la configuración de grupo, haz lo mismo de lo que hablamos antes. Que todo el mundo imprima esto, dibuje hacia fuera. Los pondré en una pared. Votar el mejor. Esperemos que haya un ganador y puedas avanzar en esa dirección. De acuerdo, bastante simple. Ahí no lo has hecho, hay plantillas de bocetos y marcos para ayudarte a esbozar la solución. Y luego arriba a continuación vamos a aprender a crear un diseño de estructura alambrada y a crear un prototipo clicable a partir de ese wireframe. Para que puedas salir y hacer pruebas de usuario. De acuerdo, como siempre, gracias por ver y nos vemos en el siguiente video. Adiós. 8. Crea un diseño de la Wireframe con Adobe XD: Muy bien, bienvenido de nuevo a la siguiente serie de videos sobre cómo crear un caso práctico de diseño UX y el diseño de experiencia de usuario no funcionará. Entonces, hasta el momento cubrimos en todo un montón de videos sobre cómo establecer metas, crear persona's creando un guión, las mejores prácticas al realizar investigación en una declaración de problemas de hallazgos de investigación sintetizada, cómo crear un mapa de viaje del cliente. Miramos el último video, hicimos bocetos y plantillas y marcos para conceptos. Y entonces ahora vamos a tomar esos conceptos y vamos a una alambrada deshonrada. Vamos a entrar en lo que un wireframes. Un wireframe es un diseño de baja fidelidad, tiene como objetivo validar el contenido, usabilidad y flujo de trabajo de una pieza de software. lo general es de color escala de grises. Y la razón por la cual es, como quieres que los usuarios reaccionen ante el contenido y el flujo de trabajo, no colores e ilustraciones y campanas y negocios. Hace que sea fácil para los usuarios darte retroalimentación honesta porque no parece que hayas invertido mucho tiempo en ello. No tiene demasiado tiempo y todas las campanas y silbatos invirtieron en ello porque puede que te equivoques. Entonces, ¿por qué invertir mucho polaco e ilustraciones y buen trabajo si sabes que vas a ser algo. Entonces realmente no está validado todavía. Una vez validado, puedes agregar todas las campanas y silbatos y también hace que sea realmente fácil iterar cuando el diseño es de baja fidelidad. De acuerdo, vamos a ver algunos ejemplos aquí de lo que hace una buena estructura de cable y no una buena estructura de cable. Y hablaré un poco de la columna de la izquierda y la de la derecha. Y luego también te mostraré ejemplos de lo que hace uno bueno. ¿ De acuerdo? Por lo que un buen alambrón tiene justo la cantidad correcta de fidelidad. Y al lado siguiente, no parece un producto final. Empezar a doblar. Una buena alambrada no tiene copia estatal, lo que llamamos ley Loren Ipsum. Tan bueno usa copia falsa. Un buen wireframe utiliza fotos reales e iconos rápidos, lo dejaremos. No es bueno. Uno sólo utiliza cuadrados grises que indican sodios. Buena wireframe resalta el contenido. No tan bueno wireframe se ve descuidado y no estructurado. Un buen wireframe valida el flujo de trabajo y el modelo de interacción. No tan bueno wireframe es todo es uno. Y no reutilizan componentes del modelo. Y el material tiene buena colocación para la ubicación del usuario. Esto es paginación, lo llamamos. El usuario no tiene idea de dónde están. No hay idea de ubicación. Utiliza buenos patrones de diseño y dispositivo. Los paradigmas de dispositivos son diferentes interacciones que se crean para diferentes dispositivos. Por lo que la cintura como pieza de software puede actuar en web. Puede actuar de manera diferente en el móvil debido a los más pequeños. Entonces esos son lo que llamamos paradigma de dispositivos. Y no tan bueno Uno tiene detalles de interacción que no se cumplen con la lógica. Podría wireframe. Está dentro de los detalles y valida las micro interacciones. Y también buena igual de alto nivel y no cuenta a través de los detalles como estados. De acuerdo, vamos a ver algunos ejemplos ahora. ¿ Qué hace visual el buen ejemplo y no uno bueno? Entonces aquí a la izquierda buen ejemplo tiene un flujo de trabajo claro de ubicación y contenido y resalta el contenido para que puedas ver dónde están los usuarios aquí, botón activo aquí. Se ve el viaje al que voy a ir. Como buen resaltado, resaltando contenido, y mirando los que están bien. No sé qué diablos estoy mirando, mira todas las cajas. Las barras cuadradas son confusas como ¿con qué son estas plazas? ¿Líneas a través de ella? Por lo general, como diseñadores, dibujamos esto como un boceto rápido para mostrar que se trata de un refresco, pero eso no le transmite contenido. Se pueden ver estas casitas grises, estas pequeñas líneas aquí. Esa es una representación del café. Pero no lo es, no lo sé, alguien usuario cuando lo estoy mirando puede que no se parezca a mí. Parece cajas grises. Bueno, no puedo ir al siguiente. Exponent es un buen ejemplo de mezclar lo repetitivo mientras da contextos Soto. Y tienen un montón de fotos para mostrarte. Oye, aquí tienes un par de fotos reales que vamos a usar. Y luego reutilizan el mismo Soto adelante. Por lo que está mostrando repetición. Pero no son solo todas las fotos parpadeantes en realidad te muestran algunas fotos reales aquí. Creo que es lindo. El siguiente uno, el contenido no está claro. Vea toda la repetición aquí. No sé qué estoy mirando alrededor de la vuelta. Sé que estoy viendo fotos aquí. Se ve como cajas otra vez con línea. Por lo que no son distintivos. Otra. Se mete en los detalles y en las Micro Interacciones. puedes ver he comprobado lo que llamamos acordeón y mucha información en tan solo una de estas pequeñas coordenadas aquí, esa casilla con la que puedo interactuar. El de la derecha no está mostrando en nuestros detalles. Nuevamente, no sé cuál es el último. Un buen uso de alineación, cuadrícula y espacio negativo. Usted ve aquí. Es una alineación suceden. Cualquiera de los dos, No hay buen uso del espacio negativo, todo está lleno y la simetría yerno a él. Está por todo ahí. Parece una línea aquí a las rejillas de columnas. Y simplemente no está realmente armado bien. ¿ De acuerdo? Por lo que antes de saltar a la alambrada, les voy a mostrar el boceto que hicimos en el último video. Entonces si recuerdas, tu app, y es un servicio a la carta que permite esta persona es nuestra persona obtenerla a través de una aplicación móvil. Al temblar, abre la app, puedes ver más de dos sabores, puedes seleccionar uno. Ella puede hacer la compra, verla en tiempo real siendo entregada a ella. Y ahora está de vuelta en el trabajo. Ella ha hablado. Entonces ella está emocionada. El pedazo de software que vamos a utilizar para construir esto es lo que se llama Adobe XD. Entonces se ve así. Puedes ir a descargarlo. Tienen tres juicios en ello. Se trata de una herramienta realmente sencilla y fácil de usar para construir pantallas. Y también construyó prototipos, los cuales entraremos en el siguiente video. Pero primero les voy a mostrar cómo construir aquí un par de pantallas, agregando algunos símbolos, cómo hacerlo botón, y solo un poco te daré una visión general del problema. Entonces lo primero que puedes hacer es crear un nuevo un archivo con solo hacer Command nuevo. Si estás en un teclado o en un PC, es control para max es comando y control y tener diferentes dispositivos que puedo usar. Puedo usar un iPhone 6, 7, 8. Tengo un iPad aquí. Puedo hacerlo bien, y también puedo hacer un tamaño personalizado. Si no sabes usar esto, ya tengo tutoriales. Dormir. La ciencia sugiere. Si no has usado esta herramienta para ir a ver algunos tutoriales ya, Es realmente fácil de usar. Por lo que se puede ver aquí, ya he construido el alambrado para la aplicación. Y déjame mostrártelo video realmente rápido para eso. De acuerdo, Así que mi charla mientras pasamos por todo ese flujo de trabajo aquí, y te enseñaré a construir una pantalla. Por lo que más o menos iniciamos sesión. Vemos la primera pantalla, el inicio de sesión de la aplicación para mi contraseña de correo electrónico. Stan sí se inscribirá. Podrían ver todas las selecciones de Bogotá aquí puedo desplazar nota la barra de pestañas inferior permanece fija, significa que no se mueve en la parte inferior. Presiono Agregar. Ahora puedo meterme un poco más de complejidad. Puedo abrir el desplegable, seleccionar Bobo semi dulce. Voy a dar click en el grifo grande, un botón en la parte superior y añadir una barra de pestañas y la parte inferior en mi carrito de compras, C1, puedo cantidad aquí. A mí me gustaría ir a continuación. Detalles de la dirección. Y ahora tienen viendo a mi equipo global en entrega y San Francisco. Y me va a comer y voy a cerrar eso. Entonces entraremos en el prototipo en el siguiente video. Se puede ver aquí, aquí están todas las pantallas que hicieron ese jalar apretado, holgado y salir a probarlo. De acuerdo, entonces voy a hacer un comando menos para alejar y un comando más para acercar. Al igual que un anemómetro, estoy en un Mac. También puedo usar el icono de Zoom aquí para acercar. Y si sostengo Option o Alt en un PC, también puedo alejarme. Las siguientes funcionalidades básicas, si sostengo la barra espaciadora, puedes ver que consigo la mano. Entonces lo que puedo hacer es poder navegar fácilmente, navegar por ahí haciendo Command Plus Command Menos. Eso son herramientas básicas de navegación que utilizas. Sí. De acuerdo, Sigamos adelante y empecemos por hacer una nueva pantalla. Entonces voy a presionar este botón por aquí. Es solo tablero de arte. Y voy a hacer un tablero de arte aquí y ver cuando apriete este botón, ya sabe que quiero un iPhone seis lados, así que imita el mismo tamaño que ya lo he hecho. Suena bien. Puedo copiar estas mesas de trabajo pulsando y manteniendo pulsada Opción y click y arrastrando. Y puedo ver aquí los he copiado todos. Empecemos por construir aquí una página bastante simple. Esta es esa pantalla de carga. ¿ Qué hay de alguien? Aquí lado a lado. Entonces ven aquí en el tablero de arte tengo la capacidad de llenarlo con un color diferente que puedo agarrar. Pero como se ve en este ejemplo, tenemos negro, chancla Cisco. Peasy bastante fácil. A continuación quiero tener algún tipo aquí, así que voy a copiar este Comando C, y voy a agarrar la herramienta de tipo aquí. ¿ De acuerdo? Por lo que tienes la herramienta de tipo, tipo caja. Voy a tomar el tipo que acabo de tener. Se puede ver aquí no sabía como lo hacía aquí. Eso está bien. Entonces voy a escanear hacia la derecha aquí para que puedas ver. Y lo que encontrarás aquí es que tengo las herramientas que necesito para el objeto en el que estoy, seleccioné el tipo apetito cargado. Voy a dar click y agarrar todo ese tipo. Y puedes ver aquí tengo esta talla. Entonces vamos a subir un poco. Pero sí, es difícil de leer. Eso es lo que llamamos dejar que el espacio entre lo apretado. Entonces aquí tenemos el dejarlo por espaciado de línea doble, seleccionar es un término que usamos en Trent interlineado es un término que usamos cuando todo se ve exactamente igual. Simplemente significa el espaciado entre estas líneas. podemos ver este ejemplo. Tienes un texto un poco más pequeño. Entonces voy a bajar esto un poco. Démosle alguna fórmula. Demos esto alrededor de 20 a todo píxel. Veo esto. ¿ De acuerdo? Entonces aquí tenemos las pérdidas de párrafo. Entonces puedo hacer párrafo central, puedo hacer lo que llamamos barra derecha, centrada. Eso es menos abofeteado. Cisco al ras, al ras, a la izquierda, más delgado. Quiero cambiar el color de este texto. Se puede ver que puedo volver a pop a la herramienta de selección directa. Aquí. También puedo presionar escape para conseguir esa herramienta. Y puedo cambiar el color del texto a cualquier color. Pero hagámoslo liviano. Bastante fácil. Entonces ahí está tu herramienta de texto. Aprendimos un poco a cómo crear diferentes tamaños. Cual era el lettering en el interlineado, cómo acceder a eso. Y un poco de configuración de párrafo, tan poco párrafo centrado. Copiemos este párrafo. Hagamos la carga. Entonces es un poco más pequeño aquí. Entonces diremos píxeles. Nosotros lo queremos. Entonces ver donde dice regular. Vieja escuela. Se ve bien. Entonces voy a pasar ahora mismo a Illustrator. Se trata de una letra W2. Y se puede ver que ya tengo todos mis activos aquí en lo que llamamos vectores. Uno. formato vectorial significa que puedo acercar las rodillas y ver cómo nunca se pixelan. Tengo esta imagen de mapa a la izquierda. Acerco el mapa pixelado. Entonces así es como lo llamamos vector, su verdadera obra de arte. Y si hago clic en él, se pueden ver estas pequeñas líneas. Puedo hacer esta obra de arte. Entonces lo que tengo aquí, tengo una ilustración sobre T. Voy a copiarlo de Illustrator, irá derecho a XD. Y yo soy un lugar que no lo puede ver ahora porque es negro. desmoronó lo ve por aquí. Y puedo cambiar el color. Puedo volar esto arriba y abajo. Puedo hacerlo de un tamaño diferente. Y ahora mismo es representatividad, psique blanca por aquí al relleno. Y aquí puedo hacer blanco. Toma en esa pantalla. Hagámoslo un poco más grande. Apenas 16. Entonces así funciona eso. Puedo hacer este segundo, puedo agregar otros colores en esto si quería hacerlo. Está bien, ahora vamos a mantenerlo blanco. Así que aleje un poco. De acuerdo, entonces lo siguiente te voy a mostrar cómo crear la página de inscripción. Y cuando haga este botón, les voy a mostrar cómo crear un símbolo, lo cual es realmente, realmente importante de aprender. Y un símbolo es un elemento de interfaz de usuario que puedes sobre una serie de pantallas. Por lo que puedes ver aquí que tengo el botón de registro. En esta pantalla de registro y es un símbolo. Lo que eso significa es que también tengo un botón de inscripción, el mismo botón en esta pantalla también. Pero mira cuando es un símbolo, puedo cambiar el color de este fondo. Digamos que dos. Vamos a ver cómo es para todo flujo de inscripciones. Entonces eso es lo que es un símbolo. Significa que este componente puede en muchos de su diseño de estructura alámbar. Y puedes cambiarlo con solo uno. Y cambiará a lo largo de todas las demás zonas así como a un costado. Déjame mostrártelo otra vez una vez más. Simplemente haremos esta pantalla. Voy a copiar esta opción de pantalla, clicado y arrastrar. Por lo que tengo el mismo tamaño de pantalla. También puedo venir a la herramienta de tablero de arte. Una vez esa escuela. De qué se construye este botón, el botón de registro. Y hagámoslo aquí en una plaza. Orden de seguir conmigo también. En ocasiones puede que tengas que pausar este video. Harán que el botón vuelva como reproduciendo un video. Eso también está bien. Son hormonas. Bueno, voy a agarrar la herramienta de texto limita el texto aquí. Lo llamaremos un tenue enlace aquí a la herramienta de selección de herramientas aquí. Y digamos que quiero llevar este botón de inscripción a la parte superior de este texto, a la parte superior del botón como es ahora. Puedo arreglar esto de diferentes maneras. Entonces si haces clic con el botón derecho y ves lo sutil trayendo el aguijón trae el uso de la palabra del Senado. Entonces así es como puedes organizar estos objetos en diferentes ordenamientos. Algunos tomarán el botón, lo enviarán de vuelta despacio. Por lo que el botón de apuntación que tenemos. Por lo que está conformado por un rectángulo y está seleccionado. También puedes hacer círculos si lo deseas también. Ve cómo la inscripción voy a seguir adelante y asegurarme de que este texto tenga el mismo ancho que el vectoring. Es una buena práctica. Y todo está bastante bien. Entonces ahora voy a hacer clic en el texto de todo botón de inscripción, ese rectángulo detrás de él. Voy a venir aquí al área de símbolos. Y voy a presionar el pequeño plus aquí y símbolo azul, así que es calma. El nuevo registro. Llegar a nombrar estas cosas. Y aquí está mi medio al poder cambiar esta y zona desgastada. Y cambia a lo largo de todas las instancias como, digamos que copio este botón se lanzará. Manzana por aquí, pequeños cambios aquí. Y puedo cambiar el texto, que es realmente genial. A ver. Puedo decir esto, el botón Atrás, botón Cancelar, y el libro de texto, el símbolo maestro. Por lo que puedo tener diferentes instancias aquí. Digamos que este inicio de sesión específico. Di éste. Digamos que éste es, digamos éste de aquí. Diga eso viendo ese video. De acuerdo, así que ahora tengo que hacer aquí es que puedo cambiar el relleno de este rectángulo de fondo a cualquier color que quiera, quiero y ver qué pasa con todo el resto. Cambian. Realmente dulce. Te ahorra mucho tiempo cuando tienes que hacer cambios en tu aplicación, hacer símbolos. Es parte realmente, realmente importante de nuestro trabajo. Entonces con eso dicho, ya tengo alguna forma, forma símbolos que he creado aquí. Entonces vamos a tirar hacia arriba para Soy Alice, solo consigue algo de este diseño. Muestra enjambre ley activa. Es lo que haces es hacer clic y arrastrar este pulmón aquí, este símbolo negro predeterminado sobre el lienzo al espacio de trabajo. Y ahora puedo ver que tengo éste. Vamos a seguir adelante y copiar este símbolo. Opción. Desplazar, hacer clic y arrastrar. Hagamos apellido. Pero también teníamos correo electrónico y contraseña, así que ahora voy a copiar ambos. Seguramente el espaciado. Ver algunos rurales. Vuelve a mi archivo de Illustrator. Ahora tengo este logo en algún lugar como aquí. Bueno octetos D OPEX d caso, esta ilustración. Está bien, genial. Entonces eso se ve bastante bien. ¿ Tienes alguna copia aquí e ingresa aquí? Ya sé hacer texto. que puedas crear esos si quieres aprender a llevar un refresco. Esto es sólo un poco de pensamiento en esta página aquí. De lo que voy a copiar esta página. Y tampoco he estado activo, que es cuando estoy haciendo clic en este formulario como símbolo también. Entonces lo voy a hacer es que voy a borrar estos tres. Activo. Cuando realmente haga clic o toque en este formulario aquí, voy a asegurarme de que esté alineado Estados y en realidad volver atrás. Quiero asegurarme de que todas mis formas así. Entonces me voy a quedar esto aquí. Entonces ahora voy a arrastrar este formulario activo sobre el lienzo, en la alineación, las líneas aquí, voy a copiarlo. Comando C, este nombre, extranjero, comando de prensa, Victor, y que pegan justo en su lugar. Entonces voy a copiar el mismo. Hagamos este jueves seguro. Soy una copia de este formulario sobre el último estado, y el comando borrará lo último. Yo quiero os ux. Lo mismo. Voy a ir al correo electrónico, borrar esto, y luego ven cosas que fuman este sates casa. Y eso hará lo mismo. Ah, está borrado. El correo electrónico de los chips esto a la contraseña. Yo sólo voy a hacer un pequeño número, 8, c. Así que ahí tienes versiones activas de este formulario, así que necesitamos el teclado aquí. Entonces si vas a mi carpeta, todas las imágenes, es así. Entonces puedo hacer es sólo agonistas. Cualquier imagen que desee, simplemente arrástrela a la salida. Puedo crear prototipos, que haremos en el siguiente video, pantallas juntas. Y se sentirá como si realmente estuviera aprovechando este campo de forma luchando contra la inflamación. Eso es para todos herramienta impresionante me permite probar cómo el tiempo de los barrios marginales y wireframing prueban a cabo en las personas que lo escriben en el formulario. ¿ Qué es una usabilidad general? Por defecto que todos lo hacemos? Simplemente estás probando este contenido como alguien podría decir aquí, estoy acostumbrado a poner su esperma sentir eso. Digamos que ingresamos tu ranura secreta de contraseña. De acuerdo, entonces lo siguiente que quiero mostrarles es un poco más de complejidad. Esto es seleccionar ambos en t. Te mostraré cómo luce esto. Por lo que quiero señalar aquí es que acabo de presionar el botón plus el play aquí en la parte superior derecha. Puedo ver esto y cómo lo haría en mi teléfono. Entonces cuando me desplaza sobre t selecciones, pero mira, esta marca de tabulación, apesta, se pega a la botella, lo que significa que no está perdiendo. Ver cómo los grupos. Entonces te voy a mostrar cómo crear este tap on y cómo arreglarlo al fondo y continuar con tu diseño. Por lo que de esa forma jugamos y puedes desplazarte por diferentes opciones que algunas son más móviles. Entonces, solo sigamos adelante y empecemos con un sólido. Copiaremos este. Voy a seleccionar modelo B. Vamos a crear el rectángulo. Por lo general son alrededor de un 10025072 sentencias en absoluto. Voy a hacer trampa un poco. Te veré cuando probé era demasiado pequeño. Hagámoslo negro. Muy bien, vamos a Illustrator y vamos a agarrar mis iconos y hacer la bola superior. Te daré un sitio web donde puedes acudir a un sitio web que se llama el objeto nulo. Nosotros comprobamos esto. Puedes tener el ícono que quieras. Digamos que quieres como una rosquilla. Da click en esta rosquilla. Puedo conseguir este ícono ahora mismo Es gratis. Puedo decir descarga básica. Descárgalo aquí. Si bien se está descargando ahora. Alcanza y arrastra esto a mi archivo de Illustrator y echa un vistazo. Ahí está mi vector, pulsos eléctricos fuera. Y puedo emitir con el Islam y pegar este proyecto así como top. Adelante y haz una cuenta. Y volvamos a Illustrator. Yo voy a seguir aquí. Volvamos a XD. Los barrios negros subirán a la Y. Para nuestro perfil. Es sólo pequeño n. esas son las pantallas. Muy bien, así que tenemos tres iconos, todos son del mismo color. Tenemos lo que nos referimos como un estado por defecto y ese estado. Por lo que el estado activo es una representación de donde estoy actualmente. Es mi ubicación. Entonces en este momento no hasta archivar y no en el corazón. Entonces lo que quiero hacer es traerlos aquí a gente 60 por ciento segura. Adelante y digamos 1650 icono también. Y mantendremos esto en 0 por ciento. Agradable. Barra de tabulación en la parte inferior. Adelante y graficemos aquí, escritorio aquí. Eso es todo para este otoño. En lo que va de momento. Para que pueda hacer otro rectángulo, conectarme y hacer este texto negro. Entonces solo voy a copiar este texto aquí ya que no voy a poder crear deudas. Daré este botón. Crea un botón. Entonces, cada vez que hagas un botón nuevo, solo sigamos adelante y digamos que voy a hacer esto. Pero es la mejor práctica una vez que lo logre. El tipo de herramienta que bloquea que lo veas. Ahí hay sumar. Voy a agarrar ambos de estos sosteniendo Shift, Shift filosofía para seleccionar ambas de estas imágenes. Voy a hacer el Comando G, que es un grupo. También haga clic aquí. Que sea un símbolo. Además marca aquí en la parte superior. Bueno, ahora tengo mi símbolo de botón Añadir, símbolo 17. Digamos que se ve bien. Entonces sigamos adelante y copiemos esta sección. Aquí. Muéstrale lo que se va a ir y bajarlo a la siguiente capa aquí. Ve que está feliz, bien. Ampliar este tablero de arte. Bueno, esta pizarra de arte todo el camino hacia abajo. Y aquí hay una cosa clave. Ver esta pequeña línea punteada aquí Esa es representación de lo que llamaríamos oculto ese globo vendido. Entonces cualquier cosa por debajo de esta línea punteada, el usuario no verá el hock para desplazarse hacia abajo para ver esa información. Para que veas caer las barras de pestaña Inicio. Entonces voy a hacer clic derecho en este enviado de vuelta. Y ahora tenemos nuestra barra de pestañas. Por lo que voy a añadir una sección más para esta imagen se muestrea poco poco de sobras. Nuestro, oops, acabo de agarrar los artículos aquí en la parte superior. Dice iPhone 6, 7, 8. Y luego muévelo un poco. Eso se ve bien. Echemos un vistazo a esto y echemos un vistazo a lo que le pasa a la Barra de Tab que vi y me desplaza hacia abajo, desliza hacia abajo, ve cómo se mueve la barra de pestañas conmigo. No queremos eso. Queremos que eso se quede en lo que llamamos posición fija aquí mismo. Te mostrará cómo hacer eso ahora mismo. Por lo que quieres seleccionar esta bola de grifo, todos los elementos dentro de ella. A veces solo lo elimino y hago un comando Z. Vuelve a ver esta casita de verificación por aquí. Dice médico. Al desplazarme en la parte superior derecha, comprobé que se va a mantener fijo en posición. Entonces ahora vamos a ver y presionar el botón Play aquí en la parte superior. Y ahora mira lo que pasa. Vamos a desplazarnos. Bar afirma que se ve bien. Se puede ver la imagen inferior. No puedo llegar hasta el fondo que toda la selección para presionar el botón. Entonces lo que queremos hacer aquí es que sí quieres ir y extender ese arte. Es como si llegaras a eso. Es un montón de veces que estás diseñando y estás entrando a ver cómo funciona esto. Pero vamos a volver a sus notas y ajustes. Prácticamente la mayor parte de la herramienta de síntesis. Y hay mucho más en lo que puedes entrar aquí. Pero realmente quería mostrarles el símbolo, cómo usar la herramienta de tipo, hacer los botones, fotos dentro de ella porque la mayor parte de nuestra interfaz de usuario es una combinación de ya sea un cuadrado o rectángulo con un borde redondeado, ver aquí a lo largo el muro, y esto serán sutiles insights y fotos y tipografía. Entonces la mayoría de los wireframes, hablaremos así. También puedes ir a los iconos sinusoidales del Proyecto Noun 2. Entonces si queremos guardarlo en tu diseño, y puedes empezar a construir aquí la diapositiva. Está en el siguiente video. Te mostraré de vuelta a este video. Te mostrará cómo a un prototipo. Entonces esto es algo que sutura todas estas pantallas juntas para que se sienta como una aplicación real. Para que puedas salir y puedes probarlo. Este prototipo, lo que llamamos pruebas de usabilidad. Ahora mostrándote eso en el siguiente video. Así que adelante y ve a crear todas tus pantallas o tus diseños. Me aseguraré de que se vean bien en el apartado anterior. Y luego me meteré en el prototipado y las transiciones que están viendo aquí mismo en el siguiente video. Entonces de nuevo, como siempre, gracias por ver y ojalá te vea en el siguiente video. Adiós. 9. Crea un prototipo práctico con Adobe XD: Bienvenido al siguiente video sobre cómo crear un caso práctico de diseño UX y diseño de experiencia de usuario one-on-one. De acuerdo, así que cubrimos mucho terreno aquí. Hemos comenzado con cómo establecer metas, y hemos ido todo el camino a cómo crear un diseño de estructura alámbrica. Y eso lo cubrimos en el último video. Entonces en este video te voy a enseñar a tomar ese diseño wireframe y hacer un prototipo clicable con los diseños que tienes. Para que puedas salir y hacer pruebas de usuario. Entonces en el último video que te mostré estamos usando Adobe XD. Y ahí es donde hicimos todos estos diseños de pantalla. Ahora voy a usar Adobe XD. Vamos a crear un prototipo clicable con esas pantallas que hicimos. Entonces esto es lo que vamos a hacer. Tengo el video aquí y empezaron desde el principio. Tenemos una pantalla de carga que se agota el tiempo de espera tienes una pantalla de registro. Se puede ver el teclado porque la contraseña del correo electrónico, hay que hacer. Regístrese. Puede desplazarse hacia abajo. Recuerda que aprendimos a mantener fija esa barra de pestañas en el último video, lo que significa permanecer encendido y en la parte inferior, hago clic hay una arandela SlideUp. Tú cómo hacer eso. Tienes un desplegable aquí. Seleccionar semi dulce. Voy a presionar el botón de tapioca grande. Agrega esto al carrito. Volver a la página normal. Haga clic en el carrito. Tenemos el deslizamiento hacia arriba. Dejarlo ir poner mi dirección Intuit va a presionar Siguiente. Un poco puso como información dura en esta paga de prensa hecha y LA LA me dieron baja T siendo entregada a mí. Y diez minutos. Sí. Está bien, genial. Entonces voy a abrir XD y te voy a mostrar aquí algunos trucos de prototipado y cómo crear un sitio web. Aquí es bastante sencillo al día siguiente. Entonces, antes que nada, necesitas otros dos modos aquí, este modo de diseño y un modo prototipo. Y ver la información aquí a la derecha, esta barra de aquí, pierdo esa barra cuando voy a prototipar. Entonces así es como sé que estoy en modo prototipo para que puedas alternar entre los dos aquí. Mira el prototipo de diseño de arriba a la izquierda, prototipo de diseño. Está bien, genial. Entonces volvamos atrás y modo de diseño, voy a agarrar un nuevo tablero de arte. Colocaré esta pizarra de arte debajo de la pizarra de inscripción. Voy a agarrar este botón de inscripción aquí. He hecho un símbolo 11, arrástrelo a esta mesa de trabajo Puma, agarra este logotipo. Aquí, vamos a empezar aquí. Quiero mostrarte toda la funcionalidad que puedes hacer dentro de Adobe XD a la hora de crear prototipos. Entonces voy a copiar esta pantalla por aquí. Voy a eliminar estos elementos. Y voy a agarrar un rectángulo, y voy a hacer una pantalla negra. Entonces como ven aquí, así lo hace fácil para que sepamos con qué pantalla estamos trabajando. También voy a poner una x aquí en la parte superior. Y la copia la pantalla también. Y yo voy a hacer una flecha hacia atrás aquí. Y voy a copiar este botón a esta mesa de trabajo. Llama a esto siguiente aquí. De acuerdo, entonces ahora tenemos suficiente para seguir adelante y empezar a crear prototipos. Quiero empezar a mostrarte antes de que nos metamos en prototipar toda la aplicación de la experiencia Bobo T, yo soy, solo quiero entrar en prototipado y mostrarte las capacidades de la característica de prototipo. Entonces primero lo primero, pasé de diseño aquí y ahora estoy más en prototipo. Entonces voy a dar click en el botón. Por lo que puedes ver aquí puedo dar click en el botón y ver este pequeño círculo azul con la flecha sobre él. Puedo arrastrar eso a cualquier pantalla que me gustaría. Y va a conectar este botón a esa pantalla. Entonces es algo bastante sencillo. Por lo que quería ir a la pantalla a la derecha. Y luego cuando haga clic y deshaga mi clic, verá aparecer un pequeño pop-up. Y este es el gatillo. Por lo que esto permite alguna forma de tocar, arrastrar o hacer comandos de voz en el prototipo. Entonces para nuestros, la mayoría de nuestros casos, vamos a hacer tap. Entonces voy a pasar por tap y te voy a mostrar algunos diferentes Soy estados de transición que puedes usar en este momento. Por lo que ahora mismo puedo establecer la transición. También puedo hacer un auto animate y puedo hacer la superposición. En su mayoría solo necesitas conocer la transición y superponer el 99% del tiempo. Eso es lo que estoy usando, transición y superposición. Y para las animaciones se han disuelto y hay que deslizar el deslizamiento hacia la izquierda o deslizarse hacia la derecha hacia arriba, deslizar hacia abajo. Entonces, solo empecemos primero con ningún estilo. Lo que tengo aquí es tener el botón de inscripción yendo al siguiente tablero de arte cuando lo toque como transición aquí. Y no tenemos animación. Entonces vamos a ver cómo se ve eso. Entonces cuando presiono Play aquí en la parte superior derecha, obtengo mi pequeño diálogo de juego. Y ahora si presiono registro, verás que sólo me lleva a la siguiente pantalla. Pero vamos a poner algunas transiciones en esto y podemos explorar algunas. Las transiciones aquí, aquí es donde se vuelve realmente divertido. Entonces sigamos adelante y digamos que lo hacemos disolvemos. Entonces tengo la duración de cómo se va a disolver aquí a 0.1 segundos. Oh no, sigamos adelante y digamos cinco segundos. De acuerdo, entonces presiono Play. Ve cómo eso ahora se disolvió en ella para frenarlo. Para que puedas ver un poco más lo que está pasando aquí. Hagámoslo como una duración muy larga, digamos como 30 segundos. Ahora, nota cómo fuente, Vamos como ocho segundos y a ver que se disuelve aquí un poco presiona play y ver el lento disolver Para ralentizar. Por lo que también puedes mantenerlo esta pequeña ventana de vista previa por aquí. Permanecerá en tu pantalla y podrás realizar cambios en tiempo real. Entonces voy a volver a, digamos, 0.3 segundos aquí en la disolución. Y puedes ver ahora cuando hago clic en esto, es más rápido. Por lo que hace actualizaciones en tiempo real sobre este pequeño adelanto. Pero por nuestro bien, vendré y abriré previamente se puede ver lo que está pasando. De acuerdo, así que lo siguiente que podemos hacer aquí es que podemos hacer una diapositiva a la izquierda. Esto va a crear un muro de borde de arte o se deslizará desde la derecha de la pantalla, a la izquierda hasta la posición de visualización. Entonces déjame mostrarte cómo es eso. Entonces tienes a ambos la T aquí, presiono la inscripción, ver cómo se movió a la izquierda. Muy sencillo. De acuerdo, vamos a la siguiente. Vamos a hacer deslizamiento, ¿verdad? Un poco lo mismo. Yo sólo me voy a deslizar ¿verdad? Vamos a presionar Play y ver cómo se hendió desde la derecha. Lo más común estamos haciendo deslizamiento a la izquierda o deslizarse hacia abajo. Entonces vamos a ver la siguiente que es diapositiva, o, lo siento, deslízate hacia arriba y desliza hacia la izquierda son más comunes. Entonces vamos a hacer el deslizamiento aquí arriba. Y lo que eso parece es que cuando presionas el botón de registro, esta cosa se desliza hacia arriba. Ahora vamos a hacer un deslizamiento hacia abajo ahora, y vamos a hacer un sobre la x de. Entonces esta x es para cerrar este pequeño deslizador hacia arriba. Y tenemos la misma transición Tap, pero ahora queremos deslizarnos hacia abajo. Y así ahora estamos construyendo una interacción. Entonces puedes ver esto, esto es más común en el trabajo que hacemos en aplicaciones móviles es que te inscribes, vas a deslizarte hacia arriba. Yo cerré eso. Te vas a deslizar hacia abajo, ver cómo funcionaba eso. Fue bastante bonito. Otra cosa que puedo conseguir en esta pantalla es ver este pequeño ícono de casa aquí que está en gris. Si hago clic en eso y lo hago azul, obtengo una transición adicional aquí. Entonces si conecté esto a este tablero de arte de pantalla, al siguiente tablero de arte, obtengo una vez uno cuando es homepage. Y esto me permite escribir algo. Por lo que puedo decir aquí en cinco segundos, irá a la siguiente pantalla. Por lo que esto es común para las pantallas de carga. Y así es como hice esta pantalla de carga aquí. Ve directamente a la pantalla de inscripción. Entonces si ves lo que pasa aquí cuando presiono el botón Reproducir, no presioné nada. No he hecho clic en nada y va a tiempo derecho a la siguiente pantalla. Ves que es una característica de tiempo, pero sólo se obtiene eso cuando es la pantalla de inicio. Entonces voy a volver aquí y voy a hacer esto a la pantalla de inicio. Entonces eso es parte de la aplicación. Está bien, genial. Otra cosa que quiero mostrarles aquí es que eliminemos esta transición aquí. De acuerdo, Entonces lo que vamos a hacer aquí es que vamos a crear el botón de registro. De lo que vamos a hacer una superposición aquí. Entonces si hago clic en el pop-up aquí, lo que obtendré aquí es la oportunidad de hacer no una transición, sino una superposición. Y luego superpone nuestro dolor cuando haces un menú desplegable móvil. Entonces lo voy a hacer es volver a mi modo de diseño. Voy a cambiar un poco esta pantalla. Entonces voy a hacer más como un menú desplegable aquí. Y lo que he hecho aquí es sobre la aparición de este tablero de arte. Puedo tenerlo lleno de blanco. También puedo tenerlo no llene de ningún color. Y entonces lo que eso me permite hacer es cuando voy a mi prototipo y lo veo, y presiono registro, solo esta pequeña pieza se deslizará hacia arriba de la siguiente pantalla. Y eso se llama la superposición. Entonces solo superponiendo la pantalla inicial en la que estaba. Bueno, volvamos atrás. Hagamos un par de prototipo de tres pantallas más aquí. Entonces como ahora mismo, tengo el botón de inscripción que va a la pantalla a la derecha aquí. Y queremos hacer este deslizamiento hacia arriba. Tengo la x que me lleva de vuelta a la pantalla original. Y eso ha tenido un ligero aquí abajo. Pero tengo este botón Siguiente aquí que quiero ir a la siguiente pantalla. Y lo que eso va a hacer es que queremos transitar. Y queremos tener este deslizamiento a la izquierda. Entonces vamos a ver. Está bien, Así que me inscribo, presiono el Siguiente y verás que se desliza hacia la izquierda para que sea aún más fácil para ti verlo. Hagamos de esto un color diferente. Vamos a divertirnos un poco aquí. Hagámoslo rosa así. De acuerdo, entonces volvamos al prototipo esto. Echa un vistazo. Entonces aquí están deslizándose hacia arriba y luego me queda una siguiente diapositiva. Y la razón por la que es una diapositiva a la izquierda es porque tengo un botón Atrás y quieren volver a esa página. Entonces aquí vamos a seguir adelante y agarrar este botón, conectarlo a este tablero de arte. Y queremos hacer una diapositiva a la derecha. Ahora me permitirá volver al modelo mental de pantalla media. Ahora tenemos un prototipo completo y completo. Una pieza más, te mostraré qué voy a hacer con ese botón ahí. Entonces aquí en la suscripción, los deslizamientos hacia arriba, puedo cerrarlo, volver a apuntarme. Puedo ir a siguiente diapositiva a la izquierda. Y puedo hacer el botón derecho aquí o el botón izquierdo para volver atrás, y vuelve a la pantalla en eso, vuelta al botón de inicio. Por lo que gran parte de su diseño de interacción y prototipado debería permitir a los usuarios avanzar en las pantallas y retroceder en las pantallas. Entonces así es como lo hemos hecho aquí. De acuerdo, y lo mismo al cierre aquí, queremos cerrar. Este botón debería actuar igual que el botón de cerrar aquí. Me lleva de vuelta al set proyectado original. Este es un ligero descenso. Entonces ahora puedes ver cómo puedo saltar atrás si quiero. Entonces sigamos adelante y digamos que tenía muchas de estas páginas aquí. Vamos a copiar este. Hagamos esto por aquí. Y diremos a continuación. Hace otra diapositiva que queda aquí. Este, este botón de atrás aquí irá a la pantalla rosa aquí. Deslice a la derecha. El x volverá a casa, X volverá a casa. Hagamos el arte, el tablero de arte aquí en el extremo derecho. Hagámoslo azul. Entonces ya sabes, así, están bien. Y veamos este prototipo ahora puedes ver los actos en las tres pantallas. Volveré a la pantalla de inicio. A continuación, va a la pantalla a la derecha, y el siguiente botón siempre va a la siguiente pantalla de la derecha. Y el botón Atrás siempre volverá a la pantalla de la izquierda. Para que veas que tengo mi inscripción venga aquí. Siguiente. Aquí está la pantalla rosa. Hago otro siguiente. Aquí está la pantalla azul. Vuelvo, me lleva de vuelta a la pantalla rosa. Vuelvo, me lleva de vuelta a la primera pantalla inicial y luego estoy de vuelta en la pantalla de inicio. Bueno, digamos que estoy todo el camino a la pantalla azul y estoy un poco terminado con este flujo de trabajo x, volver a la pantalla de inicio. Tan bastante simple. Acabas de aprender una interacción bastante detallada, compleja de una manera muy sencilla. Y la mejor manera de aprender esto y simplemente ir a jugar. Simplemente entra en esto, juega con estas interacciones. Ve pulsa Play y ve qué hacen y diviértete con él. Por lo que eliminamos estos. Y como prometí, te mostraré el prototipado y medio por cada pantalla aquí. Eso hace completa esta aplicación Baba t completa. Entonces en este momento tengo esta pantalla de inicio configurada con el retardo de tiempo de cuatro segundos. Y luego puedes ver aquí, en cualquier momento hago clic en cualquiera de estos formularios, me lleva derecho a la siguiente pantalla, que es el teclado. Al hacer clic en el correo electrónico y contraseña, me lleva a la siguiente pantalla donde relleno mi correo electrónico y contraseña. Y luego se puede ver ese botón hecho aquí. Acabo de decir cuadrado transparente. No hay color y es invisible. Me lleva a la siguiente pantalla aquí, sin transiciones. Entonces lo que podemos ver es este orden aquí. Entonces tenemos la carga por momentos fuera en un segundo. Al igual que inscribirme, hago clic en mi nombre, hago clic en el Email, una prensa Hecho, y eso es más o menos todo, um, para el inicio de Inscripción. Una vez que presiono registro, podemos ver que tengo una transición que va a la siguiente pantalla que se llama disolver. Entonces es una disolución realmente rápida. Y puedes ver que va derecho a la pantalla principal donde puedo pedir por 0 pero t Lo siguiente que tengo aquí es cuando llegues al botón Añadir, este es un deslizamiento hacia arriba porque tiene la x y la x me lleva de vuelta a esta pantalla para cerrarla. Entonces puedes ver aquí, como yo lo hacen agregan, tenemos el deslizar de cerca, vuelve a esta pantalla de inicio aquí, pulsa Añadir de nuevo. Y luego una vez que estamos en esta pantalla, queríamos hacer aquí fue hacer la superposición del prototipo. Cuando ordeno lo que quiero cambiar el dulce regular a un semi dulce. Entonces lo que elegimos aquí fue la superposición y esto es un deslizamiento hacia arriba, para que pueda seleccionar las diferentes opciones de dulzura. Lado, pulsa el botón Play, haz clic en el dulce regular. Mira la superposición, entra. Y luego de la superposición aquí, he seleccionado semi dulce. Eso me lleva a la siguiente pantalla donde cambié el texto aquí de dulce regular a semi dulce. Entonces en este punto estoy aquí. En realidad estoy aquí, presiona jugar mucho a semi dulce. La siguiente página. De acuerdo, en este punto quiero dar clic en el botón tabulador marca tapioca. Eso va a ir a la siguiente pantalla donde tengo seleccionado el estado activo para que puedan ver cómo se ve eso. Sí, va a la siguiente pantalla. Y luego tenemos el botón Añadir, que me lleva a esta pantalla aquí donde puedo ver hay una notificación en el carrito de compras de que tengo un pedido. Entonces veamos eso y presionamos Agregar Bu. Entonces lo siguiente que tenemos aquí es que tengo el botón Agregar que me lleva a la caja. El icono del botón de checkout que me lleva a la pantalla de pago, deslízate hacia arriba. Porque recuerda que tenemos la x. La x me llevará de vuelta aquí. Entonces lo que tenemos aquí es que se ve así. Adelante y mira eso. Deslízate hacia arriba. Genial. ve bien. De acuerdo, Entonces lo siguiente que hacemos aquí es que tenemos el botón Siguiente que va a la siguiente pantalla de eventos, que es el ingrese su dirección. Muy bien, Y de ahí no tenemos el clic derecho en la dirección, me lleva al teclado. Y luego hago el Dunn me lleva a la siguiente pantalla aquí. Entonces podemos ver eso. Y luego siguiente me llevará a la tarjeta de crédito. Entonces veamos eso como una sola interacción. Aquí. Yo voy. Siguiente. Haga clic en la dirección, consiga el teclado, se ve bien. Teclado de nuevo en la pantalla de pago. Y de nuevo, puedo volver aquí a la pantalla. Vuelve aquí a la pantalla, debería llevarme de vuelta aquí. Y eso debería ser una diapositiva a la izquierda. Genial. Entonces veamos eso realmente rápido. Y si vuelvo, a ver cómo me lleva de vuelta. Eso fue raro. Vayamos a ver qué pasó ahí. Entonces ya terminé. Presionaré Siguiente. Desliza la izquierda para que se vea así. Está bien. Entonces esto aquí debería llevarme de vuelta a la pantalla y deslizarse ligeramente a la izquierda. Correcto es lo que queremos afuera izquierda, discúlpame. Está bien, así que sigamos adelante y miremos eso entre la pantalla de intereses y presiono siguiente. Voy a la pantalla de inter pago y hago ese botón de retroceso. A pesar, ¿verdad? Porque de vuelta a la pantalla de direcciones, puedo hacer ediciones si quiero. Gracias volver al pago. ve bien. Está bien. Haga clic en cualquier parte de las pantallas de pago, se levanta el teclado, tiene mi información ingresada ahí, presione hacia abajo en el teclado, me lleva a esta pantalla y luego pago. Y paga, me lleva a la pantalla. Se acabó t Así que ahí lo tienes. Sigamos adelante y miremos la final aquí, que es que he ingresado mi información de tarjeta de crédito ha hecho. Adelante y ve a pagar. Y boom, aquí. De acuerdo, lo siguiente que es importante que sepas es que tenemos este prototipo completo. Ahora, puedo hacer click en. Yo quiero empaquetar ese prototipo y quiero salir, salir a las calles y probarlo con la gente. Por lo que lo primero que debes saber es que Adobe XD tiene una aplicación y puedes descargarla en tu teléfono. Y cuando descargues eso en tu teléfono y te permite guardar los prototipos que creas para que puedas irte e ir a probar tus prototipos fuera de la oficina. Si vas a tu teléfono, vas a la App Store y haces Adobe XD. Puedes descargar esto para el iPad, esta aplicación para el iPad o el iPhone. Es gratis y se conectará a tu prototipo para ti en tu carpeta. De acuerdo, si estás haciendo un sitio web y necesitas probar esto en la web, entonces es bastante fácil aquí. Lo que puedes hacer es ir a Compartir enlace aquí mismo. Hacer publicar prototipo. Y se puede ver que ya he sido publicado. Puedo copiar el enlace aquí. Y también puedo presionar el botón compartir. Y me llevará al prototipo aquí. Se lo cargará. Voila, Aquí tienes. Y ahora puedo seguir adelante y conseguir mi prototipo web para alguien. Y las pruebas de usuario también pueden simplemente enviar este enlace a través de correo electrónico aquí. Puede como ponerlo en el correo de alguien. Pueden abrirla. Cualquiera en el mundo puede llegar a este prototipo. Puedo probar con ellos. Está bien, genial. Por lo que ahí lo tienes. Voy a ir a mostrarles un poco de lo que he hecho con este expediente que vamos a cubrir en la próxima serie de videos. Y una de ellas es cómo aplicar, aplicar diseño visual a este archivo, a este diseño aquí. Por lo que puedes ver aquí que tengo algún diseño visual. Añádalo a esta experiencia aquí, pero te mostraré cómo llevar el wireframe al diseño visual. Pero primero, en el orden de los videos, vamos a aprender a hacer pruebas de usuario y un sistema de diseño. Entonces como siempre, gracias por ver y espero que te hayas divertido con los prototipos clicables. Acompáñame en el siguiente video y te daré algunos consejos y dirección y mejores prácticas de cómo hacer pruebas de usuario. Sal y prueba un prototipo clicable que hicimos hoy. Muy bien, gracias. Adiós. 10. Crear un script de prueba de usuarios y prueba de los usuarios: Bienvenido al siguiente video en el cómo diseñar UX, estudio de caso de diseño y experiencia de usuario diseño de clase uno a uno. Por el momento cubrimos una gran cantidad de terrenos. Hemos hecho metas, personal's, hemos hecho entrevistas, guiones e investigaciones y declaraciones de problemas, mapas de viaje de clientes, plantillas de esbozo y diseños de estructura alónica. En el último video, te enseñé a hacer un prototipo clicable para que puedas salir y hacer pruebas de usuario. Te mostré cómo crear un enlace. C puede salir de la naturaleza, dar vueltas por las calles. Y estas son pruebas con personas con tu dispositivo móvil. Si es desde una laptop, cómo hacerlo desde una laptop también. Y en este video, te voy a mostrar cómo hacer pruebas de usuario. Por lo que simplemente no se puede tener un prototipo clicable no es suficiente. También vas a necesitar un script de prueba de usuario. Entonces te enseñaré un guión y te mostraré las mejores prácticas a la hora de realizar una prueba de usuario. De acuerdo, entonces lo que voy a hacer aquí es que tengo un guión prehecho en nuestros archivos que están adjuntos a la clase para que puedas descargar este archivo. Esto pasará a través de la plantilla de script de prueba de usuario en. Pero antes de entrar en eso, permítanme simplemente compartir con ustedes alrededor de por qué hizo el guión y algunos aprendizajes sobre solo las mejores prácticas con las pruebas de usuario y por qué lo hacemos. Entonces aquí voy a ir a UX, cariño. Y esa es la página web que doy clases en la universidad aquí en San Francisco. Si haces click en el área de 2x2, llegarás al domicilio. Desplácese hacia abajo para encontrar las pruebas de usuario. Haga clic en las pruebas de usuario. Y llegarás a algo como esto. Una página que se ve así. Entonces estas son pruebas, realmente todo se trata de tareas. Vas a encomendar a tu usuario que haga una acción en la aplicación. Y luego vas a mirar y observar. Y la mayoría de los casos no les ayudas a menos que estén realmente, realmente, realmente, realmente atrapados. Porque si lanzas la aplicación a la naturaleza, no vas a estar ahí para ayudar a todos los que usan la aplicación. Por lo que quieres etiquetarlos y observarlos como si no estuvieras realmente ahí como una mosca en la pared. Pero tendrás preguntas en el camino que puedas para ayudarte. Entonces, ¿por qué hicimos pruebas de usabilidad? Es porque el diseño de experiencia de usuario o Lean UX se trata de probar todo el tiempo en cada etapa de tu diseño, no sabes el impacto de tus decisiones de diseño a menos que lo pruebes. Pruebas es cómo sabrás que tu diseño funciona o no. Recuerda pensar como un científico ejecutar experimentos y tú decides como abogado, tienes hechos y lógica y razón. Si no estás probando, estás acumulando riesgos cada vez que haces cambios de diseño y decisiones de diseño. Así que asegúrate de ir a probar estas aplicaciones que estás diseñando. ¿ Cuándo lo haces? Todo el tiempo tanto como sea posible en la industria es mejor establecer pruebas una vez a la semana o cada dos semanas. Llamamos a un ABT siempre estar probando. Tu diseño no necesita ser perfecto ni completo para probarlo. No esperes hasta que sea demasiado tarde, solo sal a probar. Puedes hacer pruebas de nivel conceptual con prototipos de papel y tus bocetos. Puedes hacer toneladas de pruebas durante el nivel de estructura alónica y quieres probar también la etapa de diseño visual. Si añades un montón de pantallas nuevas o cambias las interacciones existentes, entonces deberías salir y probar los nuevos cambios que has creado. Está bien, entonces lo primero que te puedes preguntar es el cómo. Para que puedas decir, cuáles son los escenarios que te gustaría que las personas se encarguen a hacer en tu aplicación. Y se puede llegar a los escenarios. Voy a meterme un poco en estos con el ejemplo Bobo T aquí en un segundo. De acuerdo, entonces puedes echar un vistazo a cada escenario y mirar las pantallas que vas a mostrar por escenario. Después escribe preguntas que las tareas guían al usuario a través de ese flujo de trabajo o escenario específico. En tercer lugar, derecho, una guía de pruebas o un script de prueba de usuario a través de cada escenario de su aplicación. Y guiar al usuario a través de las pantallas con preguntas relacionadas con cada pantalla y sección que estás mostrando. Entonces eso es lo que vamos a hacer ahora mismo, es vamos a pasar al archivo que he creado que puedes descargar y puedes usar esto como tu plantilla de pruebas. Entonces recuerda, el objetivo de las pruebas de usuario es que queremos validar la decisión de diseño o las soluciones de diseño que hemos hecho y creado. Queremos asegurarnos de que nuestro contenido tenga sentido para el usuario. Y queremos validar que nuestro flujo de trabajo sea utilizable. Y también vamos a reunir insights. Confusiones, alegría, dolores, y solicitud salieron por ahí probando con la gente. Y te mostraré cómo tomar todos esos insights y ponerlos en una síntesis de una manera sistemática de poner información que se relaciona con cada pantalla. Y no es diferente a lo que te mostré en el video de investigación donde tomamos insights por personas que probamos, ponemos en notas pegajosas. Sólo que esta vez lo que vamos a hacer es poner las notas pegajosas de acuerdo a cada tema que se relacionen con cada escenario o pantalla. Entonces me meteré en esto en un segundo, pero pasemos primero por la usabilidad Testing Template y te daremos una idea de cómo se ve eso y cómo llenarlo. Y luego te mostraré después de que hagas un montón de pruebas de usuario, cómo sintetizar esos insights en temas y patrones para que puedas iterar. ¿ De acuerdo? Muchas veces de nuevo, antes de hacer investigación o de hacer pruebas de usabilidad, tenemos una introducción. Así que preséntense, el tomador de notas para decir como soy diseñador o investigador en este caso por trabajar en la aplicación Bobo t. Entonces dices que estás trabajando en el espacio de alimentos y bebidas. Entonces sea cual sea tu dominio, solo preséntate en el dominio en el que estás trabajando. A mí le preguntan que está bien grabar la sesión. Muchas notas solo por propósitos establecen cuánto tiempo se llevará a cabo la entrevista. Cuándo se llevará a cabo la sesión. Se puede decir una hora. Esto es realmente importante en esta sección aquí mismo, esa sección de goles aquí. Así que indiquen el objetivo cuando estamos prototipando, es muy importante que conozcan esta información. Entonces esto es lo que digo. Se puede decir que estoy trabajando en el espacio de alimentos y bebidas. Y tenemos a y C, las cosas en negrita. Tenemos una etapa temprana. El tipo que me gustaría compartir con ustedes para obtener sus comentarios sobre. Al mostrarte este prototipo. Por favor, sepan que esto no es una prueba. Por favor sé honesto. Y avísame si hay algo confuso, raro, o que falta en el prototipo, entonces reítalo. Diga en general, sólo quiero aprender qué es confuso. Y también tengo curiosidad por cuáles son las cosas que te gustan. Hágales saber durante la sesión, digamos y durante esta sesión, por favor hable en voz alta. Otra vez. Aquí el número 5, hágales saber. Nada de lo que digan te ofenderá. Ves, de nuevo, no hay nada que veas que me baje. Por favor sé honesto. Siéntase libre de tener preguntas en cualquier momento. Habrá cinco minutos al final para cualquier pregunta y luego hacerlas, ¿hay alguna pregunta antes de que empecemos? Enciende el dispositivo de grabación, empieza a ir y recuerda tomarles fotos, No en este momento, pero hacia el final para tu caso de estudio, siempre es importante, siempre me olvido de hacer eso. Yo estoy tan involucrado en las pruebas o en la memoria para levantarme, tomar una foto de ellos. De acuerdo, en este punto quieres etiquetarlos para que hagan algo en la aplicación. Entonces lo que vas a hacer es que los vas a probar. Entonces los vas a ver y hacer que hablen en voz alta. Y las preguntas que tenemos para ello son una serie de preguntas rápidas de seguridad que puedes usar para conocer más sobre tu diseño. Pero esperas que si el usuario habla en voz alta, que no necesites ninguna de estas preguntas que te has ocurrido. El usuario sólo te dirá alrededor de qué cosas son confusas, ¿Qué es bueno tener algo que falta algo que les guste? Y te mostraré un pequeño truco. Cuando hago pruebas, en realidad me gusta, voy a pasar al prototipo de Adobe XD que hicimos antes. En realidad me gusta poner una pantalla al principio que enmarque el escenario real o las tareas que le estoy encomendando a un usuario aquí que haga. Antes de que entren en la aplicación. Empiecen con una lectura en voz alta que cogió su misión. Lo hace más divertido. Entonces digo lee tu misión en voz alta. Entonces al igual que tengo en el guión aquí, tengo la tarea de ejemplo Bobo, que es inscribirme para la aplicación. Pedir un bot con T fue semi dulce, nivel de dulzura con tapioca grande. Pon tu dirección en la solicitud y paga Bobo t. Genial. Entonces tengo eso también aquí mismo en la aplicación. Por lo que les hago leer en voz alta. Actualizar eso. Genial. Por lo que les hago leer en voz alta la aplicación o la tarea. Y tengo un botón de inicio que dice Empieza tu misión. Y presionan ese botón Inicio. Boom, están apagados en la aplicación. Empezamos la entrevista. De acuerdo, Así que esperas en este punto el usuario empiece a hablar en voz alta. Voy a volver a nuestro guión aquí. Y aquí es donde debes tener tus preguntas aquí. Entonces solo tenemos tareas ellas para hacer la bombilla en t tarea y ver tus preguntas deberían ser el maquillaje de la misma manera que hicimos los guiones de entrevista de usuario. Deberías tener esta pantalla o escenario aquí está el título. Y debes tener una serie de preguntas que se relacionen la pantalla o el escenario que estás asignando. Entonces aquí está nuestro ejemplo. Tenemos una página de inscripción. Y esta es la mejor pregunta es decir cada vez que una nueva pantalla en el área visible para el usuario, solo di algo como esto. Habla en voz alta. Dime lo que significa para ti todo en la pantalla que empieza a pedir que hablen en voz alta. Las siguientes preguntas que tengo aquí son las selecciones bokeh t. Por lo que este es el área del diseño. Cuando llegan después de iniciar sesión y registrar todo. Esta pantalla aquí donde tiene más de t selecciones aquí. Así que recuerda mirar estos iconos aquí para agregar botones, las fotos. Entonces aquí es donde tengo una serie de preguntas aquí, pero haré lo mismo cuando esa sección se abra al usuario, diré platicar en voz alta. Dime qué significa para ti todo en esta pantalla. Y luego tendré algunas preguntas en el camino. Diré que nos falta algún trabajo jefe bobo que pidas mucho. Y entonces te diré: ¿Qué crees que hacen los pequeños iconos de abajo? Tipo de referirse a estos pequeños iconos para verlos hablar en voz alta, no ir e interactuar con los iconos. Sólo vete, dime ¿qué crees que hacen? ¿ Qué crees que hará el botón Añadir? ¿ Y falta alguna información? Muy bien, Así que más o menos quieres tener un par de estas secciones, cada una para un escenario o una pantalla. Y luego tienes el outro. Entonces después de año las pruebas de usuarios han terminado, han, esperemos que hayas aprendido mucho. Pasaron por la aplicación. Puedes hacer que pasen por la aplicación más de una vez. Y una vez que lo atraviesan desde un punto de vista inicial, puedes hacer que retrocedan y señalen cualquier otra cosa que fuera confusa o cosas que les gustaban. Y obtengo mi pregunta favorita al final es la pregunta de la lista de deseos. Entonces aquí es donde puedes decir, basado en todo lo que has visto. Digamos que íbamos a darte una varita mágica y puedes conseguir cualquier cosa en la aplicación. ¿ Cuál es tu deseo? Y vas a escuchar un montón de buenos comentarios y cosas geniales allí. Entonces puedes golpear el outro, tienes un tiempo o tendrás tiempo para preguntas para ellos, cualquier cosa que tengan que convertirte. A veces solo dicen como, Hey, la ubicación que viene, me gustaría pedir Bobo t Eso es lo que esperas. El outro es un agradecimiento por su tiempo. Todas las notas y la grabación son confidenciales y solo ser vistos por mí mismo en el equipo porque hay pago involucrado. Hacer la transacción. Dígales si desea comentar, si está bien ponerse en contacto con ellos de nuevo para realizar pruebas adicionales sobre la solución también. En incluso puedes preguntar si tienen algún amigo que esté interesado en las pruebas. Ese es un buen acercamiento ahí. Y luego solo dices gracias y adiós. De acuerdo, así que ahora voy a reventar a cómo deberían ser esas pruebas en realidad y darte algunas mejores prácticas ahí. Entonces de nuevo, tú eres el conductor, tienes al candidato de prueba, tienes al tomador de notas. Lo mejor es grabar el audio con tu teléfono aquí. Pruebas con el teléfono de otra persona. Recuerda a los tomadores de notas solo observando y tomando notas. No están hablando. Estás haciendo la mayor parte de la charla y las observaciones con este candidato de prueba. Si estás en el sitio, estás haciendo grabación. Entonces esto significa que alguien está en el sitio contigo y dices que tienes una laptop en la que estás probando. Puedes probar la grabación de pantalla con Zoom. Zoom es una herramienta que te permite hacer videos FaceTime y también puedes hacer compartir. También puedes compartir el, la grabación de pantalla con QuickTime. Eso es lo que estoy haciendo ahora mismo para grabar estas pláticas. Y aún así quieres tener tu dispositivo de audio para el audio también. Zoom hará el audio contigo. Quicktime también lo hará. Pero te recomiendo hacerlo también desde tu teléfono. De acuerdo, si estás haciendo una prueba en tu teléfono, puedes descargar una aplicación llamada look-back participar. Y eso te permitirá hacer grabación de pantalla desde tu teléfono y grabación de audio todo en una sola toma. La aplicación funciona bastante bien. Sí tiene unos bichos aquí y allá cada vez que lo he usado, pero es una aplicación realmente sólida en general y la capacidad que hace. Por lo que estos refieren todo in situ donde en realidad se puede ver a alguien físicamente allí en la habitación contigo. Para grabación remota, remota. Si estás haciendo una aplicación de escritorio, puedes hacer grabación remota. Puedes compartir un enlace Zoom. Esta es la aplicación Zoom. Si te interesa aprender más, solo tienes que ir a zoom dot IO y puedes ir a buscar información sobre cómo usar Zoom. Se puede pulsar el botón de grabación y hacer zoom. Puedes compartir tu pantalla. Se pueden dar controles de ratón y se puede hacer que alguien pruebe el prototipo. También puedes presionar el botón de grabación en Zoom que esté haciendo todo tu trabajo por ti en un solo lugar. Si estás haciendo uso compartido de pantalla al probar un móvil, no hagas eso. Se recomienda no hacerlo. Los dispositivos móviles están destinados a ser utilizados en la naturaleza, no a través de una pantalla. Por lo tanto, no pruebes móviles de forma remota. No es un 100 por ciento concluyente. Y si lo hicieras, solo estás probando contenido, no la usabilidad de la aplicación. Muy bien, así que estas son las mejores prácticas cuando ahí fuera haciendo pruebas de usuario. Voy a venir a la pizarra en tiempo real aquí, esta es mi pizarra digital y te mostraré cómo sintetizar tus insights y tus hallazgos después de que hayas hecho las pruebas de usuario. Para que puedan ver, sigo desplazándome por aquí. Bueno en realidad antes de entrar en eso, Déjame solo compartir contigo un par de cosas interesantes que he aprendido en el camino al hacer pruebas de usuario. Entonces hay algunas cosas interesantes alrededor del verbage. Entonces si encuentras después de un montón de pruebas que tus usuarios están llamando a algo en la interfaz de usuario un nombre diferente, la interfaz de usuario, un nombre diferente al que hay en la pantalla. Vuelve y cambia la verbiage en los wireframes o diseños y cambia un verbage a las palabras que escuchas que los usuarios lo están describiendo como. Mira y observa el lenguaje corporal de las personas. A veces no todo el tiempo, pero a veces y la gente se apoya en algo. Significa que puede gustarles. A veces cuando se inclinan hacia atrás, puede que no les guste. Inclina hacia atrás en sus brazos doblados a ellos probablemente no les guste. Prueba la habitación aunque si hace frío, gente tiende a doblar los brazos también. De acuerdo, tan estrecha esa pregunta alrededor. Esta es una buena pregunta en torno a la expectativa. Entonces si un usuario va a hacer clic o tocar un botón antes de interactuar con él, solo diga, ¿qué, qué es eso? ¿ Qué crees que hará eso? ¿ Y obtener su expectativa? Y luego déjalos ir adelante para decir, bien, genial, Adelante y proceder. Y luego darán propina y tocarán o pincharán en el botón. El caminar, otra vez, ya te he dado esto. Esta es la mejor línea de apertura de la historia cuando tu usuario ve una nueva pantalla, solo camina por la pantalla y dime qué significa todo para ti. Una de las mejores cosas ahí. Entraremos al otro un poco más avanzado. Aquí hay uno que es genial. Entonces, sin pruebas, está bien cometer errores. Simplemente no se escape y reaccione inmediatamente después de recibir un punto de datos negativo en obtener la validación sobre ese punto de datos negativos a. Entonces si es realmente doloroso o confuso para una persona, no te detengas y cambies todo el diseño. Valida que eso sea doloroso y confuso para más de tres personas, tres a cinco personas, entonces puedes cambiar el diseño. ¿ De acuerdo? Entonces con eso que se dice, vamos a decir que te acabaste, hiciste un montón de entrevistas. En este caso, has entrevistado a tres personas, haz la misma síntesis que te enseñé en los videos de investigación o reutiliza notas pegajosas. Entonces tienes tres personas. No tenemos a Naomi, tenemos a Joe Hahn y tenemos aquí. Y lo hemos probado con tres personas hasta ahora. Y estos son todos sus insights, uno por nota pegajosa aquí. Y lo que quieres hacer es finalmente ir a agarrar estos insights y te puedes imaginar que esto es un tablero físico, pero en realidad se ve algo así. Aquí. Tienes las pantallas selladas a una pizarra. Aquí tienes estas notas pegajosas debajo de ellas. Aquí estoy yo, Diseñador aquí haciendo esto junto con el cliente. Tenemos la pantalla. Seré Insights debajo de las pantallas, toda la gente aquí que entrevistamos a la izquierda. Entonces les voy a mostrar cómo hacemos esto por, manera digital con tablero en tiempo real ahora mismo. Pero se puede hacer esto en el mundo físico con notas pegajosas reales también. Algunos en tablero en tiempo real tengo naomi. Entonces lo que podría hacer es agarrar los insights que se relacionan con cada pantalla. Entonces digamos que mi Naomi dijo que nos faltan algunos de sus sabores favoritos aquí en esta pantalla. Entonces podemos ir a agarrar esa perspicacia, ponla aquí. Y digamos que dijo que le gustaba número telefónico o una forma de contactar a esta persona en el momento de la entrega en caso de que se mueva un poco, podría estar al frente o a una cuadra de distancia. Ella puede tener mensajes de contactor a esta persona que va a entregar el Bobo de t. Y escuchamos lo mismo de joe Hahn aquí. Entonces voy a poner eso junto a esa pantalla. Y Anna dijo lo mismo alrededor del arco pero T sabores establecidos, nos falta un par de sabores aquí. Y se puede ver lo fundamental de esto. Por lo que eventualmente estás esperando que tengas un montón de insights por pantalla. Puntos de confusión, puntos de alegría. Pero eventualmente tienes lo que Like here, que es un montón de insights relacionados con cada pantalla. Está bien, genial. Entonces creo que eso cubre la mayoría de las pruebas de usuario. Por lo que la mejor manera de hacer esto y llegar a ser bueno en esto es solo una buena práctica. Esto salir en la naturaleza. Ve a hacer tus pruebas de usuario. Encendido. En el siguiente video, te mostraré la base de un sistema de diseño. Te guiaré por lo que es un sistema de diseño. Y luego tomaremos ese conocimiento y aplicaremos el diseño visual al wireframe que creamos en el segundo a último videos antes de éste. Como siempre, gracias por ver y te veré esperemos el siguiente video. Adiós. 11. Aprende cómo crear un sistemas de diseño: Que un video que cubra cómo construir un caso práctico de diseño UX y diseño de experiencia de usuario 101. Y última serie de videos. Aquí hemos cubierto mucho terreno, pero continuamos con los objetivos, las personas's y la investigación. Declaraciones de problemas a wireframes, hacemos prototipos clicables. Y el último video hablé sobre cómo hacer pruebas de usuario y mejores prácticas al realizar pruebas de usuario y cómo sintetizar tus insights y patrones que aprendes de las pruebas de usuario también. Por lo que el siguiente video que tendré estará por ahí aplicando diseño visual a tu wireframe. Pero antes de entrar en esa, quería hablar un poco en torno a un sistema de diseño y lo que constituye un sistema de diseño. Y nos meteremos un poco en guías de estilo y bibliotecas de componentes también. De acuerdo, entonces si vienes a UX honey.com, este es el sitio web que doy clases en la universidad. Y haces click en este enlace , te llevará a una página como esta. Um, desplácese hacia abajo hasta la parte inferior y encontrará aquí el enlace llamado sistema de diseño. Adelante y da click en ese enlace y llegará a una página como esta. Está bien, genial. Entonces los sistemas de diseño, realmente estamos descomponiendo diseños para ingeniería y también estamos usando un sistema de diseño como un conjunto de reglas de diseño, componentes y estilos que pueden ser adoptados por otros productos dentro de una organización u otras empresas en la industria. Entonces esa es la definición de un sistema de diseño. Cuando estés diseñando, recuerda, es bueno reutilizar y no crear elementos de interfaz de usuario únicos. Por lo que nuevamente, se trata de un conjunto de reglas de diseño, componentes que pueden ser adoptados por su producto u otros productos podrían estar dentro de su organización, o puede ser dentro de las empresas dentro de la imagen. Entonces ejemplos de eso son un buen ejemplo de eso es Google Material Design. Ese es un sistema de diseño realmente bueno que otras organizaciones y empresas dentro de la industria usan y, y recogen. ¿ De acuerdo? Así que recuerda que tus decisiones de diseño se convierten en artefactos de interfaz de usuario, artefactos de interfaz de usuario que se convierten en componentes de diseño reutilizables vivos. Te mostraré algunos ejemplos de componentes habitables de diseño. Y a partir de ahí, se desarrollará un lenguaje de diseño interno y un iterativo y se utilizará para cerrar la brecha con respecto al diseño y la ingeniería. Por lo que todos quieren tener el mismo vocabulario cuando están hablando con los componentes y elementos de la interfaz de usuario. Y piénsalo. Me gusta pensar en estos componentes y elementos de interfaz de usuario como si estuvieras haciendo un pastel. Y digamos que Kc es una pieza de software en esta analogía, lo que compone un pastel es una serie de ingredientes. Y entregas esa receta de ingredientes a cualquiera en el mundo. Y pueden hacer la misma torta exacta que puedes hacer de ella tu casa. Entonces piensa en eso como un pastel siendo un producto y lo que compone un producto. Hay muchos elementos de interfaz de usuario. Y todos esos elementos de la interfaz de usuario tienen visuales, diseños para ellos y estilos para ellos. En esos estilos están las recetas que componen ese software. Analogía tan bastante simple ahí. De acuerdo, entonces, ¿cuándo deberías usar y empezar a pensar en un sistema de diseño? Para que puedas tener un diseño desde cero en el que estás empezando a pensar. Y cuando te metes en una herramienta de diseño, puedes empezar con el diseño de un par de pantallas. Después de tener un par de pantallas, diseña duns y comienzas a reutilizar un elemento. Empezó a copiar y pegar elementos. Te detienes en ese punto. Y debes crear una biblioteca de componentes global que puedas sacar a medida que diseñas nuevas pantallas. Entonces recuerda en los últimos videos, cuando en los videos wireframe de cómo diseñar un wireframe, te mostré cómo crear un símbolo y cómo hizo que fuera realmente fácil cambiar ese color y estilo de símbolo en una zona. Y cambiaría a lo largo de cientos de pantallas que te dieron esto y de eso estamos hablando aquí. Estás creando una biblioteca de símbolos global. Y piénsalo. Es así como los ingenieros construyeron software. Por lo que debes espejar su proceso dentro de tus herramientas de diseño. Bueno, es una mejor práctica hacer eso. De acuerdo, entonces, ¿qué constituye un sistema de diseño? Tenemos más o menos algunos elementos aquí podemos platicar. Entonces el primero aquí de la izquierda es que tenemos la voz y el tono. Entonces, ¿cómo quieres sonar? ¿ Cuál es el tono de voz? Qué mensaje de éxito es, cuáles son nuestros mensajes de error. ¿ Y las páginas de marketing? Un área de un sistema de diseño. El otro es una guía de marca. Entonces, ¿cómo se ha conectando tu software al mercado? ¿ Tienes reglas sobre color, reglas sobre logotipos, para tener reglas sobre iconos? ¿ Y tienes reglas sobre tipo? El siguiente es una biblioteca de componentes. Aquí es cuando hablo de mucho. Um, ¿cómo, cómo no creamos elementos de UI de una sola vez? Por lo que tenemos botones y Campos y desplegables y modales. ¿ Cuál es tu lenguaje visual? ¿ Cómo desencadena tu visual la emoción? Entonces, ¿cuál es tu tono visual? ¿ Qué emociones vienes de tu tono visual? ¿ Cuáles son las definiciones del lenguaje y cuáles son sus reglas visuales? Entonces definiciones de idiomas, ¿cómo se habla en equipo? Habla de cosas que estamos diseñando aquí. ¿ Cuáles son tus reglas visuales? Por lo que esos son mucho que ver con tu guía de marca también. Y luego tu guía de estilo. Este es el conformado de elementos de la interfaz de usuario. Entonces tus muestras de color, el desglose de Eli, la consistencia espacial, el sistema tipográfico. Y luego tienes el lenguaje de diseño, que es realmente las reglas de los diseños de interacción. Y estas reglas pueden ser adaptables. Entonces tienes reglas de interinteracción, tienes consistencias de transición, tienes patrones de uso, y tienes patrones de diseño y de interfaz de usuario. Entonces, cada vez que estás hablando en torno a cualquiera de estos elementos aquí, estás hablando en torno a un sistema de diseño. Por lo que este es todo el enfoque sistemático del diseño que reúne aquí estos seis elementos. Entonces déjame mostrarte un ejemplo bastante bueno de como una guía de estilo o una biblioteca de componentes. Entonces el click aquí, Aquí está la empresa que trabajé para Pivotal. Puedes ir a la guía de estilo dot pivotal dot io. Se puede ir a los componentes y se pueden ver todos los botones que tienen aquí. Puedes desplazarte hacia abajo y ver sus botones. Mucha una y esta es una guía de estilo de vida. Entonces si quiero esto, en realidad puedo obtener el código. Por lo que se ve este show HTML. Ahora puedo copiar este HTML. Si ve esto React, React es también un marco visual. Puedo copiar este código en mi aplicación, casa bastante sólida. Y tenemos a la izquierda aquí todos los componentes. Entonces tienes alertas aquí, aquí hay un montón de alertas. Puedo ver el código de cada uno. Tienes formularios aquí. Por lo que puedo ver aquí hay un formulario de usuario aquí. Y sigue y sigue y sigue. Es bastante buen sistema de interfaz de usuario. Cuando piensas en un lenguaje de diseño como un reglas de interacción y consistencias de transición. Ese de aquí, material dot IO es realmente sólido. Entonces Google hizo esto y se convirtió aquí. Aquí están sus reglas. A mí me gusta porque te dan buenos ejemplos y malos ejemplos, ¿no? Entonces aquí te explicamos cómo revelar una tarjeta y revelar más información. Simplemente crece un poco. Aquí, se voltea. Entonces es demasiado pesado de una transición. El resbalón en el miro mucho esto. Es genial, pero es mucho donde esto es muy gentil y agradable y esto es muy abrupto, este sistema aquí. Para que puedas pasar por todo el sencillo, a través de gestos aquí y decirte que tienen reglas al respecto. Y todo tipo de cosas cool que puedes ir a ver. Bastante guay aquí. De acuerdo, lo siguiente que voy a cubrir es la guía de estilo. Por lo que se trata de un confeccionado con muestras de color y estilos de tipografía. Y también se meterá en algunas bibliotecas de componentes. Por lo que puedes ver aquí es la mejor práctica cuando estás estudiando diseño visual a una aplicación. Y recuerda esto cuando llego al siguiente video, porque cuando aplicamos diseño visual a nuestra aplicación que creamos anteriormente en los videos pasados, la aplicación OPT, hablaré en torno al color de acción. El color que es la acción más importante para que el usuario tome en cada pantalla o cada sección. Y esto debe ser consistente. Entonces este es nuestro color de acción. Se llama azul fresco. Tenemos aquí lo que se llama la muestra de color hexadecimal. Y podemos entregarle eso a la ingeniería y ellos sabrán exactamente de qué color es este por este código aquí, tenemos los botones de acción secundarios. Esta es la acción secundaria, digamos cancelar, un botón de cancelación versus un color de acción siendo un botón de guardar. Entonces esta es la acción secundaria que queremos que hagan los usuarios. Y tenemos todos nuestros colores aquí, todos nombrados. Tienes un color de error, tienes en el color de éxito por aquí. Todos tienen nombres para ello. Y de esa manera podemos conversar en equipo alrededor de estos colores. Entonces cuando decimos Flecha error color, no solo estamos diciendo rojo. Podemos llamarlo rojo coral, o podemos llamarlo color error. También podemos decir que verde GO verde. Y luego nos estamos refiriendo a este color de éxito, estos grises, podemos usar gris delfín, podemos usar gris trazo, podemos usar hover azulado, podemos usar azul Hubbard, naranja caliente, lluvia morada. A mí me gusta esa. Voy a bar azul, ¿verdad? Entonces estos son un lenguaje que hemos creado a partir del color. Y puedes ver aquí tenemos nuestros colores primarios en el uso superior para la mayor parte de la aplicación. Colores secundarios aquí en la parte inferior utilizamos para otras partes de la aplicación. De acuerdo, entonces ahora vamos a meternos en las reglas de topografía. Entonces aquí tenemos una serie de lo que llamamos H1, H2, H3, H4, H5, A1, a2. Y así sucesivamente. Y lo que es esto son estos son titulares, por lo que estos son 21 va a ser la fuente más grande, no necesariamente un titular en tu IU, pero el que es el mayor tamaño de fuente en la aplicación. H2 es secundario en el tamaño de fuente más grande utilizado para H1. En ocasiones tendrás un H2A, que es que estamos usando regular en este caso, estamos usando luz. En este caso, h3 no es tan grande como H2, poco más pequeño y un poco más inteligente que h3, h4, y luego un poco más inteligente que H4, H5. Y entonces tenemos A1 para párrafos. Texto tan pequeño. Entonces tienes a1, a2, a3 aquí debería ser, es una copia duplicada. Para que se pueda ver aquí a la derecha, hemos presentado este sistema. Vamos a usar Roboto Open Sans para BAD Open Sans. Y aquí tenemos ejemplos cuando los estamos usando también a la derecha. Por lo que se pueden ver los ejemplos en la aplicación de donde viven estos. Si quieres aprender más en torno a la topografía, puedes ir a momentos con tipografía. Este es un sitio web que he creado y esta fue una charla que hice para Adobe en una conferencia que pusieron llamada Adobe MAX. Y esto pasa por todo un montón de último diseño de tipo sistemático. Cuál es el mejor utilizado para párrafos y toxina en H1 y cómo usar un H1 y H2 para equipos de escritorio, tabletas y dispositivos móviles y mejores prácticas, su suma. Me rompí medio, el blog web más popular del mundo y sus sistemas tipo. Y aquí cubre mucho terreno. Probablemente haré otra charla sobre Skillshare rompiendo esto justo en tipografía aquí. Pero si quieres una oportunidad de ir a echar un ojo a todo esto, sólo tienes que ir a momentos con typography.com. Aquí se puede ver la URL. Y encontrarás todo un montón de información al respecto. Y así no lo han hecho, ahí está esto, hay algunos colores que reflejan la guía de estilo. Y aquí tenemos el sistema de tipografía. Y luego entraremos en más la biblioteca de componentes. Por lo que tenemos botones, tenemos estados flotantes para los botones. Y desglosamos los tipos, el color, el color, reutilización, el color hexadecimal aquí. Y este es un código real. Puedes meterte en esto, puedes copiar esto. Puedes abrir el navegador aquí. Puedes ver el código aquí si lo deseas. Y aquí tenemos todas nuestras formas. Por lo que hablamos en torno a los estados estacionarios y estados activos de nuestras formas. Y los estados de error tienen casillas de verificación. Y luego entraremos demasiado en el mundo del diseño impulsado por componentes. Puedes encontrar mucho de eso cubierto aquí en los ejemplos de diseño de material fundamental. Pero una cosa que sí quiero hablar es que puedes usar el espacio como componente. Entonces aquí tengo estas casitas rojas. Y cuando tienes dos cuadrados rojos, hay 30 píxeles, por lo que cada uno es un incremento de 15 píxeles. En cualquier momento uso mis diseños, me gusta pensar a través del espaciado como un atributo también. Por lo que puedes ver esta tarjeta aquí a la derecha. Tiene un ícono, tiene textos, pero todos son espacio en consecuencia, como el icono de la parte superior de esta tarjeta es de 16 píxeles. Y el texto aquí, destinatario dirigido es un 120 píxeles de abajo. Y se puede ver cómo estoy usando este atributo de espacio a lo largo de mi diseño. De acuerdo, Así que ahí lo tienes. Esa es más o menos la base y el ejemplo del sistema de diseño y lo que es un sistema de diseño. Entonces otra vez, gracias de nuevo por ver, y ojalá los vea en el siguiente video, cual aplicará diseño visual a su wireframe. Déjame darte un pequeño vistazo a cómo se verá eso. Hombres que habrá XD aquí. Voy a ir a ese diseño bokeh t que hemos hecho todo este tiempo y te daré un poco de resumen, llevará un par de estas pantallas y Watson Visual Design a ellos aquí también. bastante divertidas. Muy bien, Tan poco adelanto ahí, qué esperar. Y ojalá te vea en el próximo video sobre cómo aplicar diseño visual a tu wireframe. Como siempre, gracias de nuevo y nos vemos pronto. Adiós. 12. Cómo aplicar el diseño visual en tu prototipo: Bien, bienvenido de nuevo a cómo crear un estudio de caso de diseño de UX y diseño de experiencia de usuario uno a uno. Muy bien, así que hemos cubierto mucho terreno desde el principio de aprender a establecer metas hasta crear personajes y guiones de entrevistas de usuario y salir y realizar investigaciones hasta la sintetización tu investigación también, cómo escribir una declaración de problema. Aprendimos algunos mapas de viaje del cliente. Hicimos bocetos de plantillas y marcos. La última serie de videos, cubrí cómo crear un diseño de wireframe. Cómo crear un prototipo en el que se puede hacer clic, cómo tomar ese prototipo en el que se puede hacer clic y hacer pruebas de usuario y mejores prácticas al sintetizar su conocimiento de prueba de usuario, conocimientos. Aprendimos en el último video cómo crear un sistema de diseño y las bases de un sistema de diseño. Ahora te voy a enseñar a tomar ese diseño original de wireframe y aplicarlo diseño visual. Entonces, ¿hablemos un poco sobre qué es el diseño visual? diseño visual es el estudio de la creación, posicionamiento, elementos gráficos para la intención visual. Es un estudio continuo de composiciones de maquetación, colores, tipografía y estado de ánimo visual. Se necesita mucha práctica para ser bueno en eso. Así que recuerda si estás empezando y aprender lleva tiempo. Así que no seas demasiado duro contigo mismo, solo sigue practicando y explorando estados de ánimo y tratamientos visuales. Inspírate o ayúdalo. Y te voy a dar un pequeño consejo aquí antes de saltar a la creación de diseño visual a tu wireframe, te voy a mostrar algunos métodos que uso. Entonces algunos consejos aquí antes de salir y hacer diseño visual se describe aquí. Diseño visual con adjetivos. Te ayudará a aprender un poco más de cuál es el objetivo de tu diseño visual. Entonces algunos adjetivos que se te ocurran es que puedas decir, quiero que algo visual sea divertido y juguetón pero moderno. Entonces puedes tomar esos adjetivos y puedes ir a buscar mood boards. Estos son ejemplos visuales que se aplican a esos adjetivos. También es mejor crear una carpeta para poner tu inspiración visual. Así que donde sea que encuentres cosas interesantes o geniales, o cuando estés en la naturaleza y tu propia vida y veas algo, toma una foto con tu cámara en tu teléfono y colócala en estas carpetas. Y también es bueno practicar simplemente explorando muchos tratamientos visuales diferentes. Déjame mostrarte un poco de técnica de cómo idear adjetivos y cómo aplicar un mood board a algunos de esos adjetivos aquí. Bien, Entonces puedes pensar el maquillaje visual al principio como solo palabras como describir tu estado de ánimo que deseas de tu diseño visual. En este ejemplo, hemos platicado un poco torno a algo que es instructor moderno, estructurado y creíble y aspiracional. Describimos estos adjetivos, los convertimos en sustantivos haciendo mood board. Entonces aquí hay un ejemplo de algunos diseños que llenan monitor. Paleta de colores moderna. Están muy limpios, buen diseño. Mira esta pequeña aplicación para iPhone por aquí. Este es un trabajo real. Este es un trabajo real que he hecho para un cliente. Aquí hay algunos ejemplos que lo hicieron sentir creíble, como un banco, pero realmente confiable. Así que aquí hay mucho azul. El azul es un color confiable, por lo que es un color que usan los hospitales y los bancos. Es un color muy calmante. Estos pequeños ejemplos aquí los elementos visuales se aplican a lo creíble. Entonces lo siguiente aquí, alguna estructura, puedo ver que todo está tipo de encajonado como cuadrículas a ello. Esos muy estructurados. Aquí puedes ver alguna aspiración, solo las fotografías, los tratamientos del sol, los rayos solares y algunas tomas nocturnas y algunas puestas de sol. Simplemente muy inspirador. Estábamos tratando de plasmar eso de una manera visual. Entonces, ¿a dónde vas para conseguir muchos de estos estados de ánimo? Un par de lugares a los que me gusta ir. Primero es que me gusta ir a regatear. Aquí se puede ver triplicado. Tiene tres Bs y es DRI BB. Es solo un lugar donde los diseñadores van a publicar cosas geniales que han hecho. Puedes hacer una búsqueda por aquí. Vamos a ver algunas pantallas. Y solo puedes ver muchas formas diferentes de tener un diseño de pantalla aquí. Bastante interesante. Puedes inspirarte con solo mirar este tipo de trabajos. Tiene gifs animados en él, por lo que puedes ver pequeños detalles de interacción aquí. Un lugar interesante para presumir y iPhone ahí. Veamos. Éste de aquí. Bastante genial. Son solo muchas y muchas cosas para inspirarte y mirar y ayudar a perfeccionar tu arte visual. Bien, otra forma en la que me gusta encontrar ejemplos de mood board es que no tengo carpeta de inspiración. Así que de nuevo, esta es una carpeta que he tenido mi escritorio en mi computadora y llené esto con cada vez que he visto algo tan inspirador, o viene de Dribble, yo y mi en el mundo. Si veo un sitio web en cualquier cosa, simplemente lo meto en esta carpeta. Y vamos a repasar por un par de ellos. Simplemente están llenos de diferentes diseños y estados de ánimo, incluso estilos de ilustración, logotipos. Y cada vez que me quedo atascado en algo, suelo abrir primero esta carpeta y solo la reviso y simplemente me inspira. Y está lleno de toneladas de hermosos ejemplos de diseño que otras personas hicieron que ojalá pudiera hacer dos. Sí, sigue y sigue y sigue y sigue y sigue. Empecé esta carpeta, creo en 2009. Y tiene mucha y mucha información sobre él. Solo estoy haciendo clic en algunas de las áreas en este momento. Pasemos por aquí algunos que encontré en 2015. Mucho genial, solo interesa el diseño, algunas formas de hacer diferentes diseños. Sigue adelante y te voy a mostrar quizá un par de ejemplos más aquí. Sí, pueden ser aplicaciones y sitios web para iPhone y logotipos y aplicaciones para iPad, gifs animados, diseños editoriales, todo tipo de cosas buenas. Así que solo las mejores prácticas para poner todo tu material inspirador en una carpeta y desarrollarlo con el tiempo y volver a él cuando te quedes atascado en el diseño visual o ayuda solo para despegarte e inspirarte. Algunas mejores prácticas a la hora de desarrollar su diseño visual. Vamos a ver lo que vamos a hacer hoy. Tengo un video aquí de la app de Betsy de arco final que hemos estado haciendo todo el tiempo. Y nuevamente, esta es una aplicación que ha sido tema a través de todos los videos que podemos ver aquí. Voy a seguir adelante y pedir un poco de té de baba. A mí me gusta ese té regular con leche. Y tienen las semi suites. Tapioca grande. Presiona el botón Agregar aquí. Ir a la siguiente pantalla. Pero en mi dirección. A continuación, pon la información de mi tarjeta de crédito y boom, aquí estoy y ahí está Bobo entra en mí cinco minutos, 2 min, y me sale bulbar t. Así que vamos a aprender a tomar tu wireframe y vamos a aprender a aplicar el diseño visual de una manera que se vea así, será incluso tal vez divertirse y usaremos un color además del rosa. A lo mejor vamos a usar algo de azul aquí. Entonces, sin más preámbulos, sigamos adelante y abramos Adobe XD. Se puede ver que esto fue ese wireframe que construimos en el último video. Entonces, si quieres aprender más sobre cómo construir este wireframe y cómo hacer el prototipo aquí que veas. Puedes volver al video. Puedes aprender a hacer este diseño. Aprendí algunas de las técnicas de prototipado aquí. Lo que estoy haciendo ahora mismo, entonces tengo esto todos los wireframes y prototipos. Pero vamos a ver tomar una pantalla aquí y aplicarle un poco de diseño visual. Así que lo primero que voy a hacer aquí es que voy a seguir adelante y comenzar con un lado a lado de esta pantalla de introducción. Y le vamos a aplicar algo de color. Me voy a quedar con el fondo negro. Voy a guardar un poco el texto aquí. Voy a mantenerlo blanco, pero voy a sacarlo un poco, un poco transparencia en él. Y se ve bien. Pero no creo que voy a hacer aquí es que voy a seguir adelante y poner una línea en la parte superior. Esto tiene un estilo visual. Voy a hacer esta línea ¿por qué? Aunque no lo quiero demasiado fuerte. Entonces, aquí hay una cosa clave cuando estás haciendo algún trabajo de diseño visual es que normalmente quieres que tu comunicación sea el punto más fuerte de la página. Eso es lo que va a hacer tu diseño. Es para servir a las intenciones visuales y a la comunicación visual. Entonces mira ahora mismo cómo el texto es un poco gris y esta línea aquí es blanca y es más fuerte que el texto. No queremos eso en el ámbito jerárquico de nuestro visual. Entonces voy a hacer retroceder la opacidad de estas líneas solo para que apenas la veas. Bonito. Eso se ve bien. Bien, así que voy a seguir adelante y hacer retroceder tal vez esta baba de carga también. Creo que el tamaño del texto está bien en él. Voy a hacer retroceder esto también. Fresco. Y tengo este ícono de un probit t, pero lo tengo aquí en Illustrator. Entonces voy a abrir Illustrator e ir a mis activos. Y pueden ver aquí tengo todos los activos para conformar esta bombilla en T diseñada, incluso esta de aquí, el púlpito T mismo. Entonces lo que voy a hacer es que voy a colocar este falso t sobre negro en Illustrator. Y voy a empezar a hacerlo blanco primero, para que puedas verlo blanco. Entonces voy a añadir el color. Sé que en el, en el ejemplo que te mostré, usamos rosa. Vamos, vamos a divertirnos un poco. Usemos el azul. Y voy a hacer el azul pajizo también. Lo cambiaremos un poco. Gracias. Bien, entonces ahora tengo eso en mi Illustrator. Voy a seguir adelante y volver a OPM, Adobe XD. Antes de hacer eso, voy a copiar esta bombilla de t. voy a ir a XD y voy a colocar esta bombilla una T en la pantalla. Se ve bastante divertido. Esto lo bajó un poco. Fresco. Bien, genial, eso se ve bastante bien. Lo siguiente que voy a hacer aquí es que vamos a ir a esta página extranjera aquí después de la pantalla de carga. Y vamos a venir a este de aquí. Dice el Bobo, no copiar la pantalla. Elimine algo de esto aquí, manténgalo a la vista. Y voy a seguir adelante y hacer de esto un fondo oscuro primero para que pueda hacer el relleno aquí a la derecha. Haz que esta habitación se oscurezca así. Voy a agarrar este texto aquí, el apellido, voy a hacer ese texto. Hagámoslo blanco. Y hagamos los textos que en realidad estoy agregando aquí. Voy a hacer de esto los textos azules. A mí me gusta ese color, así que voy a añadir ese color a mi paleta de muestras. Y sólo voy a seguir pasando por aquí haciendo estos cambios. Sigamos adelante y hagamos ese azul igual con el correo aquí. Luces y adelante y agarra mi correo electrónico. Haz que sea azul. Lo mismo con la contraseña y hacer esta blanca. Y adelante y haz este aquí. Este azul. Aquí hay un par de líneas. Entonces déjame agarrar todas estas líneas y hacer que esta línea sea blanca. Y tengo una opacidad muy ligera sobre ella. Para que veas que son blancos así, pero eso es demasiado fuerte. Quiero destacar esa comunicación visual aquí. Bien, y yo tenía un viejo logo aquí en la parte superior. Pero antes de hacer eso, déjame poner aquí el texto de llamado a la acción, Texas diciéndote qué hacer. Tengo este inicio de sesión. Voy a seguir adelante y hacer que el login sea azul. Y voy a hacer este registro aquí también. Estamos llegando ahí. Yo, déjame ir a agarrar el viejo logo de Illustrator. Entonces voy a ir a Illustrator aquí. Tengo este logo y lo copio, lo pego en su falta. Segundo revertir algo de esto. Entonces voy a hacer que el texto sea blanco ahí, y voy a hacer que la plática sea blanca burbuja. Y voy a hacer los textos de rodilla negros. Cuando vuelva a copiar esto. Voy a pegar este logo. Aquí. Se ve bien. Parece que no debería estar tocando la burbuja de pensamiento. El yo, mira, puedo hacer cambios directamente en Adobe XD, lo cual es agradable. Vamos a agarrar este logo. Vamos a ponerlo de nuevo en la pantalla de carga. ¿Qué tal eso? Exploraremos un poco de dónde hablé antes. Se trata de explorar cosas. Sí, vamos a hacer eso. Eso se ve bien. Vamos a divertirnos un poco con el logo aquí. Hagamos esto, hagamos este un color aquí más. Pico. Sí, eso es un poco genial. Por un poco más de diseño oficial en esta pantalla de aquí, solo por fantasía, aquí vamos a agarrar este rosa. Voy a hacer que sea una paleta de colores. Agrégalo a mi paleta de colores aquí. Entonces ahora tengo rosa viniendo, ¿verdad? Seleccionemos los textos de carga. Haz que ese P bombee la opacidad sobre él. Sí, ahí tienes. Eso se ve divertido. Me gusta adónde va esto. ¿Y usted qué? ¿Genial? Bien, vamos a poner el, probar algo. Pongamos la opacidad aquí abajo y la copa aquí. Se ve genial. Bien, entonces lo que estamos pasando aquí es que tengo un par de cosas. Estamos usando el color azul. Y tenemos azul para los formularios, y tenemos azul para los botones, y tenemos el azul para el registro. Pero hagamos un color de acción fuerte para las cosas en las que puedas hacer clic. Así que vamos a hacer estas rosas. Vamos a mantener este tema a lo largo de los diseños que estamos haciendo. Queremos un color de acción para representar todas las cosas en las que puedes hacer clic en ellas. No todos ellos, sino la mayoría de las cosas en las que puedes hacer clic en las acciones primarias por pantalla. Entonces pasemos a la siguiente pantalla aquí, que es la pantalla grande. Aquí es donde tienes toda la composición de la página principal de la bombilla de t aplicación. Y al igual que hice con el inicio de sesión o la página de registro, voy a copiarlo por aquí. Y te voy a enseñar un poco de cómo construir esto. Voy a eliminar algunos de estos elementos aquí. Vamos a empezar de cero. Mira esta pequeña línea punteada aquí. Esto indica la parte inferior del pliegue. Este es el contenido que no podrás ver cuando cargues esto en una pantalla. Para que pueda irme. Por aquí a la parte superior derecha donde dice Play. Puedo ver este prototipo. Y pueden ver, puedo ver la barra de tabulación aquí, está a la vista, pero si la muevo por debajo del pliegue, vea cómo se va en el visor de la izquierda aquí. Entonces eso es lo que me está indicando esa pequeña línea punteada . Así que sigamos adelante y comencemos construyendo un poco de esta barra de pestañas de aplicación OPT por aquí. Así pueden ver que voy a borrar estos iconos y voy a ir a buscarlos del Illustrator solo para reconstruir esto. Aquí tengo la barra negra. Es sólo un rectángulo negro. Por aquí en la parte superior derecha. Si ves a donde apunta mi mouse, dice posición fija al desplazarte, mira lo que pasa cuando no tengo eso marcado y voy a presionar play, que puedo ver el Mach. Y échale un vistazo. Cuando me desplace esta barra negra se mueve hacia arriba. No quiero eso. Quiero eso arreglado. Voy a seguir adelante y voy a presionar la casilla de verificación aquí, posición fija al desplazarse, presionar play y mirar, se queda en la parte inferior. Lo que estoy tabulando o deslizando, desplazándome hacia abajo. Volvamos a Illustrator. Voy a agarrar aquí este pequeño icono, el icono de bombilla de Etsy con algo de color en él. Voy a volver a la aplicación XD. Voy a pegarlo. Lo equivocado. Déjame volver por aquí. Déjame agarrar la bombilla del icono T y la voy a pegar aquí. Déjame deshacerme del espectador. Pégalo justo en el centro de esta barra aquí y podrás ver que ayuda a guiar a los guías me ayudaron a saber si está centrado. Bien, se ve bien. Pasemos a mi archivo de Illustrator. Estos son todos mis íconos que necesito en Vivo. Vamos a agarrar este pequeño icono de perfil. Voy a hacerlo blanco en Illustrator. Voy a copiarlo. Ven a XD. Voy a colocarlo, encogerlo un poco. Bien, voy a seguir adelante y agruparme. Esto, facilita la selección del grupo. Voy a reducir un poco el tamaño. Colócala por aquí. Déjame ir agarrando el otro ícono en Illustrator aquí voy a ir a agarrar el carrito de compras, colocarlo en la parte de atrás, negro aquí y hacerlo blanco. Así lo puedo ver. Volver a XD. Voy a colocarlo aquí en la ficha. La mezcla de barras está en la misma posición de tamaño en relación con todos los demás elementos. Y fuera visualmente. Ahora, qué pantalla reconstruyendo es la pantalla de inicio, es la pantalla del icono bulbar T. Así que cuando no estés en esa pantalla, voy a hacer fantasmas a estas secciones un poco. Voy a hacer la opacidad a cerca del 50, 45 por ciento debería estar bien. Bien, sigamos adelante y asegurémonos de que estos tengan el elemento fijo. Entonces voy a agarrarlos y marcar la casilla aquí en puño posición fija al desplazarse, voy a agruparlo Comando G para asegurarme de que esté agrupado. También puedes hacerlo haciendo grupo aquí, haciendo clic derecho y haciendo grupo. Vamos a previsualizar eso realmente rápido. asegura de que se quede en la parte inferior. No ve lo que pasó. Creo que lo quitó cuando lo agrupé. Entonces hagámoslo una vez más. Posición fija al desplazarse, vamos a previsualizarla. Y se queda en el fondo. Bonito. Bien, por el bien del tiempo, tengo estas fotos y el ejemplo que te mostré, las tengo en foto. Así pueden ver voy a entrar en el prototipo de alta fidelidad de ya construido que está usando P o divirtiéndome un poco más que uno que estamos construyendo, vamos a usar azul aquí. Sólo voy a tomar estas fotos solo para que las tengamos aquí y colocarlas a un lado. Bien, así que lo primero que queremos hacer aquí, así que vamos a agarrar el esqueleto al otro tablero de arte de aquí. Entonces la plata. Apenas por ahora. Aquí están las fotos. Genial. Vamos a poner este habitual falsedad. Él nació aquí. Y ya pueden ver que tengo el texto aquí. Vamos a copiar esto de nuevo. Y eso se ve bien. Eso es bastante bueno. Agreguemos un poco de estilo de color a este negro. Entonces cada vez que uso Grace, me gusta hacer un poco más de un gris azulado con algo de azul en tu gracia. Siempre ayuda un poco. Bien, eso se ve bien. Vamos a aplicar este botón Agregar por aquí. Alex. Un poco bueno. Es un poco fuerte. Entonces me pregunto si incluso necesitamos la plaza. A lo mejor nosotros solo hacemos los textos ahí. Haremos esto un poco más grande aquí para que pueda ir al área de texto en Adobe XD. Vamos tal vez 25, hagamos 27 tamaño de fuente. Bien, vamos a ser agradables y grandes y agradables. Bien, genial. Agreguemos el siguiente en. Va a agregar la siguiente foto aquí. Voy a usar el mismo texto solo por el bien del tiempo, voy a copiar esto de nuevo. Una cosa que voy a hacer es empujar esto a la cima. Entonces mira donde dice Bring to Front. Voy a llevar eso al frente. Y voy a copiarlo y moverlo aquí abajo así. Se ve bien. Voy a mover estos botones de agregar un poco ahí abajo. Bien, pongamos la siguiente foto. Y queremos esto debajo de la barra de pestañas. Así que cuando todo se desplaza por debajo de la barra de pestañas. Y nuevamente, voy a copiar el overlay aquí, pero va a correr. Y luego vamos a poner el, prueba el té con leche por aquí. Ojalá te estés poniendo hambre o sed de alguna bombilla de t. Voy a asegurarme de que estos elementos de aquí estén en la parte superior. Así que trae al frente, bájala. Bien, y ahora voy a agarrar esta barra de pestañas, asegúrate de que esté al frente de todo. Todavía tienen un poco de espacio aquí. Para divertirnos, queremos mostrarle al espectador que vamos a tener algo más de queso entrando. No estamos teniendo todos los sabores que podríamos tener ahora mismo. Entonces voy a hacer una pequeña sección negra aquí. Voy a traerlo a la parte de atrás. Y en realidad es un poco de negro azulado aquí. Así que tipo de volver a nuestro tema ahí. Algún ícono azul por aquí que le gusta, sí, ahí tienes. Vamos a agarrar este de aquí. Vamos a pegarlo justo en el centro aquí. Ver esto más sabores. Esto es copia eso. Hagamos esto más sabores. Vamos a hacer esto de color azul. Y hagamos éste, mantengamos este blanco. Así que estamos usando principalmente este color rosa aquí para los colores de acción. Entonces, no hagamos nada. Pico aquí es mantener este azul. Voy a empujar todo de nuevo aquí. Control Shift soporte izquierdo. O si estás en una PC, es Control Shift soporte izquierdo. Si estás en una Mac, es Command Shift soporte izquierdo. Pero también lo voy a hacer de otra manera. Enviar de vuelta aquí. Sigamos adelante y miremos ahora, voy a repasar a la sección de previsualización de XD y ver ese video y quedar bien. Me desplazaré por mi fóvea t Aquí. Tengo algunos sabores próximamente. Se ve un poco demasiado apretado a la barra de pestañas. Así que volvamos por aquí. Voy a cerrar el visor de previsualización. Vamos a bajar un poco esta tabla de arte y darnos un poco más de espacio. Agarra eso, aquí hay más sabores y té de burbujas. Centrarlo en el espacio. Y sigue adelante y vuelve al modo de previsualización. Asegúrate de que estoy en el tablero de arte correcto. Y genial. Estoy previsualizando. Bonito, parece un bonito visual hasta el momento. Fresco. Vamos a otra página que muestra lo que sucede cuando presiono el botón Agregar aquí. Entonces, en este punto, veamos esa página en la sección de wireframe. Entonces se ve algo así. Voy a seguir adelante y copiarlo. Para que de esa manera podamos aplicar el diseño visual junto a él. Para que puedan ver en esta nueva pantalla, lo que voy a hacer es deshacerme de la vieja foto que tengo aquí. Y voy a agarrar esta nueva foto pero sobre T. Y voy a hacer un rectángulo sobre la parte superior. Para hacer este rectángulo aquí. Donde pude ver un poco de esa bombilla, una T. Basado en esta línea aquí en el siguiente tablero de arte. Voy a seleccionar ambos elementos. Voy a subir a la cima justo aquí. Y voy a hacer las áreas de intersección, los dos pequeños cuadrados que se cruzan. Y boom, puedo recortar esa bombilla en T y puedo bajarla un poquito. Genial. Envíalo al final de la página ahora mismo. Se ve bien. Sigamos adelante y quitemos ahí la marca X blanca. Iré a buscar uno de color que podamos usar. Bien, entonces volvamos a nuestro pensamiento inicial aquí, que fue que las áreas en las que se puede hacer clic son áreas en las que vamos a hacer ese color rosa. Así que vamos a hacer que todos estos pequeños rectángulos sean rosados, solo para indicar que estas son las áreas en las que se puede hacer clic. Este pequeño blanco es un poco fuerte aquí, así que volvamos y hagamos aquí solo un contorno blanco, el cuadrado. Hagamos eso, hagamos eso 30%. Voy a agarrar el otro aquí también, hacer que ese 30% hacia abajo. Se puede ver que se superponen. Entonces no queremos hacer opacidad ahí. En realidad solo queremos que sea gris. Así que vamos a buscar un, un bonito gris que podamos usar que tenga un poco de azul en él. Más fuerte. Ahí vas. Vamos a agarrar eso. Voy a seguir adelante y hacer que sea una muestra de color para poder rehacer fácilmente ese color también. Seleccionemos el siguiente gris. Ahora estamos resaltando el contenido, que es la leche, la T regular con hielo. Bien, eso se ve bien. El otro diseño que te mostré, teníamos estos botones aquí. Ellos fueron delineados. Entonces, sigamos adelante y hagamos estos esquemas. Parece que están llenos ahora mismo, como si fueran estados activos. Así que voy a hacer clic en esto y quitar el relleno. Y ya ves que lo tengo. Símbolos, así que todos van a hacer lo mismo que yo quiero que hagan, lo cual es genial. Te enseñé a hacer símbolos en el video wireframing. Entonces, si tienes curiosidad por cómo hacer un símbolo, puedes ir a ver ese video. Pero tengo esta biblioteca de símbolos aquí a la izquierda de todos los botones y todo lo que he creado en este diseño. Entonces voy a hacer que el trazo sea un poco más grande cuando lleguen a ver a los dos se ve genial. Y vean esto Textos de tapioca Bobo. Hagámoslo blanco. Destaca ese contenido. Genial. Bien, y puedes ver que está cambiando en la pantalla junto a ella. Eso es porque tengo todos estos como símbolo, lo que hace que los símbolos califiquen es ver los tres botones de agregar estos. Cambian de color a medida que yo los cambio en tiempo real. Eso es lo que hace un símbolo. Así que es muy, muy útil hacer símbolos aquí. Así que sigamos adelante y eliminemos algo del botón de la app aquí que tengo. Vamos a agarrar el botón Inscribirse. Mantengámoslo bastante simple aquí. El ritmo para apuntarse botón entonces antes de que haga eso, voy a hacer un símbolo. Te voy a mostrar muy rápido cómo hacer un símbolo del registro. Simplemente agregue el botón más aquí al símbolo. Déjame agarrar los textos. Y voy a llamarlo el botón primario aquí a la izquierda. Pero siempre que quiera usarlo, solo puedo arrastrarlo a la pantalla. Así que sigamos adelante y volvamos a que estamos diseñando aquí. Voy a agarrar el símbolo y lo colocaremos en este tablero de arte aquí. Voy a poner textos por botón de registro aquí. Sí, eso se ve bien. Bien, entonces tenemos un ícono cercano aquí. Déjame ir agarrando primero el ícono que tengo en Illustrator. Entonces lo tengo en negro por aquí. Voy a volver a Adobe XD. Voy a colocarlo. Parece un poco grande en este momento. Vamos a reducir eso. Hagamos de esto un rosa también. Y ahora puedes ver en esta página, todo lo que se puede tocar es rosa. Entonces estoy usando el color primario más brillante para indicar al usuario qué es tappable y qué no es tappable. Y ese es un aspecto clave a la hora de diseñar la interfaz de usuario. Usa tu color primario. Usa un color brillante, hazlo fuerte, y esas son las acciones principales que quieres hacer por tu usuario. Entonces voy a seguir adelante y borrar la pantalla junto a ella. Oh, aquí se nos olvidó este texto. Sigamos adelante y hagamos este bloque de texto. Fresco. Es bastante bueno. Bien, entonces voy a borrar esta página aquí y voy a hacer otro botón para el estado lleno de esta tapioca. Digamos que el usuario toca esta tapioca de mal gusto aquí. Lo que voy a hacer es primero separarlo de los símbolos porque no quiero cambiar todos los símbolos. Voy a seleccionar solo el fondo. Voy a llenarlo. Voy a llenarlo con el rosa. Fresco. Se ve bien. Es casi como si el usuario hubiera tocado este botón. Bien, así que nos estamos llevando bien aquí. Para que puedas ver cómo hemos creado una página llena de formularios bastante única aquí, regístrate. Hemos creado la página de inicio aquí y agregamos estilos a nuestras fotografías y las superposiciones. Una tabulación que te mostré en Illustrator, es lo mejor. Todos tus iconos en un solo área. Si siquiera quisiera, puedo copiar todos estos iconos aquí. Y puedo colocarlos en XD sobre en solo un tablero de arte aquí para que pueda tomarlos, vienen en vector. Puedo cambiar los colores. Si quiero ver, podría cambiar esa flecha. Sigamos por aquí. Voy a hacer uno más por ti. Es esta pantalla de mapa. Creo que este partido verde es genial. Así que vamos a entrar en la pantalla. Agreguemos un poco de amor aquí. Entonces nuevamente, la comunicación más fuerte en este punto es que tenemos la imagen del mapa, pero también es la hora estimada de llegada. Sigamos adelante y agarremos un gris para mi nombre aquí. Fresco. Sé mi nombre. No necesito que me recuerden mi nombre y mantendremos este texto blanco para que sea realmente fuerte. Aquí no tengo la imagen del mapa. Entonces si voy a Adobe XD, aquí están mi exportación, mi ilustrador. Tengo mi archivo de mapa aquí. Puedo copiar y pegar. Se. Puede ir directamente a Adobe XD, pégalo en mi pantalla aquí, tal como lo he hecho aquí. Vamos a agregar algunos diseños de color frío a esta línea aquí. Así que voy a subir la opacidad y voy a ponerla azul. Sigamos adelante y saquemos un poco este icono del logotipo. Lo mantendremos amplio. Vamos a agarrar nuestro icono de bobo T desde arriba aquí. Pero voy a agregar un par de cosas en estas propiedades aquí. Esta pequeña sección bulbosa, voy a hacer estos picos para divertirme un poco. Es algo pequeño. Probablemente podríamos conseguirlo. Escojamos esta sequía claro o azul así. Diviértete un poco con este. Voy a agarrarlo. Voy a volver, volver a mi marca aquí. Y voy a deshacerme de la pobreza que tengo aquí en el centro. Deja que este se pegue. Este es un poco más fresco. Bien, lugar en el que van a volar esto un poco. Sí, ahí tienes. Fresco. Vamos a hacer este icono, el pequeño icono del mapa, azul. Y lo que se puede tocar en la pantalla es el caso cancelado que necesitaba cancelar y todo ya sea cancelar blanco. Pero vamos a sentarnos con un poco de gris aquí. Sí, ahí tienes. Eso se ve bien. Bien. Volvamos a echar un vistazo a la final. Tengo el otro diseño visual final planeado por aquí. Ya ves que tengo todas las pantallas muy bonitas. Tengo todos los botones puestos como símbolos. Entonces digamos que cambio este siguiente botón a otro color como el azul. Mira lo que pasa. Todos los siguientes botones cambian de globo. Eso es bastante agradable. Tengo que agregar botones todos como símbolos a. Entonces si cambio un botón Agregar a otro color, digamos amarillo, todos se ponen amarillos. Lo mismo con esta tapioca. Entonces, si cambio una de las fronteras por decir naranja, se puede ver que todas cambian de naranja. Lo mismo con la x. Cambié el x2. Digamos azul. Mira como todos se ponen azules, cualquier color que realmente quiero aquí. Todos son símbolos, así que me resulta muy fácil trabajar. Así que vamos a echar un vistazo al prototipo aquí. Entonces, en el último video, cubrí cómo diseñar un prototipo para que aprendas un poco de las cosas que te estoy mostrando en este momento. Y aquí está la pantalla final, el diseño final. Y puedo seguir adelante y hacer mi nombre y apellido, contraseña, registro, gráficas y debajo de la T, regular, dulce. Ahora, ¿qué semi dulce? Entonces me puse semi dulce aquí. Podemos hacer la tapioca grande, presionar, Agregar. Bonito. Ver esa notificación en mis carritos de compras. Regresa. Parece que estoy bien con mi bulbar t. puedo presionar Siguiente, poner mi dirección. Pondré los datos de mi tarjeta de crédito y boom, superé T a la entrega. Una cosa que podrías colocar a la que puedes ir, hablé de este sitio web sobre cómo construir un video wireframe es que puedes ir a un sitio llamado el Noun Project C aquí. Y mira esto. Puedo obtener cualquier icono que quiera. Digamos que el helado. Helado. Centro. Vigila lo que sucede. Me sale un montón de íconos de helado. Así que vamos a agarrar uno de estos íconos aquí. ¿Cuál queremos conseguir? Vamos a agarrar este. Esta es una buena. Obtendré este icono, descarga básica y lo haré desde mi sitio web, SVG, eso se llama gráfico vectorial escalable. Y ahora puedo tomar eso, arrastrarlo a Illustrator. Tengo este icono y puedo cambiar un poco los colores del mismo. Entonces digamos que quiero que este icono sea azul. Puedo hacerlo azul, copiarlo. Y puedo pegarlo en Adobe XD, así como así. No íconos de helado también. Cosas bastante geniales. ¿Verdad? Entonces espero que vuelvas a aprender un poco sobre el diseño visual, se necesita mucha práctica, así que solo ve a practicarlo. Está bien si tus diseños no se parecen a los míos. Se necesita mucho tiempo para llegar a ciertos puntos donde se puede aplicar artesanía de diseño visual muy simple. Pero ojalá esta sea una buena guía de inicio para ti. Bien, así que sigamos adelante y veamos la siguiente serie de videos aquí. Así que únete a mí para el siguiente video, que hablaré un poco. Lo que hace que un buen currículum de diseño. Para que puedas tomar algunas de estas artesanías visuales que estás aprendiendo. Puedes ir a ver lo que nuestro buen diseño retoma en la naturaleza. Te daré los mejores ejemplos y también te daré ejemplos que no son tan buenos. Y ojalá te dé una pequeña pauta de qué hacer cuando estés creando un currículum de diseño. Como siempre, gracias por mirar. Espero que hayas aprendido algo y adiós. 13. Qué es y no con la curros de diseño: Está bien. Parece que terminamos muchas de las clases. Nuevamente, hemos hecho metas y guiones de persona y entrevista. Investigación. Cómo sintetizar tu investigación. Declaraciones de problemas, desglose de un viaje de cliente, mapa, bocetos, wireframing, prototipos clicables, base de prueba de usuario sistema de diseño y aplicación de diseño a sus alarmas. Enfriar, así que vamos a ver las mejores prácticas cuando se trata de tu currículum de diseño. Y lo que tengo que mostrarles aquí es lo que he hecho para el equipo de reclutamiento de mi empresa. Y yo creé esto para ellos para que puedan ver cómo es un buen currículum de diseño y cómo se ve un currículum de diseño no tan bueno. Entonces vamos a echar un vistazo. Entonces esto me ayuda a encontrar un buen diseñador. No tengo sistema de evaluación que uso. Y si te desplazas un poco hacia abajo aquí, verdad, tengo una lista de preguntas que deberían ayudarme a evaluar un currículum. Antes de pasar al siguiente paso, que es mirarlo cartera. Entonces miro un estudio de caso. Ojalá tengan un par de estudios de caso. Después lleva a una llamada telefónica. Esa llamada telefónica lleva a una entrevista todo el día con el equipo y yo mismo. Y luego hacemos un juicio sobre la entrevista AllDay y ojalá ese diseñador llegue a unirse a nuestro equipo y vamos a trabajar juntos. Entonces, repasemos la lista de cosas que debería tener tu currículum para asegurarnos de que sea un currículum bien elaborado. Entonces, en primer lugar, ¿el TextField tiene alineación y no están por todas partes? Ese es el caso. Puedes marcar esta casilla. ¿ El espaciado es consistente entre párrafos y Títulos? Marque esa casilla. El diseño y la tipografía lucen a la medida y no parece que se hiciera en Microsoft Word. De nuevo, deberías estar usando herramientas diseñadas a medida aquí. El negro no es el único color que se utiliza. Hay más de un tamaño de fuente. No hay errores ortográficos de palabras y se lee bien. Se habló de diseño centrado en el usuario, pensamiento de diseño, investigación y pruebas. Se habla de colaboraciones con otros equipos y gestores de productos y clientes. Y hay un enlace a un portafolio para ir a ver el resto de la obra. De acuerdo, ahora vamos a ver ejemplos. De acuerdo, Aquí hay un buen ejemplo de Franklin jam heart. Y aquí hay algunos ejemplos a la derecha y algunos llamados de por qué. Es un buen currículum. Por lo que se ve personalizado y tiene diseños bonitos, limpios. Tiene espaciado consistente se hace en todo el lugar. Tiene bonita jerarquía topográfica, la ortografía se ve bien. Tiene una buena alineación, utiliza más de una rejilla de columnas. Se ha vinculado a portafolio. Se puede ver como enlace de cartera ahí mismo. Vamos a echarle un vistazo. Otro buen ejemplo. Aquí hay uno familiarmente con la propia marca Evelyn. Es un diseño agradable y fácil de leer. Hay buen uso del tipo. Tipo. La jerarquía de tipos tiene una buena alineación, espaciado limpio que se ve realmente organizado. De acuerdo, vamos a ver cómo se ve un currículum de diseño no bueno. Entonces, ¿por qué este no es tan bueno? El diseño no está limpio y es difícil leer mucho pasando. El espaciado no es consistente. Jerarquía topográfica descuidada. El alineamiento podría ser mejor. Se puede ver que las cosas suelen estar alineadas con las balas. Y utiliza una cuadrícula de una columna, una cuadrícula gigante. Vayamos a ver otro que no es tan bueno. ¿ Por qué es éste? Parece que se hizo en Microsoft Word y no una herramienta de diseño. El negro es el único color que se utiliza. El tipo jerarquías, jerarquías no es tan bueno. Es un poco mejor que el último, pero aún así no tan bueno. El espaciado no es consistente. Ver un montón de espacios raros entre aquí. El diseño no parece personalizado. Para obtener más buenos ejemplos aquí. Mucho más buenos ejemplos. Muy limpio. Y ver que dos columnas cuadrícula aquí, columna derecha. Y mira, todavía hay usando el negro para todos los textos, pero son el tratamiento de topografía es realmente bonito aquí. Uno de la izquierda, Olivia es lo mismo con bailey por aquí usando todo negro, pero es mucho más limpio hasta que se tomaron tiempo en su diseño y diseño tipográfico. Esta que dice Hola, tiene una bonita introducción de la personalidad. Es una Jane Doe, es una plantilla. Es bonito. Es un diseño bonito, limpio. Lo mismo con este de aquí. Este es realmente bonito aquí. Por Justin. Aquí tienes uno interesante. Aquí tienes un byte Molina. Agradable y divertido, que no podía usar los colores y como el color rojizo naranjado con el azul azulado. Y aquí hay una de un amigo mío llamado John. John obedecen son currículum realmente sólido aquí a mucho tiempo elaborando esto. De acuerdo, vamos a ver un poco más. No tan buenos ejemplos. Ver solo tenemos los colores de diseño son un poco raros. Este rojo y azul parecen vibrar un poco. Y la paleta de colores, Esta Mary Cunningham un poco más, no realmente, podría usar un poco más de jerarquía. No es tan malo sin embargo. Este de aquí y el espaciado de texto azulado es un poco inconsistente por todas partes. Alineación difícil de leer, topografía, jerarquía. Es esta plantilla de aquí, solo una columna gigante. Ahí mismo, lo tienes. Entonces está la base de muchos buenos ejemplos de currículums realmente buenos artesanales y no tan buenos currículums del proyecto. Esperemos que eso te dé un poco de pauta. Como siempre. Gracias otra vez. Y si quieres ir a ver el último video de esta serie, que es el caso de estudio. Te daré el esquema. Te mostraré ejemplos de casos prácticos. Y de esa manera se puede tener una buena vista del proceso UX. Muchos métodos usamos cómo elaborar un buen currículum de diseño y cómo se ve un buen estudio de caso. De acuerdo, ojalá te vea ahí. Adiós. 14. El Study de casos de diseño de UX: Muy bien, bienvenido a cómo construir un caso práctico de diseño UX y diseño de experiencia de usuario 101 clases. Genial, estamos en la clase 13. Esta es la clase de esquema de estudio de caso. Esperemos que hayas visto todos los videos desde el principio, cómo establecer metas y hacer personas y luego crear scripts de entrevista de usuario, realizar investigaciones, sintetizar tus hallazgos, escribir una declaración de problemas, crear una mapa de viaje del cliente, hacer bocetos, hacer una estructura alámbrica, hacerlo prototipo clicable, hacer pruebas de usuario con ese prototipo. Ahí tiene insights del sintetizador a partir de probar la base de un sistema de diseño, cómo aplicar el diseño visual a su estructura alámbrica. Y el último video aquí fueron las mejores prácticas a la hora de diseñar tu currículum. Y ahora iremos a ver los esbozos de estudio de caso. Entonces esto esboza lo que hay que hacer para que sea un estudio de caso realmente, realmente bueno. Y todas las herramientas y técnicas que aprendiste en los videos pasados, o cómo crear todo el contenido que necesitas para ese estudio de caso. Y entonces lo que vas a hacer es que vas a crear una historia visual. Eso es lo que es el caso de estudio. Se trata de un esbozo de una historia de hacer trabajo de experiencia de usuario. Entonces vamos a entrar justo en ello. Déjame ir a abrir la página web. Vamos a empezar aquí con UX honey y UX honey.com. Este es el sitio que doy clases en la universidad. Y si haces click en la UX para aquí, te llevará a todos los métodos que enseñamos. Doy clases en la universidad. Y vamos a golpear esto, el esquema de estudio de caso. Y tocaremos el botón Ver por aquí. Y nos va a llevar al esbozo de un buen estudio de caso. Entonces te voy a mostrar un montón de ejemplos. Entonces se puede ver por aquí tengo un ejemplo llamado prensas este lado que hice por Barnes y Noble, cómo crear un libro hace años. Y otro caso de estudio para una, lo que se llama cocina SUV para una empresa llamada ANOVA. Entonces les mostraré los ejemplos de cómo luce esto. Pero primero, sólo pasemos por el contorno. Similar a decir que capítulos de lo que hace un buen caso de estudio. Y luego te mostraré cómo se ve eso visualmente. Entonces al igual que viste en los dos últimos ejemplos de estudios de caso acabo de mostrarte la parte superior. Lo primero que quieres hacer es mostrar el wow, esta es la pantalla del producto final, la pantalla más hermosa que tienes. Y puede ser interactivo, puede ser un video, pero mostrar el producto. Entonces el producto final aquí, pero lo que quieres hacer es no terminar con el producto final. Quieres contar una historia de cómo llegaste a ese producto final. Entonces me desplace hacia abajo. Lo siguiente aquí es que quieres dar algunos contextos, dar el nombre del producto, la misión de la empresa, mostrar el logotipo, mostrando tu papel en esto. Y puedes hacerlo visual usuario diseño artesanal y hacerlo visual. Después muéstrale la casa, habla un poco de tu proceso o puedes llamarlo los capítulos del trabajo de experiencia de usuario que hiciste investigación y luego fuiste e hiciste alguna validación de problemas y esbozaste algunas ideas, prototipeas algunas ideas y te puso a prueba , frustró la fidelidad, el diseño y se volvió visual. Y puedes llamar a esos capítulos, puedes mostrarlo visualmente, puedes mostrar tu proceso. Y recuerda que en el inicio de los videos, hablamos de metas de negocio y metas de producto. Aquí es donde los muestras, muestras los colores del negocio, muestras los objetivos del producto. Después habla del problema que estás resolviendo y por qué mostrar puedes mostrar un poco de la declaración del problema de algunas veces este es el problema invalidado. Y luego vas a aprender un montón de investigación y haces un problema validado. Pero puedes hablar un poco sobre el problema y la misión en la que estás. De acuerdo, lo siguiente que quieres hacer es presentar a tus usuarios. Mostrar la persona's, El hablado antes. Incluso puedes mostrar fotos de los usuarios si quieres. Recuerda destacar sus problemas, resaltar sus comportamientos actuales. Habíamos desbaratado una pequeña burbuja de cotización que te enseñé en el video persona. Y luego hablamos de los objetivos de aprendizaje y los guiones de usabilidad. que puedas hablar un poco de lo que planeas aprender. Cuando sales y haces tu investigación. Podrías mostrar el guión que hiciste. Puedes mostrar un par de preguntas que tienes que pertenecen a los objetivos de aprendizaje y luego ir a patear tu investigación. Por lo que muestra fotos de ti realizando investigaciones. Estas son fotos hablando con gente fuera en las calles o con el jefe o en tu oficina, o donde estés entrevistando a gente que te muestra, muéstrate con esa gente. Muéstrale a esas personas contigo y toma muchas fotos y pon montones de fotos durante esta área del estudio de caso. Y recuerda te mostré cómo tomar las notas pegajosas y hacer tu síntesis de investigación y también buscar patrones. Estas deberían ser fotos de esas notas pegajosas. Debería haber dentro aquí mecanografiado que pueda leer. Debe haber patrones que estés llamando en esta sección y en lo que estás aprendiendo se muestran las validaciones. ¿ Qué tipo de problemas validaste? Una de las cosas aprendiste de las de tu persona? Entonces puedes ir a mostrar ese mapa de viaje del cliente. Se puede hacer el estado actual del futuro estado. En este caso, puedes hacer esto. La solución que estamos modelando en el recorrido del cliente. Después podrás mostrar tus bocetos, tus conceptos de solución. Tienes algún guión gráfico, prototipos de papel. Y luego mostrar los diseños de estructura alámbrica, mostrar las pantallas. A continuación, mostrar al usuario las pruebas. Entonces estas son las fotos de ti saliendo y esto deberían ser usuarios con tus diseños en sus manos y lo están usando. Deberías tener fotos de eso. Puedes mostrar cotizaciones a lo largo del camino y luego mostrar la síntesis. Estos son los patrones por pantalla. ¿ Qué aprendiste de las pruebas de usuario? Esta es la zona para llamar a eso. Todavía puedes poner cotizaciones de usuario aquí también. Estas son tus validaciones, estos son tus aprendizajes que pueden mapear a pantallas, mostrar el sistema de diseño. Para que puedas mostrar un poco sobre tu proceso de diseño visual, tu tablero de humor. Puede mostrar todos tus botones, mostrando tus campos de formulario, mostrando tu fidelidad y tu diseño final aquí. Entonces esta es la parte final. Aquí es donde muestras tu prototipo final. Todo el arte visual que has hecho. Los maquetas de alta fidelidad, muestran los flujos de trabajo. Si quieres darme un link en el que puedo dar click para ir a revisar el prototipo que hiciste. Y esta es la final. Entonces eso conforma casi la mayoría de los diferentes capítulos de tu caso práctico o la historia que estás contando sobre el trabajo de experiencia de usuario que hiciste. A lo que se llama mirar un par de ejemplos de esto. Entonces si vuelvo al usuario a UX honey.com, tengo un enlace aquí llamado ejemplo de estudio de caso. Si hago clic en él, iremos al sitio de prensa. Esta es una aplicación de apuestas que hice por Barnes y Noble hace un par de años. Y pasa por la mayor parte de lo que ese mismo esquema del que hablé. Comienza con un poco sobre la empresa y la misión y mi papel. Empezamos con una pequeña reunión de arranque aquí donde definimos las metas. Por lo que estamos mostrando los objetivos del producto, los objetivos del negocio aquí. Estoy destacando el problema. Estoy mostrando un poco del proceso por el que pasamos. Estoy introduciendo a las personas en este caso, he hecho un más divertido e ilustrativo y un clamando sus comportamientos, sus necesidades, sus metas, sus dolores, persona. Y yo tenía mis metas de aprendizaje son mis suposiciones aquí de las que quiero ir a aprender. Y aquí están los objetivos de aprendizaje que pertenecen a cada persona que quiero aprender y algunas preguntas que tengo para ellos. Y luego arranco la investigación. Aquí estoy yo hablando con la gente. Hicimos entrevista remota. Hicimos entrevistas en el lugar con gente con casas de gente y platicamos con ellos. Y aquí te dejamos algunas de las cotizaciones que tienen. Desde las cosas que aprendimos de ellos. Aquí está nuestra síntesis, todas las notas pegajosas, todos los insights que se unen. Escríbelos en temas aquí y patrones que encontramos en el camino. Aquí están nuestros aprendizajes y hallazgo, esto es en lo que teníamos razón, esto es en lo que nos equivocamos aquí, algunos nuevos aprendizajes interesantes. Tomamos algunas decisiones de esos aprendizajes aquí de lo que vamos a hacer y lo que vamos a resolver. Decidimos no enfocarnos en una de las personas's porque el problema para ellos no era tan convincente. Por lo que nuestra misión fue seguir adelante y crear una experiencia de apuestas que haga lo suficientemente fácil para que los artesanos promedio puedan proveer para hacer un libro en línea y convertir ese libro en un libro físico y tenerlo a ellos. Por lo que empiezan con un libro digital y la plataforma que van a utilizar les permitirá subir su diseño de interiores, su interior de su libro, los diseños de portada y contraportada. Y luego tener ese libro digital convertido en un libro físico y pueden enviarlo a su casa. Por lo que quiso brindar pasos claros y soporte útil durante los momentos de error de la creación de esta solución. Y queremos guiar al usuario también. Ojalá estuvieran errando. Entonces todos nos juntamos, esbozamos conceptos. Hicimos un diseño de estructura alámbrica. Algunos conceptos y algunos wireframes, lo modelamos. A continuación te mostramos cómo previsualizar el modelo alámbrico si quieres. Teníamos preguntas y suposiciones por pantalla que queremos aprender de eso te estoy mostrando aquí. Y hicimos nuestras pruebas de usuario y sin probar con un montón de gente. Teníamos nuestros aprendizajes basados en las pruebas. Tomaron decisiones basadas en las pruebas y de lo que aprendimos. Después marcamos la fidelidad del diseño. Verían aquí un par de pantallas y me ayudarían a resolver este complejo proceso. Algunos de los casos de error que podrían ocurrir aquí. Y conseguimos algunas páginas de marketing y luego comprobarlo. Puedo tomar un enlace. Puedo caminar hasta el sitio web real o el prototipo clicable aquí. Entonces tenemos la página de marketing aquí que hicimos. Ahora vamos a meternos en el producto. Estos son los diseños visuales finales. Entonces primero me va a preguntar a mí y a mi libro interior, qué tipo de impresión, qué me gusta, quiero impresión a todo color. Suena bien. A mí me gustaría tener una contraportada de papel. A mí me gustaría tener whitepages, recortar talla siete por diez, y va a ser alrededor de 0 a 50 páginas aquí. Adelante y llamemos a esto el libro de Leslie. El nombre del proyecto que tengo. Aquí, tengo una calculadora calcula. Esto va a costar unos 29 dólares por libro. Puedo hacer diferentes cambios y ver el cambio de precio sobre la marcha mientras hago cambios. Se ve bastante bien. Sigamos adelante y continuemos. Me va a hacer crear una cuenta. Entonces voy a crear una cuenta. Y aquí es donde está pidiendo subir el interior de mi libro. Puedo rondar por este lado aquí. Es así como cubrimos los casos de error. Y puedo ver y aprender sobre márgenes e imágenes y fuentes incrustadas y cómo se ven recortar. Puedo subir mi PDF. Se puede ver que está subiendo, Digamos que tuve un error, pero sí, me lleva de vuelta en un resalta el error aquí. Bastante interesante ahí. Entonces volvamos y subamos mi libro. Vamos a la ruta de éxito. Ahora puedo previsualizar el interior de mi libro. Todo se ve bien. Ahora puedo ir a la parte de portada de este diseño y es el mismo flotando. Puedo ver dónde se vería mi interior de la cubierta. A los márgenes por imágenes le iría bien. Dónde se van a recortar en cómo incrustar fuentes. Y subo la portada aquí. Ahora voy a ir a la contraportada. Yo puedo flotar a la izquierda aquí para obtener la misma información. Se puede ver que ponemos un código de barras aquí. Sube el reverso. Ahora puedo hacer mi columna vertebral. Y mira, aquí está mi libro con el código de barras y todo. Ahí está mi portada de libro. Se ve bastante bien. Y luego puedo entrar en el pago aquí, poner mis detalles de envío, poner mis detalles de pago aquí, y puedo comprarlo. Y vamos a ley. Ahí está. Ese es el producto final ahí. Entonces ese es un ejemplo de estudio de caso que hace clic sobre el producto final. Déjame mostrarte otro. Llamemos a la nova. Esta es una cocina SUV. La cocina SUV es un dispositivo que cocina tus carnes y verduras y pescado en agua. En realidad pones esto en un, pones tu trozo de carne en una bolsa de Ziploc y este dispositivo se cocinará. Calentaré la temperatura del agua lo suficiente para cocinar la carne a lo mejor una hora o dos. Y hace para algunos de los mejores encuentros que alguna vez has tenido. Entonces lo que construimos fue un dispositivo que cocinara que se conecta a esta olla de aquí. Y hubo suposiciones que aprendimos en el camino. Pero volviendo al esbozo del caso de estudio, aquí tenemos nuestro wow shot. Hablamos del papel, un poco de la aplicación que llegamos a los objetivos de negocio y rodo. Y hablamos de este pequeño escenario alrededor programar un cocinero del que queríamos aprender. Esto era para colocar tu carne en una bolsa, ponerla en este dispositivo, trabajar, y programarías este dispositivo para que se encienda. A lo mejor unas cinco o seis horas después de que se fue a trabajar. Te cocinará la carne y volverías a casa y esto estaría listo cocinado para que comas. Suena bastante dulce. Ha, bueno, aprendimos mucho durante las investigaciones que invalidaron esto. En realidad no fuimos con esta solución al final porque aprendimos mucho. Entonces en general, Aquí estamos todos nosotros, el equipo juntándose. Vamos a presentar ahora el poquito de la persona sobre cada persona. Vamos a hablar de los objetivos de aprendizaje que queríamos aprender. Y salimos y miramos hacer algunas investigaciones y algunas pruebas de la suposición inicial de la que salimos a aprender. Utilizamos un mapa de viaje emocional del cliente del que mostré un video de en la pasada serie de cómo hacer esto, para delinear durante qué proceso fue este extraño o confuso para alguien o donde están vacilantes. Entonces puedes ver aquí, hay áreas este proceso donde la gente estaba confundida. Esto es lo que aprendimos. Aprendimos mucho sobre esta aplicación. Cambiamos de dirección aquí, y basándonos en algunas de las cotizaciones aquí es bastante interesante. Leí uno en voz alta. Una persona dijo, me voy por diez horas ahora Seguro que el hielo mantendrá la carne fresca todo el día y no me enfermaré si como esta carne. Por lo que mucha gente dudaba en hacer esto. Por lo que eventualmente decidimos pivotar hacer un poco algo diferente, que es solo una agradable experiencia de incorporación a la aplicación. Y una forma en que podrías aprender sobre qué tipos de carne estás cocinando y qué tipo de tiempo puedes configurar este dispositivo para que cocine tan limpio. Y luego mucha gente preguntaba por eso. Nos están preguntando cuánto tiempo se tarda en cocinar un bistec versus un trozo de pollo versus un trozo de salmón. Entonces decidimos arrancar eso. Por lo que tenemos un poco de un mapa de viaje del cliente aquí o un mapa blueprint de servicio aquí que esboza el estado futuro de nuestra solución. Hicimos algunos bosquejos aquí. Construimos una estructura alámbrica. Puedes wireframe diseños. Quién salió e hizo algunas pruebas de usabilidad aquí con la gente. Hicimos alguna síntesis. Esto es lo que aprendimos. Y luego hicimos más iteraciones y el collab más juntos. Y aquí está el laboratorio final. Entonces me sentaré y tú puedes echar un vistazo. Se va a conectar a Bluetooth. Conecta tu teléfono a la aplicación, Bluetooth. Se está cargando a Bluetooth. Ya verás aquí va a ser éxito, éxito. Y voy a la pantalla de inicio de la app. Puedo iniciar un cocinero de inmediato o puedo ir a la guía de cocineros. Por lo que hago click en la Guía. Digamos que aquí quiero cocinar un trozo de bistec. Sitio, ir al bistec. Y digamos aquí que quería recomprar. Por lo que hago click en un ojo de costilla. Y aquí tengo la capacidad de establecer el tiempo y la temperatura en base a ese doneness. Yo quiero que esta cosa bien hecha. Y mira, presiono el botón Start cook y boom, empieza a poner cocina SUV y estás cocinando carne. Entonces eso es más o menos. Entonces mostré el wow al inicio de este estudio de caso y mostré la experiencia final al final de ese estudio de caso. Muy bien, entonces esos son todos ejemplos de los buenos estudios de caso. Si quieres encontrar éste, es en mi página web en air y Lawrence design.com. Iré a la página de inicio aquí para que lo veas. El sitio. Aquí estoy. Y así puedes encontrar estos casos prácticos aquí en este sitio web o en más es designed.com. También puedes simplemente buscarme en Google, Lawrence, diseñador, y también encontrarás este sitio web. De acuerdo, Así que eso ha sido bastante el viaje. Hemos tenido 13 clases aquí, y aquí está el caso de estudio final. Esperemos que esto te dé un poco de esbozo de cómo tomar todo el trabajo que has hecho aquí y ponerlo en una bonita historia que esboce tu experiencia de usuario en el trabajo. Y de nuevo, como siempre, gracias por ver las clases. De verdad aprecio que te lo pases. Si has visto los 13 videos. Eso es realmente genial, realmente impresionante. Te aplaudo. Muchas gracias. Espero que hayas aprendido mucho. Y ojalá consiga algunos videos más, entra aquí pronto y te daremos algo más de contenido. Nuevamente como siempre, muchas gracias y adiós.