UX 101: aplica el pensamiento de diseño para crear diseños atractivos

1. Introducción: Hola desde DC y bienvenidos a UX 101, Aplicar Design Thinking para crear diseños atrayentes. Una introducción rápida, me llamo Grace Torres y fui a la escuela Foward Drection. Desde 2012, he estado trabajando forma de resolver problemas creando y aspirando UX y UI para productos digitales. Al igual que aplicaciones de fitness para perros, plataformas de publicación, y software de programación de personal de vuelo. Te he recogido, tu tiempo de acceso ha pasado y estoy constantemente aprendiendo cosas nuevas. Esperemos que te inspiraste para seguir aprendiendo y saber que un día tú también puedes convertirte en Diseñador de UX. En esta clase, primero se te presentará lo que realmente es User Experience y el proceso de diseño que la rodea. Después nos desviaremos y comenzaremos por mirar con los ojos del diseñador, examinando sitios web, aplicaciones y otras experiencias. Averiguar cuáles son los problemas y la mejor manera de resolverlos. A continuación, reuniremos investigaciones competitivas para familiarizarse con las tendencias actuales de diseño. Después crearás flujos de usuario delineando las acciones y puntos de decisión de un usuario y traduciremos esos flujos en wireframes de baja fidelidad para determinar cómo debe presentarse mejor el contenido y la información en pantalla. Tendrás en mente tu proyecto principal, para que puedas empezar a aplicar tus nuevos conocimientos de inmediato. No te preocupes por no saber cuáles son las cosas como los flujos de usuario o los wireframes, porque esta clase está hecha para principiantes, tú. Solo necesitas estar familiarizado con la web, listo para resolver problemas, y ansioso por aprender cosas nuevas. Al final, debes tener alguna investigación en tu proyecto principal consistente en flujos de usuarios y atrayentes wireframes para tu cartera de UX en ciernes. Espero que estés listo para empezar y te veré pronto. 2. Proyecto de clase: Me alegra ver que lo hiciste. Antes de profundizar en lo que es UX, déjame entrar en detalle sobre el proyecto de clase. Para que el proyecto sea lo más real posible, estará basándolo en torno a una tarea. Esta tarea es ayudar al viaje del usuario de principio a fin, resolviendo sus problemas, para hacer su viaje sin esfuerzo y delicioso. Un usuario es cualquier persona que visite o utilice su producto por cierto. Habrá pequeños retos en el principio a medida que avanzamos aprendiendo el proceso de diseño. Esta investigación recabada a partir de estos retos te informará cómo diseñar los mejores flujos de usuario y wireframes de baja fidelidad, que es el proyecto de clase principal. Los suministros necesarios son simplemente suministros de oficina, un programa de acreción gráfica, como Photoshop o Illustrator, y un afán por aprender. elementos esenciales de los diseñadores de UX en todo el mundo son las notas post-it , los marcadores, los marcadores, y un montón de papel de desecho para elaborar diseños. Los verás en todas partes en oficinas de diseño y son geniales para conseguir rápidamente ideas en papel y colaborar en un entorno en tiempo real sin molestar por los visuales. No tienes que ser genial dibujando para ser diseñador de UX. Después, para crear el proyecto de clase principal, necesitarás la capacidad de crear formas limpias y texto claro para los flujos de usuario y las tramas alables. Aquí es donde es útil un programa de creación gráfica. Programas como Sketch, Illustrator, Photoshop, GIMP, e incluso dolor. O si tienes una excelente artesanía a mano para dibujar formas perfectas y puedes mantener todo ordenado. Puedes hacerlo analógico. Tiempo para escoger tu tarea de proyecto. Eres un defensor de las necesidades del usuario. Conocer cuál es el problema a resolver es el primer paso para el diseñador UX en el proceso de diseño. En última instancia, una aplicación de sitio u otro producto digital tendrá numerosas tareas en una sola pantalla. Pero por el bien de la simplicidad, nos vamos a centrar en uno. Aquí tienes una lista de algunas intenciones de los usuarios al visitar o usar un producto. Puedes usar estos o recoger tu en. Sin embargo, una pequeña nota, necesitas estar familiarizado con la tarea que elijas y tener una comprensión básica de lo que está involucrado. Con muchas tareas de la vida real. Es posible que no sepas lo que conlleva la tarea, por lo que tendrás que hacer alguna investigación. Pero de nuevo, para esta clase, deberías estar familiarizado con ella ya. Ahora, para contextualizar su tarea, elija una empresa, persona o entidad que haya creado un sitio web, aplicación u otro producto digital, real o falso. A continuación te presentamos algunas sugerencias que puedes utilizar. Pero si tienes una idea personal, como si tu banda favorita tiene un sitio web o compras en una tienda inmóvil, puedes usar esas, para completar este proyecto de clase. No sólo tendrás tu primer flujo de usuario de UX y wireframes, sino que habrás ganado las habilidades de averiguar el principal problema en un producto digital. Definir claramente sus metas y requisitos, determinar el alcance de su proyecto, definir a su público objetivo y usuarios, aprender sobre las tendencias de diseño y lo que están haciendo los competidores. Definir un camino claro de inicio a fin de las tareas de los usuarios, y averiguar qué contenido está en qué pantalla con wireframes de baja fidelidad. Estos quedarán claros a medida que aprendamos sobre el proceso de diseño. De acuerdo, tarea escogida, checa. Cliente recogido, cheque. Gran inicio. Asegúrese de compartir su tarea y cliente elegidos en los comentarios. Si tienes alguna pregunta, siéntete libre de ponerte en contacto. Nos vemos en el siguiente video. 3. ¿Qué es UX?: Al evento principal. ¿Qué es UX? La definición básica de experiencias de usuario en cualquier momento un usuario interactúa con algo. Entonces la experiencia de un usuario, esa es una definición vaga porque es aplicable a todo tipo de cosas como una cocinas dispuestas, la coziness de fundirse en una silla cushy, por supuesto, la frustración cuando un sitio web es confuso. Cuando estoy discutiendo la experiencia del usuario a partir de ahora, me refiero al Diseño de experiencias de usuario, que es una referencia común a experiencias relacionadas únicamente con productos digitales o computadoras. La gente piensa principalmente en este dicho UX, pero quería aclarar que el término se aplica a mucho más. User Experience Design, también referenciado como diseño de interacción, y diseño de usabilidad, a veces diseño de arquitectura de la información, y el pensamiento de diseño es todo acerca de cómo mejorar el usuario se siente acerca de una experiencia con un producto. Los usuarios tienen necesidades, y cuando estas necesidades no se están cumpliendo, tienen una experiencia negativa y frustrante. Normalmente, las necesidades de los usuarios están relacionadas con cierta meta, motivación, o tarea que quieren completar como para nuestro proyecto de clase. UX interpreta los comportamientos y sentimientos de estos usuarios en necesidades específicas que normalmente no pueden expresar o no entienden del todo. La mayoría de la gente no puede decirte que el botón para guardar un borrador está demasiado lejos y oculto. Todo lo que saben es que es molesto ahorrar, y luego ahorran con menos frecuencia, arriesgando perder su trabajo, lo que lleva a una frustración aún mayor. La experiencia del usuario revela este tipo de problemas. Pero si un diseñador de UX no ha demostrado experiencia haciendo que la tarea sea más fácil de completar, el usuario se queda sintiéndose seguro y positivo sobre el uso del producto. La experiencia del usuario también mantiene relevante el producto. Preguntas como, ¿este producto está resolviendo el problema de nuestros usuarios? ¿ Cuál es el punto de este producto? ¿Para quién es? ¿ Nos faltan las oportunidades de características que necesitan los usuarios? ¿ Estamos perdiendo tiempo en características que los usuarios no quieren? Este enfoque de diseño se llama diseño primero humano. Si un producto intenta servir a todos, no sirve a nadie. Mantenerlo enfocado en las personas que lo usan. Aquí tienes una rápida historia de UX. Cuando las computadoras llegaron a ser a mediados de siglo, eran complejas, complicadas, y sólo los que aprendieron el código podían usarlo. Pero entonces ocurrió una revolución cuando las computadoras se volvieron accesibles para la gente en casa, conocidas como computadoras personales o PCs en los años 70 y 80. Con personas promedio interactuando cada vez más con computadoras, estudiar y mejorar estas interacciones fue primordial. Este estudio fue conocido como interacción humano-computadora o HCI. Se podría obtener una titulación en esto, pero principalmente atrajo a quienes son psicólogos cognitivos o a aquellos con antecedentes de informática enfocados en la usabilidad. Los diseñadores se metieron en este floreciente campo cuando en la década de 1980, computadoras no solo fueron accedidas por código, sino por objetos visuales como carpetas, escritorios, y una pequeña flecha que bailaba a través de la pantalla controlada por un ratón. la década de 1990, Don Norman, experto en el campo del diseño, usabilidad, ingeniería y ciencia cognitiva, convirtió este nuevo campo de estudio en experiencia de usuario. Ahora, aquí estamos dos décadas después, y hemos progresado a un tiempo loco de tecnología donde hay innumerables pantallas y dispositivos. Pero para los diseñadores de UX, no importa la pantalla o el dispositivo, siempre hay problemas que resolver. Para convertirte en diseñador de UX, ya tienes head start. ¿ Eres humano? Lo sentimos, perros, aún no tenemos curso sobre experiencia canina. ¿ Has interactuado con cosas específicamente algo en una pantalla? ¿ Has sentido frustración, felicidad o deleite al usar ese producto? Entonces, boom, ya eres usuario y entiendes por lo que está pasando un usuario. Tu nivel de empatía de diseñador UX tiene una buena base. Hace falta algo de práctica para afinar realmente y empezar a ver patrones de comportamiento de los usuarios. Pero es un viaje divertido conocer cuáles son los problemas de las personas y cómo resolverlos. El papel de un diseñador de UX es muy específico en el esquema general de un producto. Eres diseñador descubriendo la mejor manera de diseñar el contenido. Pero más que eso, ustedes son los usuarios defensores y voz por sus necesidades. Siempre habrá múltiples motivaciones a la hora de crear un producto. El negocio se enfocará en los ingresos, los desarrolladores estarán enfocados en el código, y los principales interesados siempre tendrán una voz fuerte. Ustedes son los embajadores en la mesa para asegurarse de que el producto siga sirviendo a la gente que lo usa sobre todo. Por eso es tan importante aprender tanto como sea posible sobre tus principales usuarios hasta el punto en que sacas tu empatía y habilidades de actuación para ponerte en sus zapatos. Esto no significa que un diseñador de UX siempre diga no a los demás en la mesa, que encontrar un equilibrio de mantener prevalentes las necesidades del usuario, al tiempo que se dirige con las partes interesadas y desarrolladores quieren hacerlo. Tricky pero divertido. Eso podría ser abrumador al principio. Pero lo bueno del diseño de experiencia de usuario, es que es casi como una ciencia. Utilizamos esta metodología llamada el proceso de diseño para pasar por un flujo de trabajo lógico paso a paso para aprender y construir sobre nuestros conocimientos hasta que se cree un diseño hermoso completo y bien pensado. Estaré hablando del proceso de diseño a continuación. Ahora, que eres diseñador de UX en ciernes, es hora de empezar a mirar el mundo como uno. Tu reto para este video es mirar alrededor la web o aplicaciones y encontrar ejemplos de frustrante experiencia de usuario o ejemplos de cuando piensas que clavaron la UX y no sentiste nada más que alegría usándola. Sé sensible a los sentimientos que tienes durante estos momentos, ya que son los más contadores sobre la UX. Comparte en la galería de clase y comentarios y escribe una o dos frases sobre lo que hace un gran o terrible. Nunca volverás a mirar la web de la misma manera. 4. El proceso del diseño: Ahora que sabemos lo que generalmente los usuarios experimentan el diseño, y cómo se ve un diseñador de UX, vamos [inaudible] a cómo funciona la UX. Con cualquier proceso o metodología, es una forma paso a paso de descomponer problemas y soluciones en piezas manejables. El proceso de diseño permite un enfoque casi científico en área subjetiva para crear metas objetivas, requisitos y resultados. También es altamente iterativo y flexible, restando y agregando pasos según sea necesario. Por lo que cada problema tiene su propia curación única del proceso de diseño que mejor le queda. También debo mencionar que el proceso de diseño es cíclico. Incluso cuando has pasado por él unos, de principio a fin con un problema en particular, siempre hay margen de mejora y otra iteración. A veces una fase o paso más pequeño, se repite varias veces durante un proyecto. A lo largo de los años, he escrito de manera oficiosa cuál es el proceso para mí. Entonces puede que veas otras interpretaciones y eso está bien. He organizado un proceso de diseño en tres fases principales. El reflejo en fase de investigación, la fase de diseño y desarrollo, la fase de lanzamiento y aprendizaje, y el extraoficial cuarto, enjuagar y repetir. Estas fases, dividen el proceso en las principales áreas de enfoque para el diseñador. Dentro de cada fase, hay muchas herramientas y acciones a utilizar. Estas herramientas y acciones son lo que mencioné que se puede sumar y restar, como lo requiere el problema. También las fases que compartí, no solo incluyen el diseño de la experiencia del usuario, sino el diseño de la interfaz de usuario, trabajando con otros departamentos como titulares de participaciones y negocios y diseñando con desarrolladores. Aquí solo nos enfocaremos en el diseño de la experiencia del usuario. Pero como puedes decir, diseño de UX es solo una pieza muy importante de un gran proceso. Por fin echemos un vistazo al proceso de diseño. Estaré entrando en más detalle sobre lo que hay debajo de cada fase en videos posteriores, pero aquí está en todo su esplendor. Cubriremos en esta clase los artículos con estrellitas al lado de ellos. Por lo que puedes ver que ya estás usando el proceso de diseño para tu proyecto de clase. También note que hay tantas otras herramientas disponibles para usted. En primer lugar, la fase de reflexión e investigación es todo acerca de introducirse en el problema ocupa y recopilar la mayor cantidad de información posible antes de crear un único diseño. Para que la experiencia del usuario sea exitosa, reúne una enorme cantidad de investigación que apoya los diseños finales. Esto evita diseñar en la oscuridad o diseñar cosas que serán útiles. También mantiene al producto humano primero, mientras defiende tus ideas de diseño a través de la crítica. Al igual que una casa construida sobre una base sólida para pararse firmemente contra los vientos, esta es una fase muy ocupada para un diseñador de UX e incluso hay especialidades de roles de investigación UX para ello. Cuando hemos reflejado plenamente en la investigación, pasamos al siguiente paso, diseñamos y desarrollamos. Esta fase se trata de refinar iterativamente diseños, ideas y diseños visuales, para avanzar hacia el lanzamiento, como un diamante en bruto que se alisa y corta en una gema impactantemente facetada. la colorida colección de notas post-it, marcadores Ahora entra en juegola colorida colección de notas post-it, marcadores, resaltadores y papel. Atacando a una pared, la idea de diseño permite una rápida evaluación de las ideas peor, a través de la discusión. Entonces puedes pasar a crear marcos de alambre de muy baja fidelidad, contornos esqueléticos de contenido y disposición y prototipos con las ideas, eventualmente haciendo cosas de alta fidelidad. Después de muchas iteraciones, el diseño de la interfaz de usuario entra en escena para dar vida al aspecto y la sensación del producto. Cuando los diseños se realizan y finalizan y se ven nítidos, es hora de trabajar con los desarrolladores para solucionar problemas e interacciones de finura. La última fase de lanzamiento y aprendizaje se centra en preparar el construc-out del nuevo diseño para el arrendamiento y prevenir desastres antes de eso. En este punto, es el momento de asegurarnos de que hemos respondido todas las preguntas y metas desde la primera fase. Los diseños construidos son probados por calidad y mal funcionamiento. Esto permite que se aborden algunas correcciones rápidas y problemas pasados por alto. Existen varias formas de probar los diseños de construcción antes de lanzarlo, porque queremos asegurarnos de que la factura no estrelle ni queme su producto, una vez que sea gratis. Una vez que esté listo para salir, es hora de lanzamiento. Después de empujar el botón ir, es importante documentar los problemas, oportunidades perdidas, nuevas ideas y pensamientos, para cuando vuelvas a la fase uno más adelante. Ese es el proceso de diseño para mejorar un producto. Estaré repasando cada fase con más detalle y con consejos prácticos en el siguiente video. Pero por ahora, familiarízate y no olvides reunir tus buenos y malos ejemplos de UX. Compartirlos en la galería y comentarios con una o dos oraciones sobre la UX. 5. Reflexión e investigación: Hola, antes de entrar en los detalles de la Fase 1 del proceso de diseño, quería tomarme un momento y aplaudir hasta dónde lo has llegado y cuánta información se te acaba de lanzar. Es mucho, pero se convertirá en más segunda naturaleza con más exposición. Si tiene alguna pregunta, por favor comuníquese. Pasé en el último video qué es lo esencial de estas fases y qué hace un diseño UX. Pero ahora vamos a meternos en cómo hacerlo. Aquí está la fase completa una vez más. Se puede ver que nuestro proyecto de clase sólo pasa por algunos de ellos. Con tu tarea elegida en mente, abordemos el primer paso. ¿ Cuál es el principal problema? Podría tener que imaginar que por alguna razón, el usuario no ha podido completar su tarea porque hay problemas anteriores o la característica no ha existido antes. Mi tarea de ejemplo será, como nuevo usuario, quiero saber qué es esta empresa. Probablemente has experimentado este tipo de tareas antes en tu vida personal. Aterrizas en un sitio web totalmente nuevo y no tienes idea de lo que significa el logotipo en la esquina superior o incluso quiénes son. El principal problema aquí es el acceso a la claridad y la información. Por el bien de nuestro proyecto, esta es una nueva característica, por lo que no necesitamos tomar en consideración ninguna solución anterior. Ahora una vez metas y requisitos, el objetivo principal siempre debe ser cumplir con el usuario, satisfacer sus necesidades y completar su tarea con éxito. Ahora, otros objetivos que podrías lanzar ahí es reducir algunos pasos para hacerlo, tenerlo hecho por x tiempo o lo que sea que los negocios y las partes interesadas pudieran tener que hacerlo. Por mi ejemplo, lanzaré una meta que el usuario debe conocer en la primera pantalla inclinada o página de inicio. Pero descripción general de la empresa y tener fácil acceso a una pantalla completa sobre la página incluyendo cargas más información allí. Con la recolección de requerimientos, se necesitan entrevistas con las partes interesadas, negocios y desarrolladores solo para asegurarse de que todos tengan la misma expectativa y tengan plenamente compartir sus ideas Un requisito para mi proyecto será que un descripción se ve en la primera pantalla de aterrizaje y que hay un punto de acceso global para llegar a la página sobre. Global aquí sólo significa que es ubicuo en cada pantalla. Un requisito más es que haya una forma en la descripción de la página principal para el usuario llegue a la página sobre además del punto del eje global por un segundo. El alcance sólo significa que el proyecto sólo puede usar una cierta cantidad de recurso, como tiempo o número de desarrolladores. Esto mantiene las cosas en jaque y mínimo, por lo que no se pierde demasiado tiempo y esfuerzo. Como diseñador de UX, hubo un montón de veces que el proceso de planeación que tú serás el único para averiguar alcance al trabajar con desarrolladores y gerentes para asegurarte de que haya un producto más viable con diseños. Algunas ideas podrían tener que esperar hasta la próxima ronda, esto es muy común. Auditoría y diseño suena igual que es, estás evaluando la situación actual. ocasiones auditar es en realidad el primer paso si no sabes cuál es el principal problema. Esto es útil si simplemente estás totalmente despistado de lo que va mal y necesitas una segunda opinión. A veces una agencia de diseño de terceros vendrá y realmente cavará en tu producto con ojos frescos y no sesgados. Ayuda a obtener una visión realista sobre qué arreglar. Después de auditar y obtener un buen sentido de hacia dónde debes ir, mirar tu competencia o análisis competitivo es lo siguiente. No es para que puedas copiar lo que están haciendo. Pero para familiarizarse con las tendencias de diseño, cómo otras personas están resolviendo problemas similares y para ver qué puedes hacer mejor. Tienes que recordar aunque que la mayoría de los productos podrían parecer iguales y estar sirviendo a las mismas personas. Pero cada producto son usuarios muy diferentes y tiene objetivos diferentes. Incluso recomiendo mirar productos que podrían no ser un competidor directo, pero tienen alguna superposición. Toma nota de lo que te gusta, disgusta o crees que puedes hacerlo mejor. Sigues diciéndonos gracia que somos los usuarios defensores por sus hazañas y motivaciones pero aún no hemos hablado de ellas. Bueno, aquí estamos, la definición de audiencia es un éxito de mantener brillante cuando se trata de experiencia de usuario. De nuevo, tiene sentido cuando realmente sabes quién está usando tu producto y cómo mejorar su experiencia, entonces todo lo demás cae en su lugar. Algunas formas súper útiles de definir a tu audiencia son haciendo entrevistas a los usuarios. Ahí es cuando has reunido a un grupo de personas que puedes pensar que son los principales usuarios y luego al hacer preguntas, puedes volar tu mente con insights. Incluso hasta el día de hoy, estoy tan aturdido cuando o no usan un producto la manera correcta o han eclosionado el producto para que se ajuste a sus necesidades. Verlos usar el producto mientras piensas en voz alta puede transformar tu producto. Las entrevistas de usuarios también se utilizan en la fase de diseño y desarrollo continuamente para asegurarse de que las necesidades de los usuarios se están cumpliendo con los diseños. Analítica y datos recopila quién utiliza tu producto pero puede ser muy vago. Te recomiendo usar las demografías recogidas de eso para encontrar gente real para una entrevista de usuario. Asegúrate de hacer un seguimiento de tus objetivos de usuarios, motivaciones, sueños, disgustos, etc no solo de su raza o edad a medida que aprendes sobre ellos. Otra herramienta para mantener un enfoque de primer diseño humano es crear personas de usuario. Estas son personas ficticias para representar tipos clave de usuarios con tu producto. Para mi proyecto de clase, he optado por utilizar una empresa que vende y organiza, CSA o agricultura apoyada por la comunidad. Tienen una página web que anuncia cuándo es la siguiente camioneta, qué productos o en las cajas, ¿cuántas fincas están participando sobre esas fincas? Entonces cómo unirse y pagar las cajas. Ahora, tendré que averiguar quién utiliza su página web. Ya que son una empresa falsa recurre a inventarla pero recomiendo encarecidamente buscar en Google y aprender sobre la industria de tu cliente para obtener una sensación más realista, al menos. Las personas que compran CSA son generalmente conscientes de la salud, apoyan la agricultura, abrazan productos naturales les gusta comprar locales, generalmente más ricos, y son creativas con la cocina que las personas que usan sitios web o cualquiera de edades como seis a finales de los 60. Ahora tengo algunos rasgos, voy a crear algunas personas de usuario. Tengo dos tipos de personas, una joven Yogi justo fuera de la universidad con un perro y un papá de color blanco de mediana edad con kiddos. Podrás echarles un vistazo más allá haciendo una pausa y leyendo. Pero no entraré en demasiados detalles ya que son un ejemplo. Hay toneladas de plantillas en línea si quieres llenar algunas por ti mismo, te voy a compartir un enlace para algunos. Estas personas de usuario ayudan a guiar las decisiones a medida que se están tomando decisiones. Si en cada momento preguntas sería Carroll, la persona del usuario utiliza nueva característica y la respuesta es no, entonces compruébalo. Otra vez. Si haces un producto para todos entonces no servirá para nadie. Ser lo más específico posible para tus usuarios resultará en un producto más profundo. Eso fue mucho. Esperemos que te sientas facultado para trabajar en tus proyectos de clase reflejan y fase de investigación ahora. Para tu próximo reto, crea un pequeño dossier o breve de una a dos páginas con tu tarea de usuarios, empresa, problema principal a abordar, metas y requisitos definidos, alcance, análisis competitivo, y algunos definición de audiencia. Por alcance, te lo daré. Pretende que soy un Stakeholder. Tu alcance se aplicará a al menos una página de inicio de pantalla a menos que no tenga sentido para tu proyecto. Una interacción y una pantalla final clara. Definitivamente puedes agregar una o dos pantallas e interacciones más si eso permite a tu usuario terminar su tarea. Pero trata de mantenerlo sencillo. Para el análisis competitivo, las capturas de pantalla de sitios enteros o partes específicas funcionan bien y para la definición del público, te lo dejo a ti. Se puede entrevistar, crear personas de usuario o hacer algún Google serio. Pero yo sugeriría tratar de hacerlo lo más específico posible. Comparte tu investigación en la galería cuando terminaste. 6. Diseño y desarrollo: Gracias por quedarse a través de ese último video. Fue mucho. Ahora vamos a la fase 2. Empezaré con notas post-it. El inicio de esta fase es altamente colaborativo y algunas de mis reuniones favoritas solo están pasando el rato en un espacio con una pizarra y post-its para platicar a través de ideas de diseño. En estas notas post-it, puedes escribir los requisitos, los objetivos, las necesidades del usuario, algunas pantallas, flujos de usuarios, o cualquier otra cosa que rápidamente ayude a iterar y mejorar las ideas de diseño. Entonces, una vez que estén en la pared y una ráfaga loca de post-its en movimiento está en ideas rápidas, apagarlo trabajar a través de problemas de experiencia de usuario sin quejarse de los visuales. Este también es un buen momento para traer gente fuera del departamento de diseño para obtener algunas ideas de diseño inesperadas ya que todo el mundo es un usuario. Durante estas sesiones de lluvia de ideas, se puede averiguar la arquitectura de la información o el marco general del contenido, flujos de usuarios, wireframes de baja fidelidad y prototipos de baja fidelidad. También pueden hacer todas estas cosas ustedes mismos, pero es menos divertido en colaboración con muchos puntos de vista conduce a mejores ideas de diseño. A modo de nota lateral rápida, quiero señalar que los dos siguientes videos tratan de hacer flujos de usuario y wireframes de baja fidelidad. No los discutiré aquí. Pasemos por esos por ahora. Estamos en un punto del proceso de diseño donde es momento de empezar a diseñar algunas pantallas y probarlas. En un principio, es un trazado áspero de lo que debería estar ahí por lo que no es muy bonito. Imagínalo como el esqueleto del producto evolucionando lentamente hacia la definición muscular. Estos wireframes realmente rugosos, conocidos como wireframes de baja fidelidad se pueden convertir en prototipos. ¿Qué es un prototipo? De acuerdo con dictionary.com, es un primer modelo, típico o preliminar de algo, sobre todo una máquina a partir de la cual se desarrollan otros foros para su copia. Yo no lo podría haber explicado mejor. prototipos no se trata de cómo se ve y conocer todos los detalles finales, se trata de cómo funciona la idea y de construir sobre ella. Puedes hacer estos de bajo archivo fuera de papel con algunas cajas crudemente dibujadas. Puedes hacerlos en Photoshop con formas y etiquetas grises, o incluso crayones sobre papel. Siempre y cuando sea lo suficientemente legible para completar la tarea de un usuario. Hasta que se descubra la experiencia del usuario, están repitiendo alambres de baja fidelidad y prototipos main. Este es también un gran punto para revisar con los requisitos y asegurarse de que todo esté contabilizado. Antes de gastar mucho talento, energía en los finos detalles del diseño, es importante conseguir los wireframes en un lugar realmente bueno. Pueden ser tu guía. Incluso pueden pasar a la fidelidad media donde empiezas a traer alguna interfaz de usuario o ideas para el diseño, pero es un trabajo en curso. Esto no debería ser un foco aunque hasta más tarde. Pero este proceso es muy líquido y se mueve sin esfuerzo de baja fidelidad a alta fidelidad. ¿ A qué se ve la alta fidelidad? Básicamente, parece un diseño final. Se elige la topografía, el espaciado es bueno, diseño está en una cuadrícula, los colores son correctos, botones están ahí y la copia final está en su lugar. Este trabajo lo realiza típicamente un diseñador de interfaz de usuario o interfaz de usuario que tiene un proceso de diseño ligeramente diferente al que te he mostrado para UX. Los diseñadores de UI son los encargados de establecer y conciliar el aspecto y la sensación de un producto que coincida con la voz y la marca del cliente. A veces trabajarán en estados de error de las entradas e interacciones detalladas, como, ¿habrá una animación al hacer clic en una flecha? Muchos diseñadores se están convirtiendo tanto en UX como en UI, como yo, para mantener el proceso en un solo flujo. Hay suficiente en cada rol aunque para que el diseñador independiente de UX o UI no sea ambos. De baja fidelidad a prototipos de alta fidelidad deben ser probados por el usuario. ¿ Por qué es importante hacer todas estas pruebas? Después de todo, ya hicimos definiciones de audiencia en la primera fase. Como Steve Krug, autor de UX Bible, no me hagas pensar dice: “Probar con un usuario al principio del proyecto es mejor que probar con 50 cerca del final”. Cuando el producto se prueba desde el principio, antes de que se hayan utilizado mucho tiempo y recursos, puede revelar problemas que son fáciles de solucionar ahora. También se asegura de que el producto siga siendo un primer diseño humano, manteniendo siempre las necesidades del usuario al frente junto con las necesidades del negocio y de las partes interesadas. Como diseñador de UX, las pruebas de usuario te dan una idea de cuán exitosos son tus diseños también. Esa siempre es una gran experiencia de aprendizaje. Resolver problemas desde el principio antes de que se conviertan en un gran problema, manteniendo el producto enfocado en los usuarios y mejorando tu propio diseño de experiencia de usuario, suena como algunas razones bastante buenas para probar al usuario. Para terminar en la fase de diseño y desarrollo, hablemos de cuándo se están construyendo los diseños. Algunos diseñadores también son desarrolladores, pero muchos no lo son. Me gusta decir que los diseños son alrededor del 90 por ciento realizados para cuando salga de mi programa y los comparta con los desarrolladores. Ese último 10 por ciento sólo se puede terminar en código y vivir en una pantalla. Mucho puede cambiar de tu computadora al producto real. Por eso es importante aprender a trabajar con desarrolladores o ingenieros. En el inicio del proceso de diseño, repasar la experiencia del usuario con los prototipos es súper útil para mantener a todos en la misma visión. A lo largo de los años, he aprendido HTML básico, CSS, y otros conceptos básicos del lenguaje de programación con el fin de comunicarme mejor con ellos. Si sé cómo será una enacción, encontraré algún código para ellos. Si conozco un color específico necesario, encontraré el código de color CSS para ellos. Este es también un proceso muy iterativo con el tiempo dedicado a revisar estos diseños construidos. Saber codificar no es un requisito, pero es muy útil. Lo has hecho a través de la fase 1 y 2 del proceso de diseño. Espero que puedan ver cómo UX toca casi todos los aspectos de la misma. No olvides trabajar en tu expediente de proyectos de clase y compartirlo con nosotros en la galería de clases. 7. Hacer fluir del usuario: Cuando tienes una idea de cómo va a ser la UX general, necesitas una manera de hacer un seguimiento del viaje del usuario a través de una tarea, fácil y comprensible. Hay algunos enfoques para esto dependiendo de los niveles de fidelidad, pero vamos a hacer una mezcla de diagrama de flujo tradicional y mapa de viaje de tareas, o como los llamo claramente, flujos de usuarios. Estos son un gran precursor para diseñar alarmas. Emparejan cada acción, punto de decisión, y destino, un usuario puede hacer de principio a fin. Probablemente los hayas visto antes en un diagrama de flujo de sí o no. flujos de usuario normalmente no tienen elementos visuales adjuntos a ellos, lo que permite enfocarse en los caminos y la elección que hacen los usuarios en su lugar. Hay flujos de usuario de alta fidelidad que combinan lo que acabo de describirte con modelos de alarmas más altos o diseños de mayor fidelidad. Es como un prototipo plano de una hoja. Existen muchas variaciones en los flujos de usuarios y dependiendo de las necesidades de tus proyectos, puedes elegir cuál. Pero el propósito principal de todos ellos es mapear claramente las partes funcionales del usuario para que los diseñadores, las partes interesadas, y especialmente los desarrolladores, puedan entender plenamente la experiencia del usuario. Si cada elección se muestra claramente, entonces las interacciones y partes de la tarea no se olvidarán ni se improvisarán más adelante, manchando la nueva experiencia en la que acabas de trabajar tan duro. También es una gran manera de documentar en general cómo funcionan las cosas en su producto. Ahora, podría aumentar el mapeo hacia fuera cada ruta que un usuario puede hacer de principio a fin, considerando que cada pantalla podría tener numerosas opciones. Es por ello que es importante asignar un área de enfoque al flujo del usuario o asignar una tarea específica. Suena como nuestro proyecto de clase, ¿no? Empecemos a hacer uno. El primer paso que me ayuda a meter mi mente en un modo de flujo de usuario es anotar qué elementos y componentes están involucrados en mi tarea. Como recuerdan, mi tarea es como nuevo usuario, quiero saber qué es esta empresa. Lo que veo involucrado aquí es un párrafo, botón, imagen, copia más larga, más botones, y tal vez algunas formas geniales de romper el texto. Vaga y no útil en papel, pero apuesto a que pensaste en lo que iba a ser parte de tu tarea. A partir de ahí, voy a hacer un sencillo viaje de tareas y ampliarlo a un flujo completo de usuarios. Para mi primera plaza de prueba, va a ser tierras en la página de inicio porque eso es un requisito y parte del alcance, para todos ustedes, guiño, guiño. Pensando de nuevo a mis tareas, la siguiente plaza será ve logo y empresa no lo reconoce. Aquí, el usuario ha encontrado su primera tarea para aprender más y resolver este enigma. Dado que los usuarios tienden a escanear antes de hacer clic, mi siguiente plaza será, usuario mira alrededor de la pantalla de aterrizaje inicial, luego el usuario ve párrafo corto en el blurb de la empresa y lee. ¿ Recuerdas cómo eso fue un gol en requisito para que yo tuviera algo en la página de inicio? Ahora, el usuario podría haber pasado y pasado a su siguiente tarea, completamente hecha, pero por el bien de la simplicidad y por el bien del proyecto, el usuario continuará sus esfuerzos para conocer más sobre la empresa. A continuación, el usuario ve una “Llamada a la acción”, para conocer más sobre la empresa. Un “Llamada a la acción” es un botón o un enlace fuertemente redactado, como ver más, haga clic aquí, “Enter”, etc. Siguiente para el usuario, el usuario decide hacer clic en “CTA” y aterriza sobre la pantalla. entonces el usuario lee contenido y aprende sobre la empresa. Tarea concluida. Eso fue fantasía. Podría agregar un elemento de contactarnos con cualquier pregunta para saciar plenamente los usuarios necesitan aquí para aprender más, y ese es un mapa de viaje de tareas. No duro, ¿verdad? Para empezar realmente a convertir esto en un flujo de usuario adecuado, necesitamos echar un vistazo a nuestro nuevo viaje de tareas y escoger qué es un destino, un lugar de pantalla, un punto de decisión, lugar donde el usuario podría ir varios caminos, y un acción, normalmente clics para pestañas. Veo que homepage y sobre pantalla son los destinos. El punto de decisión para hacer click o no dar click en t él “Conoce más sobre la empresa CTA”, y la acción es un click en el botón. Esto tendrá más sentido una vez que empecemos a hacer algunas formas. Tiempo para dar la bienvenida a tu programa de diseño gráfico y creación en la clase. Estaré usando bohemio bohemio, ya que esa es la herramienta que uso mayormente para el trabajo. Asignarás a cada destino, punto de decisión y acción, una forma especial sólo para ser utilizada por un tipo. Voy a usar rectángulos para destinos, círculos para puntos de decisión, y pequeños puntos para clics. Para ayudar con aspectos narrativos, voy a simplemente escribirlo, pero se puede asignar una forma. Para un nivel extra, voy a codificar por color. Negro relleno para los destinos del rectángulo, blanco para las decisiones del círculo, y luego verde para los clics, no olvides agregar algunas líneas para los caminos. Ponerlo en el flujo correcto es la parte divertida. Primero, agrega aquí la página de inicio, luego agregamos un poco de texto narrativo. A partir de ahí, tenemos un punto de decisión con un pequeño indicador de una acción. Después se muestra al usuario la pantalla sobre, un nuevo destino, más texto narrativo, luego se realiza el flujo básico del usuario. Pero debido a que me gustan los pequeños retos, voy a añadir una opción de espalda. Si el usuario hace clic en esto, regresará a la página de inicio. Generalmente, es una buena regla de UX tener siempre una manera rápida para que el usuario vuelva a su pantalla anterior. Añadiré otro punto de decisión aquí con un clic, luego se completa el ciclo, ya que un usuario ha llegado de vuelta a donde comenzaron. Esto podría parecer excesivamente explícito, pero ser esto detallado puede ayudar cuando hay una tarea realmente compleja a la mano con múltiples decisiones por tomar en cada parte. El diseño del flujo del usuario depende completamente de ti siempre y cuando sea claro y comprensible. Ahora, tu tarea es primero hacer un viaje de tareas luego traducirlo en un flujo de usuario muy bien pensado basado en tu tarea elegida, con toda la cantidad de detalle y colores que te plazca. Compártelos en la galería cuando hayas terminado. 8. Haz trabados de alambre: Es hora de diseñar tu primer modelo alámbrico, pero ¿qué es un modelo alámbrico? Imagina que tu idea de diseño es simplemente un contorno aproximado para permitir que el contenido se vea en una página sin ningún diseño visual. Normalmente sólo contornos de cuadrados, rectángulos, círculos y otras formas con etiquetas y anotaciones. Con los wireframes de baja fidelidad, no hay gran sentido de proporción o detalle, solo los principales trozos de contenido. Pero como si la fidelidad mejorara, podrías tener alámbricos en una cuadrícula de diseño con jerarquía correcta e incluso color e imágenes. Como mencioné algunas veces en la lección 6, más iteraciones ocurren más rápido en el principio debido a menos fidelidad con los wireframes, la experiencia del usuario y la idea de diseño se pueden representar a fondo sin todo el tiempo dedicado a lo visual aspecto de diseño. Tener marcos alámbricos en bruto permite a todos ver hacia dónde va el diseño y asegurarse de que se cumplan los requisitos. El lado técnico está bien y todos los contenidos ahí. Si un diseñador no UX sin embargo, mira los wireframes ásperos, normalmente se necesita mucha más explicación para que se comprenda la idea de diseño. wireframes también pueden comenzar una discusión significativa y muy necesaria entre las partes interesadas, los negocios y los desarrolladores. Es difícil pensar a través de las características si no tienes el entrenamiento. Al verlo desencadena pensamientos. Antes de crear tu propia estructura alámbrica, fui a aclarar la diferencia entre una estructura alámbrica en una maqueta de diseñador visual. Un propósito de wireframes es mostrar la estructura esquelética de la pantalla y lo que vivirá en ella. wireframes aún más bonitos pueden tener algo de interfaz de usuario, pero no todo el tiempo. Una maqueta de diseñador visual es cuando el diseño ya no es una estructura alámbrica, sino una representación real de cómo se verá el producto final. También se le llama diseño de alta fidelidad con tipografía, espaciado, color, etc. Normalmente, un diseñador de interfaz de usuario se encarga de crear estos, y en este punto, las únicas discusiones a su alrededor están puramente diseñadas como dimensionamiento y color, aspectos no más grandes como componentes y contenido. Para ayudar a crear una estructura alámbrica, averigúe los tipos de usuarios a los que atienden sus clientes. Para mi proyecto de clase, los usuarios del sitio web de CSA o mayores, más naturales, tal vez no tan amigable con la tecnología. Esto significa que mi contenido debe ser presentado de una manera muy directa y esperada. Algunos otros aspectos que aprendí pero no están relacionados con el proyecto, que están confundidos sobre cómo unirse y pagar. Debería hacer eso realmente obvio desde la página de inicio. Otra idea es llevar el próximo anuncio de CSA de frente y centro luego agregar lo que contiene la siguiente caja de qué granjas. Una adición súper vendedor sería agregar recetas que pudieran funcionar con esa caja para el mes, pero me estoy dejando llevar ahora con ideas. También sé que los usuarios de CSA son generalmente amables y más ricos así que tal vez quieran un campo de mercado de agricultores más upskill en lugar del típico botón de granja. Nada de eso realmente importa ahora mismo para mi proyecto, pero es bueno tener estos detalles en mente para futuras iteraciones. Haciendo referencia a mi viaje de tareas y flujo de usuario, primero esbozaré algunos wireframes ásperos en papel para jugar con cómo lo quiero diseñar. Después de encontrar una estructura alámbrica bien diseñada, lo copiaré en mi boceto de programa de creación gráfica. De nuevo, puedes usar Photoshop Illustrator o incluso GIMP. Aquí se pueden ver grandes cajas gigantes y etiquetas de texto. Después mirando hacia atrás a mis requerimientos, flujos de usuario, testimonios y personas de usuario, comenzaré a agregar más detalles a las cajas grandes. En mi página de inicio, voy a agregar dos casillas principales para mostrar la página genéricamente. En la parte superior, añadiré una caja para representar el logotipo y añadiré algunos textos falsos para representar el blurb corto de la empresa. Debajo del blurb, agregaré un botón que enlaza a la página sobre, se ve bien en fósforos poco flujo de usuario. Tiempo para la página Acerca, volveré a agregar el logo en la parte superior y luego montones de cajas para contenido principal con más detalles ahora aquí viene cajas más pequeñas y textos falsos representan la historia de la compañía con imágenes. También mencioné el botón Atrás para que eso entra ahora también. Mirando hacia atrás a nuestro flujo de usuarios, tenemos un partido bastante perfecto. Este es el punto en el que sacamos tramas alámbricas al expediente de requisitos y metas. Parece que me perdí un requisito, el Acceso Global a la página sobre. ¿ Cuál es el lugar más sencillo y esperado para poner eso? El pie de página que dices, ¿por qué? Sí, necesito actualizar mi flujo de usuario ahora ya que es una nueva opción en la página, aquí hay un flujo de usuario actualizado. Aquí voy, agregando un cuadro de tamaño mediano que abarca la página en ambos alámbricos para representar el pie de página. Dentro, agregaré algún texto que represente ese enlace. Contenta evité hacer más avances en mi wireframe antes de comprobar si tenía todos los requisitos. Perdón por ser alcanzable, pero es exactamente por eso que hacemos wireframes. La parte final de tu proyecto es hacer un wireframe de baja fidelidad de tus tareas. Ya has completado la investigación, los requisitos, las personas de los usuarios, análisis competitivo, un viaje de tareas, y un flujo de usuarios para ayudar y formar y la mejor forma de colocar tu contenido en una estructura alámbrica. Buena suerte y por favor comunícate si tienes alguna pregunta. Cuando hayas terminado de compartir la galería para que podamos celebrar tu primera experiencia de usuario wireframe. 9. Lanzar y aprender: Espero que estés disfrutando trabajando en tus flujos de usuario y wireframes, pesar de que tu proyecto de clase no toque la última fase del proceso de diseño, lance y aprenda, de todas formas hablaré de ello porque no puedo dejarte colgado. Tú y el desarrollador ambos coinciden en que se ve completo y totalmente construido. Esta es la fase para preparar y prevenir desastres para su lanzamiento y liberación. Sueno como un récord roto, pero este es el check-in final con los titulares de estaca, los requisitos, metas, y cualquier cosa para juzgar si el diseño logra resolver el problema inicial. En ocasiones esto puede ser casual, o puede ser una presentación mostrando nuestros diseños finales en lo construido. Esto permite tiempo para iterar y volver a las fases anteriores si falta algo. Ya que somos grandes fans de UserTesting, este también es un buen momento para probar. No debes probar solo en este punto como último intento para asegurarte de que tus diseños estén cumpliendo con las necesidades del usuario, las pruebas de enfoque durante este tiempo también pueden ayudarte a determinar cómo le irá el lanzamiento con los usuarios. Cuando todo el mundo está a bordo para su lanzamiento, una parte crítica de prevenir un desastre una vez que está fuera en la naturaleza es una verificación de aseguramiento de calidad o control de calidad. En ocasiones las empresas tendrán personas separadas para esta tarea, pero en todas mis empresas más pequeñas, todos los involucrados en el proyecto, diseñadores, desarrolladores, gerentes se convierten en personas de QA. El aseguramiento de la calidad es un tiempo dedicado para hacer clic en cada botón, mirar cada pantalla , examinar cada interacción y asegurarse de que todos los cables se hayan enganchado correctamente. Puede ser realmente tedioso, pero pone las construcciones al timbre. Como diseñador, no sólo tienes que asegurarte de que la construcción se vea correcta como en los diseños, sino que tendrás que concluir que la experiencia del usuario sigue siendo la mejor para los usuarios y todo funciona correctamente. Hacer un escrutinio minucioso de control de calidad puede revelar una gran cantidad de problemas que habrían arruinado la UX del usuario y agitado su visión con un producto. Añadiré otro tipo de pruebas: pruebas A/B, esto es diferente a las tradicionales UserTesting de las que hemos hablado en lo que respecta a que se trata de una prueba en vivo en el producto con usuarios reales; la variante A muestra un control que es el original diseño a un segmento de personas, entonces la variante B muestra un nuevo diseño a un segmento de personas. Estas personas están segmentadas aleatoriamente y la prueba se ejecuta por poco tiempo, pero es una forma real de ver de uno a uno cómo interactúan los usuarios. También puedes probar más variantes durante el mismo tiempo como una prueba ABC, por lo que hay cuatro diseños posibles, por lo que los usuarios podrían ser vistos durante el periodo de tiempo designado. En mi experiencia, estas pruebas antes del lanzamiento han captado problemas que desalentarían a los usuarios en el producto antes de que el producto se hiciera público alguna vez. Listo, set, lanzamiento, tus diseños están en vivo, los usuarios están interactuando con tu diseño UX, ¿qué pasa ahora? Con todas estas medidas preventivas para encontrar y erradicar temas antes del lanzamiento, siempre hay algunas sorpresas que los usuarios revelan. Prepárate que justo después del lanzamiento, algo podría tener que arreglarse. Desde el momento del lanzamiento a medida que los usuarios interactúan cada vez más con tus nuevos diseños, lo mejor es seguir documentando nueva información, problemas revelados, reacciones, ideas, quejas, etc, para la próxima generación. Recuerda cómo en el inicio de la fase 1, es útil conocer las soluciones anteriores, este documento será clave para eso, también ayuda a realizar un seguimiento de qué partes de la UX tuvo éxito, y qué necesita ser pensó más. Enhorabuena por hacerlo a través de todo el proceso de diseño. Es mucha información y eres un campeón por llegar tan lejos. 10. ¡Ve hacia la solución de los problemas!: Gracias por unirse conmigo a través del diseño de experiencia de usuario y el proceso de diseño. Esperemos que este enfoque práctico te haya equipado salir adelante y empezar a resolver problemas. Espero que la web se transforme en hermosos productos la próxima vez que abrí mi navegador. Entonces una vez más antes de irte. ¿Qué es UX? experiencia del usuario es el estudio de la experiencia de un usuario con un producto. Para nuestros propósitos, esto significa el ámbito de los productos digitales, pero se puede aplicar a cualquier cosa del mundo con el que interactúan los seres humanos. El diseño de la experiencia del usuario está abogando por las necesidades y motivaciones de los usuarios a lo largo de todo el proceso de diseño. Si construyes para todos entonces no sirves a nadie. Por lo tanto, mantén a tus usuarios específicos como el foco de tu producto principal. Un enfoque científico para el diseño de la experiencia del usuario es el proceso de diseño. Se trata de una metodología flexible para ayudar a descomponer los problemas en piezas manejables enfocadas en el diseño de la experiencia del usuario. Son muchas las interpretaciones adaptadas al diseñador y a la persona que lo usa. Pero siempre está construyendo sobre el conocimiento que aprendes en el camino, llevando a un producto refinado. El conocimiento que te doy proviene de casi una década de aprendizaje y experiencias como UX, diseñador de UI, no fui a la escuela por experiencia de usuario y no tienes que hacerlo, si quieres convertirte en diseñador de UX. Para llegar, solo recomendaría ser lo más curioso e inquisitivo posible. Acude a seminarios, toma más clases como estas, y solo trabaja en algunos proyectos de UX. Cuantos más problemas de UX trabajes, más habilidades de experiencia de usuario adquieres. Una de mis partes favoritas sobre ser diseñador de UX es en la industria de UX es muy colaborativa, así que pide ayuda a la gente. Pide a la gente que trabaje a través de diseños contigo. Es una industria que cambia rápidamente y siempre hay algo nuevo para captar tu interés. Ha sido tan divertido aprender contigo y te animo a leer los recursos que he vinculado. he leído, los he vuelto a leer, y la mayoría de los diseñadores los han leído. Por favor siéntete libre de contactar si alguna vez tienes alguna pregunta y no olvides publicar tu proyecto de clase final de flujos de usuario y marcos de alambre. Son bellos. Adiós y hasta la próxima vez.