Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

IxDA BA Mobile 20 julio 2010

2.205 visualizaciones

Publicado el

Presentación para diseñadores y desarrolladores de aplicaciones móviles. Definiciones y conceptos esenciales de Diseño de Interacción, Proceso de diseño convergente, prototipado, niveles de fidelidad, pruebas con usuarios, prototipado iterativo, niveles de consistencia de la interfaz.

Expuesta el 20 de julio de 2010 en el aula magna de la UP, en evento MobileMonday TechTalks con la participación de Axel Meyer, Diseñador en Jefe de la Serie N de Nokia.

Publicado en: Diseño
  • Sé el primero en comentar

IxDA BA Mobile 20 julio 2010

  1. 1. Diseño de interacción y usabilidad en móviles <ul><li>Santiago Bustelo • Federico Campo Piombi </li></ul><ul><li>Presentación bajo licencia Creative CommonsAtribución 2.5 Argentina </li></ul>
  2. 2. IxDA (Interaction Design Association) <ul><li>Red global dedicada a la práctica profesional del Diseño de Interacción </li></ul><ul><li>Foro global, 20.000 miembros </li></ul><ul><li>En Buenos Aires: </li></ul><ul><ul><li>Encuentros </li></ul></ul><ul><ul><li>Charlas </li></ul></ul><ul><ul><li>Congresos </li></ul></ul><ul><ul><li>Cursos </li></ul></ul>
  3. 3. Diseño de Interacción <ul><li>Define el modelo de operación de productos interactivos para lograr mejores experiencias para la mayor cantidad de usuarios. </li></ul>
  4. 4. ¿Cuándo está terminado nuestro trabajo? <ul><li>Cuando nos gusta a nosotros </li></ul><ul><li>Cuando funciona como queríamos </li></ul><ul><li>Cuando le gusta al cliente </li></ul><ul><li>Cuando el usuario logra lo que esperábamos </li></ul>
  5. 5. Diseño de Interacción: Proceso
  6. 6. IxD: Proceso Proceso Lineal Proceso Convergente
  7. 7. IxD: Proceso <ul><li>Definición de requerimientos. </li></ul><ul><li>Diseño y desarrollo a nivel de producción. </li></ul><ul><li>Entrega. </li></ul>Proceso Lineal
  8. 8. IxD: Proceso <ul><li>Definición de requerimientos. </li></ul><ul><li>Diseño y desarrollo a nivel de producción. </li></ul><ul><li>Entrega. </li></ul><ul><li>No funciona como se esperaba, o no resuelve la problemática detectada. </li></ul><ul><li>Se modifica la funcionalidad. </li></ul><ul><li>No se modifican los deadlines. </li></ul>Proceso Lineal
  9. 9. IxD: Proceso <ul><li>Objetivos y análisis inicial. </li></ul><ul><li>Analizar el requerimiento y determinar la mejor solución. </li></ul><ul><li>Identificar definiciones faltantes al inicio u ongoing del proyecto, y no al final. </li></ul><ul><li>Asignar responsables de definiciones faltantes. </li></ul>Proceso Convergente
  10. 10. IxD: Proceso <ul><li>Objetivos y análisis inicial. </li></ul><ul><li>Diseño y Desarrollo en iteraciones </li></ul><ul><li>Cada etapa es validada antes de continuar con la siguiente. </li></ul><ul><li>Detección temprana de errores. </li></ul><ul><li>Visibilidad sobre tiempos y scope. </li></ul>Proceso Convergente
  11. 11. IxD: Proceso <ul><li>Objetivos y análisis inicial. </li></ul><ul><li>Diseño y Desarrollo en iteraciones avanzando progresivamente en: </li></ul><ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><li>Estructura y elementos </li></ul></ul><ul><ul><li>Lenguaje visual </li></ul></ul><ul><li>Entrega y puesta en producción. </li></ul>Proceso Convergente
  12. 12. IxD: Proceso <ul><li>Planeamiento de la iteración Definición del problema. Qué queremos aprender de esta iteración y cómo vamos a hacerlo. </li></ul><ul><li>Implementación Creación del prototipo con la fidelidad correcta </li></ul><ul><li>Prueba Obtenemos información que valida o descarta la solución. </li></ul><ul><li>Conclusiones y aprendizaje Qué funcionó o no, y por qué. </li></ul><ul><li>Jared Spool, Anatomy of an Iteration </li></ul>Iteraciones del Proceso Convergente
  13. 13. IxD: Objetivos del Proceso <ul><li>Externalizar y comunicar ideas para reflexionar sobre ellas. </li></ul><ul><li>Poner a prueba las ideas en contexto. </li></ul><ul><li>Validar requerimientos con stakeholders. </li></ul><ul><li>Validar la funcionalidad en el contexto de uso de la aplicación (mobile scenario). </li></ul><ul><li>Descubrir problemas y explorar nuevas direcciones. </li></ul><ul><li>Hacer esto en una fase del proyecto donde aún sea viable realizar cambios en el alcance. </li></ul>
  14. 14. IxD: Entregables del Proceso Sketch Wireframe Prototipo Interactivo Diseño gráfico de la interfaz
  15. 15. IxD: Entregables del Proceso Sketch <ul><li>Características: </li></ul><ul><ul><li>Fidelidad muy baja </li></ul></ul><ul><ul><li>Permiten opinar sin restricciones </li></ul></ul><ul><ul><li>Colaborar </li></ul></ul><ul><ul><li>Probar rápidamente conceptos generales </li></ul></ul><ul><li>Objetivo: </li></ul><ul><ul><li>Proponer Estructura espacial </li></ul></ul><ul><ul><li>Proponer Interactividad </li></ul></ul><ul><ul><li>Proponer Funcionalidad </li></ul></ul>
  16. 16. IxD: Entregables del Proceso Wireframe <ul><li>Características: </li></ul><ul><ul><li>Fidelidad baja a media </li></ul></ul><ul><ul><li>Realizar anotaciones </li></ul></ul><ul><ul><li>Documentar las definiciones </li></ul></ul><ul><li>Objetivo: </li></ul><ul><ul><li>Definir estructura espacial </li></ul></ul><ul><ul><li>Definir áreas de contenido </li></ul></ul><ul><ul><li>Definir funcionalidad (caso puntual mobile) </li></ul></ul><ul><ul><li>Definir flow de navegación </li></ul></ul><ul><ul><li>Permitir pruebas con usuarios </li></ul></ul>
  17. 17. IxD: Entregables del Proceso Prototipo Interactivo <ul><li>Características: </li></ul><ul><ul><li>Fidelidad media a alta </li></ul></ul><ul><ul><li>Testear experiencia de uso sin haber desarrollado la aplicación </li></ul></ul><ul><li>Objetivo: </li></ul><ul><ul><li>Proveer mecanismo para validar flow + interacción </li></ul></ul><ul><ul><li>Permitir pruebas con usuarios </li></ul></ul>
  18. 18. IxD: Entregables del Proceso Diseño gráfico de la interfaz <ul><li>Características: </li></ul><ul><ul><li>Fidelidad alta </li></ul></ul><ul><ul><li>Documentar las decisiones </li></ul></ul><ul><li>Objetivo: </li></ul><ul><ul><li>Alinear estética de interfaz validada </li></ul></ul><ul><ul><li>Recursos gráficos para implementación </li></ul></ul>
  19. 19. IxD: Conclusión <ul><li>¿Qué ganamos incorporando IxD a nuestro workflow? </li></ul><ul><ul><li>Validar funcionalidad, interacción y flujo de la aplicación </li></ul></ul><ul><ul><li>Identificar key issues en una etapa temprana del proyecto </li></ul></ul><ul><ul><li>Documentar las definiciones </li></ul></ul><ul><ul><li>Herramientas de testeo previas al desarrollo </li></ul></ul><ul><ul><li>Salud </li></ul></ul>
  20. 20. Pruebas con usuarios: Validación de la interacción
  21. 21. Diseño centrado en el Usuario versus: <ul><li>Diseño autoreferencial </li></ul><ul><li>Diseño centrado en la tecnología </li></ul><ul><li>Diseño centrado en el stakeholder </li></ul><ul><li>Diseño centrado en la competencia </li></ul>
  22. 22. ¿Qué es un Usuario? <ul><li>No está viciado por el ejercicio de la profesión ni por el proceso de conceptualización. </li></ul><ul><li>Tiene o puede representar intención de usar la interfaz para lograr un objetivo. </li></ul><ul><li>Tiene o puede representar el modelo mental del público al que está destinada la interfaz. </li></ul><ul><li>No necesita ser una muestra demográfica. </li></ul><ul><li>“ La prueba con el usuario no tiene que ser perfecta.
