Usabilidad para Móviles

1,134 views
1,088 views

Published on

Presentación por el Ingeniero Juan Carlos Marino, Universidad del Norte.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,134
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Usabilidad para Móviles

  1. 1. Usabilidad en el diseño deAplicaciones Móviles Por: Juan C Marino @ 2011 - Juan Carlos Marino
  2. 2. Quien soy•  Ingeniero de Sistemas – Universidad del Norte – Barranquilla.•  Master Certificate in IS/IT Project Management – Villanova University – Estados Unidos.•  +20 años desarrollo de software.•  +14 años Ecosistema Móvil.•  Experiencia Internacional. @ 2011 - Juan Carlos Marino
  3. 3. AgendaIntroducciónCapas UX Móvil.Criterios de DiseñoValidación del DiseñoErrores cómunesEjemplo@ 2011 - Juan Carlos Marino
  4. 4. @ 2011 - Juan Carlos Marino
  5. 5. @ 2011 - Juan Carlos Marino
  6. 6. INTRODUCCIÓN @ 2011 - Juan Carlos Marino
  7. 7. Usabilidad•  Efectividad. –  Capacidad de completar tareas.•  Eficiencia. –  Esfuerzo necesario para completarlas.•  Satisfacción. –  Gusto percibido durante interacción. @ 2011 - Juan Carlos Marino
  8. 8. Condicionantes•  Perfil.•  Objetivos.•  Contexto. @ 2011 - Juan Carlos Marino
  9. 9. Retos•  Distracción o prisa.•  Interrupciones.•  Pago por servicio.•  Percepción de seguridad.•  Optimización para voz.•  Tareas concretas. @ 2011 - Juan Carlos Marino
  10. 10. Porqué•  Entorno repleto de distracciones. @ 2011 - Juan Carlos Marino
  11. 11. Porqué•  Dispositivos heterógeneos. –  Capacidades de hardware. –  Opciones de SO. –  Disponibilidad. @ 2011 - Juan Carlos Marino
  12. 12. Teclado numérico y Joystick @ 2011 - Juan Carlos Marino
  13. 13. Teclado seminumérico y ball @ 2011 - Juan Carlos Marino
  14. 14. Cursor@ 2011 - Juan Carlos Marino
  15. 15. Táctil (multi-touch) @ 2011 - Juan Carlos Marino
  16. 16. Teclado completo + ball @ 2011 - Juan Carlos Marino
  17. 17. Teclado completo y táctil @ 2011 - Juan Carlos Marino
  18. 18. CAPAS UX MOVIL @ 2011 - Juan Carlos Marino
  19. 19. Idea: Inspiración Necesidades: Qué hacerContexto: Valor añadido al cliente, el modo en que la información es consumida Estrategia: Como añadimos valor a nuestro Negocio Plan de dispositivos Diseño: Experiencia de usuario Prototipo: Probar en contexto Desarrollo: Poner todas las piezas juntas Probar, Probar, … y probar un poco más Optimizar: Reducir a su mínimo tamaño Portar: Adaptar para otros dispositivos @ 2011 - Juan Carlos Marino
  20. 20. CRITERIOS DE DISEÑO @ 2011 - Juan Carlos Marino
  21. 21. REGLA # 1OLVIDE LOQUE CREEQUE SABE @ 2011 - Juan Carlos Marino
  22. 22. Consideraciones•  Personal.•  Siempre al alcance de la mano. –  80% del tiempo. –  Primera cosa que se ve al levantar. –  Última cosa que se ve al acostarse. –  Mas importante. @ 2011 - Juan Carlos Marino
  23. 23. Recomendaciones ü No asuma una necesidadü Resuelva un problema real @ 2011 - Juan Carlos Marino
  24. 24. Los hombres son de marteLas mujeres son de venus @ 2011 - Juan Carlos Marino
  25. 25. @ 2011 - Juan Carlos Marino
  26. 26. @ 2011 - Juan Carlos Marino
  27. 27. REGLA # 2 CONTEXTO OBJETIVOSNECESIDADES @ 2011 - Juan Carlos Marino
  28. 28. Consideraciones•  Quienes son los usuarios. –  Que sabe de ellos? –  Que comportamiento puede predecir? –  Cultura?•  Que está sucediendo? –  Están en línea? –  Circunstancias para que usuario absorba contenido de mejor manera. @ 2011 - Juan Carlos Marino
  29. 29. Consideraciones•  Cuando interactuarán? –  En casa y con gran cantidad de tiempo? –  En trabajo y con períodos cortos de tiempo? –  Períodos libres mientras se espera por algo?•  Donde están los usuarios? –  Espacio público o privado? –  Adentro o afuera? –  Día o noche? @ 2011 - Juan Carlos Marino
  30. 30. Consideraciones•  Porqué usarán la app? –  Que valor obtienen?•  Cómo usan su dispositivo móvil? –  Lo mantienen en la mano? –  Lo mantienen en el bolsillo?•  Cómo lo sostienen? –  Abierto o cerrado? –  Horizontal o vertical? @ 2011 - Juan Carlos Marino
  31. 31. Recomendaciones•  No esté solamente en línea.•  Datos recuperados = caché.•  Mostrar el último estado conocido.•  Haga y apruebe el TEST DEL PING PONG.•  Interrupciones. @ 2011 - Juan Carlos Marino
  32. 32. Recomendaciones•  No favorezca la marca sobre los usuarios. –  Evite elementos que impiden uso inmediato de la aplicación. •  Logo. •  Ventana de acerca de. •  Pantalla splash. @ 2011 - Juan Carlos Marino
  33. 33. Recomendaciones•  No cargue mucho ni muy rápido. –  Períodos cortos de atención. –  Períodos de actividad intensa. –  Cargar en pequeños bloques y sólo cuando se necesita. –  Que sea interrumpible. @ 2011 - Juan Carlos Marino
  34. 34. @ 2011 - Juan Carlos Marino
  35. 35. REGLA # 3NO PUEDESOPORTAR TODO @ 2011 - Juan Carlos Marino
  36. 36. Consideraciones•  Navegadores móviles no son los mismo que navegadores desktop (PC). –  No están estandarizados.•  Flash no está disponible en iOS.•  Soporte a formatos de archivos multimedia.•  Características de dispositivos. @ 2011 - Juan Carlos Marino
  37. 37. @ 2011 - Juan Carlos Marino
  38. 38. Tener en cuenta capacidad de las pantallas actuales @ 2011 - Juan Carlos Marino
  39. 39. Colores@ 2011 - Juan Carlos Marino
  40. 40. Diversidad•  Es necesario diseñar para todos los tamaños de pantalla?•  Se necesita crear un diseño separado para cada variante?•  Por requerimiento se puede diseñar para un tamaño de pantalla / un dispositivo único. –  No es lo común. @ 2011 - Juan Carlos Marino
  41. 41. @ 2011 - Juan Carlos Marino
  42. 42. @ 2011 - Juan Carlos Marino
  43. 43. Problema de la densidad•  En PC la norma de facto de la industria es 85 ppi.•  Asus EE PC 900: 133 ppi•  iPhone: 160 ppi•  Nokia E60: 240 ppi @ 2011 - Juan Carlos Marino
  44. 44. @ 2011 - Juan Carlos Marino
  45. 45. Recomendaciones•  Determinar el rango de ppi que se debe soportar.•  Probar en todas para verificar que no se pierda detalle.•  Diseñar y definir elementos basados en unidades relativas (porcentajes).•  Android. –  Dip (160 dpi). @ 2011 - Juan Carlos Marino
  46. 46. Estrategias•  Definir grupos de dispositivos. Ejemplo: –  Diminuto: 84, 96, 101, 128, 130, 132. –  Pequeño: 160, 176. –  Medio: 208, 220, 240. –  Grande: 320, 360, 480+ –  PC: 800+ @ 2011 - Juan Carlos Marino
  47. 47. Estrategias•  Definir un diseño de referencia. –  Normalmente un tamaño medio.•  Permite. –  Mejoras progresivas. –  Manejar dispositivos con otros modelos de interfaz (touch). –  Ajustar el diseño para compensar limitaciones grandes. @ 2011 - Juan Carlos Marino
  48. 48. @ 2011 - Juan Carlos Marino
  49. 49. @ 2011 - Juan Carlos Marino
  50. 50. REGLA # 4 SIMPLE SIMPLEMAS SIMPLE @ 2011 - Juan Carlos Marino
  51. 51. Recomendaciones•  Dar información relevante.•  Usar abreviaturas.•  Escritura concisa.•  Acciones más importantes asociadas a softkeys.•  Vigilar espacios en blanco.•  Evitar contenido multimedia. @ 2011 - Juan Carlos Marino
  52. 52. Recomendaciones•  Estructura. –  Ancha. –  Baja.•  Iniciar con diseños probados. –  Experimente. –  Comparta información. @ 2011 - Juan Carlos Marino
  53. 53. @ 2011 - Juan Carlos Marino
  54. 54. REGLA # 5NO OLVIDARGUIAR A LOS USUARIOS @ 2011 - Juan Carlos Marino
  55. 55. Consideraciones•  El ambiente es distractivo. – Atención se comparte con otras actividades. @ 2011 - Juan Carlos Marino
  56. 56. Recomendaciones•  Ir de la mano con el usuario.•  Mostrar que se está haciendo durante la espera: –  Cargando datos… –  Actualización en progreso…•  Desplegar mensajes de error amigables e informativos. @ 2011 - Juan Carlos Marino
  57. 57. @ 2011 - Juan Carlos Marino
  58. 58. REGLA # 6NO C M R A O PIMEL MUNDO @ 2011 - Juan Carlos Marino
  59. 59. Recomendaciones•  Movilizar no minimizar.•  Pantallas pequeñas.•  Evite fuentes pequeñas y/o pixeladas.•  De suficiente espacio.•  Tenga en cuenta que pueden haber toques accidentales.•  Use el área más grande posible. @ 2011 - Juan Carlos Marino
  60. 60. @ 2011 - Juan Carlos Marino
  61. 61. REGLA # 7 NO HAGAESCRIBIR AUSUARIOS @ 2011 - Juan Carlos Marino
  62. 62. Consideraciones•  Teclado muy pequeño. – Optimizado para datos numéricos.•  Se necesitan dedos muy delgados.•  No hay retroalimentación sensorial. @ 2011 - Juan Carlos Marino
  63. 63. Recomendaciones•  Llene de antemano todo lo que pueda.•  Selección de opciones.•  Evitar escritura predictiva. –  Excepto si hay clara ventaja. @ 2011 - Juan Carlos Marino
  64. 64. Recomendaciones•  Navegación hacia atrás. –  Conservar información introducida anteriormente. –  Ahorrar pasos. •  Si hay transacciones confirmadas no mostrar.•  Cada pulsación empeora la usabilidad. @ 2011 - Juan Carlos Marino
  65. 65. @ 2011 - Juan Carlos Marino
  66. 66. @ 2011 - Juan Carlos Marino
  67. 67. REGLA # 8PROTOTIPOS @ 2011 - Juan Carlos Marino
  68. 68. Recomendaciones•  Idea = Puede estar mal.•  Poco tiempo = 1 día.•  Bosquejo = no completamente funcional.•  Iteración = Comprensión del problema.•  Código = Usar y tirar.•  Reuso = Presta código.•  Historia = Experiencia. @ 2011 - Juan Carlos Marino
  69. 69. REGLA # 9 USARCARACTERISTICAS DEL DISPOSITIVO @ 2011 - Juan Carlos Marino
  70. 70. Localización @ 2011 - Juan Carlos Marino
  71. 71. Cámara@ 2011 - Juan Carlos Marino
  72. 72. Acelerómetro @ 2011 - Juan Carlos Marino
  73. 73. Almacenamiento local @ 2011 - Juan Carlos Marino
  74. 74. Offline@ 2011 - Juan Carlos Marino
  75. 75. Tamaño de toque @ 2011 - Juan Carlos Marino
  76. 76. Tamaño de toque•  7 x 7 mm con 1 mm de espacio (indice).•  8 x 8 mm con 2 mm de espacio (pulgar).•  Listas deben tener mínimo 5 mm de espacio entre líneas.•  Ancho del dedo límita densidad de elementos en pantalla.•  Elementos muy cerca no podrán seleccionarse individualmente. @ 2011 - Juan Carlos Marino
  77. 77. Diagramas de gestos @ 2011 - Juan Carlos Marino
  78. 78. REGLA # 10 NO USAR CASCADA @ 2011 - Juan Carlos Marino
  79. 79. Usar Ágil•  Cascada es de alto riesgo.•  Hacer prototipo en papel.•  Construir prototipos rapidamente.•  Probar teorías rapidamente. @ 2011 - Juan Carlos Marino
  80. 80. Ágil•  Desarrollo iterativo e incremental. –  Pequeñas mejoras, unas tras otras. –  1 a 4 semanas por iteración. –  Planificación, Análisis, Diseño, Desarrollo, Pruebas y Documentación.•  Pruebas unitarias continuas.•  Corrección de errores antes de siguiente iteración.•  Integración con el cliente. @ 2011 - Juan Carlos Marino
  81. 81. EJEMPLO DE DISEÑO @ 2011 - Juan Carlos Marino
  82. 82. @ 2011 - Juan Carlos Marino
  83. 83. VALIDACIÓN DEL DISEÑO @ 2011 - Juan Carlos Marino
  84. 84. •  Cinco segundos.•  Delimitación.•  Navegación.•  Concepto. @ 2011 - Juan Carlos Marino
  85. 85. Cinco segundos•  Que plataforma es?•  Que tipo de aplicación es?•  Que supone que hace la aplicación? @ 2011 - Juan Carlos Marino
  86. 86. Delimitación @ 2011 - Juan Carlos Marino
  87. 87. Navegación @ 2011 - Juan Carlos Marino
  88. 88. Concepto@ 2011 - Juan Carlos Marino
  89. 89. EJEMPLO@ 2011 - Juan Carlos Marino
  90. 90. Wireframe@ 2011 - Juan Carlos Marino
  91. 91. Diseño inicial menu @ 2011 - Juan Carlos Marino
  92. 92. Diseño 240 px @ 2011 - Juan Carlos Marino
  93. 93. Diseño 120 px @ 2011 - Juan Carlos Marino
  94. 94. Prototipo Nokia N95 @ 2011 - Juan Carlos Marino
  95. 95. Iteración 2@ 2011 - Juan Carlos Marino
  96. 96. Iteración 2@ 2011 - Juan Carlos Marino
  97. 97. Diseño botones @ 2011 - Juan Carlos Marino
  98. 98. Diseño 240 px @ 2011 - Juan Carlos Marino
  99. 99. Diseño player @ 2011 - Juan Carlos Marino
  100. 100. Prototipo@ 2011 - Juan Carlos Marino
  101. 101. ERRORES COMUNES @ 2011 - Juan Carlos Marino
  102. 102. •  Dispositivo móvil = computador.•  Contexto.•  Demasiada información.•  Demora en tiempo de ejecución.•  Diseño genérico.•  Falta de Pruebas. @ 2011 - Juan Carlos Marino
  103. 103. EJEMPLO@ 2011 - Juan Carlos Marino
  104. 104. @ 2011 - Juan Carlos Marino
  105. 105. Contacto:juan.marino @ mevolucion.com GRACIAS @ 2011 - Juan Carlos Marino
  106. 106. Referencias•  http://www.alzado.org/articulo.php? id_art=445•  http://www.slideshare.net/andreskarp/ usabilidad-para-mviles•  http://www.slideshare.net/fling/designing- mobile-experiences @ 2011 - Juan Carlos Marino

×