Fundamentos de UX

Transcript

1. Fundamentos UI/UX
   @supeergabs
   

   View Slide

2. ¡Hola soy Gabs!
   UX Designer
   Vivo en México
   Me gusta el café y los perritos
   @supeergabs
   

   View Slide

3. Agradecimiento a Darshana
   

   View Slide

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.
   

   View Slide

5. Diferencia entre la UX y el UI Design
   

   View Slide

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
   

   View Slide

7. ¿Han escuchado del
   diseño centrado en el
   usuario (DCU)?
   User-Centered-Design
   

   View Slide

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
   

   View Slide

9. Fundamentos de UX
   

   View Slide

10. View Slide

11. Diferentes fases de la UX
    Diagrama de James Garret
    Experiencia de usuario
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Funcionalidades
    Contenido
    Descripción de
    tareas
    Expectativas
    Resultados
    Flujos
    Imágenes
    Videos
    Textos
    Gráficos
    

    View Slide

16. Imágenes
    ● https://unsplash.com/es
    ● https://www.freepik.com/popular-photos
    ● https://stock.adobe.com/mx/
    

    View Slide

17. Iconos
    ● https://fonts.google.com/icons
    ● https://heroicons.com/
    ● https://developer.apple.com/sf-symbols/
    

    View Slide

18. Ilustraciones
    ● https://undraw.co/
    ● https://www.freepik.com/
    

    View Slide

19. Textos
    ● Notion
    ● Google docs
    

    View Slide

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
    

    View Slide

21. Arquitectura de la información
    

    View Slide

22. Arquitectura de la información
    

    View Slide

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!
    

    View Slide

24. Diseño de interacción
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

27. Puedes usar Whimsical o Figma
    

    View Slide

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.
    

    View Slide

29. Diseño visual
    

    View Slide

30. Superficie
    

    View Slide

31. Diseño visual
    

    View Slide

32. View Slide

33. Recursos
    https://speakerdeck.com/supergabs
    

    View Slide

34. Ejercicio
    

    View Slide

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
    

    View Slide

36. Recursos
    ● About face
    ● Don’t make me think
    ● The design of everyday things
    ● Universal Principles of Design
    ● Hooked
    ● https://www.nngroup.com/
    

    View Slide

37. ¿Preguntas?
    

    View Slide