Transcripciones
1. Introducción: Hey, bienvenido a esta clase de Skillshare sobre diseño de experiencia de usuario y conceptos básicos de enmarcado de alambre. Gracias por sintonizar. En esta clase, construiremos un conjunto de tramas cableadas para una aplicación móvil paso a paso, juntos. Un poquito sobre mí. Mi nombre es Sarah Bannister y soy una diseñadora de experiencia de usuario freelance y diseñadora de interfaz de usuario. He trabajado en marcas como Ford y Streamlette. Me apasiona diseñar sitios web y aplicaciones móviles que resuelvan problemas, vean geniales y sean fáciles de usar. Recuerdo el día en que me di cuenta de que el diseño iba a ser mi carrera de ensueño. Estaba tan emocionado de saber que había una carrera que pudiera satisfacer mi necesidad un outlet creativo todo mientras ayudaba a la vida cotidiana de
las personas a ser más fácil a través del diseño y la tecnología. Si eres como yo y compartas estos mismos valores, diseño será una salida maravillosa para que explores y posiblemente inicies una carrera en. Esta clase te será útil si tienes poca o ninguna experiencia en diseño de interfaces de
usuario o conceptos básicos de diseño de experiencia de usuario, pero tienes interés en explorarlos. Enfriar. Empecemos.
2. ¿Qué es un Wireframe?: wireframes son una pieza esencial del proceso de diseño del producto. Un wireframe es una maqueta esquelética de un concepto web o app. Un wireframe puede venir en una amplia gama de elementos visuales, desde baja hasta alta fidelidad, lo que significa que se puede hacer un wireframe con algo tan simple como lápiz y papel o bolígrafo y pizarra, todo el camino hasta la creación de marcos gráficos en un software de diseño como Sketch, Adobe XD, Balsamiq, o Axure. Por lo general, se
recomiendan los wireframes de baja fidelidad al inicio de cualquier nuevo proceso de diseño. Eso se debe a que te permiten tomar múltiples conceptos y probarlos rápidamente sin tener que invertir una tonelada de tiempo o costo en ellos. Después puedes tomar las diferentes ideas y colocarlas frente a los participantes de pruebas de usuario o clientes para obtener retroalimentación. Puedes obtener feedback más rápido y luego hacer las revisiones necesarias para acotar la mejor estrategia de diseño para tu producto. wireframes son una parte temprana del diseño del producto o lo que se conoce como el proceso de pensamiento del diseño acuñado por una empresa de diseño IDEO, pero no empiezan por el principio. wireframes son parte del proceso de diseño físico, que viene después de que hayas hecho muchas investigaciones y descubrimientos sobre el producto que estarás diseñando. Esta fase de descubrimiento es suficiente información para toda una otra clase. Asumamos que ya hemos pasado por nuestros sprints de investigación y descubrimiento, y ya sabemos que estaremos diseñando wireframes para una aplicación móvil de viajes.
3. ¿Qué es un propto?: Para esta clase, también estaremos construyendo un prototipo clicable con nuestros marcos de cable hacia las lecciones finales de la clase. Un prototipo se correlaciona con las tramas de cable, pero hay dos entregables de diseño diferentes. prototipos son demostraciones interactivas de cómo funcionará y se verá tu producto. Los prototipos también pueden ser de baja a alta fidelidad, puedes construir prototipos a partir de tus bocetos de papel y lápiz, o de tus diseños de aplicaciones de alta fidelidad totalmente diseñados. Un prototipo generalmente llevará a un usuario a través flujos de tareas determinados o múltiples y puede o no incluir interacciones y animaciones. prototipos son importantes para el proceso de diseño del producto porque te permiten comunicar tus diseños previstos a los usuarios y desarrolladores de pruebas de
usuario u otros equipos en el proceso de entrega, o a los clientes y stakeholders a los que debes presentar tus diseños, se llevan tu diseño estático y lo hacen más realísimo. Poder ver cómo interactúan los usuarios con tu producto es parte
del proceso y ver qué funciona y qué no funciona en tu diseño, esto te permitirá hacer las mejores revisiones para tu producto.
4. El proceso del diseño: Conocer el proceso de diseño es una habilidad importante que puedes agregar a tu kit de herramientas a medida que entras al mundo del diseño. Voy a repasar brevemente el proceso que ha llegado a conocerse como pensamiento de diseño, hecho popular por la empresa de diseño IDEO. El primer paso en el proceso de pensamiento de diseño es empatizar. La empatía es crucial cuando estás diseñando productos que serán utilizados por las personas. Este sprint te permite conocer más sobre los puntos de pin de corte que estás tratando de resolver para el público objetivo que podría estar usando tu app. Sus entregables de diseño para la etapa de empatía del pensamiento de diseño podrían incluir investigación y estadísticas de
usuarios y una comprensión del público objetivo para el que estás diseñando. El segundo paso del proceso de pensamiento de diseño es la etapa definida. En la fase definitoria del proceso de pensamiento de diseño, tomarás toda la información que recopilaste sobre tus usuarios durante el sprint de empatía y la sintetizarás en tomas
clave que te ayudarán a definir tu enfoque a los problemas que has determinado que tu producto va a resolver. Sus entregables para la etapa definitoria podrían incluir tomas clave de la investigación de usuarios y entrevistas, definiciones de
estrategia como una declaración de problemas, metas empresariales, necesidades y metas de los
usuarios, e indicadores de éxito como las métricas y los KPI. El tercer paso en el proceso de pensamiento de diseño es la etapa ideada. Después de tener una sólida comprensión de su estrategia y necesidades de los usuarios, puede comenzar a idear en torno a diferentes ideas que podrían ser posibles soluciones al problema o múltiples problemas que su producto pretende resolver. Esta es la parte donde se fomenta el pensamiento creativo. Piensa fuera de la caja para las formas en que podrías solucionar estos problemas. entregables para la etapa ideate podrían incluir bocetos de diferentes técnicas de lluvia de ideas y una lista reducida de características que podrían
incorporarse a sus diferentes conceptos de diseño. El cuarto paso en el proceso de pensamiento de diseño es la creación de prototipos. Dependiendo de la restricción de tiempo del alcance de tu proyecto, puedes determinar qué nivel de fidelidad se necesita para tus alambres y prototipo. Esta fase de prototipado es cuando tomarás los conceptos que has
ideado en la fase de ideación y los convertirás en wireframes, en un prototipo interactivo que establece la cláusula de tarea primaria que un usuario completaría al usar su producto. Utilizas estos prototipos para conseguir que los participantes
reales de las pruebas de tu público objetivo usen rápidamente tu producto, lo cual es importante para la fase final de pruebas donde obtendrás retroalimentación para que puedas hacer tus revisiones finales de diseño. entregables de tu fase de prototipado podrían incluir alambres de tus flujos de usuario y prototipos de baja a alta fidelidad. El quinto paso en el proceso de pensamiento de diseño es probar. En esta fase final del proceso de pensamiento de diseño, probarás cuántos conceptos recibidos para determinar que el tiempo lo permite. Esta fase de prueba puede revelar banderas rojas o problemas con su diseño es posible que no haya notado de otra manera antes de probar con gente real. Esto te permite hacer las revisiones necesarias para tus diseños de baja fidelidad a medida que aumentas la fidelidad que no descubras errores de diseño más adelante por el camino después de haber gastado más tiempo o dinero en ellos, digamos en el fase de desarrollo. entregables para la fase de prueba podrían incluir Losentregables para la fase de prueba podrían incluircomentarios de los
usuarios basados en su diseño preliminar, características
incluidas y flujos de usuarios. El diseño es un proceso extremadamente iterativo y algo poco lineal. Completarás alguna forma del proceso de pensamiento de diseño con cada revisión que realices para un producto con un enfoque centrado en el ser humano. En esta importante etapa reflexiva, revisarás los comentarios y resultados de tus pruebas, cuales te informarán de dónde realizar revisiones para que puedas
volver a iniciar el proceso de diseño sobre nuevos conceptos que son versiones mejoradas de tu diseño previamente probado.
5. ¿Qué es un flujo de tarea del usuario?: Ya que una aplicación en la que podría estar trabajando como diseñador UX o UI podría consistir en muchas pantallas diferentes, a veces cientos de pantallas y estados de pantallas y diferentes características. Por el bien de esta clase, trabajaremos en completar un solo flujo de tareas para una aplicación móvil de viajes. Un flujo de tareas de usuario es una tarea que los usuarios usarían tu aplicación o producto para completar. El flujo debe guiar a su usuario hasta el punto de entrada de la tarea, llevándolo a través de cada paso hasta el paso final y resultado alcanzable, como agregar un evento a su calendario digital personal o comprar un producto en línea. Las conversiones exitosas dependen de crear un flujo fácil de usar. Si los usuarios no pueden averiguar cómo completar la tarea principal que ofrece tu aplicación, entonces la gente simplemente no usará tu producto. Podemos determinar un esquema sólido para nuestro flujo de usuarios entendiendo nuestros objetivos de negocio y necesidades de los usuarios, que determinamos en la etapa definitoria del proceso de pensamiento de diseño. Centrarse en los objetivos de negocio y las necesidades de los usuarios satisfarán los requisitos para los clientes y partes interesadas que se invierten en el proyecto y que buscan cumplir con ciertas métricas de éxito al
mismo tiempo que ayudan al usuario a cumplir con sus metas y sentirse satisfecho con su producto. Para la porción wireframing de nuestra app, vamos a diseñar un flujo de tareas que lleve al usuario a través del proceso de hacer una reserva en un hotel para una app de viaje. Otros flujos de tareas que podrías diseñar para una aplicación de viajes pueden incluir reservar un vuelo, investigar diferentes cosas que hacer en tu destino y reservar tu fiesta para diferentes atracciones, o programar una cita con un viaje agente. Como puedes ver, puedes tener muchos flujos de tareas diferentes para una sola aplicación. No quiero que esta clase se ocupe demasiado de su tiempo, así que nos quedaremos con el flujo de una tarea. Empecemos con nuestros wireframes.
6. Herramientas de Wireframing: Estas son las herramientas que necesitarás seguir y crear un marco de alambre de lápiz y papel. Lo primero es el papel de rejilla. He incluido un recurso que puedes descargar e imprimir diferentes dimensiones de papel de rejilla, incluyendo dimensiones móviles enmarcadas por un gráfico telefónico que puedes enmarcar dentro de. El segundo es un lápiz y una goma de borrar. Si bien puedes dibujar en lápiz, es agradable poder borrar tus errores o hacer revisiones. Lo último que necesitarás es una regla para asegurarte de que mantengas las formas y las líneas agradables y ajustadas, y así todo se vea consistente. Opcionalmente, puede solicitar un encuadre de alambre o una plantilla de interfaz de usuario fuera de Amazon. No necesitas esto, pero te permite dibujar de forma rápida y precisa cosas como dónde podrían estar
tus iconos sociales u otros elementos comunes de la interfaz de usuario. Empecemos.
7. Contorno reticular: El objetivo de una estructura alámbrica es delinear la estructura esquelética del diseño de cada cribado. alambres se componen de formas, líneas, cajas, texto y botones. Entonces cosas como imágenes, color, dirección de arte, topografía, esas cosas no son importantes en el
proceso de encuadre de alambre y en realidad se desaniman en contra porque
no quieres que tu usuario se envuelva en los finos detalles y lo que
podría ser el diseño final no estamos trabajando hacia el diseño final. Ya mencioné anteriormente, no se aconseja el color y este suele ser el caso. Hay instancias en las que es posible que desee utilizar el color. Por ejemplo, lo uso para CTA, tan útil para mí para poder recordar lo que quería ser interactivo así como los demás a los que le estoy entregando mi diseño. Si bien una estructura alámbrica es básicamente un borrador en bruto, queremos mantener todo consistente en lo que respecta al tamaño y el espaciado va. Cuanto mejor puedas hacer que tus alambres esbozados en papel se vean, más legibles y utilizables serán y obtendrás comentarios
más consistentes de tus usuarios al realizar las pruebas. Todo lo que quieres es que tu diseño sea legible y limpio. Es importante no quedar demasiado atrapado en los detalles. Por ejemplo, probablemente ni siquiera sepamos qué copia nos gustaría usar todavía. Puede usar marcador de posición para imágenes y copias, como cajas rectangulares pequeñas o cuadrados. Esto se llama armazón de bloques y va a delinear el flujo del usuario necesitará para este marco de alambre. La primera parte es la navegación y la capacidad de navegar por los hoteles. El segundo paso será permitir que el usuario fije las fechas de
llegada y salida y establezca la cantidad de huéspedes que se alojarán. El tercer paso es la capacidad de navegar por diferentes listados. En cuarto lugar, la capacidad de ver una página de detalles sobre un listado disponible. quinto paso es reservar finalmente una habitación. El sexto paso pedirá a los usuarios su información y detalles de
pago y el paso final será la confirmación de la reserva.
8. Escaneo y sube tus fotogramas de Wireframes: Una aplicación de escáner tomará automáticamente los diseños de tus documentos y los mejorará como un escáner real copiaría y transferiría documentos. Serán mucho más legibles porque el contraste se ajustará automáticamente para ti. Una vez que tomes fotos de todos tus diseños, simplemente las
transferirás a tu computadora para luego
poder subirlas a un software de prototipado a continuación.
9. Prototipos de InVision: A continuación, iremos a invisionapp.com y crearemos una cuenta gratuita en invision. Una vez que estés en tu cuenta, haz clic en el botón rosa grande en la esquina superior derecha para iniciar un nuevo proyecto. nombre al proyecto y seleccione el prototipo de la lista de opciones del proyecto. A continuación, solo puedes arrastrar y soltar tus archivos en esta sección del panel. En cualquier momento que realices una revisión a tu diseño, si ingresas un archivo con el mismo nombre, sobrescribirá tu archivo original. Por lo que es fácil si estás intentando simplemente actualizar tus diseños después de haber determinado las revisiones. También puedes cambiar el nombre de los títulos generales de las pantallas sin cambiar los nombres de archivo aquí. Ahora da click en una de las pantallas. A continuación, vamos a entrar en modo de construcción aquí en la parte inferior. Ahora solo haremos clic y arrastraremos sobre un elemento con nuestro ratón y esto creará lo que se llama hotspot. Un hotspot es donde el usuario hará clic para activar una interacción con tu prototipo. Pasaremos y crearemos hotspots para cada pantalla hasta que tengamos un prototipo completamente funcional que permita a un usuario pasar por tu flujo de tareas. Ahora tienes un prototipo funcional de tu diseño que puedes mostrar a tus participantes de prueba de perspectiva o mostrar tu proceso de pensamiento a las partes interesadas. O simplemente puedes presumir a tus amigos y familiares que sabes diseñar aplicaciones móviles asesinas.
10. Conclusión: Lo hiciste, trabajo impresionante. Acabamos de construir alambretas y un prototipo totalmente funcional. Me encantaría ver el trabajo de todos. Por favor sube imágenes de tus wireframes en la galería de proyectos y habla un poco de tu experiencia. ¿ Cuál fue tu aspecto favorito de wireframing? ¿ Cuál fue la parte más difícil? ¿ Optó por diseñar un flujo de tareas diferente para una aplicación móvil de viajes o aplicación diferente a la que hicimos en la clase? ¿ Para qué otras ideas de aplicaciones podrías intentar diseñar en el futuro? Aún mejor, podrías incluir un enlace a tu prototipo de
visión en vivo también en la descripción de tu proyecto. Puedes hacerlo con este botón. No puedo esperar a ver tus diseños. Muchas gracias por tomar esta clase.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