Tiene que existir” (Jared Spool) </li></ul>
  23. 23. Incorporando al Usuario <ul><li>La diferencia entre probar nuestras hipótesis con cero usuarios, vs. hacerlo con un solo usuario, es infinita. </li></ul><ul><li>Pruebas rápidas y de gran impacto cualitativo. </li></ul><ul><li>No se toman requerimientos del usuario. Nos enfocamos en lo que el usuario hace. </li></ul>Jakob Nielsen: Why You Only Need to Test with 5 Users
  24. 24. Prototipado iterativo Rodolphe Courtier: Mobilist
  25. 25. Pruebas con usuarios Lin Lin Designs: Explore Chicago
  26. 26. Prototipo funcional
  27. 27. Laboratorio de usabilidad Fuentes: Usability Sciences , UserCentric , Design4Mobile
  28. 28. Consistencia
  29. 29. Mobile IxD <ul><li>Aplicaciones móviles deben ser consistentes con: </li></ul><ul><ul><li>el Hardware del dispositivo/plataforma </li></ul></ul><ul><ul><li>el GUI del dispositivo/plataforma </li></ul></ul><ul><ul><li>el GUI de la misma aplicación </li></ul></ul><ul><ul><li>el Contexto de Uso </li></ul></ul>
  30. 30. Mobile IxD: Consistencia <ul><li>Consistencia con el Hardware: </li></ul>Touchscreen Teclado QWERTY (físico, landscape) GPS WiFi Cámara Teclado QWERTY (físico, vertical) GPS WiFi Cámara Touchscreen WiFi Cámara Teclado Estándar GPS WiFi Cámara
  31. 31. Mobile IxD: Consistencia <ul><li>Consistencia con el Hardware: </li></ul><ul><li>En función del hardware de cada dispositivo soportado… </li></ul><ul><ul><li>¿Habrá variaciones de interfaz ? </li></ul></ul><ul><ul><li>¿Habrá variaciones en el flow ? </li></ul></ul><ul><ul><li>¿Habrá variaciones de funcionalidad ? </li></ul></ul>
  32. 32. Mobile IxD: Consistencia <ul><li>Consistencia con el Hardware: </li></ul><ul><li>¿Porqué podría variar la interfaz ? </li></ul><ul><ul><li>Porque tengo mayor resolución de pantalla </li></ul></ul><ul><ul><li>Porque varían los guidelines de UI del dispositivo </li></ul></ul>
  33. 33. Mobile IxD: Consistencia <ul><li>Consistencia con el Hardware: </li></ul><ul><li>¿Porqué podría variar el flow de navegación ? </li></ul><ul><ul><li>Porque varía la interfaz y puedo resolver una mecánica en más o menos pasos. </li></ul></ul><ul><ul><li>Porque varía el hardware, y necesito por ej. que el usuario ingrese su ubicación en vez de obtenerla por GPS. </li></ul></ul>
  34. 34. Mobile IxD: Consistencia <ul><li>Consistencia con el Hardware: </li></ul><ul><li>¿Porqué podría variar la funcionalidad ? </li></ul><ul><ul><li>Porque no dispongo de un hardware determinado (GPS, cámara, acelerómetro, multitouch) </li></ul></ul>
  35. 35. Mobile IxD: Consistencia <ul><li>Consistencia con el GUI del dispositivo/plataforma: </li></ul>Forum Nokia, Design and User Experience Library v2.0
  36. 36. Mobile IxD: Consistencia <ul><li>Consistencia con el GUI de la propia Aplicación: </li></ul>
  37. 37. Mobile IxD: Consistencia <ul><li>Consistencia con el Contexto de Uso </li></ul>
  38. 38. Mobile IxD: Conclusión <ul><ul><li>No perder de vista el objetivo principal de la aplicación </li></ul></ul><ul><ul><li>No perder de vista al usuario de esa aplicación </li></ul></ul><ul><ul><li>No inventar la rueda: </li></ul></ul><ul><ul><ul><ul><li>Utilizar patrones de diseño conocidos y probados </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Aplicar los guidelines de GUI de la plataforma </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Verificar los checklists de la plataforma </li></ul></ul></ul></ul><ul><ul><li>En la medida de lo posible, testear con usuarios </li></ul></ul>
  39. 39. ¡Muchas gracias! <ul><li>ixda.com.ar </li></ul>

×