Principios UX Design

Transcript

1. Principios
   UX Design
   

   View Slide

2. ¡Hola!
   SOY GABRIELA MUÑOZ
   UI/UX Designer - Mariachi IO
   Community Organizer - Technovation Girls
   Coffee lover, Geek and Friendly.
   

   View Slide

3. ¿Qué es UX y por qué importa?
   Nos importan las emociones
   

   View Slide

4. La práctica de diseñar un producto que haga al usuario feliz y efectivo en sus metas.
   

   View Slide

5. Un proceso centrado en el usuario.
   Descubre Diseña Válida
   

   View Slide

6. Descubre
   Lo primero es conocer a tu usuario!
   

   View Slide

7. ● Observación
   ● Entrevistas
   ● Encuestas
   ● Pruebas de usabilidad
   Una vez recopilada la información
   puedes pasar al siguiente paso.
   Métodos de obtener información
   

   View Slide

8. Crea personas
   Son rápidas de desarrollar,
   considera lo siguiente:
   ● Necesidades
   ● Deseos
   ● Se describen con precisión y
   detalle para ser más realistas.
   

   View Slide

9. Crea personas
   ● Datos Demográficos
   ● Datos Análitica
   ● Variables de Comportamiento
   ● Componentes de persona
   

   View Slide

10. Crea User Journey
    Cronología de interacciones o puntos de contacto durante el uso del producto.
    Puede representarse en el presente o futuro del producto.
    

    View Slide

11. Crea User Journey
    

    View Slide

12. Generación de Ideas y Soluciones
    Determina como va ser el producto y qué funciones debe ofrecer. Describe y dibuja
    ideas. Se busca dar soluciones a las necesidades y deseos del usuario, identificando
    cuales son las de mayor prioridad.
    ¡MANOS A LA OBRA!
    

    View Slide

13. Arquitectura de la Información
    ● Describe en un diagrama la estructura de tu producto.
    ● Visualiza a dónde te lleva cada uno de los botones, cada página.
    

    View Slide

14. Plasma tus ideas
    Wireframes, sketches en
    blanco y negro.
    ¡Siempre Dibuja!
    

    View Slide

15. Prototipos
    Versión interactiva del producto.
    Mockups: diseño visual detallado y estático.
    Invision - Zeplin - Azure RP - Figma
    

    View Slide

16. Usabilidad
    ● Visibilidad del estatus del sistema
    ● Consistencia entre el sistema y el mundo real.
    ● Control y libertad para el usuario
    ● Prevención de errores
    ● Reconocimiento antes de recuerdo
    

    View Slide

17. Diseño visual
    ● Peso visual (contraste y tamaño)
    ● Significado del color
    ● Psicología del color
    ● Repetición
    ● Patrones visuales
    ● Guías de estilo
    

    View Slide

18. Valida
    Identifica que está bien y que se puede
    mejorar!
    

    View Slide

19. Algunos métodos de validación
    A/B Testing
    Compara dos opciones de diseño con ciertas
    variaciones.
    

    View Slide

20. ¡A trabajar!
    

    View Slide

21. App Financiera - Bancomer- Santander- Banorte.
    Web Viajes - Expedia, Best Travel, Mundo Joven.
    Identifica un problema en una app!
    

    View Slide

22. Actividades
    Identifica la funcionalidad que te enoja!
    ¿Cómo la mejorarías?
    Describe tu solución
    Dibuja
    Comparte
    

    View Slide

23. Recomendaciones
    About Face: The Essentials
    of Interaction Design
    

    View Slide

24. ¡Gracias!
    @supeergabs
    

    View Slide