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

1. Usabilidad
en el diseño de
Aplicaciones 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. Agenda
Introducción
Capas UX Móvil.
Criterios de Diseño
Validación del Diseño
Errores cómunes
Ejemplo
@ 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é hacer
Contexto: 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 # 1
OLVIDE LO
QUE CREE
QUE 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 marte
Las mujeres son de venus
@ 2011 - Juan Carlos Marino

25. @ 2011 - Juan Carlos Marino

26. @ 2011 - Juan Carlos Marino

27. REGLA # 2
CONTEXTO
OBJETIVOS
NECESIDADES
@ 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 # 3
NO PUEDE
SOPORTAR
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
SIMPLE
MAS 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 # 5
NO OLVIDAR
GUIAR 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 # 6
NO C M R A
O PIM
EL 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 HAGA
ESCRIBIR A
USUARIOS
@ 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 # 8
PROTOTIPOS
@ 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
USAR
CARACTERISTICAS
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