Diseño UX: crea un prototipo

1. Introducción: Hey ahi, gracias por unirse al diseño UX, crear un prototipo. En esta clase, estaremos aprendiendo a crear un prototipo interactivo clicable para presentarlo a tus clientes. Empezaremos por entrar en alguna investigación de UX, explorar tus ideas y enmarcarlas por cable, crear tu prototipo y luego presentar tus ideas a tus clientes. Pero primero, déjame presentarme. Mi nombre es Ginny y soy diseñadora de UX y directora creativa. Empecé como licenciada en diseño gráfico de la Escuela de Artes Visuales de la ciudad de Nueva York. Trabajé como directora de arte en publicidad durante tres años antes pasar al diseño web porque realmente me encantó HTML y CSS. Pensé que quería ser desarrollador front-end por un tiempo pero fue cuando empecé a trabajar muy de cerca con un diseñador de productos o un diseñador de UX y realmente me enamoré de él. Satisfía el lado geeky de mí que encanta la investigación y la evidencia y los datos y encontré que la investigación de UX y el diseño de UX simplemente salieron bien con mi personalidad. En esta clase, estarás trabajando en una aplicación ficticia llamada Tutz app móvil de colaboración musical que necesita algunas mejoras de usabilidad. Todos los archivos de muestra te serán proporcionados para que el foco principal de esta clase te estemos enseñando a pasar por un proceso típico de UX en lugar de diseñar todo tú mismo desde cero. Aprenderás a acercarte a un proyecto tanto como investigador de UX como diseñador. Esta clase está abierta a todos los niveles, pero puede ser más fácil para quienes tienen acceso a programas gráficos, como sketch o Illustrator even o Photoshop, cualquier cosa que pueda manejar gráficos. Al final de esta clase, tendrás un proyecto UX bien redondeado para exhibir en tu portafolio y también para exhibir en la galería de trabajo de Skillshare. Te animo a compartir tu proyecto con otros y sobre todo a medida que avanzas a través de su proyecto para retroalimentación. Aquí hay un canal increíble en nuestro patio trasero con galería de proyectos de Skillshare donde podrás compartir tu trabajo. De cualquier manera, creo que estarás orgulloso de lo que se te ocurra eso al final de esta clase. Empecemos. 2. Requisitos del proyecto: Hola, bienvenido de nuevo. mí me emociona ir por este viaje contigo mientras creas tu prototipo. Puede haber un poco de curva de aprendizaje, sobre todo si es la primera vez que estás trabajando en Sketch u otro programa de diseño gráfico. Pero con un poco de práctica, estarás navegando por esas herramientas en poco tiempo. Tan solo sé paciente contigo mismo. Devolver cualquier pensamiento desalentador porque todos llegamos a empezar en algún lugar. Pero me emociona pasar por esto contigo. Estos son nuestros requisitos. Equipo. Desearás una computadora portátil o de escritorio, una aplicación gráfica como Sketch, Adobe XD, Photoshop, Illustrator, o algo similar. las fortalezas y debilidades de cada uno de esos programas depende para qué estén diseñados. Prefiero Sketch porque realmente es para prototipar. Adobe XD, si bien no tengo experiencia con eso, escuché cosas maravillosas al respecto. Illustrator está bien porque puedes crear algunos buenos wireframes en eso, aunque en realidad no es un programa de aplicación web. Photoshop, si bien renderiza los componentes web mejor que Illustrator, tampoco es realmente un programa de wireframing o aplicación web. Esquema del proyecto. Estaremos aprendiendo a analizar la investigación de UX, wireframe ideas, validar esas ideas mediante la realización de nuestra propia investigación ligera de UX, crear un prototipo, y presentar ese prototipo. Recursos de clase. Tendremos alguna muestra de investigación UX que proporcionaré por el bien de esta clase. También tendremos un diseño TUTZ de muestra disponible para ti como archivo de Sketch o PNG para que te importe a cualquier programa gráfico que elijas usar, y también tendremos unos requisitos de diseño de muestra y documentación que contienen las necesidades de las partes interesadas y del negocio. Una vez descargados todos esos artículos, estaremos listos para iniciar la clase. 3. Análisis de la investigación UX: Hola, bienvenido de nuevo. Si estás viendo este video, probablemente significa que viste el último video con los requisitos del proyecto y te sientes listo para iniciar el proyecto de clase. Genial. A modo de refresco, vamos a estar trabajando en una aplicación móvil ficticia llamada Tutz, que es una aplicación de colaboración musical. Permite a los usuarios subir archivos de audio que en última instancia contribuirán a una canción original. En esta clase, vas a estar entrando en la mente de un diseñador de UX que ha sido contratado por tu cliente Matt, que quiere que mejores la usabilidad de la app de Tutz y él tiene alguna documentación para demostrarlo. Matt te da alguna documentación del trabajo anterior y te dice que hay algunos comentarios de los usuarios y de sus colegas que la página de Subir, la página que utilizan los usuarios para subir sus archivos de audio, ha sido frustrante y confuso de usar. Ha estado provocando que Tutz pierda negocios debido a la mala usabilidad, y Matt necesita tu ayuda para investigarlo y brindarle soluciones lo antes posible. Entonces es lo más pronto, ¿no? Agradece a Matt y encuentra un lugar tranquilo para mirar por encima de la documentación del proyecto. Ahora, echemos un vistazo al documento de Matt. Es importante tener en cuenta que todas las empresas manejan sus procesos de UX manera diferente y la escala de los proyectos en los que trabajarás variará. Por el bien de este curso, nos mantendremos sencillos para que puedas entender lo básico. Al leer los documentos, es evidente que el objetivo de Matt es obviamente mejorar la usabilidad de la página Upload, pero específicamente hacer más intuitivo el proceso de subida y colaboración. Esto significa que los usuarios no están encontrando muy claros el propósito y la funcionalidad de esta página en particular. Sabemos ahora que el documento de Matt tiene algunas pruebas que apuntan a mucha confusión experimentan los usuarios pero es nuestro trabajo como diseñador de UX averiguar por qué. Si miramos hacia atrás el documento de Matt, algunos llamados importantes son, quiere que nos apegemos a la guía de estilo de color y a la tipografía en minúscula. Esto es importante porque muchas empresas tienen su propia marca y querrás apegarte a esas. También quiere asegurarse de que los gráficos sean altamente reconocibles. También necesitamos asegurarnos de que el botón Subir sea más notable, y puede que tengamos que cambiar el CTA o el Call To Action para que sea más intuitivo para el usuario final. Por último, quiere mantener una sensación fresca y vibrante para que la app atraiga a su público principal que son usuarios jóvenes, tal vez la escuela media hasta finales de los 30 o los 40. Al analizar las notas de Matt, querrás anotar tus preguntas o tus inquietudes sobre el producto para más pruebas, que cubriremos en esta clase. Algunas preguntas que quieres hacerte es, ¿cuál fue el objetivo del usuario? ¿ Cuál fue el objetivo del gerente de producto? ¿ Se alinearon? ¿ Por qué o por qué no? ¿ Alcanzaron sus metas? ¿ Por qué o por qué no? Otra pregunta podría ser, ¿qué está pasando en la vida de los usuarios finales que podría estar afectando su percepción del producto? ¿ Es la solución para quitar o agregar más al producto? Es importante entender realmente bien los objetivos del producto para que puedas entender lo que le está bloqueando para alcanzar sus metas para que puedas brindar la mejor solución posible. En la siguiente lección, vamos a aprender a tomar tu investigación de UX y convertirlos en tramas de cable. Entonces vamos a seguir adelante. 4. Contorno reticular: Hey, bienvenido de nuevo. En esta lección, estarás tomando análisis del último video y encontrando formas de abordar hipótesis y soluciones potenciales a través de wireframing. En este punto, es posible que desee comenzar a utilizar una aplicación gráfica, como Sketch o Balsamiq u otras herramientas de wireframing para empezar a esbozar algunas ideas. Pero todavía está bien usar papel y bolígrafo para esta parte también. Vamos a sumergirnos. En esta pantalla, estamos viendo las pantallas de Tutz. La primera pantalla es la pantalla de lanzamiento con un prominente llamado a la acción está diciendo empezar ahora. El segundo es la página de subida, que es la página problemática según tu cliente, y la tercera y cuarta pantallas nos muestran los flujos de trabajo asociados a la función de subida. Ahora para esta lección, vamos a fingir que Matt, nuestro cliente, nos dio acceso a los archivos originales de diseño nativo creados por un diseñador anterior. Dado que estos son maquetas a todo color y queremos estar en fase de wireframing en este momento, vamos a querer que esto se vea más como arte conceptual en lugar de arte final tanto como sea posible. El motivo es que a la mayoría de los clientes les cuesta mirar wireframes coloreados y no pensar que es el producto final. Para evitar este tema común, querremos convertir estas maquetas de colores a blanco y negro. Lo que he hecho es crear una página separada en Sketch con los diseños de color originales y convertir los tableros de arte coloreados en blanco y negro con el fin de transmitir el mensaje, que estamos viendo conceptos y arquitectura de la información, en lugar de componentes de interfaz de usuario brillantes. Antes de que empecemos a wireframing, solo unas palabras de consejo. No tengas miedo de mostrar ideas desde el principio en la fase de wireframing. Porque cuanto más buy-in obtienes de tus clientes o de tu gerente de productos desde el principio, menos tiempo pasarás digitalizando y redigitalizando ideas que no fueron aprobadas. Como puedes ver, estamos viendo las pantallas en blanco y negro recién convertidas, y estamos tratando de envolver la cabeza en torno a qué mejoras de UX deberíamos estar haciendo. En este punto, vamos a querer referirnos de nuevo al documento de requisitos de Matt, y en la parte inferior de la página, he agregado algunas hipótesis basadas en la investigación y mi propia intuición del comportamiento estándar del usuario para las aplicaciones en línea. En las hipótesis se señala que, los usuarios no sabían dónde estaba el botón de subida porque el botón de texto se estaba perdiendo y sería más descubrible si se un botón de texto gráfico que se mostrara de manera más prominente en la pantalla. Las últimas contribuciones también ocupan demasiado espacio. Por último, el botón de flecha púrpura es confuso para los usuarios debido a su ubicación prominente y se confunde por una acción de subida. Esto tiene sentido. Dado que se trata de una página de carga y los usuarios deben esperar naturalmente que el botón accionable prominente sea una acción de carga, tendría sentido cambiar esta interfaz de usuario y arquitectura de información para que sea intuitiva así. Después de digerir estas hipótesis, naturalmente podemos llegar a algunas conclusiones y recomendar que, cambiemos el enlace de subida de texto a un botón gráfico. Moveremos el botón de subida gráfica a una ubicación prominente, o simplemente reemplazaremos el botón de reproducción por él. Podemos hacer que el botón play esté más conectado visualmente a la última sección de contribuciones ya que están relacionados en información y una acción. También podemos hacer que la última sección de contribuciones sea menos prominente también. Ahora pasemos a la wireframing real. Lo que voy a hacer ahora es copiar y pegar este tablero de arte presionando “Option Shift” en mi MacBook y arrastrar una versión del tablero de arte hacia abajo. Ahora que tenemos una copia de la página de subida, voy a crear un nuevo botón para reemplazar este botón de reproducción que solicitará a los usuarios subir su archivo de audio en lugar de reproducir la pieza de colaboración que han subido los usuarios. Voy a agrupar el botón de reproducción y el gráfico de audio y arrástrelo para usarlo más tarde. Lo siguiente que quiero hacer es agregar el botón de subida, y como sé que hay un botón existente que se está usando en la interfaz de usuario en la pantalla de lanzamiento, solo voy a copiarlo y pegarlo en mi nuevo tablero de arte. Ya que es un fondo blanco, cambiaré el color de relleno a un gris oscuro y cambiaré el texto a blanco. Recuerda que esto es solo una alambrada por lo que los colores no son definitivos. También querré cambiar el texto a algo más intuitivo como, por ejemplo, “Sube tu archivo” o “Sube tu archivo de audio”. También ampliaré el botón para que el texto encaje, y centraré el botón en la pantalla. Al mirarlo, quiero quitar el signo de exclamación en el botón ya que se ve mucho más limpio de esa manera. Ahora que tenemos el botón de subir de frente y centro, podemos deshacernos del antiguo enlace de textos para subir. Subiremos un poco el botón de subida, solo por ahora mientras juego con el espacio. Ahora quiero volver a traer el botón de reproducción a la mezcla y combinarlo visualmente con la última sección de contribución. Ya que el botón play y las últimas contribuciones están relacionadas. Cuando me remito a las notas de Matt, menciona que la última sección de contribución está ocupando demasiado espacio y compite por la atención con el botón de subir. Si bien eso podría ser cierto. Solo voy a dejar ese comentario solo para esta lección solo para ver si Matt estaría acuerdo con hacer la última sección de contribución del mismo tamaño o incluso un poco más grande, ya que tenemos un botón de subir tu archivo que es muy grande y de manera destacada en la pantalla. Por ahora, voy a subir el título para las últimas contribuciones para que pueda caber el botón play en esa zona. Voy a mover el gráfico hacia atrás y ajustar un poco el dimensionamiento, y luego voy a traer el botón de reproducción hacia atrás y hacerlo más pequeño para que no compita visualmente con el CTA principal, que es para subir. Ahora las otras páginas en las que queremos enfocarnos son las páginas de carga que contienen el flujo de trabajo de carga. Este flujo de trabajo comienza cuando un usuario hace clic en el botón de subir tu archivo, lo que desencadena un gestor de archivos que aparece desde la parte inferior de la pantalla. El usuario hace clic en el archivo que desea o navega por él, y luego una vez subido, el nombre del archivo aparece en la siguiente pantalla como la contribución más reciente. Voy a alejarme y hacer lo mismo que antes, que es copiar y pegar el tablero de arte original haciendo clic en “Opción Shift” y arrastrando una copia del mismo hacia abajo. Voy a acercarlo, y ahora voy a abordar por qué el usuario se está confundiendo con este proceso. flujo de trabajo actual de Tutz tiene una tierra de usuario en este gestor de archivos después de hacer clic, sube tu archivo pero entiendo que el usuario se está confundiendo durante este paso porque no hay un llamado obvio a la acción en este gestor de archivos. Hay una inconsistencia en la experiencia del usuario debido a esto, porque Tutz usa botones prominentes en todas partes menos aquí. Esta inconsistencia está obligada a confundir al usuario final porque esperarían las mismas acciones globales en toda la aplicación. Lo que quiero hacer es resolver este problema sumando botones similares al botón de subir tu archivo que acabo de completar antes, y copiarlo y pegarlo en este tablero de arte. colocaré en la ubicación correcta llevándola a la parte inferior de la pantalla, y ajustaré el tamaño de la fuente y el tamaño del botón para dar al usuario la impresión de que se trata de una acción prominente pero secundaria en la página. Ahora que eso está hecho, voy a alejarme, y como pueden ver, el original está en la parte superior y mi versión revisada está en la parte inferior. Aquí es probablemente donde me detendría y mostraría mis ideas a mi cliente o gerente de producto para su retroalimentación temprana. Es importante estar preparado para responder a sus preguntas y defender tus decisiones de diseño. Ahora que tienes tu primer wireframe debajo de tu cinturón, vamos a aprender a validar tus ideas haciendo una simple prueba de usuario. La retroalimentación es muy importante durante esta etapa antes de crear prototipos, y puede ser altamente iterativa. Pero al final, estarás mucho más feliz con el producto final. Nos vemos en la siguiente lección. 5. Validar los esquemas de alambre: Hola, bienvenido de nuevo. En la última lección, aprendimos sobre wireframing y algunas mejores prácticas para wireframing. En esta lección, vamos a aprender sobre validar las ideas en tus wireframes ejecutando una prueba de usabilidad. Una prueba de usabilidad es un método para recopilar comentarios sobre lo útil que es algo. Eso es todo. Si bien hay muchas formas diferentes de hacer investigación de UX y pruebas de usabilidad a través de tipos de tarjetas o encuestas o pruebas A/B, el método que vamos a cubrir en la lección de hoy es una prueba moderada en persona. Esto es cuando un moderador como tú, lleva a un usuario a través de una serie de preguntas y acciones para observar su retroalimentación a un producto. La mayoría de los problemas tendrán muchas soluciones diferentes posibles, pero lo bueno de las pruebas de usabilidad es que podrás reducir las mejores soluciones posibles para tu aplicación, para tu audiencia. Ahora para las pruebas de usabilidad, querrás tener en cuenta algunas cosas. Número uno, estableciendo el tono para el usuario. Tendrás que mantener el ambiente limpio, libre de distracciones y cómodo para el usuario. El usuario también debe sentirse cómodo y puedes hacerlo calentándolo con algunas preguntas al principio. Podrás hacerles preguntas como, ¿cuál es su nombre, su ocupación, qué hacen con su tiempo libre, qué frecuencia usan su computadora, su dispositivo móvil, qué tan técnicamente conocedores son? Esto les va a acostumbrar a hablar en voz alta y a hablar en general, para seguirlas para que te den su retroalimentación de forma natural ya que vas a la prueba de usabilidad. Las preguntas que deberías estar haciendo al usuario deben ser muy neutras sin redacción sesgada. Deberían formularse de tal manera que te ayude a evaluar más adelante por qué el usuario reaccionó de esa manera. Por ejemplo, querrás formular tu pregunta de manera abierta, así que en lugar de hacerlas, “¿Te pareció confuso este botón?” Podrás preguntarles : “¿Qué estabas sintiendo al mirar este botón?” Ellos te responden y tú puedes preguntarles: "¿Por qué?” Para ayudarte a lo largo, proporcioné un enlace a un muy famoso script de prueba de usabilidad que se encuentra en este enlace. Número dos, reclutamiento de usuarios. Por el bien de esta clase, vamos a hacer que reclutes a un solo usuario cuando es ideal tener normalmente cinco, siete, 12, 50 a 100 usuarios a veces. Pero por el bien del tiempo y solo para enseñarte lo básico, sólo nos apegaremos a un usuario. El criterio que buscamos se señala en el documento de Matt. Son, número uno, entre las edades de 14-40 años. Número dos, deberían poseer un smartphone. El número tres, utiliza frecuentemente las redes sociales porque se trata de una aplicación social, y el número cuatro, les debería encantar la música. Algunas formas en las que puedes reclutar participantes son a través tal vez un anuncio en línea o un anuncio en el periódico, canales en línea como testing.com remoto o incluso pruebas de aceras, donde puedes ir a un espacio público y simplemente encontrar personas que son dispuesto a platicar con usted. El truco es, ¿cómo podemos incentivar a la gente para que participe en el estudio? En mi experiencia personal, los usuarios que se incentivan por que se les ofrezca una tarjeta de regalo o algún tipo de recompensa, dieron respuestas mucho mejores y también se presentaron para el estudio de usuarios. Ahora, aquí hay una lista de algunas maneras que he encontrado que eran efectivas para reclutar personas e incentivarlas. Número uno, ofrezca una tarjeta de regalo, cualquier cosa desde $25-100 dependiendo de la duración de su estudio. Número dos, ofrecen efectivo directo, como 50 dólares por una hora de su tiempo. Número tres, ofrecen la oportunidad de ganar un regalo o una tarjeta de regalo de una cantidad mayor, como 200 dólares por ejemplo, o algo así como un iPad incluso. Esto funciona bien si tienes que reclutar a mucha gente y simplemente no tienes el presupuesto para pagarlas todas de forma individual. Una vez que el usuario se instala en su entorno de pruebas, es hora de hacer la prueba. Los métodos de todos van a ser un poco diferentes por sus tipos de personalidad y su método preferido de prueba. Pero te voy a mostrar el método que prefiero que me ha sido de más ayuda y más efectivo para mí. Lo más importante, le recuerdo al usuario que piense en voz alta. Número uno, mostrar el producto en su estado actual. Significado mostrar la versión del producto o diseño que está fuera en este momento. Número dos, que el usuario dé comentarios sobre ese producto observándolo sin hacer clic primero, y dando retroalimentación después de interactuar con el producto. Número tres, mostrar al usuario el diseño propuesto. Tener que pasar por el mismo proceso de dar retroalimentación a través de la observación, después hacer que den retroalimentación después de interactuar con ella. Número cuatro, dales una tarea a realizar, este es un análisis de tareas. Si bien no es ideal tener un modelo de cable de papel no interactivo para realizar un análisis de tareas, todavía se puede reunir una gran cantidad de comentarios útiles para tareas simples relacionadas con la navegación y la descubribilidad de la información. Ahora lo que me gustaría hacer es mientras estoy probando, me gusta grabar la sesión si el usuario se siente cómodo con ella. Durante las pruebas, deberías estar anotando notas lo mejor que puedas, pero también por eso la grabación es tan importante porque no podrás atrapar todo mientras estás anotando notas, y no quieres seguir preguntando a repetir lo que están haciendo porque no va a ser un comportamiento verdadero para ese punto, por lo que grabar más la toma de notas es realmente importante para el análisis posterior. En la siguiente lección, vamos a meternos en las cosas divertidas, los prototipos, así que mantente atentos. 6. Prototipos: Hey chicos, bienvenidos de nuevo. Es hora de la parte divertida, del prototipado. En esta lección, vamos a estar tomando los wireframes de la lección anterior y usándolos como una estructura sobre la que construir nuestros diseños. Tan solo una cabeza arriba, vamos a estar saltando a través de algunos procesos de UX, como la iteración para llegar al prototipado, que estoy seguro de que todos están entusiasmados. Vamos a sumergirnos. Como pueden ver, estamos viendo los wireframes en blanco y negro de la lección anterior, pero ahora vamos a repasar lo que sucedió después de que fueron validados por las pruebas de usuario. Estos son los originales en la fila superior aquí. Estas notas en rojo son mis notas de prueba de usuario, que siempre las tenga a mano para referirme de nuevo, ya que escucho ideas. En la segunda fila, tenemos los nuevos wireframes que el usuario probamos para su retroalimentación, como se puede ver aquí. Pero debido a que el usuario probó para validar nuestros wireframes y recabó nuevos comentarios, me llevó a repensar mi enfoque inicial para el rediseño de subida de Tutte, que le sucede mucho a los diseñadores de UX cuando estamos probando. Debido a los nuevos comentarios, decidí idear un nuevo conjunto de wireframes para abordar los comentarios de nuestra sesión de pruebas de usuario. Esos nuevos wireframes creados después de la validación están aquí en esta tercera fila, aquí abajo, marcados con el título versión 3. Ha cambiado la página de subida y he movido el botón de reproducción de nuevo al área superior, y he movido mi botón de subida hacia abajo. También cambié el texto, como ya has notado. Se cambiaron en tamaño y prominencia las últimas contribuciones tras la retroalimentación que recibí. También agregué pantallas de flujo de trabajo adicionales, que entraré en más detalle un poco más tarde. El nuevo flujo implica, el usuario aterrizando en la página de subida, el usuario haciendo clic en el botón de subir archivo de audio, el gestor de archivos se activa después de que se haga clic en el botón de subir archivo de audio, pudiendo el usuario seleccione el archivo o busque un archivo mientras que la carga ahora CTA está gris y deshabilitada hasta que se elija un archivo. El usuario selecciona un archivo que se muestra mediante un borde resaltado brillante alrededor del nombre del archivo, y el botón de carga ahora se activa, cual se indica con un color activo. Una vez que se sube y la carga es exitosa, aparece una pantalla de éxito, que luego desaparece después de unos segundos. Por último, el usuario aterriza en la pantalla final que muestra que el usuario acaba de subir un archivo de audio en la última sección de contribuciones. Ahora que tenemos todos los flujos de trabajo aprobados y tu cliente está contento y tus usuarios generalmente están contentos, vamos a querer burlarnos de esto. Ya que esta clase no cubre cómo usar boceto en profundidad, ya he creado las maquetas de colores para ti, que serán las maquetas que usamos para crear el prototipo interactivo. Podemos ver cómo se agregaron los colores de la marca y la interfaz para darle a esta app el aspecto y sentir que faltaba durante el encuadre de alambre. Todos estos componentes de la interfaz de usuario fueron tomados de notas de partido y los paradigmas de diseño existentes de los productos actuales. Vamos a armar este prototipo. Como pueden ver, estoy usando boceto para la creación de prototipos. Para aquellos de ustedes que utilizan otras aplicaciones gráficas como Photoshop o Illustrator, no se preocupen. Daré consejos al final de esta lección para explicar cómo hacer un prototipo básico con Photoshop y usando Adobe Acrobat. Lo que me encanta del sketch es que, puedes crear hotspots o hotlinks que conecten pantallas para que parezca que un usuario se está moviendo a través de un flujo de trabajo. Lo primero que quiero hacer es, seleccionar un punto de partida para mi prototipo, subiendo al menú y haciendo clic en prototipos, y seleccionar usar Mesa de trabajo como punto de inicio en el menú desplegable. Esto asegura que nuestro prototipo siempre se inicie en la pantalla correcta cada vez que se presente a los clientes. Como se puede ver, esta Mesa de Trabajo ahora tiene una pequeña bandera que indica que este es el punto de partida. Ahora, vamos a seleccionar el punto de partida Mesa de trabajo, y haga clic en la tecla 'H', que es un atajo a la acción de enlace directo. Esto lo indica el ratón, que ahora se ha convertido en una flecha astuta. Esto significa que ahora estamos listos para empezar a vincular algunos elementos y a ponernos interactivos. Si recuerdas, se supone que el usuario haga clic en el botón de subir mi archivo de audio para poder subir su música. Lo que voy a hacer es, arrastrar un área de hotlink alrededor de este botón, comenzando desde la parte superior izquierda y arrastrando hacia la parte inferior-derecha. El área que acabas de arrastrar está resaltada en naranja. Ahora puedes ver aparecer una cola, que vamos a utilizar para enlazar a la siguiente pantalla del flujo de trabajo. Si paso el cursor sobre la siguiente Mesa de trabajo, automáticamente seleccionará eso para mí como lo indica el resaltado naranja. Cuando alguien haga clic en el botón de subir mi archivo de audio, serán transferidos a la siguiente pantalla, que muestra el administrador de archivos. Ahora voy a elegir la Mesa de Trabajo con el Administrador de Archivos. Dado que se supone que el usuario debe seleccionar el archivo aquí, específicamente el archivo de arriba a la izquierda, voy a crear un hotlink haciendo clic de nuevo en H sobre esa imagen de archivo, y arrastrando la cola a la siguiente pantalla mostrando el archivo resaltado con el botón activo subir ahora CTA. Desde aquí, quiero que el usuario sepa que ha seleccionado un archivo, que hicimos en la pantalla anterior. Quiero que den click en el botón subir ahora CTA para subir oficialmente el archivo a la app. Voy a volver a hacer clic en H, arrastrar sobre el botón, y luego voy a elegir la siguiente pantalla. Dado que la siguiente pantalla tiene un comportamiento que no requiere de ninguna interacciones como hacer clic en ella, ya que desaparece por sí sola después de unos segundos, este es un buen momento para hablar al cliente a través del comportamiento. Voy a seleccionar toda la Mesa de trabajo como enlace directo. Como le expliqué al cliente, que la pantalla de éxito se desvanece después de unos segundos y eventualmente muestra la pantalla final del flujo de trabajo de las últimas contribuciones con el archivo de audio recién agregado. Con la última pantalla, no necesito crear ningún hotlink ya que aquí es donde termina el flujo de trabajo, y hemos hecho nuestro trabajo de mejorar la función de subida cruzando nuestros dedos. Simplemente queremos que el cliente vea el flujo de trabajo a través del prototipo sencillo pero claro que acabamos de crear. Ahora, veamos cómo se ve la vista de presentación del prototipo, ya que esto es lo que estarás presentando a tu cliente y esto es lo que realmente verá el cliente. En sketch, tenemos una forma realmente fácil de hacer eso. Arriba en la parte superior derecha, hay un pequeño botón naranja que dice vista previa, que vamos a dar clic. Como se puede ver, va directamente al punto de partida Mesa de trabajo que se marcó con la bandera. Esta es la ventana que estaremos usando para presentarle a nuestro cliente, cual estaremos aprendiendo más en la siguiente lección. Vamos a probarlo. Lo que el usuario va a hacer es, aterrizar en esta página y subir su archivo de audio. Se pueden ver los cambios del ratón al pasar el cursor sobre el botón principal de subida, y una vez que hago clic en eso, nos lleva al gestor de archivos. El archivo que queremos subir se llama Cowbell, por lo que seleccionamos eso, y vemos que está resaltado y el CT está activo. Haremos clic en eso y veremos que ha sido exitoso, y recordaremos explicarle al cliente que la pantalla de éxito se desvanece por sí sola después de unos segundos. Haré clic en cualquier parte de la pantalla después de que haya terminado explicar y finalmente aterrizar en la última pantalla, que es de las últimas aportaciones donde acaba subir Cowbell5 Mp3 a la pieza de colaboración justo ahora. Buen trabajo tú. Para las personas que están utilizando otras aplicaciones para construir sus prototipos como Photoshop o Illustrator, mi consejo es tener cada pantalla similar a lo que acabas de ver en boceto como su propia página, que luego se puede exportar como separada PDF. Utilizando Adobe Acrobat, importa todos tus archivos PDF en un solo archivo con todas las páginas en el orden correcto, para que puedas hacer clic en los botones de flecha para desplazarse por cada pantalla fácilmente, y luego simplemente hablar con tu cliente a través del flujo de trabajo, ya que no será interactivo. En la siguiente lección, estaremos hablando de presentar a los clientes sin cometer algunos errores novatos. Mantente atentos. 7. Presentación al cliente: Hey, bienvenido de nuevo. Estás en el tramo de casa. En la lección de hoy, vamos a hablar de presentar a los clientes y evitar algunos errores novatos. En mi experiencia, he aprendido que a los clientes importan unas cuantas cosas diferentes más que a otras, les importan unas cuantas cosas diferentes más que a otras, y las voy a compartir con ustedes. Número uno, el creativo. Este es el prototipo que vas a estar presentando a tu cliente con las características mejoradas que deberían ser emocionantes para ellos. Número dos, el informe. Esto debe contener insights de alto nivel y datos de sus hallazgos, y el número tres, los siguientes pasos. Aquí es donde propones que el proyecto debe ir. Al presentar el prototipo. Estas son algunas cosas que quizá quieras tener en cuenta para tu presentación. Algunos de los Do's. No explique el tema general del informe y qué objetivos estaba tratando de lograr. Número dos, explica cómo obtuviste datos. Número tres, explique el desglose de los datos en trozos grandes, no demasiado granulares. Esto se puede mostrar a través de gráficos, porcentajes, y otras infografías. Número cuatro, llame a observaciones o datos significativos, como citas y una breve lista de observaciones interesantes que recopiló. Número cinco, envuélvala con algo positivo y alentador para que los clientes se emocionen por los próximos pasos. Ahora para algunos de los Don'ts. No uses mucha jerga de la industria. Evitaría usar muchas acrónimos también. Si bien nos puede resultar familiar, podría ser mejor encontrar otras formas de describir esta lista, como arriba del pliegue, evento del mouse, FBO, lo que significa solo para la colocación, análisis heurístico, hexadecimal, cumplimiento 508, responsive, API, SVG, vector, PNG, y mucho más. También querrás explicar tus decisiones de diseño mientras caminas a un cliente por el prototipo. Quizás quieras decir algo así como, decidí usar este botón de color porque era consistente con la UI o tal vez quieras decir, decidí hacer este botón más pequeño porque esto era una acción secundaria y lo hice no quieren distraer del CTA primario. Ahora, en mi experiencia personal al presentarme a clientes, sí me pareció que a los clientes les gustan ciertas cosas un poco más que a otras. Si bien les gustan los datos, muchas veces a la gente no les gusta digerir los datos ellos mismos, así que quieren que otras personas lo hagan por ellos, así que lo que me gusta hacer es darles los datos, pero también me gusta darles algo de lo contrario, la retroalimentación. Encuentro que a los clientes les encantan las cotizaciones porque es algo con lo que se pueden relacionar. Entonces, por ejemplo, puedes darles una cotización de un cliente que realmente se destacó para ti porque lo más probable es que se destaque para ellos. Eso es todo, lo hiciste genial. En la siguiente lección, que es la lección final, repasaremos algunas conclusiones y algunos para llevar. 8. Conclusión y moños clave: ( ANTECEDENTES) Hola, lo lograste. Enhorabuena, por completar este curso. Lograste, algunas cosas increíbles en esta clase, como analizar la investigación de UX, realizar tu propia investigación, encuadre de alambre, prototipado y presentar a los clientes. Espero que puedas alejarte de esta clase, con una sensación de logro, y confianza, que puedas abordar, tu próximo proyecto UX, desde una perspectiva bien redondeada. presentamos algunas claves para llevar, querrás recordar para tu próximo increíble proyecto de UX. Antes de comenzar cualquier proyecto de UX, asegúrese de entender los requisitos, metas, e incluso limitaciones, del proyecto. Intenta iniciar un estudio de usuario fresco para adquirir una visión fresca del proyecto, sobre todo si la investigación anterior tiene más de seis meses. encuadre de alambre no necesita ser elegante. Es más importante, llegar a marcos de alambre básicos, o bocetos, y reiterar sobre esas ideas, contraposición a gastar mucho tiempo, en un marco alámbrico de lujo que consume mucho tiempo, presentar información de alto nivel, a los clientes, y lenguaje no jerga, con un prototipo, es decir lo más cercano, a terminado como sea posible. Por último, diviértete con UX. Recuerda publicar tu proyecto, en acciones de habilidad Galería de proyectos, y recuerda seguir, yo para mantenerme informado de más clases de UX. Buena suerte en tu viaje a UX Mastery.