Usabilidad para Móviles
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Usabilidad para Móviles

  • 1,288 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,288
On Slideshare
1,288
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
33
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Usabilidad en el diseño deAplicaciones Móviles Por: Juan C Marino @ 2011 - Juan Carlos Marino
  • 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. AgendaIntroducciónCapas UX Móvil.Criterios de DiseñoValidación del DiseñoErrores cómunesEjemplo@ 2011 - Juan Carlos Marino
  • 4. @ 2011 - Juan Carlos Marino
  • 5. @ 2011 - Juan Carlos Marino
  • 6. INTRODUCCIÓN @ 2011 - Juan Carlos Marino
  • 7. Usabilidad•  Efectividad. –  Capacidad de completar tareas.•  Eficiencia. –  Esfuerzo necesario para completarlas.•  Satisfacción. –  Gusto percibido durante interacción. @ 2011 - Juan Carlos Marino
  • 8. Condicionantes•  Perfil.•  Objetivos.•  Contexto. @ 2011 - Juan Carlos Marino
  • 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. Porqué•  Entorno repleto de distracciones. @ 2011 - Juan Carlos Marino
  • 11. Porqué•  Dispositivos heterógeneos. –  Capacidades de hardware. –  Opciones de SO. –  Disponibilidad. @ 2011 - Juan Carlos Marino
  • 12. Teclado numérico y Joystick @ 2011 - Juan Carlos Marino
  • 13. Teclado seminumérico y ball @ 2011 - Juan Carlos Marino
  • 14. Cursor@ 2011 - Juan Carlos Marino
  • 15. Táctil (multi-touch) @ 2011 - Juan Carlos Marino
  • 16. Teclado completo + ball @ 2011 - Juan Carlos Marino
  • 17. Teclado completo y táctil @ 2011 - Juan Carlos Marino
  • 18. CAPAS UX MOVIL @ 2011 - Juan Carlos Marino
  • 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. CRITERIOS DE DISEÑO @ 2011 - Juan Carlos Marino
  • 21. REGLA # 1OLVIDE LOQUE CREEQUE SABE @ 2011 - Juan Carlos Marino
  • 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. Recomendaciones ü No asuma una necesidadü Resuelva un problema real @ 2011 - Juan Carlos Marino
  • 24. Los hombres son de marteLas mujeres son de venus @ 2011 - Juan Carlos Marino
  • 25. @ 2011 - Juan Carlos Marino
  • 26. @ 2011 - Juan Carlos Marino
  • 27. REGLA # 2 CONTEXTO OBJETIVOSNECESIDADES @ 2011 - Juan Carlos Marino
  • 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. 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. 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. 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. 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. 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. @ 2011 - Juan Carlos Marino
  • 35. REGLA # 3NO PUEDESOPORTAR TODO @ 2011 - Juan Carlos Marino
  • 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. @ 2011 - Juan Carlos Marino
  • 38. Tener en cuenta capacidad de las pantallas actuales @ 2011 - Juan Carlos Marino
  • 39. Colores@ 2011 - Juan Carlos Marino
  • 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. @ 2011 - Juan Carlos Marino
  • 42. @ 2011 - Juan Carlos Marino
  • 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. @ 2011 - Juan Carlos Marino
  • 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. 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. 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. @ 2011 - Juan Carlos Marino
  • 49. @ 2011 - Juan Carlos Marino
  • 50. REGLA # 4 SIMPLE SIMPLEMAS SIMPLE @ 2011 - Juan Carlos Marino
  • 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. Recomendaciones•  Estructura. –  Ancha. –  Baja.•  Iniciar con diseños probados. –  Experimente. –  Comparta información. @ 2011 - Juan Carlos Marino
  • 53. @ 2011 - Juan Carlos Marino
  • 54. REGLA # 5NO OLVIDARGUIAR A LOS USUARIOS @ 2011 - Juan Carlos Marino
  • 55. Consideraciones•  El ambiente es distractivo. – Atención se comparte con otras actividades. @ 2011 - Juan Carlos Marino
  • 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. @ 2011 - Juan Carlos Marino
  • 58. REGLA # 6NO C M R A O PIMEL MUNDO @ 2011 - Juan Carlos Marino
  • 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. @ 2011 - Juan Carlos Marino
  • 61. REGLA # 7 NO HAGAESCRIBIR AUSUARIOS @ 2011 - Juan Carlos Marino
  • 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. 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. 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. @ 2011 - Juan Carlos Marino
  • 66. @ 2011 - Juan Carlos Marino
  • 67. REGLA # 8PROTOTIPOS @ 2011 - Juan Carlos Marino
  • 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. REGLA # 9 USARCARACTERISTICAS DEL DISPOSITIVO @ 2011 - Juan Carlos Marino
  • 70. Localización @ 2011 - Juan Carlos Marino
  • 71. Cámara@ 2011 - Juan Carlos Marino
  • 72. Acelerómetro @ 2011 - Juan Carlos Marino
  • 73. Almacenamiento local @ 2011 - Juan Carlos Marino
  • 74. Offline@ 2011 - Juan Carlos Marino
  • 75. Tamaño de toque @ 2011 - Juan Carlos Marino
  • 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. Diagramas de gestos @ 2011 - Juan Carlos Marino
  • 78. REGLA # 10 NO USAR CASCADA @ 2011 - Juan Carlos Marino
  • 79. Usar Ágil•  Cascada es de alto riesgo.•  Hacer prototipo en papel.•  Construir prototipos rapidamente.•  Probar teorías rapidamente. @ 2011 - Juan Carlos Marino
  • 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. EJEMPLO DE DISEÑO @ 2011 - Juan Carlos Marino
  • 82. @ 2011 - Juan Carlos Marino
  • 83. VALIDACIÓN DEL DISEÑO @ 2011 - Juan Carlos Marino
  • 84. •  Cinco segundos.•  Delimitación.•  Navegación.•  Concepto. @ 2011 - Juan Carlos Marino
  • 85. Cinco segundos•  Que plataforma es?•  Que tipo de aplicación es?•  Que supone que hace la aplicación? @ 2011 - Juan Carlos Marino
  • 86. Delimitación @ 2011 - Juan Carlos Marino
  • 87. Navegación @ 2011 - Juan Carlos Marino
  • 88. Concepto@ 2011 - Juan Carlos Marino
  • 89. EJEMPLO@ 2011 - Juan Carlos Marino
  • 90. Wireframe@ 2011 - Juan Carlos Marino
  • 91. Diseño inicial menu @ 2011 - Juan Carlos Marino
  • 92. Diseño 240 px @ 2011 - Juan Carlos Marino
  • 93. Diseño 120 px @ 2011 - Juan Carlos Marino
  • 94. Prototipo Nokia N95 @ 2011 - Juan Carlos Marino
  • 95. Iteración 2@ 2011 - Juan Carlos Marino
  • 96. Iteración 2@ 2011 - Juan Carlos Marino
  • 97. Diseño botones @ 2011 - Juan Carlos Marino
  • 98. Diseño 240 px @ 2011 - Juan Carlos Marino
  • 99. Diseño player @ 2011 - Juan Carlos Marino
  • 100. Prototipo@ 2011 - Juan Carlos Marino
  • 101. ERRORES COMUNES @ 2011 - Juan Carlos Marino
  • 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. EJEMPLO@ 2011 - Juan Carlos Marino
  • 104. @ 2011 - Juan Carlos Marino
  • 105. Contacto:juan.marino @ mevolucion.com GRACIAS @ 2011 - Juan Carlos Marino
  • 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