O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Workshop UX Design [UIXCode]

13.087 visualizações

Publicada em

Workshop UX Design de Treze y José Antonio López sobre Experiencia de Usuario y Metodologías Ágiles en desarrollo de proyectos.

Publicada em: Design
  • Entre para ver os comentários

Workshop UX Design [UIXCode]

  1. 1. Taller UX Design La experiencia no se diseña, sucede. UIXCODE 1 WORKSHOP UX DESIGN
  2. 2. Taller UX Design 2 Designer and front end developer. Optimization of user experience (UX) and user interface (UI). José Antonio Sánchez — Treze CREATIVE & UX DESIGNER Project Manager & Senior Software Engineer Business Development and 
 Certified ScrumMaster. José Antonio López — Vemovi PRODUCTION MANAGER & UX DESIGNER linkedin.com/in/treze linkedin.com/in/jalopezsuarez UIXCODE uixcode.com
  3. 3. Taller UX Design 3 Adaptar la forma de trabajo a las condiciones del proyecto, consiguiendo flexibilidad y eficiencia METODOLOGÍAS ÁGILES, EL PROCESO UIX Prototipado workflow, sketching y wireframing
 Introducción a sketch, adobe xd, marvel y mockup HERRAMIENTAS UX/UI Por naturaleza somos curiosos y buscamos un equilibrio entre lo que conocemos y lo que es incierto OBSERVACIONES DE INTERFACES Invertir en UX es la mejor opción que tienen los productos para diferenciarse de la competencia MINIMUM VIABLE PRODUCT A las personas nos tranquilizan los patrones, cuanto más organización mejor nos sentimos. DISEÑO Y PROTOTIPOS Es casi imposible trabajar en la experiencia de usuario sin tener en cuenta la interfaz de usuario, y viceversa DISPOSITIVOS Y ENTORNOS La experiencia de usuario está en evolución debido a la experiencia que adquirimos con el uso de la tecnología LO QUE REALMENTE IMPORTA El diseño emocional está orientado a las personas, la emoción es repentina, intensa y de corta duración DISEÑANDO PARA PERSONAS 06 05 08 07 02 01 04 03
  4. 4. Taller UX Design 4 Lo que realmente IMPORTA Los patrones de interacción básicos se van heredando y muchos usuarios ya han nacido nativos digitales, no nos tendremos que 
 detener tanto en explicar las cosas. CARMEN HEVIA 01
  5. 5. Taller UX Design 5 Arquitectura de la información (AI) La arquitectura de la información determina la organización de la información con el objetivo de motivar al usuario a explorar los contenidos y funcionalidades. Una correcta arquitectura de información es aquella que permite al usuario encontrar la información que necesita. Tres aspectos: 1. El Contexto 2. El Contenido 3. El Usuario
  6. 6. Taller UX Design 6 Contexto del usuario No podemos predecir cómo una persona usará un producto ya que la depende de muchos factores. Pero el contexto del usuario tiene que tenerse en cuenta antes del diseño y las restricciones que conlleva son positivas para mejorar la experiencia de usuario. Y así poder estar más cerca de lo que realmente importa. Experiencia presente MOTIVACIÓN CONTEXTO ACTION Expectativas Experiencia previa Más experiencia Expect. Diferentes DONALD NORMAN
  7. 7. Taller UX Design 7 III. CONTEXTO Ya tenemos un menú adaptado a nuestro grupo de usuarios, ahora debemos considerar el contexto en que se realizará la cena. 
 Puedes elegir entre tres lugares: • Picnic durante una noche de verano. • En un restaurante para la ocasión. • En la casa de uno de tus amigos. Comentar cómo afecta el lugar, y realicen cambios en los platos para mejorar la experiencia de usuario del grupo. Una vez más intenten hacer los menores cambios posibles. I. SOLUCIÓN Vamos a preparar una cena para los amigos y tenemos que elaborar tres platos de comida: primero, segundo y postre. Crea un equipo mínimo de tres personas para elaborar el menú, puedes colocar cada elaboración en un pósit. Dedica 5 minutos para cada tarea. II. USUARIO Ahora hay que considerar si el menú es adecuado para un grupo de usuarios en concreto. 
 Puedes elegir entre tres grupos: • Niños y niñas de 8 años. • Estudiantes de 18 años. • Parejas recién casadas y sin hijos. El equipo debe realizar los cambios necesarios para ofrecerles una mejor experiencia. No eliminen los primeros pósit, haga las modificaciones encima e intente hacer los menores cambios posibles. CONTEXTO DEL USUARIO Ejercicio
  8. 8. Taller UX Design 8 Ligeros cambios que cumplen los requisitos Ahora podemos analizar como el menú principal que teníamos pensado como la solución ha sufrido ligeros cambios con el fin de mejorar la experiencia de usuario 
 y sin embargo sigue cumpliendo con todos los requisitos. Además, durante la elección de los grupos o del lugar seguro que han aparecido estereotipos habituales como la comida para niños, la comida rápida para el picnic o los platos más elaborados de un restaurante. CONCLUSIÓN EJERCICIO 1
  9. 9. Taller UX Design 9 Cuando diseñamos un interfaz de usuario intentamos conducir al usuario, determinando las áreas de acción u opciones de qué dispondrá en cada pantalla y cómo responderá el producto a cada una de sus acciones. 
 
 Hay que tener en cuenta las brechas de interacción que ocurre cuando el usuario no es capaz de relacionar qué pretende hacer y cómo llevar a cabo la acción. Diseño de 
 interacción Un buen wireframe es aquel que comunica decisiones de diseño de forma precisa y eficaz a su audiencia.
  10. 10. Taller UX Design 10 Usabilidad es facilidad de uso La usabilidad es un atributo de calidad de un producto que se refiere sencillamente a su facilidad de uso.
 ¿Cómo de difícil resulta al usuario realizar tareas básicas? ¿Cuánto tardan en realizar las tareas? ¿Cuántos errores comente el usuario?,
 ¿Cómo rectifica? El atractivo visual de un producto hace que el usuario lo perciba como más fácil de usar, aún cuando no lo es
  11. 11. Taller UX Design 11 Diseño y Prototipado Si nos vemos obligados a explicar como usar algo, probablemente es porque se 
 encuentre mal diseñado. Hassan Montero, Y. 02
  12. 12. Taller UX Design 12 El espacio y la composición son fundamentales para hacer las interfaces atractivas y sencillas MARGIN/PADDING Espacios Recuerda que cuando algo falla, estamos dirigiendo el mensaje a personas ERROR/OOPS Excepciones Los colores resultan muy útiles para reforzar
 el significado de elementos de la interfaz RGBA/HEX Colores Los siguientes principios se centran en la confección de mensajes visuales, que junto al espaciado y la composición proporcionan a los usuarios una clara visión de la interacción Principios del Diseño DISEÑO Y PROTOTIPOS
  13. 13. Taller UX Design 13 Uso del color en interfaces I Tiene una importante función comunicativa y utilizarlo de forma incorrecta puede llevar a problemas de usabilidad. Esto lo vemos en botones de acción, cuando vemos un botón rojo sabemos que algo va mal, cuando es un botón verde podemos continuar y si es un botón blanco nos genera dudas. 
 color: #FF0000; color: rgba(0,0,0,0.8); color: rgb(255,0,0); color: red; Una buena práctica es diseñar en blanco y negro, para añadir el color al final. Creativedash
  14. 14. Taller UX Design 14 Uso del color en interfaces II Número de Colores Limita la paleta de colores usa alrededor de cinco es suficiente, en función de la complejidad del diseño. 
 • http://www.materialpalette.com • https://flatuicolors.com • http://brandcolors.net • https://coolors.co Combinaciones de Color Utiliza colores complementarios. También es muy común utilizar combinaciones de colores que se hallan en la naturaleza. 
 Simbolismo Cada cultura dota a los colores significados distintos. Por lo tanto, ten en cuenta las combinaciones que utiliza según el público de destino. No dejes que el color distraiga a los usuarios.
  15. 15. Taller UX Design 15 Espacios, usa el blanco El espacio en blanco permite priorizar el contenido haciendo que se lea fácilmente. Da orden a los elementos de la interfaz y es esencial para conseguir que un diseño sea armónico y equilibrado. Utiliza bien los márgenes, paddings, letter spacing, interlineado y el espaciado entre columnas. Igor Chebotarev Gal Shir
  16. 16. Taller UX Design 16 Esta es una de las pantallas más negativas y con un buen uso del diseño emocional podemos conseguir que un error se convierta en una experiencia, en algo atractivo que invite a continuar navegando. Tener en cuenta cuando cargamos un listado de información previa a la selección de algún filtro o a la acción búsqueda SIN RESULTADOS, NO USAR EL ‘0’ Proporciona información previa suficiente referente a advertencias y utiliza un lenguaje sencillo para humanos MENSAJES Y FALLOS Nuestros productos contienen errores y forman parte del mismo, hay que minimizar el sentimiento negativo ERROR 404 Es muy importante cuidar la información relevante hasta en las pantallas vacías con el fin de guiar a la persona que interactúa y conseguir su atención. LISTAS VACÍAS
  17. 17. Taller UX Design 17 Definen aspectos generales del sistema
 sin entrar en detalles LOW-FIDELITY Lo-Fi Se representan aspectos más precisos
 y proporcionan los asset finales HIGHT-FIDELITY Hi-Fi Determinar muchos aspectos del análisis de requisitos y funcionalidades BOCETO Wireframes Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de un producto. Prototipado DISEÑO Y PROTOTIPOS
  18. 18. Taller UX Design 18 Bocetos y
 Wireframes Los wireframes especifican la relación entre arquitectura del producto y su aspecto gráfico. CONSEJOS PARA BOCETAR • Participación de equipo multidisciplinar • Planificación y costes. • Elimine elementos que distraigan. • Definición de funcionalidades básicas. • Identifica prioridades en el diseño. • Mide la viabilidad del proyecto.
  19. 19. Taller UX Design 19 Prototipos
 Lo-Fi Cuando tienes definido el concepto, entendido los casos de uso principales, y establecido la lista de funcionalidades, es hora de pensar en como va a ser la interfaz de usuario de la aplicación(UI)y el diseño de interacción(IxD). Creativedash Dmitriy Goncharov
  20. 20. Taller UX Design 20 Prototipos
 Hi-Fi Los prototipos de alta definición ofrecen la oportunidad de interaccionar con el interfaz de nuestro producto realizando así los primeros test de usabilidad. Budi Tanrim Virgil Pana
  21. 21. Taller UX Design 21 Herramientas
 Prototipado
  22. 22. Taller UX Design 22 Diseñando para PERSONAS Las emociones estimulan el sistema cognitivo. Importa el comportamiento emocional del usuario y la estética. 03 Las cosas atractivas funcionan mejor. DONALD NORMAN
  23. 23. Taller UX Design 23 Diseño 
 Emocional Interpreta el mundo, nos lleva a entender y aprender. SISTEMA COGNITIVO La primera impresión, es donde la apariencia importa. NIVEL VISCERAL Nos hace juzgar que esta bien y que está mal. SISTEMA AFECTIVO
  24. 24. Taller UX Design 24 La experiencia está más basada en la memoria que en la realidad Si lo que recuerdas del producto 
 es maravilloso, serás capaz de perdonar cualquier situación problemática DONALD NORMAN
  25. 25. Taller UX Design 25
  26. 26. Taller UX Design 26 Ayudar al usuario a centrarse en una tarea, gracias a la relación entre el aspecto, 
 posición y comportamiento El aprendizaje de ciertas interacciones ha hecho que consideremos la consistencia a la hora de diseñar la interfaz de nuestros productos. Hay ciertos elementos habituales que todos conocemos, por ejemplo el botón play, el icono papelera o la flecha hacia atrás. No hay que sorprender con cambios o comportamientos que no se esperan, pues implica que el usuario tenga que aprender nuevas metodologías o patrones 
 La consistencia en una interfaz permite a los usuario transferir conocimiento de una aplicación a otra. Consistencia y Percepción
  27. 27. Taller UX Design 27 Hay que informar al usuario de dónde está, qué pasa o qué va a pasar en cada momento Hay que tener en cuenta las listas vacías, los mensajes de confirmación o de error; así como tooltip o ventanas de ayuda tanto previas a la interacción como posterior. La información generada ante un problema es una
 nueva interacción. Mantener informado al usuario siempre
  28. 28. Taller UX Design 28 Un diálogo requiere que el usuario interactúe y diseñado para obtener una respuesta que puede ser confirmar que ha leído una información crítica, que debe tomar una decisión, o que implique multitarea.
 USOS DE DIÁLOGOS • Usar un leguaje entendible para todas las personas. • Evitar distraer e ir al grano, uso de fondos oscuros. • Evitar disculpas, ambigüedad o preguntas. • Evitar el uso de más información o link externos. João Oliveira Nick Babich Diálogos de interacción Daniela Alves Julia Vedenyapina
  29. 29. Taller UX Design 29 Dispositivos y ENTORNOS Ofrecer una experiencia consistente no significa ofrecer siempre lo mismo. Hay que tener en cuenta los multidispositivos y entornos. 04
  30. 30. Taller UX Design 30 Ley del pulgar y el dedo índice La forma en la que sujetamos los dispositivos marcan las áreas de interacción, aquí podemos observar como la zona inferior es más propicia para colocar los elementos de navegación. El color verde indica el área de un usuario puede llegar fácilmente; amarillo, un área que requiere un tramo; y rojo, un área que requiere que los usuarios a cambiar la forma en que están sosteniendo el móvil. Fácil Diseñar para los dedos, tocar
  31. 31. Taller UX Design 31 Busca la productividad del usuario, no del sistema. No todo el mundo usa móviles con una mano, hay gente que utiliza los dispositivos móviles cuando están de pie, caminando, en un autobús,
 o tumbado en la cama. El 40% de los usuarios solo navega, interactúan con el móvil sin introducir ningún dato a través del teclado o la pantalla. Cómo y cuándo se 
 usa un dispositivo 36% 15%49% How Do Users Really Hold Mobile Devices? STEVEN HOOBER
  32. 32. Taller UX Design 32 Hay que evitar realizar botones, o elementos de interacción, que sean demasiado pequeños, o que estén muy unidos entre sí, porque esto lo que causará es que se seleccione cosas por error, o que no se seleccione nada del todo. El área mínima de un botón debe ser mayor o igual de 44 x 44 pixeles, ese es el tamaño óptimo para que un dedo índice promedio pueda seleccionar algo fácilmente. En definitiva, hay que amplificar la zona pulsable alrededor de la acción. Focos de Interacción, amplifica la acción
  33. 33. Taller UX Design 33 Existen pocos gestos que sean universales, pero desde que el iPhone popularizó la tecnología 
 multi gesto se han ido adaptando y introduciendo 
 los gestos en el diseño de interacciones. Cuando utilizamos dispositivos como el ratón, los elementos que se ubican en las esquinas o bordes de la pantalla porque son más fácil de alcanzar. Gestos naturales para interactuar Users Know the Standard Gestures JULIAN BURFORD
  34. 34. Taller UX Design 34 Observaciones de
 Interfaces Un buen diseñador tiene que conseguir que su solución sea una idea contagiosa. César Astudillo 05
  35. 35. Taller UX Design 35 Empty Screen INTERFACES
  36. 36. Taller UX Design 36 Login INTERFACES
  37. 37. Taller UX Design 37 List INTERFACES
  38. 38. Taller UX Design 38 Tab Bar INTERFACES
  39. 39. Taller UX Design 39 Search INTERFACES
  40. 40. Taller UX Design 40 Setting INTERFACES
  41. 41. Taller UX Design 41 Metodologías Ágiles PROCESO UIX Muchos equipos tienen la capacidad para desarrollar proyectos, pero sólo unos pocos tienen la visión para crear un producto. JOSÉ ANTONIO LÓPEZ 06
  42. 42. Taller UX Design 42 Las metodologías ágiles se centran en ofrecer pequeños conjuntos de funciones de software lo más rápido posible 
 en interacciones cortas.
 Sprint 
 Son interacciones (mini-proyectos) de tiempo fijo. 
 Priorizar Hay que priorizar tareas al principio de cada sprint. 
 Entregas
 Cada sprint genera entregas de interacciones en la que interviene el cliente. Desarrollo Iterativo Scrum Desarrollo Tradicional Producto Terminado Cumple todas las necesidades y se ajusta a la realidad Producto Aceptable Cumple algunas necesidades ya
 que presenta desajustes Producto Incompleto No cumple las necesidades y no se ajusta a la realidad Principios de Scrum Comienzo Producto Final Producto Final Sprint 1 Sprint 3 Sprint 2 Sprint 4 Sprint 5 Sprint 6
  43. 43. Taller UX Design 43 LISTA DE OBJETIVOS — Product Backlog Tenemos un conjunto de funcionalidades, casos de uso o requisitos que están bien definidos y hay que priorizar. La valoración de los costes y priorización de cada uno de los casos de uso, usualmente la hace la dirección y el responsable 
 de equipo(dueño del producto), que tiene que ajustar en función de los recursos de que dispone más o menos funcionalidades para cada interacción. Hay que respetar el plazo firmado en el contrato para dar resultados, lo que si es variable es la cantidad de funcionalidades completadas que se van a entregar al final de cada interacción en función de los recursos disponibles. Organización METODOLOGÍAS ÁGILES
  44. 44. Taller UX Design 44 Organización METODOLOGÍAS ÁGILES LISTA DE TAREAS — Sprint Backlog Intervienen el responsable de equipo con su equipo multidisciplinar, compuesto en un desarrollo normal por: diseñadores, front end, programadores, analistas, sistemas y el responsable 
 experiencia de usuario. El objetivo es coger cada una de las funcionalidades requeridas, 
 e ir dividiéndolas en tareas a partir de un análisis multidisciplinar de cada funcionalidad y todas ellas valoradas entre 1 o 2 días de trabajo máximo y de forma individual. Las tareas tienen una disciplina concreta y dependencias de otras. Para determinar la conclusión de una tarea se usa la prueba de aceptación que indican si se considera finalizada.
  45. 45. Taller UX Design 45 PANEL DE TRABAJO — Pizarra y Posit Se utilizan posit para ayudar a distribuir las tareas de una manera cómoda, cada posit representa una tarea con su código de identificación, de tal manera que tenemos tres columnas originalmente: • Tareas pendientes • Tareas en Curso • Tareas Terminadas. Mediante esas tres columns se controla visualmente en que situación del proyecto nos encontramos. Este panel aporta un lugar donde el equipo se reúne para generar una dinámica de equipo y colaboración. Organización METODOLOGÍAS ÁGILES En horizontal se pone cada uno de los bloque de casos de uso que se ha acordado entregar para la fecha establecida, agrupando las tareas. En la columna central tenemos las tareas en curso que no deben estar más del tiempo previsto para su realización, si lleva más tiempo es que hay un problema. Esto nos permite conocer con exactitud que se está haciendo y cada miembro del equipo debe tener una tarea única. Si vas a coger una nueva tarea vuelves atrás, se la pasas a otro compañero o la terminas.
  46. 46. Taller UX Design 46 CICLO DE DESARROLLO Se estable una reunión diaria de tiempo estipulado al inicio o al final de cada jornada en la que todo el equipo, pone en común tres aspectos: 
 1. ¿Qué he estado haciendo el día anterior? 2. ¿Qué problemas me han surgido? 3. ¿Qué tengo previsto hacer? Estas reuniones tienen la función de detectar problemas, no para resolveros. Es muy importante establecer que cada persona tiene un tiempo limitado para intervenir, las reuniones no se pueden alargar y deben ser rápidas y concisas. Organización METODOLOGÍAS ÁGILES Este seguimiento continuo (daily meeting) es para que todo el equipo conozca lo que se está haciendo en cada etapa diaria 
 del desarrollo, de ese modo cuando haya problemas, cualquier miembro del equipo puede ayudar ya sea de la misma u otra disciplina. Los problemas se resolver tras la reunión con el fin de evitar bloqueos en el proyecto.
  47. 47. Taller UX Design 47 CIERRE DE CICLO 
 Lo más importante es asegurarse que todas las tareas están terminadas, se ha acabado el ciclo en los plazos establecidos y todas las tareas cumplen los test de aceptación. Al cierre de cada ciclo hay que hacer una reunión especifica para que cada miembro del equipo aporte su opinión de como ha trabajado en cada interacción, para que en los próximos ciclos se pueda mejorar la productividad o forma de trabajar. Finalmente se muestra el estado del proyecto a los dueños del proyecto y se obtiene un feedback junto al equipo de trabajo. Organización METODOLOGÍAS ÁGILES
  48. 48. Taller UX Design 48 Scrum Interacción #2 de SGX • 15 días de interacción • 10 casos de usos • 57 tareas • 280 horas • 3 trabajadores • Gráfica de productividad
  49. 49. Taller UX Design 49 Minimum viable PRODUCT El producto mínimo viable no es un producto definitivo o perfecto, irá mejorando y creciendo 07
  50. 50. Taller UX Design Además de ofrecernos información de los usuarios y la posibilidad de ir mejorando nuestro producto con cada iteración. 
 Ayuda a reducir tu producto al mínimo, con solo aquellas cosas que sean absolutamente básicas y no perder el tiempo en nada innecesario. La idea es que empieces por un producto bueno, aunque sea pequeño, pero además sabiendo con certeza que se puede utilizar. 50 Producto Mínimo Viable (MVP) Aprende Construye Mide Clientes Análisis 
 del Mercado Producto 
 Mínimo Viable Decisiones e Ideas
  51. 51. Taller UX Design 51 Proceso UX Comunicación Visual o Diseño SUPERFICIE Diseño de interfaz y navegación Wireframes ESQUELETO Diseño de interacción Arquitectura de Información ESTRUCTURA Funcionalidad, casos de uso y requerimientos ALCANCE Negocio y objetivos del producto ESTRATEGIA
  52. 52. Taller UX Design 52 Herramientas UX/UI La gente no sabe lo quiere, 
 hasta que se lo enseñas STEVE JOBS 08
  53. 53. Taller UX Design 53 Lo realmente difícil es comprender el comportamiento de los usuarios y crear un buen diseño visual en torno a eso con plazos ajustados en tiempo y en pruebas de usabilidad. EL DISEÑO IMPORTA
  54. 54. Taller UX Design GRACIAS 54 WWW.UIXCODE.COM UX DESIGN

×