Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción al Diseño de Interacción

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/).

Vero Rebagliatte

March 18, 2013
Tweet

More Decks by Vero Rebagliatte

Other Decks in Design

Transcript

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

    View full-size slide

  2. Vero Rebagliatte
    @rebagliatte
    rebagliatte.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 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 full-size slide

  6. ¿Con quién trabajamos?

    View full-size slide

  7. 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 full-size slide

  8. ¿Cómo lo hacemos?

    View full-size slide

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

    View full-size slide

  10. ¿Qué documentos producimos?

    View full-size slide

  11. 1. Prototipos

    View full-size slide

  12. Fidelidad baja Lápiz y papel
    ©BenchPrep

    View full-size slide

  13. Fidelidad media Wireframes
    ©BenchPrep

    View full-size slide

  14. Fidelidad Alta Prototipo o release
    ©BenchPrep

    View full-size slide

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

    View full-size slide

  16. 3. Flowcharts

    View full-size slide

  17. ¿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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. ¿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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. Gracias! ¿Preguntas?
    @rebagliatte

    View full-size slide