Introducción al Diseño de Interacción

Se presentan conceptos básicos de IxD, definimos la disciplina, con quién trabajamos, con qué metodologías, qué documentos producimos y finalmente cómo validamos nuestro trabajo.

Esta charla tuvo lugar en la primer meetup de IxDA Montevideo (http://www.meetup.com/Interaction-design-Uruguay/).

Transcript

1. Introducción al Diseño de Interacción
   Verónica Rebagliatte
   

   View Slide

2. Vero Rebagliatte
   @rebagliatte
   rebagliatte.com
   

   View Slide

3. Forecast
   

   View Slide

4. Vista de Águila de
   conceptos de IxD Ver lo que se nos viene
   

   View Slide

5. ¿Qué es el Diseño de Interacción?
   

   View Slide

6. Interaction Design (IxD) defines the
   structure and behavior of interactive
   systems.
   Interaction Designers strive to create
   meaningful relationships between
   people and the products and
   services that they use, from
   computers to mobile devices to
   appliances and beyond.
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. ¿Con quién trabajamos?
    

    View Slide

14. Equipo multidisciplinario: Colaboración
    • Diseñadores gráficos/web
    • Copy editors
    • Arquitectos de información
    • Marketers
    • Psicólogos
    • Ingenieros/programadores
    • Managers
    • Clientes
    • Usuarios finales
    

    View Slide

15. ¿Cómo lo hacemos?
    

    View Slide

16. Metodologías
    • Waterfall
    Requerimientos, diseño, implementación, verificación, mantenimiento
    • Agile
    Sprints, las necesidades del cliente cambian
    • Lean
    Build, measure, learn
    • Custom
    

    View Slide

17. ¿Qué documentos producimos?
    

    View Slide

18. 1. Prototipos
    

    View Slide

19. Fidelidad baja Lápiz y papel
    ©BenchPrep
    

    View Slide

20. Fidelidad media Wireframes
    ©BenchPrep
    

    View Slide

21. Fidelidad Alta Prototipo o release
    ©BenchPrep
    

    View Slide

22. 2. Sitemaps
    Home Tienda Mujeres
    Mi Cuenta
    Hombres
    Niños
    Soporte
    Mi perfil
    Ordenes
    

    View Slide

23. 3. Flowcharts
    

    View Slide

24. 4. Personas
    

    View Slide

25. ¿Qué son las personas?
    • Arquetipos de usuarios, representan necesidades especificas de los
    individuos
    • Se basan en patrones de conducta observados en la investigación
    • Herramientas que nos permiten pensar en gente real
    • Se generan a partir de la investigación, muchas veces los equipos de
    marketing lo hacen junto con la segmentación de mercado, si no se basan en
    investigación son solo provisional personas
    

    View Slide

26. http://www.flickr.com/photos/jasontravis/
    

    View Slide

27. http://www.flickr.com/photos/jasontravis/
    

    View Slide

28. http://www.flickr.com/photos/jasontravis/
    

    View Slide

29. ¿Cómo medimos/validamos lo que hacemos?
    

    View Slide

30. ¿Cómo medimos/validamos lo que hacemos?
    • Inspección de Usabilidad
    • Paseo Cognitivo (Cognitive Walkthrough)
    • Evaluación Heurística (Heuristic Evaluation)
    • Pruebas con usuarios (User testing) presencial o remoto
    • Métricas
    • Analytics
    • A/B Testing
    

    View Slide

31. Paseo Cognitivo
    • ¿Siendo realista, el usuario va a intentar hacer esta acción?
    • ¿El control para realizar esta acción está visible?
    • ¿Hay un enlace obvio entre el control y lo que va a pasar?
    • ¿El feedback es apropiado?
    Uno o más profesionales van por las tareas principales de un sistema, y a
    cada paso se hacen 4 preguntas sobre lo que esperan de la conducta de
    los usuarios:
    

    View Slide

32. Evaluación Heurística
    • Visibilidad del estado del sistema
    • Paralelismo entre el sistema y el
    mundo real
    • Control y libertad para el usuario
    • Consistencia y estándares
    • Prevención de errores
    • Flexibilidad y eficiencia de uso
    • Reconocimiento antes que
    memoria
    • Estética y diseño minimalista
    • Ayuda para recuperarse de un error
    • Ayuda y documentación
    3-5 profesionales evaluan el sistema en cuanto a principios de usabilidad
    establecidos, las heurísticas. Las siguientes son las de Nielsen:
    

    View Slide

33. View Slide

34. Pruebas con Usuarios
    • Participan usuarios reales con tareas reales. El objetivo es observarlos
    interactuando con el sistema para descubrir errores y áreas de mejora.
    • Se mide como responden los usuarios al sistema en 4 áreas:
    • Eficiencia: ¿Cuánto tiempo y cuántos pasos le llevó la tarea?
    • Exactitud: ¿Cuántos errores cometió?
    • Recuerdo: ¿Cuánto se acuerda la persona luego de tiempo de no usarlo?
    • Respuesta emocional: ¿Cómo se siente el usuario al terminar la tarea?
    

    View Slide

35. Pruebas con usuarios (...continuación)
    • Elegir a los usuarios
    • “Estamos evaluando el sistema y no a vos”
    • Plantear una tarea y proponer un protocolo “think aloud”
    • Observar en lugar de preguntar
    • Registrar el momento
    • Puede ser presencial o remoto (sincrónico o asincrónico)
    

    View Slide

36. Analytics y A/B Testing
    • Ambas proporcionan datos cuantitativos sobre sistemas que están “en vivo”
    • Analytics: Considerar cambios en las métricas en cada iteración y reaccionar
    a ellos
    • En A/B Testing o Split testing se comparan dos versiones (A y B) y se ve cuál
    lleva a más conversions. Un caso típico es aplicarlo en el funnel de compra
    

    View Slide

37. Conclusión
    • La Evaluación Heurística y el Paseo Cognitivo son análisis teóricos
    conducidos por expertos
    • El test de usabilidad es una medida objetiva y empírica de la usabilidad de un
    sistema
    • Los analytics y A/B testing aportan datos cuantitativos sobre sistemas en
    vivo
    • Todos son complementarios y se usan en etapas diferentes
    

    View Slide

38. Resumen
    • Definimos IxD
    • Vimos una panorámica de
    • con quién trabajamos
    • qué metodologías usamos
    • qué documentos producimos
    • cómo validamos/medimos lo que hacemos
    

    View Slide

39. Gracias! ¿Preguntas?
    @rebagliatte
    

    View Slide