Diseño iOS I: cómo empezar con el UX

1. Avance: Hola a todos. Soy Kara Hodecker y soy la diseñadora de productos líder para iOS en Ever note. Estoy muy emocionado de compartir lo que he aprendido sobre el diseño de iOS. Ya sea que estés empezando con el diseño móvil o si simplemente quieres un refresco. Esta siguiente serie de clases está diseñada para ayudarte a obtener la imagen completa del proceso de diseño. Cubriremos mucho más que solo diseño visual. En esta primera clase, te guiaré por los conceptos básicos del diseño de la experiencia del usuario y una variedad de técnicas de UX, incluyendo viajes de usuario, bocetos y wireframing. Te explicaré por qué cada paso del proceso UX es importante y cómo puedes aplicar estas técnicas a tu propio proyecto. Tu proyecto de clase será crear tu propia app de viajes o repensar una existente. Compartirás el progreso de cada paso a lo largo la clase con un conjunto de wireframes como tu entregable final. En las siguientes clases de la serie, escogeremos esos proyectos copia de seguridad, y pasaremos al diseño visual, diseño interacción, prototipado y pruebas de usuarios. Al final de esta serie de clases, habrás diseñado una hermosa y preciosa aplicación para iOS. 2. Asignación de proyecto de clase: Hola. Bienvenido de nuevo a iOS Design 1, Introducción a UX. En este primer video, comenzaremos con tu asignación de proyecto. Tu proyecto será diseñar una app para iPhone usando el tema de viajes. Puedes idear tu propia idea única para la app, o puedes basar tu proyecto en una app de viajes existente. Este proyecto abarcará las tres clases de esta serie, por lo que completarás diferentes etapas del proyecto en cada una. En esta primera clase, estarás sentando las bases para tu app eligiendo cuál será la app, cuáles son los objetivos del usuario y cómo tu interfaz apoyará estos objetivos. ¿ Por qué una app de viajes? Las características de las aplicaciones de viajes están realmente bien alineadas con las necesidades del usuario. Estas necesidades son bastante fáciles de identificar, por lo que ayudará a sacar parte del trabajo de conjeturas de las primeras etapas de planear tu app. También nos ayudará como clase juntos, ya que podremos abordar patrones y problemas similares. Empecemos viendo algunas necesidades de los usuarios que son atendidas por diferentes apps de viaje. Algunas de estas cosas son; quiero reservar un vuelo de ida y vuelta. Quiero investigar consejos, recorridos, y puntos de interés para una ubicación específica. Quiero comparar hoteles por precio, ubicación, y amenidades. Quiero reservar un hotel u otros alojamientos. Quiero una guía de viaje completa para mis vacaciones. Tómese un minuto para pensar en lo que un usuario tendría que hacer para cada ejemplo. Estos pasos deben reflejarse en el flujo de tu app y deben presentarse al usuario de la manera más clara y lógica. Considera lo que es más importante para el usuario en cada paso y en general. Si un usuario quiere reservar un vuelo, probablemente le importarían más los precios, los tiempos de vuelo, las escalas, y en qué aerolínea le gustaría volar. Antes de comenzar, echa un vistazo a varias apps de viajes para familiarizarte con sus flujos y la forma en que se presenta la información al usuario. Decide qué tipo de aplicación de viajes te gustaría crear o qué app quieres reimaginar. Aquí hay un par de ejemplos de aplicaciones de viajes; Tripadvisor, Kayak, Airbnb, Hotel Tonight, Expedia, Priceline, Hit monk, y City Guides by National Geographic. Todas estas apps hacen cosas ligeramente diferentes, pero todas están centradas en los viajes. Estos te muestran la amplitud de la app de viajes que podrías intentar crear. Aquí tienes un ejemplo de la app Kayak. Este es un gran ejemplo de aplicación de viajes multiusos que aún es realmente fácil de usar. la pantalla de inicio se presenta al usuario todas las opciones que tiene. Desde la búsqueda de un hotel o vuelo, hasta el seguimiento y establecimiento de alertas de precios. Una vez que se hace una elección, en este caso reservar un vuelo, el siguiente paso sería reducir lo que estás buscando. Las opciones son simples y lo que el usuario esperaría. ¿ Dónde vuela? ¿ Cuándo? ¿Cuántos viajeros? Cuando se devuelvan los resultados de búsqueda, verás que los vuelos están agrupados por aerolínea y precio. Aquí vamos. A continuación, puede perforar hasta tiempos específicos, conexiones, y el número de paradas dentro de un punto de precio. Puede parecer un poco abrumador, pero creo que Kayak hace un trabajo decente al permitirte comparar muchos vuelos en una pantalla. Una vez que hayas elegido un vuelo en particular, verás otra pantalla que detalla toda la información del vuelo y la opción de reservar. La pantalla es un poco más limpia. Esta es la última pantalla de la pantalla en este momento. Es un poco más limpio y organiza la información de una manera mucho más fácil de analizar. ¿ Cómo vas a empezar? Primero vas a hacer alguna investigación inicial sobre aplicaciones de viajes y decidir qué te gustaría hacer por tu propio proyecto. De nuevo, puedes crear tu propio viaje hasta lo que quieras hacer, o si te sientes, no quiero volverme tan loco, solo toma una app que ya existe y vete de ahí, rediseñala como quieras. A continuación vas a anotar algunas características que te gustaría incluir en tu app. ¿ Cuáles son las necesidades del usuario que abordarás? ¿ La búsqueda va a ser un gran componente de la app? ¿ Habrá mucho contenido para organizar en cada pantalla? Si estás recreando una aplicación existente, aún debes pensar en los casos de uso y las necesidades del usuario, y en cómo tu rediseño podría aportar mejoras a la experiencia general del usuario. En el siguiente video, te guiaré a través de una visión general del diseño de la experiencia del usuario para que fluyan más ideas y para prepararte para las próximas lecciones. 3. Descripción de UX: Bienvenido a la Unidad 1, una visión general de la UX. Quería empezar hoy compartiendo una cotización de Steve Jobs, que creo que capta bastante bien el diseño [inaudible]. “ El diseño no es sólo lo que parece y se siente, diseño es como funciona”. Entonces, para empezar, es realmente importante entender lo que significan el diseño de la experiencia del usuario y el diseño centrado en el usuario. Para definir el diseño de la experiencia del usuario, se centra en crear un producto que sea intuitivo, fácil de usar y agradable para el usuario. Con un diseño centrado en el usuario, las necesidades, metas, deseos del usuario se consideran cuidadosamente a lo largo de todo el proceso de diseño. Vamos a estar cubriendo ambos a medida que vamos a lo largo de esta clase. Ya que estás pensando en tu aplicación y en las características que te gustaría incluir, asegúrate de tener en cuenta las siguientes consideraciones cuando estés diseñando específicamente para móviles. Por lo que algunas de estas cosas son contexto y la relevancia son clave. En estos días, muchas apps localizan el usuario en el contenido de superficie y es relevante para dónde te encuentras o para facilitar la búsqueda. Aquí te mostramos un ejemplo del enjambre de aplicaciones, que te facilita el check-in cuando tiene tu ubicación. El móvil es rápido, on-the- go y tienes acceso constante a él. Esto es algo que es nuevo dentro de los últimos años, pero es realmente importante recordar. Por lo que Twitter y otras apps de noticias son grandes ejemplos de lo que la gente quiere usar cuando está de viaje. Puedes sacar rápidamente tu teléfono, desplazarte por algún contenido y luego estar en tu siguiente tarea. Vuelves a poner el teléfono en el bolsillo, estás en camino. uso frecuente o los check ins y los tamaños de dispositivos más pequeños son otra cosa que debes considerar con el móvil. Aplicaciones tan simples como Yahoo tiempo te muestran el contenido que quieres ver de frente y centro sin que tengas que navegar muy lejos. Aplicaciones como esta están pensadas para un check-in rápido un par de veces al día. Por último, hay que recordar que las distracciones están presentes durante el uso. Con el móvil, es especialmente importante recordar que los usuarios no te van a dar su atención indivisa. breves tramos de atención han estado llevando a la gente a frustrarse si no pueden encontrar lo que quieren cuando lo quieren. Entonces, como diseñador, es importante tener presentes estas consideraciones del usuario en todo momento. Utilízalos para guiarte en cada parte del proceso de diseño. Recuerda, tu app debe permanecer enfocada y presentar al usuario la información más crucial y relevante con la menor cantidad de esfuerzo. Es por ello que la pantalla de inicio o la pantalla principal de la app es probablemente la más importante. Esta vista debe proporcionar al usuario lo siguiente. La información que más le interesa al usuario. Si se trata de una aplicación más compleja, saltando puntos a otras secciones dentro de la app. Por lo que algunas apps se enfocan en una o dos funciones principales, que permiten que esa información se presente al usuario de inmediato. Estos incluyen, navegar y consumir contenido que a menudo se actualiza o cambia, hacer referencia a información e información de registro. Las aplicaciones más simples a menudo cuentan con feeds o líneas de tiempo. Esta es una forma increíblemente efectiva de mostrar contenido para los usuarios que desean consumir contenido rápidamente. Aquí te damos un par de ejemplos. Tengo Facebook, Twitter y Pinterest. Otras dos son las apps Fitbit, Calendar, Weather, e incluso tu correo electrónico. Todas estas apps son súper simples. Los abres, estás en el feed que es probable la información que quieres ver y cualquier otra cosa a la que necesites llegar. Podrás llegar fácilmente si necesitas buscar en Pinterest. Si quieres ver tus notificaciones en Facebook, puedes saltar a eso. Pero probablemente, cualquier cosa que necesites está justo en esa pantalla principal. Otras aplicaciones tienen un conjunto de características más complejo y permiten al usuario realizar múltiples tipos de tareas. Por lo que algunos ejemplos de aplicaciones con un enfoque más navegacional incluyen Evernote, donde puedes leer notas, buscar, crear notas. Airbnb, que es este ejemplo que estoy mostrando aquí, dónde estás buscando y navegando, algo como Foursquare te estás registrando, tu búsqueda, navegación, lectura de reseñas, así como mapas. Estás obteniendo indicaciones, mirando el tráfico. Eso es un poco más complejo. Entonces, a pesar de que una aplicación puede ser más compleja que otras, eso no significa necesariamente que será una mala experiencia de usuario. Airbnb es un ejemplo realmente bueno de esto. Aquí puedes ver que usan fotos y gran topografía en conjunto con un gran flujo para romper la información para pantallas visualmente atractivas. Entonces, a pesar de que hay mucha información presentada al usuario, no se siente tan abrumadora o confusa. Entonces en este ejemplo que estoy mostrando aquí, un usuario está buscando un lugar en South Lake, Tahoe. Tienen todas estas bellas imágenes por las que pueden desplazarse. Entonces cuando encuentren algo que les guste, pueden hacer click para ir a leer eso. Bastante simple. Entonces al tener una comprensión de lo que quieres que hagan tus usuarios con tu app, estás bien en camino de empezar a armar personas de usuario, un mapa de viaje del usuario, bocetos y marcos de alambre, todo lo cual estaremos cubriendo en los siguientes videos. 4. Ejemplo de proyecto: elegir una aplicación: En este punto, te han presentado el proyecto de clase y has tenido una visión general del diseño de la experiencia del usuario. A continuación, te voy a llevar a través de un proyecto de ejemplo para ojalá te den una mejor comprensión de cada paso y cómo puedes esperar que se vean los entregables. Para mi proyecto de ejemplo, quería enfocarme en la reserva un aspecto de vuelo de viaje. Para estos fines, voy a usar la app Southwest Airlines como mi ejemplo, y les voy a mostrar cómo imagino rediseñarla de principio a fin. Echemos un vistazo a la aplicación existente de Southwest. Tengo aquí un montón de pantallas de la app que tomé en mi teléfono solo para darte una idea de cómo se ve ahora. Seguro como puedes decir, el diseño visual se ve bastante anticuado y torpe. Tampoco es súper amigable a primera vista. Dé la impresión de que va a ser una experiencia lenta, francamente, por lo anticuada que se ve. No lo sé. Simplemente no me da una buena impresión. No me siento realmente genial por, oh, esto va a ser impresionante. En cuanto al flujo en sí, siento que es un poco molesto tener que presentarse con esta opción para iniciar sesión o continuar como invitado de inmediato. Especialmente si Southwest no es una app utilizo mucho y no tengo nombre de usuario y contraseña, esto es molesto. Al hacer clic en “Continuar como invitado”, lo primero que veo en la parte superior es inscribirme o iniciar sesión e inscribirme, así que ya me están vendiendo en algo cuando solo quiero entrar y empezar a reservar un vuelo. Entonces también veo diferentes opciones aquí abajo, para poder facturar, comprobar el estado de un vuelo, reservar viajes, administrar viajes, y ofertas especiales, etc. Ahora, cuando hago clic en “Reservar Viaje”, vengo aquí, y nada se rellena. Algo que realmente me vuelve loco es que no estaban buscando la ubicación en la que estoy ahora mismo. No saben que estoy en California. No van a repoblar San Francisco como mi aeropuerto de origen. Eso es algo que muchas apps están aprovechando. También ni siquiera aparecieron algo, solo di, “Southwest Airlines le gustaría usar tu ubicación”. Con mucho gusto les hubiera dado permiso para usar mi ubicación si me salvaran de tener que agregar en eso. Es solo uno de esos pequeños bonitos de tener, lo que hace sentir que estoy haciendo menos trabajo. Incluso cuando realmente paso y hago clic en donde puedo elegir una ciudad, todo lo que veo aquí, ni siquiera ninguna sugerencia. De nuevo, simplemente no están usando mi ubicación en absoluto. Si lo fueran, entonces tal vez habrían dicho Oakland, San Francisco, y San José, por ejemplo, todos los aeropuertos que están cerca. Pero en cambio, veo alfabéticamente la lista de ciudades justas. Yo seguiría adelante y teclearía en cada ciudad que yo quiera. Cada vez que vuelvo a la pantalla, así de ida y vuelta, de ida y vuelta, rellena la fecha. Aquí, elige cuántos pasajeros. No tengo códigos de promoción ni nada, así que entonces voy a dar clic en “Buscar”. Se tarda un poco en llenar el cielo. Pero luego después de golpear “Buscar”, se me presenta con mi pantalla de salidas de selección. Bueno, está bastante claro que sí, aquí es donde voy a elegir mi vuelo de salida, es súper abrumador. Simplemente está pasando tanto en la pantalla en este momento. Ahí hay botones morados gigantes. También me están contando de cómo vuelan gratis las bolsas. personal, conozco esa cosa del Southwest. Ya lo sé. No necesito verlo aquí mismo. Aunque no lo supiera, es aquí el lugar adecuado para presentarme esa información? No estoy realmente seguro. Además, este $ y señala las cosas simplemente se siente realmente, realmente muy prominente. Si me desplaza hacia abajo, otra cosa que voy a notar es que los botones morados solo empeoran. Tienen esta impresionante textura de gradiente sobre ellos. Es sólo que pasa mucho. Tienen esto para cada uno de los vuelos. Entonces sí, supongo, están agrupados, pero simplemente se siente realmente abrumador. Otra cosa que me parece realmente rara es que cuando realmente hago clic en uno de estos, así que si golpeo, quiero alejarme, en cualquier momento, o seleccionar negocios, en lugar de simplemente elegir ese vuelo y precederme hacia adelante, se va a expandir, como se puede ver aquí. ¿ Qué se expande para mostrarme? Que me den dos bolsas de cheques gratis. Espera, ya lo sabía porque me lo dijo hace un rato. Me va a decir cuántos puntos de recompensa rápida pude conseguir. A lo mejor es información útil, pero ¿realmente necesito eso aquí mismo? Nuevamente, no estoy seguro de que eso valga la pena. Porque ahora, tengo que volver a decir que sí, seleccionar este vuelo, ese es el que quiero. Después de pasar y elijo mi vuelo de salida, elijo mi vuelo de regreso, voy a ver la pantalla de resumen aquí. Nuevamente, adelante, tienen estos encabezados que dicen: “Aquí están los diferentes vuelos”. Pero entonces este texto se pone realmente pequeño y aplastado juntos. Sí tiene todo desglosado, pero solo siento que podría haber una mejor manera de mostrar esta información que es un poco más fácil de leer. Mi precio total está aquí abajo, genial. Oye, primero y las bolsas facturadas vuelan gratis. Esto en realidad es un poco más útil aquí abajo porque lo puedo ver justo al lado del precio que estoy pagando y sé que no tengo que pagar ningún extra por las bolsas. En realidad sí me gusta eso. Después le pego a “Next” a partir de ahí, y luego voy a seguir mi camino para proceder con la adición de mi tarjeta de crédito y lo que sea. Voy a saltarme esa parte del flujo para mis propósitos porque creo que tenemos mucho con lo que trabajar al principio aquí. Antes de crear mi persona's, lo que quiero hacer es pensar realmente en algunas tareas de usuario y casos de uso para los que mi usuario estaría usando la aplicación Southwest. Para una lluvia de ideas, agarré algún Post-it, agarré un Sharpie, y apenas empecé a anotar lo que estaría haciendo la gente cuando llegaran a usar la aplicación Southwest. Lo que escribí es buscar un vuelo de ida y vuelta por precio y horario, reservar alrededor de vuelo de viaje. En realidad, si solo están navegando para hacerse una idea de los precios a veces es diferente a la realidad cuando estás listo para reservar. Muchas veces lo hago yo mismo. Seguiré y buscaré solo para ver cuánto son las cosas, pero en realidad no estoy planeando reservar. Adicionalmente, puedo ver una reserva existente, así que ver cuáles son todos los detalles del vuelo. Entonces además de eso, puedo cambiar o mejorar mi asiento. Si tengo un vuelo próximo, mañana, por ejemplo, puedo facturar ese vuelo, y puedo ver el estado del vuelo para ver si estoy retrasado, información importante como esa. Cuando se te ocurra tu propia lista de casos de uso, intenta pensar en lo que va a ser realmente importante para cada tarea, y haz algunas investigaciones. Pregúntale a tus amigos o familiares sobre sus propias experiencias de viaje móviles. ¿ Qué apps usan? ¿ Qué apps les gustan? ¿ Incluso usan aplicaciones en absoluto, o solo usarán la computadora porque no han encontrado algo que les funcione, o simplemente tienen miedo? Las tareas que he enumerado aquí son bastante comunes para los usuarios de móviles. Una vez que tenga mi persona creada, voy a utilizar una de estas tareas para guiar el resto del proyecto. Una vez que ya tenga mis casos de uso, y listos, elaborados en Post-it Notes, a continuación, voy a pensar en los tipos de personas que usarían la app de Southwest. Este es otro ejercicio de lluvia de ideas. De nuevo, sacé mi cuaderno de bocetos y sacé mis Notas Post-it. Enumeré algunos usuarios potenciales. Lo que estoy haciendo es tratar de evitar estereotipos o usuarios promedio. Con las personas, se quiere crear un modelo que se sienta como una persona real. De lo que se me ocurrió aquí, están un poco generalizados, pero vamos a convertirlos en algo mucho más concreto a medida que avancemos. El seis que se me ocurrió, y el seis es un número totalmente arbitrario. Se ajusta muy bien en el cuaderno de bocetos. Con lo que empecé fue estudiante universitario, una mamá trabajadora de tres años, una ejecutiva de negocios, digamos un tipo de 40 años que realmente está consciente del presupuesto, un joven profesional y una mujer recién casada. Apenas un amplio espectro de diferentes tipos de usuarios. Por ejemplo, empezando por estudiante universitario, realmente es un poco de generalización. Pero si eliges el arquetipo, vas a darle vida a ese universitario mostrando su personalidad, mostrando sus características, y qué objetivos tienen. Porque no puedes simplemente agrupar a todos los estudiantes universitarios en un solo cubo. Por supuesto, van a ser completamente diferentes. Todo el mundo tiene personalidades diferentes. Pero una vez que tengas más detalles, eso te va a ayudar a averiguar el tipo de usuario que son. terminas eligiendo a un estudiante universitario, por ejemplo, vas a señalar a un estudiante universitario específico, cuál es la personalidad de esa persona, cuáles son sus rasgos, ese tipo de cosas. Realmente podrás enfocarte en esa persona en particular. Simplemente pasa a ser estudiante universitario, así que te da un poquito de punto de partida. Ahora, en el siguiente video, te voy a guiar por la persona que elegí. En realidad voy a elegir joven profesional para usar eso como guiar el resto de este proyecto. Pero vamos a pasar por eso con más detalle en el siguiente video. 5. Definir personas del usuario: Bienvenido de nuevo. En el último video, te di una visión general del diseño de la experiencia de usuario y cómo se refiere a las aplicaciones móviles. En este siguiente video, cubriremos el primer paso de nuestro proceso UX, definiendo las personas de usuario para nuestra app. Existen muchas herramientas y técnicas de UX diferentes que los diseñadores usan todos los días para iniciar proyectos. Algunos diseñadores se enfocan en algunas técnicas selectas mientras que otros son mucho más extensos. Algunas de las técnicas de UX que no estaremos cubriendo aquí incluyen la realización de entrevistas a las partes interesadas, recolección de requisitos, análisis de competidores, encuestas y análisis. Esto no es porque estas técnicas no sean importantes en absoluto sino porque simplemente no son relevantes para nosotros en este punto. Debido a que hay tantas técnicas diferentes que puedes usar, muchas de estas cosas se usan en más de un sentido profesional y así simplemente no tiene sentido que cubramos estas para empezar. Pero la técnica UX con la que empezaremos es crear personas de usuario. Una persona es un personaje que es representativo de las necesidades, pensamientos y metas del usuario objetivo. Personas están construidas para diseñar la mejor experiencia posible para tus usuarios. Piensa en una persona como tu usuario típico o ideal, ¿ y a quién ves usando tu app? Personas pueden ayudarte a recordar que tus usuarios pueden no ser como tú. También evitan que generalices a todos los usuarios en un cubo principal, pensando que todos tienen las mismas necesidades y metas. Por supuesto, muchos usuarios probablemente tendrán los mismos objetivos o similares para usar tu aplicación pero cada persona viene de un fondo diferente. Por ejemplo, dos usuarios ambos quieren reservar un vuelo, pero un usuario tal vez un ejecutivo de alto nivel que quiere usar millas para un viaje de primera clase mientras otro tal vez una mamá que solo quiere encontrar la forma más barata de conseguirla tres niños para visitar a sus abuelos. Estos usuarios tienen necesidades completamente diferentes y por lo tanto tendrán diferentes formas de navegar por una aplicación de viajes. Es probable que haya varios tipos diferentes de personas que usarían tu aplicación para tratar de llegar a 2-3 personas para representar a tus usuarios. Cada uno debe tener una historia y un caso de uso ligeramente diferente en cuanto a por qué quieren usar tu app y qué pasos darán para lograr sus necesidades. Empezaremos escribiendo una descripción para cada una de tus personas. Considera diferentes tipos de personas para representar mejor a una variedad de usuarios. Piensa en el ejecutivo frente a la mamá que claramente son usuarios muy diferentes. Cuando estés escribiendo cada descripción, debes incluir lo siguiente: género, edad, estado civil, ocupación, estado económico, qué tan familiarizados están con la tecnología, dispositivos que usan, pasatiempos generales, etcétera. debes incluir lo siguiente: género, edad, estado civil, ocupación, estadoeconómico, qué tan familiarizados están con la tecnología, dispositivos que usan, pasatiempos generales, etcétera. estas cosas ayudarán a capturar quién es realmente esta persona que estás tratando de representar. A continuación, después de haber capturado la descripción de la persona , elabora un escenario para el que podrías imaginar que un usuario querría usar tu aplicación. Piensa en lo que serían las motivaciones, metas y necesidades de los usuarios . Las personas que crees deben cubrir algunos escenarios y tipos de usuarios para los que te gustaría diseñar. No podrás contar para cada usuario pero al menos puedes considerar algunos. Comience anotando sus descripciones y escenarios. No necesitas pasar mucho tiempo diseñando o haciendo que estos luzcan realmente geniales. También depende de ti si quieres incluir una foto representativa para cada usuario, puede ser útil imprimir tus personajes y tenerlos cerca por referencia cuando estés pensando en tu aplicación y más detalles. Pero realmente no hay necesidad en este punto de hacerlos realmente fantasiosos. Nuevamente, tu primer entregable será crear 2-3 personas para representar mejor a tus usuarios objetivo. Podrás subir estos a tu proyecto en cualquier formato que elijas. También voy a incluir algunas referencias en la web que puedes mirar si quieres más información sobre personas, hay un montón de cosas realmente grandiosas por ahí. En nuestro próximo video, cubriremos cómo puedes usar estas personas para ayudarte a crear un mapa de viaje del usuario. 6. Ejemplo de proyecto: persona: Acabamos de cubrir nuestro primer paso UX de definir las personas del usuario. Ahora, te voy a guiar por mi ejemplo de proyecto para definir personas. El arquetipo de persona que voy a elegir por mi ejemplo, es el joven profesional. Empecé por decidir que esto iba a ser una usuaria femenina y la nombré Kelly. Lo que hice aquí fue volver a sacar mi cuaderno de bocetos, y apenas empecé a anotar un montón de cosas que quería cubrir sobre Kelly. Traté de imaginarme qué tipo de persona sería Kelly, y qué tipo de usuario representaría. En el boceto, anoté estadísticas personales, características, su visión de la tecnología, y lo que imaginaba sus metas y necesidades de ser. En la mayor parte de lo que escribí tiene algo que ver con viajar de una forma u otra. Empecé aquí como puedes ver, así que decidí Kelly, tiene unos 27 años, para nuestros propósitos, es diseñadora de UX, y empecé a escribir algunas cosas personales sobre ella, y a decir que no está casada, pero está en una relación comprometida. Ella hace un salario decente, vive en San Francisco, tiene pareja de compañeros de piso pero no mascotas. Entonces características para explicar qué tipo de persona es. Entonces si la estuvieras describiendo a una amiga por ejemplo, ¿qué dirías? Elegí decir que es una persona bastante activa, hace clases de gimnasia y yoga, realmente le encanta viajar, ir fácil, y esto es importante. No es súper frugal, pero tampoco una gastadora escandalosa. Está organizada, pero le gusta planear. Entonces no excesivamente TOC, pero a ella le gustan las cosas para ir a su manera. Todas estas cosas son distinciones realmente importantes mientras perfeccionamos en ella en nuestras personas. A continuación, la tecnología, esto vuelve a ser importante porque aquí estamos haciendo una aplicación móvil. Debido a que es diseñadora de UX, eso va a contribuir a su uso de la tecnología, por lo que realmente la abraza. De nuevo está encima de ello por su trabajo. Esto hace que se frustre con experiencias más lentas, pobres, tiene el iPhone más reciente, siempre al día de ese tipo de cosas. Ella está realmente cómoda comprando en línea, y es una usuaria de Internet bastante activa. Entonces eso describe cómo se siente con la tecnología, y cómo voy a pensar en ella mientras estoy diseñando la versión de la app Southwest. Por último pero no menos importante, sus metas y necesidades. Estas son cosas que pensé, ¿qué va a tener en mente Kelly cuando esté usando esta app? Ella va a querer estar al tanto de las buenas ofertas de vuelos, eso es algo que es importante para ella. Ella quiere la capacidad de comparar fechas y horas de viaje por el mejor precio, quiere poder usar millas o puntos hacia las reservas de viajes, y prefiere quedarse con una aerolínea porque así va a acumular esos millas o puntos para ayudarla. De nuevo, como dije aquí, ella no es frugal, pero tampoco es un gastador indignante, así que es bastante joven, así que quiere aprovechar cualquier forma que pueda ahorrar un poco de dinero. Ahora que he hecho esto, vamos a sumergirnos un poco más en algunas de las cosas que aquí señalamos. Dije que estaba en una relación comprometida y le encanta viajar, así que imaginemos que estaría viajando mucho con su otro significativo. Definiendo que hace un salario decente, y otra vez, que no es frugal y no gastadora indignante, todas esas cosas la pusieron en cierta categoría. Se podría suponer que no va a elegir el vuelo más barato absoluto, y sacrificar todo lo demás del viaje sólo para conseguir ese buen trato, pero que probablemente en su lugar haría muchas investigaciones para encontrar un vuelo que se sienta bien sobre. Ahora, ya que no vas a abusar presentar tus personajes a un cliente o a algún otro Stakeholder, un boceto como lo he hecho aquí es perfectamente aceptable para esta clase. Totalmente bien. Pero lo que voy a hacer a continuación, es pasarte a través de cómo podría verse esto en forma digital. Nuevamente, idealmente, vas a querer crear 2-3 personas para tu proyecto. Yo sólo voy a cubrir uno, pero esto es sólo para darte una idea. Siguiente arriba es la manifestación. Ahora vamos a empezar con la parte de demostración real. Lo que voy a hacer es abrir el boceto del programa, y voy dos crear un nuevo archivo, oops, se fue por ahí. No sé si ustedes están familiarizados con el sketch o no. Pero esta es una herramienta realmente genial para cosas súper rápidas. Mucha gente realmente lo usa para UI real, prefiero Photoshop yo mismo. Pero, me encanta esta herramienta para poner las cosas rápidamente, hacer cualquier wireframing. Esto es lo que voy a usar para mis personas y mis viajes de usuario, así que es solo una gran herramienta para hacer algo rápido y fácil. Es bastante similar a otros programas como Keno y ya sea tienes herramientas de lado aquí, tenemos herramientas arriba en la parte superior y todo tipo de cosas así, un montón de cosas que vamos a cubrir a medida que avancemos. lo primero que quiero hacer, ahora mismo esto es igual que un gran lienzo en blanco como se puede ver. Lo que realmente quiero hacer es, quiero insertar una mesa de trabajo. Esto me va a dar igual que una caja delimitadora de donde voy a colocar todo. No tienes que hacer esto, pero me ayuda un poco. También ayuda con la exportación porque de esa forma tienes, como lo que exactamente vas a estar exportando. Desde aquí en realidad puedo simplemente, sostener y arrastrar aquí mismo para crear cualquier mesa de trabajo, o también puedo empezar con todas estas cosas. Entonces esto va a ser realmente útil para ti si estás usando este programa para tus wireframes más adelante, porque puedes escoger pantallas de iPhone para cualquier tamaño, iPad también, muchas cosas aquí dentro. Pero para ello, realidad voy a empezar con el tamaño de letra, y entonces se puede ver aquí me dan estas pequeñas fronteras, así que en realidad puedo escalar esta cosa a lo grande que quiera. Ya que en realidad no estoy imprimiendo esto, realmente no me importa lo grande que sea, y si quisiera imprimirlo, siempre lo consigo, simplemente se reduciría. Sé que mi persona en realidad va a ser un poco más grande, y solo quiero hacerlo un poco más ancha y un poco más alta. Entonces sólo voy a hacer arbitrariamente a este tipo un poco más grande, y esto es algo que siempre puedo cambiar. Entonces si hago clic de distancia, entonces ya no tengo esas casitas delimitadoras, pero si hago clic de nuevo aquí arriba, vuelven enseguida. Súper fácil de cambiar en cualquier momento. Este es también el nombre de lo que es esta cosa así, o bien puedo ir por aquí y decidir cambiarle el nombre, y yo sólo voy a decir, Persona, y voy a actualizar aquí. De nuevo, no es gran cosa, pero te ayudará si tuvieras más de una de estas mesas de trabajo uno al lado del otro, por lo que en realidad puedes hacer todas tus personas en un solo archivo. Simplemente te ayudará a mantener las pistas, así que esto podría ser persona a Si quisiera, podría ir insertar nuestra pizarra, o en realidad puedo, puedo hacer clic derecho en este signo y decir Duplicar, y luego pondrá una segunda aquí. Por lo que podría hacer los tres a la vez, y puedo mostrarles cómo exportar eso al final. Pero por ahora, solo voy a seguir adelante y borrar a ese tipo porque no lo necesitan. Lo siguiente que quiero hacer es en realidad guardar este archivo por si acaso, voy a llamar a esta persona y un boceto, solo puedes seguir adelante y Guardar en el escritorio. Genial. Listo para ir. Ahora tengo esta persona con la que trabajar, así que tengo a Kelly. Algo que mucha gente hace con personas es usar una foto para representar a esa persona, y solo le da un poco más de vida a tu persona, puedas mirar a esa persona y decir como, sí, esto es Kelly por mi ejemplo. He rastreado un poco el Internet y he hecho alguna toma de fotos de stock, pero para nuestros propósitos aquí, solo voy a pegar esto en. Entonces esta es mi representación de Kelly, de 27 años. Pega eso ahí dentro. Genial. Lo siguiente que quiero hacer es en realidad, quiero insertar algún texto. Yo quiero tener en cuenta a qué persona está representando Kelly, y que para mí ese fue el joven profesional. Voy a insertar un cuadro de texto, y voy a decir, Young Professional, cool. Esa es mi persona, sólo voy a decidir ponerla ahí. Entonces también quiero poner el nombre de Kelly aquí. Kelly, y luego tengo todas mis herramientas por aquí para mi texto lo que hace que sea realmente fácil hacer las cosas [inaudibles] algo para ir. Enfriar, eso parece un buen tamaño. A ver si quería hacer como un tipo de cosas azul verde, esto es totalmente arbitrario, solo estoy decidiendo esto a medida que vamos. Pero aquí está Kelly, y en realidad tienen estas lindas guías inteligentes que alinean todo por lo que es útil. Genial. A continuación, lo que quiero hacer es solo darle un poco más de vida a este documento real y hacer que se vea bonito, armar, y simplemente hacer que se vea bonito. Una cosa que quiero hacer es, solo voy a usar una caja de color y ponerla escribir sobre aquí. Yo sólo tengo el tamaño ahora mismo al ancho de su cuadro. En esta cuadra, voy a poner un par de cosas sobre los antecedentes de Kelly. También se me olvidó mencionar, cuando estás creando tus personas, lo que hice en realidad es simplemente buscar inspiración en línea para cómo se presentan estas cosas. Es bastante útil solo tener una sensación de diferentes formas en las que puedes ponerlas o podría provocar una idea de como, quiero incluir esto en mi persona que no me he cubierto. Para éste por ejemplo, acabo de encontrar una persona de buen aspecto y yo estaba como, “Esto se ve muy bien, lo encontré en [inaudible]. Pensé que sólo usaría esa estructura para lo mismo para la mía”. He escrito algo de esto ya sólo para ahorrarnos un poco de tiempo, pero tengo lo que llamo el fondo de Kelly aquí y solo paseando eso. Entonces lo que tengo aquí son las pequeñas estadísticas sobre Kelly, así que es su edad, ubicación, estado civil, hijos, ocupación, salario y educación. Algunas de estas cosas que no había escrito antes en mi boceto, pero era sólo algo que quería agregar en este punto, y eso está totalmente bien. Todo este proceso es realmente flexible. Entonces aquí solo estamos enumerando todas esas cosas, como pueden ver. Entonces lo que también quiero hacer es, en realidad puedo mostrarte de nuevo. Yo había escrito sólo un par de cosas sobre Kelly aquí, así que tengo listas con viñetas y todo. Pero lo que también hice fue tomarme algún tiempo para escribir un pequeño párrafo sobre Kelly. Entonces otra vez, si la estaba describiendo a una amiga o haciendo un escrito sobre Kelly que quería cubrir una historia, una línea de base. Tengo a este tipo también escrito ya, solo voy a pegar aquí, allá vamos. Voy a decidir poner esto aquí. Este es un gran punto. Ahora puedes ver mi texto está un poco más cerca del borde y realmente no quiero que esta guía sea a mucho más alto. Sólo voy a estirar un poco mi caja, perfecto. Ahí vamos. Entonces sobre Kelly, esto es básicamente sólo un párrafo para explicar un poco sobre Kelly. Es resumir lo que cubrí en mis notas. Básicamente, Kelly es una persona activa que disfruta viajar a nuevos destinos siempre que puede. Intenta planear un viaje al extranjero cada año así como escapadas más cortas a lugares cercanos. Tiene tres semanas de vacaciones que idealmente pasará fuera de casa. Ella viaja principalmente con su novio, pero ocasionalmente con un pequeño grupo de amigos. Kelly hace un salario decente, por lo que no está enteramente consciente del presupuesto, pero tampoco es una gastadora extravagante. A menudo pesa opciones para ver si la calidad o el precio es más atractivo. Por lo que sólo resume todo lo que hemos escrito pasando hasta ahora. Lo siguiente que quiero agregar son estas características. Ya hemos cubierto esto de nuevo con nuestros puntos de bala. En realidad voy a sumar algunos puntos de bala sólo por un poco más de claridad aquí. Enfriar. Genial. Súper simple. En realidad no finalmente, tengo un hoyo aquí arriba. Pero tengo lo que también es realmente importante, sus metas y necesidades. Entonces voy a tratar de alinear a este tipo con ambos. A veces por esto no puedo ser súper pixel perfecto con sketch, porque me vuelve un poco loco. Entonces otra vez, con sus goles quiero sumar balas de suma y estas son todas las cosas que habíamos cubierto antes y yo solo podría tratar de ver si puedo, no. Entonces esto no es tan grande para alinear las cosas, pero podemos arreglarlo más adelante. De acuerdo, así que lo último que quería añadir a esta persona fue en realidad, muchas veces la gente usa pequeños gráficos o gráficos o iconos para representar cosas diferentes solo para que esto sea un poco más visualmente interesante. Entonces lo que he hecho es hacer un pequeño gráfico de barras de tres aspectos diferentes sobre Kelly. Entonces voy a tratar de alinear eso. Se ve bastante bien. Entonces conocimiento tecnológico, hábitos de gasto y preferencias de reserva. Estas tres cosas que quería destacar porque son bastante importantes para mí ya que estaré continuando con este proyecto. Entonces con el conocimiento tecnológico, ¿tiene poco conocimiento a nivel experto? Entonces dije: “Bastante cerca del experto”. Por supuesto, ella no es la máxima experta, pero tiene buen sentido. Hábitos de gasto, frugal a lujoso. Está en medio, un poco más hacia frugal, pero definitivamente no por aquí. Sus preferencias de reserva frente a la tarifa más baja en el vuelo más ideal también en el medio, tal vez un poco más hacia el vuelo más ideal. Esto me va a dar una muy buena sensación de, puedo echar un vistazo a esto, puedo comparar para ustedes chicos sería algo realmente genial porque van a tener de dos a tres de estas personas. Podrás mirarlos juntos y decir: “Kelly es el usuario que es así. Digamos, Sam, es el usuario que es así”. A lo mejor Sam es el más frugal tampoco, su el chico consciente del presupuesto. Entonces podría haber alguien más que tal vez tenga realmente poco conocimiento de tecnología y eso es algo en lo que vas a querer enfocarte a lo largo de tu proyecto. Entonces ya terminé aquí. Ahora lo siguiente que te voy a mostrar es sólo cómo exportar a este tipo. Porque ya tengo mi tablero de arte como dije, solo va a exportar muy fácilmente. Yo subo aquí, exporto, selecto, así que le llama rebanada. Lo que yo quiero dos hacen ahora, no quiero un PNG. Podrías si quisieras o podrías hacer JPG o TIFF, pero solo voy a hacer un PDF porque es un poco más simple y también mantiene el texto realmente bonito. Entonces exportar y eso va a decir, “persona.pdf”. Suena genial. Golpea exportación, decide dónde guardarla. Perfecto. Hecho. Voy a guardar eso y ahora si abrimos a este tipo , genial, tengo mi persona escuche. Entonces esto es otra vez, algo que puedo imprimir si quiero. Pero esta también sería una gran manera de entregar como su entregable final para este proyecto o para esta parte del proyecto de clase. Voy a incluir un enlace a realmente una plantilla de persona de muestra que puedes descargar, es algo que encontré en línea. Es un poco más de estilo digital y no digital, por lo que es algo que puedes imprimir y luego dibujar. Esa podría ser una buena manera de empezar si quisieras empezar con el bosquejo. Entonces también subiré mi archivo de boceto aquí por si hay algo que ustedes quieran sacar de eso. Está bien. Bueno, deberías estar listo para que tus personas vayan y no puedo esperar a verlas. 7. Mapeo el viaje del usuario: Bienvenido a Unidad 3, Mapeando el Viaje del Usuario. Nuestra siguiente técnica UX se llama mapa de viaje del usuario y también se puede conocer como mapa de experiencia del usuario. Los viajes del usuario trazan la serie de pasos de las actividades en interacciones que el usuario tendrá con tu app. Los viajes de los usuarios son beneficiosos para el proceso de diseño ya que permiten pensar en la app desde un alto nivel. Te ayudarán a averiguar cómo interactuarán tus usuarios con tu aplicación, qué expectativas pueden ser, e incluso te harán pensar en nuevas funcionalidades que quizás ni siquiera hayas considerado todavía. En la práctica, los mapas de experiencia del usuario pueden ser bastante complejos y contener detalles como requerimientos y metas del negocio, múltiples puntos de contacto que un usuario tiene con el producto o servicio, y conocimientos cualitativos. No obstante, para nuestro propósito, se estará centrando en una versión simplificada que represente la historia de la relación de un usuario con su aplicación desde la perspectiva del usuario. Los mapas de viaje del usuario se pueden diseñar como más un flujo basado en texto, o puedes adoptar un enfoque más visual. Esta es realmente tu preferencia, y te mostraré algunos ejemplos de ambos. Aquí hay uno justo aquí. Podría ser útil si le acercas un poco más. También he incluido los enlaces en línea si quieres echar un vistazo más de cerca también. Aquí hay otro. Se puede ver que estos viajes de usuario son principalmente en blanco y negro, similares a los marcos de alambre, con pops de color para representar el camino que tomará el usuario o opciones que pueda elegir. Aquí hay otro todavía también se ve un poco de alambre enmarcarme. Nuevamente, les animo a echar un vistazo a estos también en línea. Algunos son mucho más simples, este es un ejemplo de uno muy basado en texto, pero todavía consigue el mismo punto a través, simplemente no es tan bonito. Ahora que has creado de dos a tres personas en el último paso, vamos a usarlas como base para crear un mapa de viaje de usuario para cada uno. Empezaremos escribiendo y visualizando a cada usuario o persona o el viaje que cada persona estará realizando a través de tu app. Pensarás en cuáles son las metas y necesidades de tus usuarios? ¿ Qué tareas necesitan realizar tus usuarios? Considerar qué metas y tareas son cruciales y cuáles son secundarias. Esto realmente ayuda a mantener al mínimo el número de pasos para completar una tarea. No queremos que los usuarios pasen por tu aplicación y sientan que están realmente abrumados o es demasiado complicado. A continuación, trazaremos un mapa de cada paso del proceso del usuario. Piensa en qué pantallas se moverá el usuario, qué verá en cada pantalla, y ten en cuenta todo este tiempo cómo debería sentirse el usuario a lo largo. De nuevo, no queremos estresar a nadie. Deberían sentirse bien cuando están usando tu app. Un mapa de viaje del usuario debe contener una referencia a la persona en la que se basa, y el objetivo final del usuario. Algunos ejemplos de tareas que sus usuarios pueden querer realizar, especialmente dentro de una aplicación de viajes, serían, digamos buscar hoteles de tres o más estrellas en San Francisco, o comprar un viaje de ida y vuelta, billete de avión, tal vez reservar un alquiler vacacional, y luego incluso investigar y encontrar cosas que hacer en un determinado lugar vacacional. Estas son un par de cosas que, que tus usuarios pueden querer hacer y en las que quieres pensar. Estos son, son buenos ejemplos de cómo puedes, qué harías para llevar al usuario a través de cómo cumplirían cada una de estas tareas. Por último, evalúe los mapas que una vez que haya completado un borrador y pregúntese lo siguiente, ¿es apropiado el nivel de complejidad para cada tarea? ¿ Dónde puedo simplificar las cosas? ¿ Tiene sentido el flujo general? Tendrás que hacer retoques según sea necesario. Esto no es algo que probablemente te pongas bien en el primer intento. Tu entregable será crear un viaje de usuario para cada una de tus personas represente los objetivos de tus usuarios. Una vez que hayas completado tus viajes de usuario, compártelos con la clase. A continuación, nos sumergimos en el bosquejo donde finalmente puedes tomar estas personas y viajes de usuario y convertirlas en algo un poco más concreto. Nos meteremos un poco más en la parte de diseño en los siguientes videos. 8. Ejemplo de proyecto: mapa de viajes del usuario: Por lo que en el último paso del proyecto, completé mi persona. Ahora, lo que tengo que hacer es decidir cuál es el viaje clave del usuario que voy a esbozar. Entonces, empecemos revisando las tareas de usuario que se me ocurrió de nuevo. Volver a mis Notas Post-it. Estos fueron búsqueda de vuelo de ida y vuelta por precio y horario, reservar un vuelo de ida y vuelta, ver y reserva existente, cambiar o mejorar mi asiento, facturar a un vuelo, o ver el estado de mi vuelo. Por mi ejemplo, voy a utilizar la primera tarea aquí. Busca un vuelo de ida y vuelta por precio y horario. Esta tarea sigue siendo bastante genérica, así que quiero elaborar una pequeña historia usando mi persona de Kelly. Se me ocurrió un escenario por el que me imagino que Kelly estaría pasando. Digamos que Kelly quería realizar una búsqueda vuelo de ida y vuelta de San Francisco a Portland, Oregón para visitar a sus amigas durante un fin de semana largo. Estará viajando con su novio. Ella tiene tres fines de semana diferentes en mente y quiere comparar el precio y horario de cada fin de semana para determinar cuál va a ser más ideal. Por lo que con este escenario, Kelly también estará usando la aplicación Southwest para buscar sus opciones de vuelo. partir de los detalles de su persona en el escenario, también he llegado con la lista de cuáles son potencialmente sus objetivos. El primero es que quiere buscar un vuelo de ida y vuelta de San Francisco a Portland. Además, le gustaría la capacidad de buscar fácil y rápidamente múltiples fechas de fin de semana para poder comparar precios. No suena tan duro, ¿verdad? Bueno, el primer gol es el simple. El segundo gol, por otro lado, requerirá un poco más de pensamiento en mi parte. Yo quiero prestar especial atención a este. Estoy pensando en cómo podría reestructurar el flujo de la app. Por lo que ahora voy a darle un tiro a mi mapa de viaje de usuario. lo que he hecho aquí se esbozan los pasos en las pantallas por las que Kelly tendría que pasar para lograr su objetivo. Por lo que estas sería ella comienza en el domicilio, reservando viaje, lo que requiere elegir una ciudad de salida, regresa ciudad y sus fechas de salida y regreso. Una vez que haya hecho eso, va a golpear la búsqueda y va a conseguir los resultados para un vuelo de salida, cual elegirá uno y luego obtendrá resultados para el vuelo de regreso donde elegiría uno. Entonces su siguiente paso sería ver el resumen del vuelo y obtener el precio total, luego seguir adelante y reservar y pagar. Nuevamente, por nuestro ejemplo aquí, en realidad no vamos a pasar por la reserva y pagar, vamos a parar justo en ese paso de resumen de vuelo. Una vez que tengo estos delineados, volví a mi cuaderno de bocetos y dibujé esto como más un flujo. Hice esto en lugar de saltar directo al sketch porque realmente me ayudó a visualizar lo que quería delinear más rápido. Entonces sí terminé dibujando un par de momentos diferentes de un par de maneras diferentes antes de que la presentación se sintiera bien. Entonces de esa manera tengo más de una base. Puedo trabajar desde mi boceto para entrar en boceto. Entonces a continuación, te voy a guiar por cómo creé mi mapa de viaje de usuario usando Sketch. Esconderé esto y voy a volver a Sketch. Crea un nuevo documento, y haz este a pantalla completa. Está bien. Nuevamente, lo que quiero hacer es guardar este documento. Vamos a llamar a este viaje de usuario. Ahorra en el escritorio, genial. Nuevamente, como hicimos en el paso anterior, quiero tener aquí un tablero de arte. Esto sólo voy a venir a dibujar uno bastante arbitrariamente. Sé que voy a necesitar mucho espacio. Voy a tratar de llenar mucho el espacio aquí. Entonces quiero nombrar al tablero de arte, viaje de usuario. Genial. De nuevo, puedo cambiar el tamaño de este encabezado en cualquier momento, así que realmente no es gran cosa. Con lo que voy a empezar es en realidad crear un pequeño encabezado para esto. Ya he hecho esto por aquí, así que sólo voy a traer esto. Aquí está mi viaje de usuario. También tengo la tarea esbozada. Entonces solo una cosa de texto simple, busca viaje de ida y vuelta, vuelo por precio y horario. Yo sólo voy a hacer eso. Genial. Guardar. Ahora, tengo mis bases para empezar. Como dije, vamos a estar empezando en la pantalla de inicio. Si recuerdas la app Southwest en la primera pantalla fue que quieres iniciar sesión o quieres continuar como invitado? Simplemente voy a pasar por alto esa pantalla e ir a lo que llamo la pantalla de inicio real para empezar. Lo primero que quiero hacer, tengo aquí que va a representar mi primera pantalla. Esto va a terminar luciendo como una estructura alámbrica, pero definitivamente no es una estructura alámbrica. Ese wireframes sería mucho más detallado. Lo que quiero hacer aquí es solo reiterar cuáles son las cosas simples que estarían en cada pantalla para poder caminar por esto un poco más fácil. Voy a empezar con eso, y voy a etiquetar esto. Esta va a ser mi pantalla de inicio. Lo que voy a poner en la pantalla de inicio, realidad, no me voy a preocupar por eso ahora mismo. Lo que realmente voy a hacer es ponerme aquí los botones que tengo como opciones. Acabo de hacer algunos de estos ya sólo para que nos vaya un poco más rápido. En mi pantalla de inicio aquí, había un par de opciones, oops, estoy tratando de copiar a este tipo. Sólo voy a copiar estos y pegarlos. Ahí tengo cinco. El 're alrededor de cinco opciones más o menos de pensar de nuevo a lo que era la app de Southwest. Lo que voy a hacer ahora es solo etiquetar a estos tipos. Si esto alguna vez sucede, en realidad se puede ver que cuando paso el cursor sobre, estas son las capas que están en la parte superior, y entonces esta capa de texto está por debajo de eso. Entonces, o bien puedo arrastrar a este tipo hacia arriba, así que está encima de todo. Ahí estamos. O también puedo ir a la cima e ir a arreglar y pasar al frente como siempre una opción dos. Hacer estos alineados a la izquierda y así mis opciones antes eran check in, estado del vuelo, voy a arreglar el espaciado en un segundo, reservar viaje , administrar viaje, y había algo otro así que solo pondremos otro por ahora porque no es super importante. Por aquí, en realidad puedo cambiar el espaciado entre líneas. Yo sólo puedo bombear estos un poco más, y probablemente tengo que ir un poco más que eso para que todos encajen. Ya basta con eso. Perfecto. Entonces aquí están mis opciones para la pantalla de inicio. En realidad, yo sólo iba a hacer esto, hacer que se destaque un poco más, y todas estas cosas realmente no importa una tonelada. Yo sólo voy a hacer que eso retrocedan un poco más. El siguiente paso que voy a hacer es en realidad quiero dar click en libro travel. Digamos que quiero seleccionar el cielo y simplemente cambiar el color de fondo para que sea algo en lo que realmente voy a hacer clic. Tengo un color por aquí que quiero usar. Sólo voy a tirar eso ahí para que pueda agarrar ese color. Lo bonito de Sketch es muy fácil de decir oh, quiero usar ese color. Enfriar. Deshazte de ese tipo. Entonces a continuación, voy a dibujar una flecha. Entonces voy a ir a Insertar, Shape, Arrow, y quiero dibujar de este tipo a nuestra siguiente pantalla. También voy a hacer este cielo azul sólo por consistencia aquí. Podría hacerlo un poco más grueso para poder verlo mejor. Enfriar. A continuación, ya he hecho esta pantalla, eso nos ahorró un poco de tiempo. Puedo copiar esto. Aquí vamos. Mi siguiente pantalla es en realidad la pantalla de viaje del libro. Voy a dos etiquetar a este tipo libro de viaje. Genial. En esta pantalla puedo ver lo que he hecho aquí ya es que voy a elegir el vuelo, donde estoy volando, a donde estoy volando, y luego la fecha de adentro y luego tengo un botón de búsqueda en la parte inferior. El primero que realmente quiero hacer es hacer el desde. Porque todos estos están dentro de esta pantalla, sólo voy a moverme hacia abajo en lugar de moverme hacia arriba. Voy a pasar para ir a la siguiente pantalla una vez que toque el botón de búsqueda. De lo que voy a hacer aquí, otra vez, ya tengo esto en pantalla. Alinégrate eso. Si hice clic en “De”, aquí está mi ciudad de salida, voy a etiquetar esto como de. Solo estoy usando las teclas de flecha para mover esto hacia abajo. lo puedes hacer con tu ratón, de y solo voy a mover un poco a este tipo hacia abajo. Aquí, yo sería capaz de buscar en realidad. Yo sólo voy a copiar uno de estos. Oops, yo no copié todo. escrito esto aquí abajo. De nuevo, eso fue atrás alguien consiguió arreglarse para moverse al frente. Genial. Esto va a servir como mi cuadro de búsqueda en realidad y además, voy a añadir sólo una línea para representar la lista de cosas que tengo aquí. Un poco perfeccionista, siempre estoy tratando de alinear a estos tipos de nuevo. Ahora, sólo voy a copiar. Si puedo hacer esto rápidamente y hacer un montón de líneas para lucir, estos son mis resultados de búsqueda. Entonces sólo voy a copiar esto. Ahí vamos, un poco más rápido. Yo solo agrupo esos juntos solo para poder copiarlos un poco más rápido. Esa es mi pequeña plantilla para mi salida. Aquí estaría mi lista de ciudades. Este es uno de mis documentos, va a empezar a hacerse más grande. Voy a seleccionar por aquí, y quiero que este tipo sea realmente más alto porque quiero hacer otra fila debajo de ella. Voy a copiar todo esto. Asegurarme que tengo todo y solo duplicar esto para el viaje de regreso. De, a y esto va a ser ciudad de regreso. En realidad sí quiero dibujar una pequeña flecha de aquí para aquí. Voy a copiar a ese tipo y lo que puedo hacer es sólo va a arrastrar esto. Si golpeo 'Shift”, permanecerá en el eje derecho. Aquí así, voy a mover un poco a este tipo. Enfriar. Esto está mostrando que estoy eligiendo mi vuelo desde y hacia. Voy a cambiar esto para decir ciudad destino porque regreso suena un poco raro justo en este punto. Genial. Voy a salvar esto, soy un ahorrador compulsivo, no me gusta perder cosas. Lo siguiente que quiero hacer es que voy a cambiar esta flecha. Vamos a ver aquí. Si consigo mis opciones de flecha. Yo no los veo. Si eso sucede, sólo dijo escape. Vamos a dejar eso en paz por ahora. Lo siguiente que quiero hacer es hacer mi cita de ida y vuelta. Voy a copiar esto, esto y aquello, y cambiarlo sobre escuchar. Esto se va a convertir en fecha de salida y esto va a terminar siendo calendario. No me voy a molestar en sacar una tonelada, pero voy a hacer algo de tipo un poco más grande aquí. Digamos que este es nuestro calendario. Otra cosa que puedes hacer si quieres dejarte un poco largo solo diré calendario para ver lo que estás pensando. Nuevamente, esto no es como cualquier tipo de alambre-marco. Esto es solo exponer los conceptos básicos de lo que estoy haciendo en cada pantalla. Voy a copiar esto y colocarlo aquí abajo. Se ve bastante cerca. Esto van a ser dos y ahora esto va a tener más sentido como nuestra fecha de regreso.De nuevo, voy a agarrar estas flechas para demostrar que voy de aquí a aquí. Deshacer. Este tipo no está cooperando ahora mismo. A veces el boceto se vuelve un poco loco. Arrastra esto hacia arriba. Ahí vamos. Esto se está mostrando de nuevo, estoy eligiendo todas estas cosas y luego voy dos volver a la pantalla. Estos van a poblar con lo que yo elija en estos pasos. También voy a dibujar algunas de estas flechas abajo. Aquí vamos. Está un poco apretado. Ahí vamos. Prueba para cubrir todo. Enfriar. Guarda eso. El siguiente paso es que voy a obtener mis resultados de búsqueda. En realidad, esto me está sintiendo muy apretado y esto me está molestando. Entonces voy a agarrar a estos tipos y mover un poco todo esto hacia abajo, y luego sólo voy a hacer más alto a este tipo. Como puedes ver, es súper flexible. Siempre puedes cambiar cualquiera de estas cosas. Lo siguiente que voy a hacer es presionar este botón de búsqueda, que se puso atrás y luego el frente. Enfriar. Siguiente. Aquí vamos. Esta pantalla va a ser mis resultados de vuelo para la salida. Sólo voy a leer resultados por ahora, y luego la pantalla se va a descomponer en todas las diferentes opciones de vuelo que tengo. Sólo voy a designar eso haciendo que estos tipos sean un poco más grandes. Ya que obviamente, todos estos resultados se van a desplazar, sólo voy a regresar a este tipo. Se desplaza por la parte inferior y se está alineando. Eso lo haremos después, así que copiando. Digamos que esta es opción de vuelo A. Haré opción de vuelo B y estoy aquí opción de vuelo C, y así sucesivamente. Pretende que eso está flotando en el medio. Aquí sólo voy a hacer este vuelo de salida. Voy a duplicar todo esto otra vez porque voy a tener resultados para mi vuelo de regreso también. Voy a tirar esto por aquí, y digamos que el vuelo B fue una gran opción. Escogeré vuelo B. Voy a cambiar esto para vuelo de regreso. Digamos que quería elegir. En realidad voy a colorear a este tipo de aquí. ¿ Debería elegir eso? Aquí, digamos que el vuelo A fue el mejor. Voy a elegir el vuelo A, eso está mal. A la frontera, vamos a ir a llenar. Enfriar. De nuevo, dibuja mi flecha. Hazlo ir en la parte superior. Algo que no mencioné fue para cada uno de estos, podría tener algunos detalles de vuelo. Esta cosa podría expandirse en línea o podría mostrarme otra pantalla. No estamos del todo seguros de qué va a ser eso. No lo voy a dejar como una pantalla diferente ahora mismo. Eso lo tendré en cuenta más tarde. Voy a copiar esto, y esta va a ser nuestras últimas pantallas, así que nuestro resumen de vuelo. Aquí vamos. Resumen. Esto va a empezar con nuestro vuelo de salida, y eso va a tener sólo algo de información. Voy a copiar a uno de estos tíos, agarra esa cosa al frente. Digamos que eso tiene alguna información sobre nuestro vuelo de salida, y luego voy a hacer lo mismo para nuestro vuelo de regreso. Entonces queremos hacer nuestro total. Digamos que aquí es donde tenemos nuestra cantidad total, y luego al fondo, vamos a tener un botón grande para comprar. Todavía no sabemos qué va a decir eso. Totalmente bien. Este es un panorama realmente rápido de los pasos que vamos a dar. Nuevamente, estos se basaron en la aplicación existente de Southwest. Estos son los pasos que vemos dar el usuario. De nuevo, empezamos con, vamos a elegir libro de viaje. Vamos a elegir de dónde están volando, a dónde están volando, y las fechas. Buscar. Nuevamente, eligiendo a estos tipos. Una vez que buscaron, van a ver su vuelo de salida. Van a ver su vuelo de regreso y luego un resumen de todo. Lo que esto no está cubriendo en este momento, esta es una forma en que podríamos hacerlo. Esto es exactamente lo que tiene el Southwest ahora mismo. Lo único que queríamos optimizar para Kelly fue que ella quiere la capacidad de mirar diferentes vuelos o fines de semana diferentes. Digamos que eligió un fin de semana aquí. Ella llega al resumen y dice: “Oh, este son 600 dólares, sí, eso es bastante caro. Yo quiero revisar un fin de semana diferente”. En este punto, era que tendría que hacer es volver atrás, atrás, volver a la búsqueda para poder cambiar sus fechas. Lo que quiero mirar a continuación es cuáles son algunas opciones diferentes que puedo tratar de gustarme Kelly en realidad cambió más fácilmente las fechas mientras está en proceso un poco más abajo, porque probablemente no quiera cambiar estos de y para. Ella sólo quiere cambiar las fechas. Es mucho atrás y cuarto. Eso lo vamos a ver en nuestros bocetos. No vamos a mirar eso en el viaje de los usuarios, ya que esto sí lleva el camino para lo que va a estar haciendo. Nos vamos a centrar en más de nuevo en eso en nuestros bocetos y de nuevo en nuestros alámbricos. lo cubriremos a continuación. 9. Comienza a hace bocetos: Bienvenido a Unidad 4, Bocetos. Ahora que estás armado con personas y viajes de usuarios, es hora de poner estos en acción. En esta fase UX, esbozarás tus viajes de usuario con el fin de trabajar a través de las implicaciones de tus decisiones de diseño. Hacerlo te ayudará a ver cuántas decisiones tendrán que tomar los usuarios y cuántas pantallas atravesarán para lograr su objetivo. Este paso es verdaderamente invaluable y definitivamente no se debe omitir. Entonces, ¿por qué es tan importante el bosquejo? Honestamente, es demasiado difícil saltar directamente a los wireframes, aunque ya tengas ideas flotando alrededor de tu cabeza. También se crean tramas alónicas en la computadora, por lo que ya tardan más tiempo en crear que bosquejar. También te podría tropezar demasiado temprano en el proceso con los detalles del diseño, como “¿A dónde va el botón? ¿ Qué tan grande debe ser este texto? Etc” Sketching te ayuda a reunir tus ideas realmente rápidamente. Se puede borrar, tirar las cosas. Puedes cambiar de opinión tantas veces como necesites. No hay ramificaciones para hacer eso. Simplemente agarras un nuevo trozo de papel y te vas. Quieres mantener sueltos tus bocetos y no te enfoques en cada detalle. Guardarás esa parte para las alarmas. Por lo que para empezar, esboza varias ideas y opciones para unas cuantas pantallas clave de tus flujos. A medida que bosquejas, recuerda pensar en lo siguiente. ¿ Qué información debe ir en cada pantalla? ¿ Cuál es la jerarquía de la información? ¿ Cuáles son algunas opciones de diseño diferentes que puedo probar? Otras cosas a tener en cuenta mientras haces bocetos son; mantén sueltos tus bocetos. Esto realmente te va a ayudar a moverte rápidamente y probar muchas opciones diferentes. De nuevo, no te preocupes por ser perfecto. No estamos aquí para juzgarte por tus bocetos en absoluto. No te enfoques en cada detalle. Tan solo quieres bajar de lo esencial de cada pantalla y podrás refinar todo más adelante. ¿ Pensaste en unas ideas nuevas que estabas dibujando? Genial. No tengas miedo de lluvia de ideas una vez que tengas la pluma en la mano y déjate ir loco, nada es demasiado loco en esta etapa. Te ayudará a trabajar a través de muchas opciones diferentes. ¿ Te sientes atascado? Aléjate de tus bocetos y tómate un descanso. Es posible que necesites un poco de tiempo para despejar tu mente, o tal vez solo quieras sentirte inspirado en otras apps. Así que abre tu teléfono, ve a tu computadora, juega con algunas cosas e inspírate. Además, no te olvides de tus personas. Si las tienes impresas junto a ti, vuelve a leer a través de ellas y ponte en los zapatos del usuario. ¿ Sigues encarrilado? Por lo que aquí te presentamos algunos ejemplos de bocetos para darte una idea de lo que buscamos lograr en el paso. El primer ejemplo es en realidad mi propio boceto, y se puede ver que es bastante simple. No uso demasiadas palabras ni botones, y en realidad no dibujo una pantalla completa. En cambio me enfoco en la tarea a la mano en cada pantalla. Realmente no hay necesidad de ser súper completo aquí. El siguiente par de ejemplos que encontré en Dribbble, ambos son un poco más refinados que los míos. puede ver que tienen líneas realmente rectas y los contornos de la pantalla. Dado que estos fueron publicados en Dribbble, los diseñadores probablemente tardaron un poco más de tiempo en limpiarlos, pero siéntete libre de ir en cualquier dirección. Realmente puedes ser tan desordenado o tan perfecto como quieras, siempre y cuando puedas descifrarlos al final. Por lo que en este punto, probablemente tengas toneladas de bocetos de papel. Lo que harás ahora es decidir qué opciones son más ideales y cuáles puedes simplemente tirar. Una vez que hayas clavado tus bocetos de los viajes del usuario, publícalos para compartir. Asegúrate de incluir algunas notas junto a tus bocetos para ayudar a comunicar cuál es el flujo para ti y para los demás. Próximamente en el siguiente video será nuestro último paso en el proceso UX, wireframing. 10. Ejemplo de proyecto: bocetos: Oigan chicos, bienvenidos de nuevo. Espero que hayas tenido mucho éxito hasta ahora trabajando en tus personas y en tus mapas de viajes de usuario. A continuación, vamos a abordar bocetos. Tengo aquí algunos bocetos para mostrarte, caminar a través de lo que he hecho por las apps de Southwest hasta ahora. Para empezar, supongo que empezaré haciéndote saber el método que tomé para hacer estos bocetos y quería que estos estuvieran realmente sueltos. De nuevo, agarré mi fiel cuaderno de bocetos, agarré un par de Sharpies y apenas empecé a meterme. Se puede ver que aquí está pasando mucho. Tengo un montón de pantallas diferentes, tengo algunas notas por todo el lugar, pero quería dejarme realmente suelta y solo ver qué estaba pasando. Otra cosa que quería mencionar fue, quería conseguir algo de inspiración mientras empezaba en esto, así que busqué la web, miré Dribbble, Behance y solo trato de conseguir un sentido general de me gusta, ¿qué hacen otros aplicaciones se ven como? Hice mucha investigación en otras aplicaciones que están ahí afuera ahora, pero siempre es agradable mirar cosas como en Dribbble por ejemplo, porque la gente está siendo un poco más innovadora y es muy divertido conseguir alguna inspiración que manera. Lo que quería empezar por hacer fue abordar las diferentes pantallas que necesito hacer para esta app. Entonces el primero aquí arriba es el hogar o como donde realmente estamos reservando el viaje. Aquí es donde se está ingresando toda la información. Hay muchas maneras diferentes en las que podría verse la pantalla, y en realidad para mostrarte, tiraré esto por encima, para recordar a este tipo de aquí es la primera pantalla y luego el libro viaja uno por aquí es otra pantalla la que en realidad estoy introduciendo todo. Creo que en realidad le muestro a este tipo después en una página diferente, pero supongo que estoy empezando aquí con esta sección de viajes de libros porque esto tiene muchas cosas pasando y hay muchas maneras diferentes en las que podríamos hacerlo. Entonces muevo eso hasta el final. Una de las cosas principales es averiguarlo es un viaje de ida y vuelta o de una manera. Yo sólo traté de demostrar aquí a través mis bocetos algunas de las diferentes formas en que pudimos hacer esto. Entonces podríamos tener más de un botón de alternancia, ahí está este método donde tienes el que está seleccionado está subrayado o incluso una pastilla aquí donde esto podría ser solo un fondo sutil detrás del que está seleccionado. Toda la información en estas pantallas es la misma. Es sólo cuestión de cómo deberíamos ponerlos fuera. Entonces escogiendo aeropuertos, fechas de salida y regreso, cuántos pasajeros, códigos promocionales, y luego por supuesto, nuestro botón Buscar. En la versión original, todo era su propia línea. Entonces de a día de salida, día de regreso, pasajeros, todo estaba como apilado, por lo que la pantalla en realidad es larga en su aplicación existente. Miré un par de maneras diferentes, ¿ como podríamos apilar estas cosas para ahorrar algo de espacio? Aquí al apilar estos medios, pierdes un poco de espacio para el texto, pero en realidad podríamos usar los códigos del aeropuerto en su lugar para hacerlo un poco más corto. Entonces SFO en lugar de San Francisco, por ejemplo. Sólo un par de opciones aquí con las que me metí para empezar, y hay otra aquí abajo. Después pasé a los resultados de búsqueda. Otra vez, mirando como podría verse este tipo? ¿ Hay alguna manera de ordenar esto por $ o puntos? Mirando una forma de cambiar realmente la fecha, que es algo que pensé que sería realmente importante. Algo que Southwest hace un poco diferente a algunas de las otras Apps de Aerolíneas, es que ponen un enorme énfasis en las diferentes clases de tarifas. Tienen el deseo de escapar, que es el barato. Tienen el en cualquier momento, que creo que puedes cambiar las cosas y no hay penalizaciones ni algo así. Entonces por supuesto, tienen la clase business. Otras apps, algo así como United o Delta, te permiten elegir entre la clase económica de cabina principal o clase ejecutiva. Pero Southwest realmente quiere enfocarse en las tres clases diferentes. Entonces debido a que ponen un énfasis tan grande en esto, me imaginé que es bastante importante y necesitamos echar un vistazo a un par de maneras diferentes en que se podría presentar esta información. De nuevo, les mostraré aquí chicos. Estos son esos grandes botones morados que acaban de parecer bastante locos, sobre todo cuando hay que desplazarse por todos estos. Pierdes los tiempos y luego la información de vuelo si es sin parar o lo que sea, porque estos botones son tan prominentes. Por supuesto, queremos que se vean como botones, pero estos solo van por encima de la parte superior. Algo que lo exploré con mis bocetos es, ¿hay una manera un poco mejor de hacer eso? Si tenemos que tenerlos en filas uno encima del otro, ¿podríamos hacer las fechas un poco más grandes? O podríamos realmente hacer algo donde nos expandamos y mostrar que la tarifa comienza en $100. Puedo aprovechar esto, creo que dibujé aquí abajo. Cuando amplío a este tipo, puedo ver las diferentes tarifas son 100, 248, y 270. Otra opción que miré aquí, era tener a estos tipos uno al lado del otro. Entonces más de una pastilla o un formato de alternancia donde podría elegir qué tarifa, y tal vez este tipo sería seleccionado y luego hay una manera de que pase desde aquí. Un poco más explorando por hacer, pero solo por el sentido general, yo estaba jugando con estos. Aquí es donde tengo mi pantalla de inicio. De nuevo, esta es la pantalla aquí mismo. Entonces este tipo es el mismo que este tipo. Es bastante genérico, es bastante aburrido. Tiene mucho pasando en la parte superior, que se trata de up-selling en lugar dejarme llegar a la información que quiero aquí mismo. Déjame volver aquí. Una cosa que pensé que sería realmente agradable es darle a esta marca Southwest, un poco más de protagonismo y tal vez sólo tener algunas bonitas imágenes aquí atrás. Sólo para que se vea un poco más refinado y sofisticado. Otra cosa es mirar cómo puedo apilar estos artículos. Tengo todos los mismos artículos en la pantalla, pero ¿puedo reorganizarlos de una manera un poco más agradable? Tal vez incluso introducir aquí un icono que sea un poco más sofisticado. Nuevamente, un par de opciones diferentes. Este, realmente me estoy centrando en la sección Libro de Vuelo, porque para mí esa es la mayor parte de la razón por la que voy a una app. Voy a una app más a buscar un vuelo en lugar de facturar porque no estoy volando todo el tiempo. Esta opción también tiene este ejemplo de navegación inferior, que aquí abajo le eché un vistazo, cuáles son un par de maneras diferentes que podría mostrar la navegación. ¿ Cómo pudo el usuario ponerse entre las diferentes secciones? Para algo así como una App de Viajes o para esta Aplicación de Viajes en particular como reservar un vuelo, esto puede no ser súper importante donde podría ir a casa reservando vuelos. Creo que éste es el check in, esto son reservas, y así como mi perfil. Hay un par de cosas diferentes que serían útiles, pero ¿es este el enfoque correcto para esta app? No estoy del todo seguro. El método que usan en este momento es solo el botón Atrás, por lo que podría estar perfectamente bien. Otra forma de hacerlo sería tener un cajón donde esto pudiera tener información diferente en él también. Nuevamente, un par de maneras diferentes en las que podríamos hacer esta navegación, solo es cuestión de preferencia en, realmente ¿qué creo que va a funcionar para la app? Algo de esto quizá no sepa bastante todavía. Tal vez no lo sepa hasta llegar realmente al escenario de wireframe, porque aquí sólo estoy tratando de jugar con un montón de cosas diferentes. Una vez que estoy en wireframes y digamos que decido, me encanta este layout, pero hey, este nav de fondo no está funcionando y en realidad esta versión de la navegación va a funcionar mejor. Entonces oye, ya lo he pensado bien. Tengo todas estas cosas a mi disposición a medida que voy. Otra cosa que quería saber en mis bocetos aquí, he añadido algunas notas al margen para mí. Con la navegación, no solo dices como, oye, quiero recordar no demasiados grifos, esta cosa debería ser accesible en cualquier lugar, y es fácil volver siempre a esta pantalla de inicio. Para la pantalla de inicio, como dije, tal vez algunos más branding para Southwest, algunos botones más grandes más interesantes. Entonces hacer que el diseño simplemente se sienta un poco más moderno en lugar de solo todo atascado en un diseño de plano vertical donde simplemente es bastante aburrido. Por último, mi tercera página de bocetos, realmente me estoy centrando en los resultados de búsqueda y tengo un poco para el resumen del viaje. Nuevamente, este no es un ejercicio de bocetos totalmente extenso, pero es solo para darte una idea de cómo me acercaría esto y cómo me acercaría a los bocetos en general. Con los resultados de búsqueda, de nuevo, como miramos en la primera página de bocetos, hay muchas maneras diferentes en que esta información podría mostrarse. Aquí quería enfocarme en esta parte, por lo que mostrando los diferentes vuelos. Me gustó esta pequeña sección superior aquí arriba donde tengo mi vuelo de salida. Es mostrar de dónde estoy volando, a dónde estoy volando, y luego poder cambiar la fecha. Creo que eso podría ser realmente, realmente interesante, donde pueda ir hacia atrás y hacia adelante un día. O tal vez haya incluso un pequeño ícono de calendario aquí que me permite cambiar totalmente la fecha, así que no quiero tener que ir uno por uno. Quizás quieras empezar de nuevo para esa opción, pero podría ser bueno si pudiéramos hacerlo bien desde aquí. Nuevamente, esta primera opción es ese modo expandir, donde puedo ver que es desde $100. Si toco a este tipo, éste se ampliaría. Podía ver todas las diferentes opciones, y eso simplemente empujaría a los otros vuelos fuera del camino. También tendríamos que hacer algo con el diseño visual para asegurarnos que esto destaque y se sienta como una cosa cohesiva. Pero de nuevo, podemos abordar eso más adelante con el diseño. Segunda opción aquí, muestra el más de como un formato de tarjeta. Nuevamente, es ese formato donde cada uno de estos precios se presentan de lado a lado. Entonces tengo un poco más de énfasis en las fechas de vuelo o en los horarios de vuelo, así como si esto es sin escalas y/o y cuál es el número de vuelo. El tercer versión, esto es más parecido a lo que tienen ahora, pero tal vez podríamos hacer el tipo un poco más grande. A lo mejor estos no tienen que ser tan gigantes y pero cualquiera, todavía pueden sentirse como botones, sólo tonificarlos un poco. Nuevamente, un par de opciones diferentes aquí. Entonces en cuanto al resumen del viaje, la parte importante aquí es ver hacia dónde vuela y desde, cuáles son tus horarios de vuelo para tu salida, así como para tu regreso, y la fecha es especialmente importante aquí también. Por último, el precio en la parte inferior y un botón para comprar. Esto puede no ser todo lo que necesita ir en esta pantalla de resumen. Creo que éste, definitivamente me gustaría explorar un poco más. Pero de nuevo para estos fines, esto debería ser suficiente para que ustedes inicien. Así que vayan adelante, bosquejen, y no puedo esperar a ver qué se les ocurre ustedes chicos. 11. Llevar bocetos a los fotogramas de Wireframes: Bienvenido de nuevo. Hemos llegado a nuestra última técnica UX. Llevando tus bocetos a alambres. wireframes te permiten refinar y convertir tus bocetos y flujos de usuario en una representación tangible de tu app. Ahora que tienes un montón de grandes bocetos para empezar, finalmente puedes saltar a la computadora y hacer la transición a wireframing. Desde la fase de esbozo, ya deberías haber explorado muchas posibilidades y emparejado ideas a lo que crees que funcionará mejor. Este refinamiento debería ayudarte a medida que comienzas a realizar wireframe, ya que tienes una mejor idea de lo que hará tu aplicación y cómo debería lucir tu interfaz para apoyar eso. Con wireframes, debes ser descriptivo, pero no pixel perfecto. Intenta usar la copia real para los botones, y otros elementos de la interfaz de usuario para que puedas tener una idea de cómo encajarán las cosas. No te preocupes por llenar las áreas de contenido con copia real, solo usa Loremipsum ahí. Asegúrese de refinar continuamente y hacer ajustes a medida que avanza. Si aún no lo has hecho, tendrás que decidir sobre un patrón de navegación. ¿ Cómo se van a mover los usuarios entre secciones de la app? Más importante aún, ¿qué va a funcionar mejor para tu app? Algunos patrones comunes son las pestañas Bottom, que usan Foursquare, Facebook, Twitter y Pinterest, un Drawing o panel deslizante como hacen LinkedIn y Google Maps, o un Home o un “hub”, que ahora todos usan. Los ejemplos aquí ilustran algunas otras formas en que los usuarios pueden navegar. LinkedIn tiene un cajón deslizante, pero también tienen iconos en la parte superior para nuevos mensajes, notificaciones y solicitudes. Expedia utiliza otro enfoque donde puedes tocar cualquier destino recomendado en una lista de desplazamiento, o simplemente elegir hoteles o vuelos. Por último, la tercera pantalla muestra Flickr, donde utilizan una navegación inferior como navegación principal, pero dentro de cada sección, hay pestañas en la parte superior para cambiar entre esas secciones. El siguiente paso es que vas a querer hackear los detalles. Recuerde, un componente clave de las aplicaciones móviles es presentar el contenido en primer lugar. No hagas que tus usuarios caven por lo que quieren. Piensa en cuántas llamadas a la acción debes poner en cada pantalla. Deberías tratar de enfocarte en una primaria y una secundaria como mucho, aunque sepas que eso no siempre es posible. Sólo recuerda que no quieres darle demasiadas opciones a los usuarios, que se distraigan de la tarea que nos ocupa o se pierdan. También querrás priorizar el contenido dentro de cada diseño de pantalla. La jerarquía es clave, use tan pocas palabras como sea necesario y se asegure de que todo lo que está presente necesite realmente estar ahí. Considera qué elementos de la interfaz de usuario, como cuadros de búsqueda , botones, etc., necesitarás y a dónde irán. No entierres el cuadro de búsqueda si es parte integral de tu experiencia. medida que trabajas a través de la creación de tus wireframes, aquí es donde entrará en juego tu nivel de refinamiento. Deberá asegurarse de que sus archivos están configurados para utilizar dimensiones de pantalla precisas. Te recomiendo usar la resolución iPhone 5S, que es de 640 por 960 píxeles. Solo ten en cuenta que tendrás un poco menos de altura para los iPhones más pequeños, y tendrás más espacio para jugar para el iPhone 6 y 6 Plus. Todavía tenemos que preocuparnos demasiado por esto ahora mismo. También las escalas y tamaños que usas para los botones y otros elementos de la interfaz de usuario deben estar cerca de finales, para que puedas representar con mayor precisión los diseños que crearás más adelante. Un poco de trabajo de preparación en las primeras etapas te ayudará una tonelada más adelante. Por último, querrás armar pensadamente tus alambres para crear una presentación cohesiva. Tus wireframes deben representar cada tarea o viaje de usuario que has delineado, para mostrar el flujo lógico de la ruta del usuario a través de tu app. Debe quedar claro en cuanto a cuántos pasos y pantallas se moverá un usuario para lograr una tarea específica. Al igual que lo hiciste durante la fase de esbozo, puedes evaluar los pros y los contras para diferentes soluciones, y eliminar aquellos que no están funcionando o simplemente sientes que son demasiado complejos. Hay una variedad de herramientas que puedes usar para crear tus alambres. Elige un programa con el que estés más familiarizado o del que creas que puedes obtener los mejores resultados. Las herramientas que he usado yo mismo son Illustrator, Sketch, Omnigraffle, y Balsamiq. Últimamente, he estado usando Sketch para mis wireframes, ya que soy capaz de moverme por la interfaz con bastante rapidez y parece un poco más ligero en comparación con Illustrator. También creo que todos estos programas tienen prueba gratuita, por lo que deberías poder hacer usarlos cualquiera que necesites. Ahora echemos un vistazo a algunos ejemplos de wireframing. He sacado todos estos de Dribbble, ya que tienden a ser bien diseñados y de mayor calidad. Tenga en cuenta que la mayoría de estos diseñadores han ensamblado sus cables en flujos, y designan cómo el usuario se movería entre pantallas tocando varios botones o enlaces. También incluyen algún texto para denotar los nombres de las pantallas y notas útiles. Los diferentes wireframes también muestran una variedad de estilos que podrías usar. Entonces el de la izquierda aquí, usan una de esas líneas y flechas rojas para ir entre pantallas, estas un poco de color. El segundo solo muestra las pantallas una al lado de la otra. Aquí hay otro ejemplo. Este diseñador introduce de nuevo un poco de color en los wireframes para el énfasis, lo puedes ver en un par de botones diferentes aquí y usando el gris oscuro. Por último, este es otro ejemplo de wireframes que son un poco híbridos. Están usando iconos reales, pero también están usando botones de marcador de posición en cajas al mismo tiempo. Si has descargado el PDF de la clase, que espero que tengas, te animo a echar un vistazo más de cerca a estos ejemplos e incluso a hacer alguna investigación adicional en línea para obtener más inspiración. Por lo tanto, para poner fin a esto para tu entregable de clase final, crearás un conjunto de crearás un conjunto dewireframes anotados finales para completar la historia de tu app de viajes. Sube tus wireframes a tu proyecto y compártelo con la clase. Estoy tan emocionado de ver lo que se les ha ocurrido chicos. 12. Ejemplo de proyecto: fotogramas de alambre: Hola a todos. Listo para la última demostración del proyecto de clase. Aquí, te estaré mostrando cómo abordaría los wireframes para este proyecto. Voy a empezar echando un vistazo atrás mi mapa de viaje de usuario aquí para recordar el flujo que había delineado. Esto debería parecer familiar, repasamos estos dos videos hace. Idealmente te referirías a este mapa así como a tus bocetos a medida que completas tus alarmas. Puedes imprimirlos para tenerlos fácilmente a tu lado o simplemente abrir el archivo para que puedas cambiar de ida y vuelta entre archivos. Otra cosa que sería útil tener son tus bocetos. Desde que tomé una foto de estos, los tengo en la computadora, pero también podría ser útil tener tu cuaderno de bocetos o lo que usaste para tus bocetos a tu lado también. Si echamos un vistazo atrás a este viaje del usuario, el flujo que vamos a estar captando con nuestros wireframes está empezando desde la pantalla de inicio, vamos a tocar en libro travel, voy a entrar a donde estoy volando y a partir de, las fechas, y luego voy a buscar vuelos y poder elegir una salida y un vuelo de regreso, luego ver un resumen para seguir adelante y seguir comprando desde ahí. Entonces ese es el flujo que vamos a cubrir. Ahora por los wireframes. Abre esto. Para empezar, ya que los wireframes consumen mucho más tiempo, son mucho más complejos de crear sobre la marcha durante esta demostración, me adelanté y me burlé de estos para este proyecto. Te voy a guiar a través de todo esto. Pero antes de empezar, en realidad quiero compartir algunas de las cosas que solía crear estos wireframes que creo que van a ser realmente útiles. Lo primero es que notarás aquí tenemos estos contornos. Esta es en realidad una plantilla de iPhone que uso que encontré en línea que era gratis para descargar. Voy a incluir esto para ustedes chicos para que puedan usar esto también para sus proyectos. Es bastante útil. Creo que solo hace que los wireframes se vean un poco más pulidos, y te da una sensación de como exactamente dónde necesita tu contenido para caber dentro del marco. La otra cosa que hice fue en realidad descargar otro archivo de boceto que es una plantilla para iPhones, y no sólo una plantilla, sino que puedes ver aquí tengo este pequeño botón de alternar, tengo algunas de estas flechas. Si estás familiarizado con iOS, estos son elementos bastante estándar. En realidad, lo tirará aquí arriba. Esta es la plantilla para iOS 8 iPhone 6 de Teehan-Lax, y esta empresa ha creado lotes y montones de plantillas, tienen todo tipo de personal para Photoshop y para ilustrador y sketch. Este archivo de boceto es realmente útil. Si no has visto esto, lo estoy incluyendo también en los recursos de la clase para que puedas seguir adelante y descargar eso. Aquí puedes ver que tienen todo tipo de elementos que encontrarías en el iPhone, diferentes iconos en caso de que necesites cosas para barras de herramientas. Tienen botones, tienen estos lo que llamamos controles de segmento, casillas de búsqueda, teclados. Incluso hay la forma en que puedes mostrar vistas de tabla. Todo esto está disponible para que lo uses en tus wireframes. Entonces a partir de ahí, en realidad los puedes retocar un poco. Entonces si vuelvo a mis wireframes, aquí puedes ver que acabo de cambiar la fuente y cambié el color para que sea más blanco y negro para mis propósitos. Genial. Entonces esas son algunas herramientas para empezar, pero luego para cubrir cómo creé estos wireframes, hice lo mismo que hice al crear las personas y los viajes de usuario. Lo primero que hice fue subir aquí para insertar y crear una mesa de trabajo, y acabo de sacar esta gran plaza. Otra vez para refrescar, puedo hacer clic aquí arriba, y puedo arrastrar las casillas de esquina aquí, son el cuadro de contorno aquí para hacer esta cosa más grande o más pequeña según sea necesario, y simplemente haga clic de distancia para guardar eso. Creé la mesa de trabajo, y luego arrastré desde mi archivo de plantilla estos fondos para el teléfono. Algo a notar, en realidad voy a poner esto en la parte inferior de la capa, he bloqueado estas capas. Si las cosas no están bloqueadas, si desbloqueo eso ahí, entonces a veces puedo mover las cosas un poco demasiado, y eso se pone un poco molesto. Yo sólo quiero seguir adelante y bloquear eso para que sepa que no estoy moviendo eso accidentalmente a ninguna parte. Genial. Empecemos por caminar por lo que he hecho aquí. Lo primero fue crear la pantalla de inicio de la aplicación. Nuevamente, hemos cubierto esta pantalla un par de maneras diferentes, hemos mirado en nuestros bocetos. Voy a volver a traer mis bocetos para recordar, vamos a ver. Aquí vamos a casa opciones para nuestra navegación. Tenía un par de variaciones diferentes aquí y miré algunas cosas. Para estos fines, solo elegí una y corrí con ella, pero quizá quieras burlarte de un par de estas versiones arriba en tus wireframes y luego ver qué funciona. Siempre puedes hacer un archivo maestro donde tienes un montón de diferentes opciones de pantallas ahí dentro, luego escoger y elegir a medida que vas. Pero para estos fines, solo lo mantuve bastante simple. Aquí están mis opciones que tengo. Nos vamos a centrar en reservar un vuelo aquí, así que esa sería nuestra siguiente pantalla. Entonces aquí, acabo de incorporar el par de cosas que habíamos mencionado a lo largo de este proyecto. Entonces de nuevo, estamos volando de ida y vuelta, fechas, cuántas personas están viajando, si hay un código de promoción, y luego otra vez ida y vuelta o de una manera, y luego buscar. No cubrí cada uno de estos, pero si toco uno de estos donde estoy viajando hacia y desde, entonces aquí abajo, he optado por delinear la ciudad de salida. Esto sería lo mismo para ambos, y también lo he esbozado aquí abajo, demostrando que, en realidad voy a hacer esta pantalla completa para que esto sea un poco más grande. Está bien, genial. Para demostrar que estaría pasando por cada uno de estos pasos. Cuando ustedes están haciendo sus wireframes, sería genial ver todas las diferentes posibilidades y todas las diferentes pantallas, pero para esto, sólo para demostración, solo quería capturar un par de cosas . Algo que había mencionado cuando estaba pensando en esta app de vuelo, es que realmente quería hacer un par de optimizaciones. Una de las cosas que me di cuenta de que Southwest no hace es que no usen tu ubicación en absoluto. Este en realidad estoy demostrando que lo primero que hay ahí es San Francisco porque resulta que ese es el aeropuerto más cercano a mí. Si toco eso y vengo aquí, puedo ver que San Francisco está revisado, y también puedo ver que Oakland y San José están en la cima porque esos son los aeropuertos más cercanos a mí, y luego empiezan a ir en orden alfabético. De nuevo puedo escribir aquí para buscar cualquier ciudad que quiera. Una vez que haya terminado con eso, mi siguiente paso sería presionar este botón buscar vuelos, y luego aquí voy a buscar un vuelo de salida. Quería solo hacer que esta pantalla fuera un poco más visual, trayendo los grandes códigos aeroportuarios, un poco de iconografía, y también hay una barra de fechas. Aquí hay algo que puedo usar para cambiar. Digamos que yo estaba como, “Oh, en realidad quiero ver si el 23 o 22 de abril, o tal vez incluso el 25 tiene un mejor precio, entonces fácilmente puedo alternar aquí”. No me extendí sobre este tipo para este único marco, pero si este fuera mi proyecto de clase real, entonces definitivamente habría querido hacer eso para averiguar todas esas interacciones y cómo funcionaría esa cosa. Entonces aquí estoy demostrando que aquí están las opciones de vuelo, podemos ver que es a partir de este precio. Entonces si en realidad toco uno de estos, nos vamos a mudar aquí abajo, y ese tipo se va a expandir para que pueda ver el precio quiere alejarse en cualquier momento, y el negocio seleccione precio. Entonces a partir de aquí, puedo elegir uno de estos. De esa manera no tienes que mirar todos estos números diferentes todos al mismo tiempo. Por último, después de haber elegido a ese tipo, voy a volver aquí para seleccionar mi vuelo de regreso, y esta pantalla debería verse muy similar a la primera porque esencialmente están haciendo exactamente lo mismo. Entonces a partir de aquí, voy a seguir adelante, no sólo copié y pegué a este tipo, pero éste sería lo mismo que éste para averiguar cuál quería seguir adelante y elegir. Entonces a partir de ahí, una vez que haya elegido mis dos vuelos, en realidad voy a ir al resumen de mi vuelo. Algo que he hecho mientras te estoy paseando por esto, es que he apagado todas mis flechas. Voy a volver después y mostrarles a esos tipos, pero por el momento, está un poco más limpio solo para pasar por ahora sin ellos. Nuevamente, resumen de vuelo, no pasé demasiado tiempo burlándome de esto obviamente, y luego de aquí, una vez que revises todo, si todo se ve bien y no quieres volver a empezar, voy a golpear continuar, entonces pasaría por el proceso de reserva, y luego mi confirmación, y luego estoy todo listo. Bastante sencillo, vamos a respaldarlo aquí arriba, y puedes ver también he intentado notar aquí que etiqueté todas mis carpetas y traté de agrupar las cosas para que tenga sentido. Entonces este tipo es mi cabecera, mis etiquetas están por todas partes, pero son estos chicos de aquí. Las flechas serán mi flujo que mi usuario está tomando, y en realidad voy a simplemente bloquear esto para ver si eso lo esconde. Sí, eso ayuda. Entonces también he etiquetado aquí, tengo pantalla de inicio, reservar un vuelo, así que tratando de solo mostrar cada pieza como se etiquetaron aquí. Genial. Aquí puedes ver que he añadido estas cajas en la parte superior de mis wireframes para mostrar el camino. Esto puede ser realmente útil sobre todo cuando estás delineando un flujo y hay un montón de cosas diferentes en las que podría hacer clic, solo para dejarlo un poco más claro. También si estás haciendo más de un flujo, así que si tal vez estoy empezando en esta pantalla de inicio de la app y voy a hacer el flujo de vuelo del libro, y entonces tal vez también quiero hacer el estado del vuelo, así que el flujo de check-in también. Tener estos contornos mantendrá eso recto para ti. Aunque quieras usar otro documento, es bueno ver que estoy tocando a este tipo y luego me mudo aquí. De nuevo, toque en vuelo de libro, puedo ver que golpeé a este tipo para ir aquí. Una vez que haya terminado con este tipo, voy a ir a la siguiente pantalla misma cosa, toco aquí mostrar que éste está abierto, selecciono a ese tipo, paso a la siguiente pantalla. Es sólo mostrarte un camino lineal a medida que vas, y luego solo para terminarlo por aquí. Voy a retroceder un poco, ahí vamos. Este documento es un poco grande solo porque este iphone pasó a ser enorme. Siempre se puede escalar cualquier cosa, sentirse libre, pero me imaginé, y simplemente dejarlos al tamaño que son por ahora. Ojalá esto te dé una buena idea de lo que buscamos con los wireframes para este proyecto. Están un poco más detalladas, hay algunas cosas que aún tienen que ser planchadas, hay algunas cosas que, quién sabe tal vez cuando llegue a la fase de diseño podría cambiar, así que algo así, tal vez yo no quieren usar un icono. A lo mejor miro esto en el diseño visual y en realidad no está funcionando tan bien, pero tenerlo aquí en nuestros wireframes realmente capta todas las diferentes cosas por las que vamos a pasar. Nuevamente, si estos fueran tus wireframes, me encantaría ver todas las diferentes posibilidades, entonces, ¿qué pasa cuando toco esa fecha de salida para elegir una fecha? ¿ Qué aspecto tiene ese calendario? ¿ Qué aspecto tiene este calendario cuando quiero cambiar entre fechas? ¿ Esa cosa me deja hacer click? ¿ Puedo realmente abrir el calendario y elegirlo por completo? Digamos que quería hacer May, en lugar de tener que tocar o realmente volver a marzo por ejemplo, ¿cómo se ven todas esas cosas? Todo eso va a ser realmente útil para echar un vistazo en esta etapa de wireframing. Eso es una envoltura. Una vez que hayas completado tus wireframes, me encantaría que subas el set final a tu proyecto de clase, y tampoco seas demasiado tímido para pedir comentarios. Si vas a seguir con esta serie de clases, vamos a retomar este proyecto. Por lo que siempre puedes incorporar cualquier retroalimentación o cambio a tu proyecto a medida que se vuelve más refinado. Realmente espero que hayas disfrutado de esta clase y te sientas empoderado con tus nuevas habilidades de UX. Muchas gracias por ver.