Diseño de interacción 101: flujos de usuarios, esquemas de página, prototipos y mucho más.

1. Bienvenido a el diseño de interacción 101: Bienvenido a Interaction Design 101. En esta clase, te enseñaré a mapear flujos de usuarios, bosquejar interfaces de usuario, y unirlos todos en wireframes y prototipos para comunicar diseño de interacción a los desarrolladores y otros interesados. Utilizarás estas habilidades en tu proyecto en cada lección. Esta clase está dirigida a estudiantes que tengan al menos una idea básica de lo que es la UX y quieran entender el diseño de interacción con mayor detalle. Es ideal para freelancers o diseñadores gráficos visuales que quieran pasar al diseño de interacción. Otra forma en que puedes utilizar estas habilidades es si ya eres un diseñador de UX y solo quieres repasar el diseño de interacción. Cada lección seguirá la siguiente estructura. En primer lugar, voy a explicar parte de la teoría. Entonces, te guiaré a través de un ejemplo del paso usando una aplicación de pedidos de café como mi ejemplo, dándote consejos y trucos en el camino. Entonces, antes de la siguiente lección, pondrás estos pasos en práctica tú mismo usando tu propio proyecto de clase. Pon la idea en la junta comunitaria y te daré retroalimentación. Al final de esta clase, tendrás un flujo de usuario para tu propia app o idea de producto, algunos wireframes, y un prototipo de las pantallas documentadas. Piensa en la idea que quieres usar para tu proyecto. Podría ser una idea existente que tienes en cabeza o te vendría bien un ejemplo ficticio, como una aplicación de entrega de pedidos de alcohol o una aplicación de autocompartir, cualquier cosa que se te ocurra realmente. Si no puedes pensar en uno, puedes usar un producto existente y ver formas en que podrías mejorarlo. Esto puede entrar en tu portafolio. Piensa en qué ejemplo te gustaría usar y ponerlo en el directorio comunitario. Haz esto antes de la próxima clase y me aseguraré de dar algunos comentarios. Nos vemos pronto. 2. Qué es el diseño de la interacción: En esta lección, aprenderás sobre qué es el diseño de interacción. Entonces, ¿qué es? diseño de interacción va más allá del aspecto de la interfaz o del diseño de la interfaz de usuario y piensa en cómo los usuarios interactuarán con su producto o servicio. El diseño visual es solo la punta del iceberg UX. Debajo de la superficie de lo que dices, la capa visual es lo que realmente compone toda la UX. Este es el diseño de la interacción, la arquitectura de la información, la forma en que se presenta y organiza la información, el diseño de la interacción, el contenido, y el diseño conceptual de cómo cuelga todo el sistema. En el diseño gráfico, no necesariamente tienes que pensar cómo las personas interactuarían con tu producto o lo usarían a lo largo del tiempo. Pero en el diseño de interacción, lo haces. Veamos un ejemplo. Tenemos que considerar las interacciones. Por lo que en la superficie, esta imagen parece un diseño lo suficientemente bueno. Pero si soy desarrollador, tengo preguntas. ¿ Qué sucede con el texto de marcador de posición cuando un usuario hace clic en el campo? Si desaparece, ¿sabe el usuario en qué campo están en un más para entrar? ¿ Qué sucede si el usuario ingresa algo no válido? ¿ Dónde encaja el mensaje de error en la pantalla? ¿ Todo se movió hacia abajo? ¿ Qué dice el mensaje de error? ¿Cuándo aparece? ¿ Qué es inválido? El campo de dirección es solo un campo. ¿ Qué formato se entiende y escuchar el usuario? ¿ Cómo lo supieron? ¿Dónde está el tooltip? ¿ De qué se utiliza para coincidir con la dirección? ¿ Se trata de una API de Google Maps? ¿ Es solo texto libre? ¿ Qué validación hay? Responder a todas estas preguntas, y probablemente más que no he mencionado es el diseño de interacción. El proceso que me gustó tomar al diseñar es primero entender el flujo del usuario y lo que están tratando de lograr. Después bosqueja la interfaz para explorar posibles soluciones. A continuación, cree tramas con el diseño más final, luego prototifique una solución. Haciendo que los wireframes sean interactivos, llegué al producto final y finalmente documento las interacciones para que se pueda construir. Dependiendo de cuál sea el proyecto y cómo funcione tu equipo, posible que en realidad no pases por todos estos pasos. Por ejemplo, si se trata de un pequeño retoque a una pantalla existente, podría saltar directamente a wireframes. Podrías incluso simplemente crear prototipos en el navegador, podrías tener un chat con el desarrollador y si trabajas en algún lugar que tenga una tarjeta de estilo bastante sofisticada, es posible que no necesites especificar todas estas interacciones. Ya sabrán qué pasa con el texto de marcador de posición al hacer clic en el campo, qué sucede con los mensajes de error, etc. No olvides pensar en qué ejemplo quieres usar para tu proyecto a lo largo este curso y pop en la bala de la comunidad. Nos vemos pronto. 3. Mapeo de fluos de usuarios: Entonces ahora que ya sabes lo que es Interaction Design, en esta lección, vamos a empezar a hacer el primer paso, que es entender el flujo del usuario. Entonces, ¿qué es un flujo de usuario? Bueno, es un mapa o diagrama de los pasos o pantallas por las que pasará un usuario mientras usa su producto. También puede ser una ilustración de alguien que se mueve por el sistema. ¿ Por qué no hacemos este paso? Bueno, te ayuda a entender la lógica del flujo de pasos que el usuario puede tomar. Te ayuda a trabajar a través de lo que necesita ir a dónde, y lo que sucederá. Te ayuda a pensar a través de lo que pasa si las cosas no salen bien. En un sistema existente, esto te ayuda a ver dónde las cosas no son tan eficientes como podrían ser, o dónde hay problemas con el proceso actual para que puedas mejorarlas. También te ayuda a comunicar los flujos a tus stakeholders. Trabajemos a través de un ejemplo. Voy a usar mi aplicación ficticia de pedidos de café. Esto se puede hacer utilizando muchas herramientas diferentes, por ejemplo, bolígrafo y papel o una pizarra blanca. También puedes usar software especializado como Visio, Lucidchart, Miro previamente bala en tiempo real o simplemente símbolos en Sketch, PowerPoint, Word, etc., cualquier cosa con la que te sientas cómodo. hoy, voy a usar Sketch. Entonces tenemos el comienzo y voy a caminar por el camino feliz. Eso es lo que pasa cuando las cosas van bien? Este es el camino donde la mayoría elige tomar la mayor parte del tiempo. Estoy más diseñado para ayudarlos a bajar de esta manera. Entonces catalanes o café, abre la app porque ya sabe de nuestro producto. Estamos haciendo el flujo simplificado el cual no tiene que ir login, regístrese solo mirando los puntos clave. Entonces el siguiente paso en el proceso quizá sea seleccionar un café. Ahora que estoy pensando esto a través, tal vez seleccionar el tipo de leche es un paso diferente en el proceso. Selecciona qué café quieres luego la leche. Voy a añadir esto a mi pedido. Reutilizar “Líneas” o “Flechas” para denotar el siguiente paso. Abriendo app, luego “seleccionar café”, “seleccionar café”, luego “seleccionar tipo de leche”, etc. Tenemos un final, el final del proceso, “éxito”. Entonces ese es un camino feliz simplificado, pero no siempre es así como van las cosas en el mundo real, las cosas van mal, la gente necesita tomar decisiones. Generalmente se usa un diamante para representar un punto de decisión. El punto de decisión puede ser una decisión que el usuario toma o puede ser algo que el sistema está haciendo. Por ejemplo, el sistema ahora mirando hacia arriba, ¿tenemos la tarjeta de crédito archivada? Puede decir que voy a volver atrás y cambiar mi flujo porque originalmente no había pensado en todas estas complejidades extra. Aquí es donde usar algo digital puede ser beneficioso. Puedo fácilmente reorganizar y cambiar el nombre de las cajas. Entonces como estoy arriba en este set, estoy pensando en unas cuantas cosas que no funcionan y haciendo cambios. A lo mejor ir a la página de pago si lo habías hecho ya tiene una tarjeta de crédito, por lo que tienes una confirmación de pedido y luego podría haber una pantalla extra para ingresar los datos de tu tarjeta de crédito. En ocasiones habrá errores, necesitamos asegurarnos de que pensamos en la recuperación de errores o las rutas de error y cómo los usuarios pueden recuperarse de esto. Por ejemplo, las tarjetas de crédito pueden ser rechazadas. Por lo que necesitamos un bucle para volver a la “Agregar tarjeta de crédito” o actualizar tarjetas de crédito grano. Por lo que ahora sabemos al menos parte del flujo del usuario y podemos decidir para qué pantallas necesitan diseñar. Este proceso te ayuda a pensar a través de los diferentes caminos o pantallas nativas. Originalmente, no estaba pensando que si bien podría no tener una tarjeta de crédito archivada, el mapeo a través de este proceso me permitió llegar a eso. Cada paso en el proceso puede ser una pantalla diferente, o puede ser un campo diferente el que se necesite. Es posible que tengas varios pasos en una pantalla. Puedes compartir en este formato, o puedes convertir el flujo en más de un story board de usuario con ilustraciones dependiendo de cómo estén los flujos de usuario entendidos en tu equipo. Aquí te dejamos un ejemplo de cómic de cómo podrían funcionar estos productos. ¿ Alguien quiere un café? ¿ Por qué no pueden ir a por uno? A lo mejor lesionaron, tal vez este es nuestro modelo de negocio. Entonces se acuerdan de la app o del intelectual que necesitan hacer, y luego están contentos. Se trata más de un usuario una historia que de un flujo de usuario. También podríamos mirar pantallas abstractas y dibujarlas con flechas entre. Por lo que no hemos entrado en demasiados detalles, todavía sólo miramos el flujo y la forma en que la gente se mueve por el sistema. Ahora, intenta crear un flujo de usuario para tu propia aplicación o idea de producto, lo olvides para ponerlo en el stand de la comunidad para recibir comentarios, nos vemos pronto. 4. Dibujar la interfaz: Ahora que tienes tu flujo de usuario, es momento de pasar al siguiente paso en el proceso. Dibujando la interfaz. Como mencioné en la última lección, es posible que tengas múltiples pantallas diferentes para cada paso o cada paso puede estar en una pantalla, o combinación de ambos. Probablemente también pensarás en cosas y pasos que te perdiste en el camino ya que también estás pasando por este proceso, y eso está absolutamente bien. Es parte de ello. Es realmente importante saber que el bosquejo no se trata de arte, se trata de comunicación, se trata de pensar a través del proceso. Como verán en mis bocetos, soy 100 por ciento no artista. No son bellos pero no necesitan serlo. El propósito de este paso es ayudarte a pensar a través del flujo lógico, qué interfaces se necesitan, qué interacciones se necesitan, ¿cómo podríamos conseguir que el usuario haga esa interacción? Al mirar mi flujo de usuario desde la última lección, voy a empezar a bosquejar. Voy a usar pluma y papel para esta actividad. Pero quizá quieras usar una plantilla, por ejemplo, algo que ya tiene, los tamaños dibujados para ti. Pero esto no es necesario. En realidad, sólo bolígrafo, papel, o una pizarra blanca está absolutamente bien. Tiendo a no usar digital en este punto porque no quiero quedarme demasiado empantanado, ¿cuáles son los colores? ¿ De qué tamaño debe ser la fuente? De verdad sólo quiero pensar en qué elementos estoy usando y por qué. Empiezo con un contorno áspero de la pantalla con una cabeza arriba. A lo mejor tenemos nuestros pedidos recientes en la pantalla de inicio, y un gran llamado a la acción, que estoy esbozando en Sharpie y colorear. Las flechas representan pasar a la siguiente pantalla, golpeo Nuevo Orden. Por lo que ahora estoy en pantalla de pedidos. ¿ Qué debo hacer? Seleccionar Tipo de Café. A lo mejor usamos un cuadro desplegable para eso. Una vez que he hecho eso, pasamos a la siguiente pantalla, y mi tipo de café está ahí permitiéndome volver atrás y editarlo. Ahora necesito seleccionar de una caja desplegable para el tipo de leche que quiero. A lo mejor la soja cuesta más. Ahora tengo mi tipo de café y mi tipo de leche. ¿ Qué café me lo va a entregar? A lo mejor este es un solo selecto porque solo puedo seleccionar uno, y me está dando la estimación de cuánto tiempo tardará cada café. Después le pegué a Checkout. Aquí, voy a diferentes formas de pagar. A lo mejor tarjeta de crédito, tal vez PayPal. ¿ Podemos hacer contra-entrega? No estoy seguro. ¿Se puede dar propina al conductor? Estas son algunas cosas que vamos a pensar. Después lleno la tarjeta de crédito, botón grande Pay y ya termino. No hemos pensado en todo. ¿ Qué pasa del otro lado? ¿ Qué dicen los choferes? ¿ Qué dice el café? Pero esto sólo nos da un poco de idea de parte del flujo por el que vamos a trabajar. Como puedes ver, están desordenados. Pero eso está bien. El punto es que pensé a través del proceso y el flujo y he llegado con un par de paradigmas de interacción diferentes que podría querer usar. Ahora estoy listo para pasar a lo digital. Ahora intenta bosquejar las pantallas por ti mismo, por tu propio proyecto. Como siempre, ponlos en la junta comunitaria. Nos vemos pronto. 5. Crea esquemas de página: Mis bocetos de la última lección son esencialmente modelos alámbricos de baja fidelidad. El siguiente paso en el proceso es reafirmar esos wireframes. Las tramas alámbricas son básicamente un plano de lo que se va a construir. Hay una famosa cita de Frank Lloyd Wright, puedes usar una goma de borrar en la mesa de dibujo o un martillo en el lado de la construcción. Esto no es decir con software. Si seguimos adelante y anotamos el código, sólo vamos a tener que volver a hacerlo, tirarlo y va a ser más caro. Necesitamos tener un plano o una idea de lo que vamos a hacer antes de empezar a codificar. wireframes nos ayudan a pensar a través de las ideas y realmente a empezar a probarlas de estrés antes de que construyamos y nos ayudan a comunicar la idea para que otras personas sepan qué construir. prototipos de baja fidelidad no se parecen exactamente al producto terminado. Se pueden hacer dibujando, pueden parecer un poco bocazas, o tal vez el diseño visual sea justo para el próximo. El beneficio de usar un prototipo de baja fidelidad es que vas a conseguir, digamos de nuevo en el nivel correcto. No vas a conseguir comentarios como, no me gusta el color, no me gusta la fuente. Lo que realmente estás buscando en esta etapa es retroalimentación sobre el flujo y las interacciones propuestas. También gestiona las expectativas. No quieres que un cliente tome algo que se parece exactamente al producto terminado y luego no entienden por qué sigue tardando tanto tiempo cuando ya he guardado el diseño? También puede evitar que los desarrolladores recojan accidentalmente y construyan algo. Si está realmente claro que no se trata de un proyecto o diseño finalizado. prototipos de baja fidelidad también son rápidos y fáciles de hacer, y por lo tanto, ya sabes, como casados con ellos y estás más dispuesto a tirarlos y empezar de nuevo, inténtalo de nuevo, prueba otra idea. prototipos de alta fidelidad sí tienen su lugar. Si tuvieras que llevar wireframes de baja fidelidad a las pruebas de usabilidad o a la investigación de usuarios. No vas a conseguir respuestas realmente estrictas. prototipos de alta fidelidad son los mejores para esto. wireframes se pueden hacer de nuevo utilizando muchas herramientas diferentes, productos de Adobe, Balsámico, que es realmente bueno para los de aspecto bocetos, y Jill o sketch. hoy voy a usar sketch y dirás que tengo bibliotecas instaladas que tienen muchos componentes que voy a estar usando para ayudarme a ahorrar tiempo. Tomé alrededor de media hora para hacer esta actividad y no está ni cerca de completo pero solo voy a hablar a través de algunas cosas diferentes que hice y algunos consejos y trucos diferentes. Nuevamente, no importa demasiado los colores y la fuente y el tamaño está en esta etapa, pero me verás cambiándolos un poco solo para mostrar orden, las cosas que son más grandes o muestran acciones mostrando enlaces son azules y que cosa. Pero al final dirás que obviamente no está ni cerca de terminado. También verás que a medida que estamos pasando, estoy cambiando de opinión y me doy cuenta de que hay cosas diferentes que debemos agregar así que volviendo atrás y agregándolo, obviamente es por eso que no deberíamos iniciar el código, tener que ir quitar cosas, reordenar cosas va a costar mucho tiempo y dinero. Estoy duplicando mis tableros de arte para que pueda tener el mismo marco básico para cada cosa. He hecho clic en nuevo orden, así que nos estamos moviendo a la siguiente pantalla. Las que yo estaba dibujando en lecciones anteriores. medida que pasemos, me verás seleccionando artículos de bibliotecas que he instalado en mi boceto. Esto solo ahorra tiempo. Empuje hacia fuera para dibujar un rectángulo y es solo un poco de atajo y tecleo para subir texto en la pantalla. Ya he empezado con tipo café así que voy a escribir un montón de diferentes tipos de café que se me ocurra. Yo sólo estoy inventando estos. Pero obviamente en la vida real, haces análisis y descubrirías qué ofrecen las cafeterías. Nuevamente no es una aplicación real, así que solo tengo un poco de café, no tengo que pagar y otras cosas que quizá quieras comprar. Tampoco he puesto ningún precio en esta etapa. También dices que solo estoy poniendo un montón de cafés diferentes que se me ocurre de la parte superior de mi cabeza. Tener que ir a revisar la ortografía para algunos de ellos. Pero los estoy colocando en orden aleatorio para que al final pueda colocarlos en orden alfabético. Tiene sentido estar en orden alfabético especialmente [inaudible] no saber qué hay en la lista y entonces podría saber cómo se sienten para poder desplazarse por ella. Aquí estoy seleccionando todos los elementos de la lista, haciendo clic derecho y seleccionando distribuir verticalmente. Esto espaciará uniformemente los artículos. He seleccionado lugar en sub pixeles porque de nuevo, no busco pixel perfecto diseño. Pero yo sólo quería lucir un poco medido. En este punto me he dado cuenta de que no he pedido talla y tal vez eso es algo que quieres hacer por adelantado. Me siento como un café grande o me siento como un café pequeño en lugar de seleccionar lo que quieres y luego el tamaño. Bueno, probablemente sean [inaudibles]. Simplemente estoy reorganizando mis pantallas y volviendo atrás y agregando lo mismo. Se puede decir que la forma en que tengo los tableros de arte es de izquierda a derecha en orden la acción que sucede y estoy mostrando cómo se ve cuando está cerrada, cómo se ve cuando se expande y cómo se ve cuando se selecciona. Esto sí muestra un poco de la interacción si sabes lo que estás buscando. Para el tamaño del café, tal vez quieras saber cuál es ese tamaño del café. Pondremos solo un soporte de lugar por cuántos mililitros es el café. Si bien esto probablemente no va a funcionar en el mundo real, porque ¿cada café pequeño de cada café tiene el mismo tamaño? También tengo costos de entrada aquí en absoluto y obviamente el café puede ser diferentes precios basados en diferentes cafés. Eso es solo algo de complejidad que estoy dejando fuera de alcance por ahora pero en la vida real tendrías que pensar en cómo sería esa interacción también. En este punto, me he dado cuenta de que mis botones aún dicen nuevo orden porque lo estaba copiando a través. Ahora voy a volver y cambiarlo a decir agregar a orden. Una vez que tengamos nuestro artículo agregado a nuestro pedido, podremos decirlo en alguna vista de resumen con la capacidad de volver atrás y cambiarlo. Ahora necesitamos usarlo para seleccionar de dónde quieren sacar su café. Yo he decidido en este modelo, estamos viendo cafés que tienen estos café que votaron disponibles. Debido a que sólo se puede seleccionar su pedido de un café, voy a utilizar botones de radio, que sugieren al usuario que sólo se puede seleccionar uno. No me he molestado en mirar la cantidad. ¿ Qué pasa si quieres pedir múltiples cafés a la vez, que estoy seguro que estarían en alcance. Nuevamente, estas interacciones en las que hay que pensar. Una vez más, por simplicidad, solo estoy teniendo la capacidad de pagar con tarjeta de crédito y estoy asumiendo que no tengo ya una tarjeta de crédito registrada. Esta interacción es realmente de alto nivel dependiendo de lo complejo fuera el sistema real que pueda necesitar para trazar mucho más. Es posible que necesites mapear todos los diferentes campos y tomaría mucho más de media hora que he pasado en este. Pero puedes ver que ya tenemos un poco de flujo de lo que está pasando? ¿ Qué está pasando? ¿Cómo podría parecer? ¿ Qué tipos de controles donde utilizamos una caja desplegable, botones de radio, acción de código grande, botones morados grandes para carbón? Cosas que queremos que hagan los usuarios y editen enlaces para cosas que no se usarán tanto pero que aún necesitan ser, capaces de ser accedidas en la interfaz. Si tuviera que llevar estos wireframes a los usos de pruebas de usabilidad tendría que compensar mucho sobre cómo funcionan las interacciones y podría que no obtuvieras resultados verdaderos. De igual manera, tener esta idea a los desarrolladores en esta etapa puede necesitar que tomen muchas decisiones sobre lo que hace la interacción, como hablamos en la segunda lección. En la siguiente lección, aprenderás a hacer prototipos para pasar por estos encabezados. Ahora, intenta crear wireframes para tu proyecto y recuerda que no necesitan ser pixel perfecto. Se trata de comunicación por el momento todavía y archivo bajo es mejor como hablamos. No olvides subirlos a la junta comunitaria para su retroalimentación. Nos vemos pronto. 6. Prototipos: prototipado resuelve algunos de los problemas de los que hablamos al final de la última lección. Show no digas la interacción. Si una imagen vale mil palabras, entonces un prototipo vale un millón. Un prototipo es esencialmente una muestra o un modelo de un sistema o un proceso. Existen dos tipos principales de prototipos. Ahí hay un prototipo que se puede hacer clic o tocar y hay un prototipo interactivo. Un prototipo clicable o tap-able es aquel en el que solo tomas tus wireframes y pones hotspots en algunas de las acciones centrales y luego haciendo clic en que se vincula al siguiente grano esencialmente. Se puede hacer esto en visión o boceto y voy a correr por un ejemplo de cómo hacerlo. Podemos crear uno de estos prototipos clicables en boceto. Vamos al menú de prototipos y hacemos clic en “Agregar enlace a la mesa de trabajo”. Seleccionas lo que quieres hacer clic, el botón por ejemplo y luego agrega a la mesa de trabajo y haz clic en la mesa de trabajo a la que enlaza. Sí deja estas flechas en la pantalla para que puedas ver la interacción. El atajo para hacer esto es golpear al WK mientras has seleccionado algo en una mesa de trabajo y luego golpear a la siguiente mesa de trabajo y hará ese enlace. Después podrás reproducir los prototipos, así que al hacer clic en donde hiciste esos hotspots se pasará a la siguiente pantalla. Pero se puede decir porque mi pantalla es de un tamaño diferente, la imagen se mueve hacia arriba y hacia abajo. Si pasas un poco más de tiempo puedes hacer esto un poco más suave pero de nuevo, ves que solo se está moviendo al siguiente. No es realmente así como iban las cosas. Si haces clic en el botón, no se movería a una pantalla nueva. Simplemente animaría o seleccionaría de alguna otra manera así que esa es la única limitación de estos prototipos clicables. Para hacer prototipos más interactivos donde los usuarios realmente puedan escribir cosas, seleccione desde los cuadros desplegables, diga cómo se ve el botón cuando se hace clic, puede usar el código pero obviamente esto podría llevar demasiado tiempo para algunos diseñadores. O puedes usar herramientas como Ajua que es lo que voy a usar hoy. Ahora, esto se verá un poco más anticuado, los estilos no son tan modernos como se ve en boceto pero te da la interactividad. Simplemente hay que equilibrar mostrando la interacción entre mostrar cómo se verá exactamente en el navegador en el producto final. Este es Ajua o Axia, no estoy seguro de cómo lo pronuncias y solo estoy usando una prueba gratuita. Lo que estoy haciendo para ahorrar tiempo es copiar mis wireframes del boceto y escribir sobre ellos. Estoy poniendo un botón de Ajua el cual tiene acciones asociadas sobre el botón que acabo de tener en mi imagen. Para hacer interacciones en Axia usas casos, así que he seleccionado el botón y voy a añadir caso al click. Cuando se haga clic en el botón, va a hacer lo que establezca aquí que es abrir otra página del prototipo en la misma Ventana. Ahora estoy agregando un cuadro desplegable y de nuevo, solo lo estoy poniendo sobre el desplegable de mi imagen en y frame y agrego qué elementos quiero que aparezcan en esta lista. Puedo agregar muchos a la vez lo cual es útil cuando estás escribiendo varios a la vez. Lo que estoy haciendo aquí es hacer del segundo elemento un panel dinámico y configurarlo en oculto. Esto se debe a que voy a agregar un caso interactivo sobre el tamaño del café que cuando se seleccione un artículo de esta lista, aparecerá el siguiente desplegable. Esto solo ahorra tener que ir a múltiples pantallas diferentes porque puedes hacerlo todo en el prototipo. Ajua tiene algunas interacciones realmente complejas que puedes elegir y eso está más bien fuera de alcance para esta clase pero puedes tener una jugada si te interesa. De nuevo, solo estoy trabajando alrededor de mis wireframes. Voy a agregar un rectángulo para cubrir las cosas de mi imagen y reemplazarlo por los botones de radio disponibles en Ajua porque estos van a ser botones de radio totalmente interactivos y mostrar lo que deben hacer y cómo interactúan. Se puede previsualizar el prototipo. Esto lo abre en el navegador y te muestra cómo funcionan las interacciones. Cuando selecciono de este ítem, aparece el siguiente desplegable tal como lo configuramos para que lo haga. Ya verás que los botones de radio están funcionando. Estos me tardaron unos 20 minutos pero de nuevo, si jugaba por ahí y pasaba mucho más, podría tenerlo luciendo más como lo haría el sistema final. Simplemente depende de cuánto tiempo quieras pasar, si solo estoy mostrando la interacción o si necesita que se vea exactamente perfecta en pixel. Ahí salen herramientas más nuevas. En realidad podemos diseñar en el código pero no voy a mirar ninguno de esos hoy. Si tienes interacciones realmente complejas que quieres mostrar, otra forma de hacerlo es engañar usando un GIF o una animación de PowerPoint y te mostraré cómo hacerlo también. Vamos a fingir una animación en PowerPoint. Digamos que tienes una lista de cosas que puedes guardar y cuando la guardas, te da una pequeña pista y te dice que ha subido a tu menú. Tengo dos estrellas que representan el estado guardado y las estoy haciendo aparecer a ambas al mismo tiempo. Entonces estoy haciendo media animación para que pueda hacer la estrella suba y se vaya a donde quiero que vaya la animación. Yo quiero que eso pase con anterior. Haz clic en la estrella aquí arriba y pasa la animación. Entonces necesitamos hacerla salir para que no solo tengas la estrella flotando por el menú. Lo que voy a hacer es asegurarme de que estoy seleccionando la correcta y tener un efecto de salida y hacer esto después de anterior. Cuando juegas, finges la interacción. Haga clic en “Animar desaparecer”. En realidad a este paso, probablemente tomemos este prototipo para usar borradores o pruebas de usabilidad. Esto es para comprobar que los usuarios puedan completar las tareas que esperamos que puedan hacer con esta interfaz y nos mostrará si algo es confuso, o complicado o difícil de usar. Ahora, haz un prototipo de tu propio proyecto y no olvides ponerlo en la junta comunitaria para retroalimentación. Nuevamente, no tiene que lucir increíble, solo se trata de mostrar las interacciones. Entonces aunque parezca un poco anticuado en cuanto a los textos, los estilos y todo eso, sigue bien. Nos vemos pronto. 7. Documentación de la interacción: Ahora ya casi has completado el diseño de interacción, bien hecho. Mi prototipo sigue siendo bastante rudo, así que en la vida real, trabajaría con diseño visual para finalizar cómo se ve en el espaciado antes de entregarlo al desarrollo. Dependiendo de dónde y cómo trabajes, depende cómo necesitas manejar el diseño de interacción. Si eres una agencia que no hace desarrollo, todo el desarrollo está externalizado, entonces tal vez necesitas un documento de requisitos realmente grueso con campo realmente especulado, burlado diciendo: “Cuando haces clic en esto, esto sucede , esto sucede a continuación. Este es el orden del lector de pantalla”. Todo ese detalle realmente nitty-gritty. A lo mejor trabajas en algún lugar que ya tenga una guía de estilo bastante compleja, así que no necesitas molestarte en especificar todas esas minutia. Pero independientemente de cuál sea, contar con alguna documentación ayudará. posible que no estés por ahí cuando lo recojan, o podría haber algún rezago entre cuando terminas el diseño y cuando se recoge y la gente puede olvidar la interacción. Lo que me gusta hacer es compartir el prototipo, compartir las imágenes, y para cualquier cosa compleja, documentarlo. Eso podría ser solo texto, hacerlo en Sketch, anotarlo, marcarlo, solo con imágenes, con símbolos, con palabras, o con un plug-in, o bien podría grabar un video del prototipo que se está utilizando, y platicar sobre ella o agregar casitas para volar dentro y salir volando. Nuevamente, todo depende de cuánto tiempo tengas y de lo ocupado que estés, y de lo complejas que sean las interacciones. ¿ Vale la pena pasar medio día burlándose de esto, o es que sólo una pérdida de mi tiempo que nadie va a mirar, alguien leerá el menú? Si no, no pierdas el tiempo. A mí me gustaría hacer una combinación. Simplemente pasaré por un ejemplo de cómo documentaría esto si fuera un producto real. Lo que haría en Word, o Confluencia, o cualquier herramienta que estés usando; es tener lo que el producto es enlace al prototipo. Basta con copiar la URL real, decir quién es dueño del proyecto, para que acuda a por preguntas, y luego también tener enlaces a donde he puesto las imágenes individuales con los comentarios. Esto se debe a que no todos tendrán Sketch, por lo que no podrán descargarlo. A menudo los copiaré y los pegaré ya sea en este documento, o en algún lugar donde estén visibles. En cuanto a documentar realmente, me voy a mover así que tengo un poco de espacio entre los appboards, y en medio de los appboards pondré algo de texto. Al hacer clic en este botón, pasan a la página siguiente. Una vez que han seleccionado qué tipo de café quieren, la película utiliza la divulgación progresiva, por lo que muestra el siguiente campo que necesita ser seleccionado. También luego mueve lo que se ha seleccionado hacia arriba a este modo de edición, con la capacidad de hacer clic, cambiar y volver atrás. Ahora he decidido añadir un enlace extra aquí para mostrar ese proceso. Podría también marearme de dónde vienen cosas diferentes. Me estoy burlando de que los detalles del pedido colapsen una vez que llegues a la siguiente pantalla para que todo esté en una sola línea. 8. Recap diseño de interacción 101: Ahora ya sabes qué es el diseño de interacción. Todo lo que tiene que ver con cómo el usuario interactúa con su producto a lo largo del tiempo. No sólo la mirada y la sensación. Conoces los pasos para lograr que crean los flujos de usuario, un diagrama de los pasos que realiza un usuario o las pantallas por las que atraviesan. Cómo bosquejar la interfaz, pensar a través de cómo podría diseñar las pantallas, cómo hacer wireframes. Enmarcando esos diseños y pensando a través de los cuales componentes interactivos usar, prototipando Next, haciendo un prototipo interactivo para probar y mostrar mejor las interacciones. Por último, documentando para comunicar sus diseños. Recuerda que no necesitas seguir todos estos pasos para cada proyecto. Depende de lo grandes que sean las piezas, si solo es un pequeño cambio y lo puedes marcar tú mismo en el navegador, o si se trata de un gran proyecto de Greenfields donde vas a querer hacer todos estos pasos. A medida que obtienes más experiencia, aprenderás cuándo puedes decidir qué pasos debes soltar y cuáles debes hacer. Eso nos lleva al final del Diseño de Interacción 101. Por favor, sigue mi perfil y revisa la clase. Si te gustó, difunda la voz. Buena suerte en tus carreras de diseño de interacción. Pondré todas las diapositivas disponibles y las subiré que luego las pueda referir. Diseño feliz.