Fundamentos de UX

Transcript

1. Fundamentos UI/UX @supeergabs
2. ¡Hola soy Gabs! UX Designer Vivo en México Me gusta el café y los perritos @supeergabs
3. Agradecimiento a Darshana
4. Aprenderemos los fundamentos de UX / UI Design y cómo aplicarlos en tu desarrollo profesional. ¿De qué va la clase? Si tienes dudas compártelas en el chat :-) Hagamos un espacio seguro para todas y todos.
5. Diferencia entre la UX y el UI Design
6. Conceptos claves para entender la UX Necesidades del usuario Tecnología Objetivos de negocio UX Experiencia de usuario: UX por sus siglas en inglés User eXperience
7. ¿Han escuchado del diseño centrado en el usuario (DCU)? User-Centered-Design
8. Diseño centrado en el usuario • El diseño centrado en el usuario (DCU) es un enfoque para crear nuevas soluciones. • Comienza con los seres humanos y termina con las respuestas que se adaptan a sus necesidades. https://uxplanet.org/user-centered-design-process-and-benefits-fd9e431eb5a9
9. Fundamentos de UX
11. Diferentes fases de la UX Diagrama de James Garret Experiencia de usuario
12. Antes de comenzar debemos tener claro lo siguiente: • Las necesidades que el sistema debe resolver para el usuario. • Toda experiencia debe tener un propósito claro. • Estrategia derivada de la perspectiva del negocio y del usuario. Necesidades de usuario / Investigación
13. Crea un documento que incluya la información • Google Docs • Notion Necesidades de usuario / Investigación Ejemplo: https://www.notion.so/Shaping-template-102e 082d09be4d7e8c4e93b92f8f115f
14. • Funcionalidades: Son las tareas que el sistema debe cumplir y alcanzar los objetivos de negocio. • Contenido: Identificar la cantidad de imágenes, gráficas, textos, secciones, en general todo el contenido que se tiene que generar. Funcionalidades y contenido
15. Funcionalidades Contenido Descripción de tareas Expectativas Resultados Flujos Imágenes Videos Textos Gráficos
16. Imágenes • https://unsplash.com/es • https://www.freepik.com/popular-photos • https://stock.adobe.com/mx/
17. Iconos • https://fonts.google.com/icons • https://heroicons.com/ • https://developer.apple.com/sf-symbols/
18. Ilustraciones • https://undraw.co/ • https://www.freepik.com/
19. Textos • Notion • Google docs
20. En esta capa se definen los sistemas de navegación, jerarquía y búsqueda. Esta capa se divide en: • Arquitectura de información • Diseño de interacción Diseño de interacción y arquitectura de la información
21. Arquitectura de la información
22. Arquitectura de la información
23. El diseño de interacción responde a ¿Cómo las personas van a interactuar con el sistema? Diseño de interacción Definimos si habrá: • Botones • Scroll • Sliders • Contadores • Mensajes de error • Pantallas de carga ¡Todo a nivel funcional - lo estético aún no!
24. Diseño de interacción
25. En esta capa se comienzan a hacer los wireframes o primeros bocetos del sistema. Diseño de interfaz y navegación El objetivo de esta fase es: • Visualizar los contenidos ya interactuando con otros. • Asegurar que la solución que se propone es funcional y cumple con los objetivos de usuarios y negocio.
26. Diferentes entregables a un nivel progresivo, para ir validando ideas. Diseño de interfaz y navegación Un buen wireframe debe cumplir lo siguiente: • La información que se verá en pantalla. • Cómo y dónde estarán los elementos interactivos. • Cómo se navega entre los distintos contenidos. • El contenido debe ser claro y facilitar que se cumplan las tareas.
27. Puedes usar Whimsical o Figma
28. En esta capa definiremos los componentes visuales, los colores, las tipografías y otros elementos de diseño visual. Diseño visual El objetivo de esta fase es: • Cuáles componentes serán interactivos. • El sistema sea congruente a nivel experiencia.
29. Diseño visual
30. Superficie
31. Diseño visual
33. Recursos https://speakerdeck.com/supergabs
34. Ejercicio
35. • Elige una app • Identifica cuál es el proceso que más te molesta • Piensa ¿Cómo la mejorarías? • Describe tu solución o dibuja • Comparte en Twitter @darshana @supeergabs #FundamentosUX Ejercicio
36. Recursos • About face • Don’t make me think • The design of everyday things • Universal Principles of Design • Hooked • https://www.nngroup.com/
37. ¿Preguntas?