Presentación sobre Usabilidad para Móviles que realice para el Congreso Internet del Mediterráneo

2. ANDRÉS
KARP
Twitter: @andreskarp
Blog: andreskarp.es
_dChris

3. USABILIDAD PARA MÓVILES Andrés Karp
Actualidad del uso del móvil
Plataformas Móviles
Workflow de Desarrollo
Diseño Móvil
Test de aplicaciones móviles

4. USABILIDAD PARA MÓVILES Andrés Karp
Actualidad del uso del Móvil

5. USABILIDAD PARA MÓVILES Andrés Karp
12% MÓVIL BÁSICO
46% MÓVIL AVANZADO
42% MÓVIL DE ÚLTIMA GENERACIÓN
the cocktail analysis
Actualidad del uso del Móvil

6. USABILIDAD PARA MÓVILES Andrés Karp
ACCESO A REDES SOCIALES DESDE EL MÓVIL
the cocktail analysis
Actualidad del uso del Móvil

7. USABILIDAD PARA MÓVILES Andrés Karp
FACEBOOK
76% 12% Acceso Web Acceso Móvil
the cocktail analysis
Actualidad del uso del Móvil

8. USABILIDAD PARA MÓVILES Andrés Karp
TUENTI
39% 8% Acceso Web Acceso Móvil
the cocktail analysis
Actualidad del uso del Móvil

9. USABILIDAD PARA MÓVILES Andrés Karp
YOUTUBE
50% 9% Acceso Web Acceso Móvil
the cocktail analysis
Actualidad del uso del Móvil

10. USABILIDAD PARA MÓVILES Andrés Karp
TWITTER
11% 4% Acceso Web Acceso Móvil
the cocktail analysis
Actualidad del uso del Móvil

11. USABILIDAD PARA MÓVILES Andrés Karp
Plataformas Móviles

12. USABILIDAD PARA MÓVILES Andrés Karp
4.0% 6.2% 8.6% 11.9%
Android Blackberry iPhone Windows
comScore MobiLens

13. USABILIDAD PARA MÓVILES Andrés Karp
69.3%
Symbian
comScore MobiLens

14. USABILIDAD PARA MÓVILES Andrés Karp
Tipos de hardware

15. teclado numérico y joystick

16. teclado semi-numérico + ball

17. Cursor

18. Táctil (multi-touch)

19. Teclado completo y Táctil

20. USABILIDAD PARA MÓVILES Andrés Karp
Workflow de Desarrollo

21. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
Equipamiento Móvil

23. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
Equipamiento Móvil

26. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
Equipamiento Móvil

27. Todos los derechos reservados por Cocoarmani

28. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
Equipamiento Móvil

29. http://www.flickr.com/photos/76074333@N00

30. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
PLATAFORMA Buscar la plataforma adecuada
Equipamiento Móvil

32. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
PLATAFORMA Buscar la plataforma adecuada
DISEÑO Crear experiencia de usuario
Equipamiento Móvil

34. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
PLATAFORMA Buscar la plataforma adecuada
DISEÑO Crear experiencia de usuario
PROTOTIPO Hay que probar el contexto
Equipamiento Móvil

35. Todos los derechos reservados por martynreding

36. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
PLATAFORMA Buscar la plataforma adecuada
DISEÑO Crear experiencia de usuario
PROTOTIPO Hay que probar el contexto
DESARROLLAR Armar el Puzzle
Equipamiento Móvil

37. Algunos derechos reservados por camflan

38. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
PLATAFORMA Buscar la plataforma adecuada
DISEÑO Crear experiencia de usuario
PROTOTIPO Hay que probar el contexto
DESARROLLAR Armar el Puzzle
TESTEAR Probar las cosas las veces que haga falta
Equipamiento Móvil

39. Algunos derechos reservados por Kai Hendry

40. USABILIDAD PARA MÓVILES Andrés Karp
IDEA Siempre hay que empezar por lo primero
NECESIDADES Saber que necesitan los usuarios
CONTEXTO El modo en que la información es consumida
ESTRATEGIA Como añadimos valor a nuestro negocio
PLATAFORMA Buscar la plataforma adecuada
DISEÑO Crear experiencia de usuario
PROTOTIPO Hay que probar el contexto
DESARROLLAR Armar el Puzzle
TESTEAR Probar las cosas las veces que haga falta
OPTIMIZACIÓN Simplificar imagenes y cargas
Equipamiento Móvil

41. http://jonasraskdesign.com

42. USABILIDAD PARA MÓVILES Andrés Karp
Diseño Móvil

43. USABILIDAD PARA MÓVILES Andrés Karp
El diseño móvil es:
“la creación de experiencias de
usuario para el contexto móvil”

44. USABILIDAD PARA MÓVILES Andrés Karp
• Contexto
• Mensaje
• Look & Feel
• Colores
• Layout
• Fuentes
• Gráficos

45. USABILIDAD PARA MÓVILES Andrés Karp
Mensaje

46. USABILIDAD PARA MÓVILES Andrés Karp
Lo que usted está tratando de decir sobre su sitio o aplicación visualmente

47. USABILIDAD PARA MÓVILES Andrés Karp
Look & Feel

48. USABILIDAD PARA MÓVILES Andrés Karp
El Look & Feel se utiliza para describir la apariencia

49. USABILIDAD PARA MÓVILES Andrés Karp
Color

50. USABILIDAD PARA MÓVILES Andrés Karp
El obstáculo más común se encuentra cuando se trata de pantallas
de color.

51. USABILIDAD PARA MÓVILES Andrés Karp
Layout

52. USABILIDAD PARA MÓVILES Andrés Karp
Cómo el usuario visualmente nuestra página

53. USABILIDAD PARA MÓVILES Andrés Karp

54. USABILIDAD PARA MÓVILES Andrés Karp
Fuentes

55. USABILIDAD PARA MÓVILES Andrés Karp
Qué tipos se representa en las pantallas de móviles

56. USABILIDAD PARA MÓVILES Andrés Karp
Gráficos

57. USABILIDAD PARA MÓVILES Andrés Karp
El uso de imágenes que se utilizan para crear o ayudar a una
experiencia visual.

58. USABILIDAD PARA MÓVILES Andrés Karp
Diagramas de Gestos

59. USABILIDAD PARA MÓVILES Andrés Karp
Touch Target Sizes

60. USABILIDAD PARA MÓVILES Andrés Karp
· 7 x 7 mm con 1 mm de tap para el uso
del dedo índice
· 8 x 8 mm con 2 mm de tap para el
pulgar de uso
· El tipo de lista de los componentes debe
tener un mínimo de 5 mm de espacio
entre líneas
·El ancho de un dedo límites de la
densidad de elementos en la pantalla. Si
los elementos están demasiado cerca, el
usuario no podrá elegir uno solo.
Touch Target Sizes

61. USABILIDAD PARA MÓVILES Andrés Karp
Touch Gesture Diagrams

62. USABILIDAD PARA MÓVILES Andrés Karp

63. USABILIDAD PARA MÓVILES Andrés Karp
Touch Interface Growth

64. USABILIDAD PARA MÓVILES Andrés Karp

65. USABILIDAD PARA MÓVILES Andrés Karp
Testear aplicaciones web

66. USABILIDAD PARA MÓVILES Andrés Karp
• Las técnicas de investigación estándar
• La importancia del contexto
• Pruebas de software
• Equipos de captura de vídeo
• Pruebas en beta

67. USABILIDAD PARA MÓVILES Andrés Karp
• Dispositivo vs Emulador
• Laboratorio vs Pruebas Reales
• Interior vs Aire Libre

68. USABILIDAD PARA MÓVILES Andrés Karp
Dispositivo vs Emulador
• Usar simuladores código real
• Evitar emuladores
• No coinciden con una verdadera interacción
• Interacción, estética, la función es necesario
probado en el dispositivo

69. USABILIDAD PARA MÓVILES Andrés Karp
Laboratorio vs Pruebas Reales
• Las pruebas de Laboratorio no pueden capturar
todo el contexto
• Las tareas de fondo no se ven
• Ejemplos de contexto: centro comercial
• Las pantallas glossy

70. USABILIDAD PARA MÓVILES Andrés Karp
Interior vs Aire Libre
• La comodidad del usuario cambia
• Cómo interactua con los dispositivos
• Ejemplos de contexto: conduciendo
• Moviemiento

71. USABILIDAD PARA MÓVILES Andrés Karp
Equipos de Captura

72. USABILIDAD PARA MÓVILES Andrés Karp
• Captura de pantalla, el rostro, el lenguaje corporal
• La utilización de dispositivo real
• La mejor forma de realizar una experiencia realista
• Facilidad de uso
• Precio

73. USABILIDAD PARA MÓVILES Andrés Karp
DYV = “Hagalo Usted Mismo”

74. USABILIDAD PARA MÓVILES Andrés Karp
LAMP CAM
· DIY modificaciones
· Frágil
· Hay que capturar la cara aparte

75. USABILIDAD PARA MÓVILES Andrés Karp
ELMO CAM
· DIY modificaciones
· Fija en la superficie

76. USABILIDAD PARA MÓVILES Andrés Karp
SLID CAM
· Bricolaje
· Permite capturar el lenguaje
corporal

77. USABILIDAD PARA MÓVILES Andrés Karp
Hagalo Usted Mismo...

78. USABILIDAD PARA MÓVILES Andrés Karp

79. USABILIDAD PARA MÓVILES Andrés Karp
Beta Testing

80. USABILIDAD PARA MÓVILES Andrés Karp
Eventos de Activación
Encuestas
Utilización
Investigación

81. USABILIDAD PARA MÓVILES Andrés Karp
Eventos de activación
• Coinciden con las tareas del usuario tanto como sea posible
• Adquirir a través de los registros del servidor
• Enviar reconocimiento cuando
• por primera vez se intenta la tarea
• por enésima vez se intentan tarea
• cada n semanas
• Enviar alertas mediante SMS

82. USABILIDAD PARA MÓVILES Andrés Karp
Encuestas
Limitada a 1-2 minutos
• Captar lo que la tarea se está intentando
• Facilidad de uso, el disfrute, etc
• Expirará encuesta en aproximadamente 20 minutos

83. USABILIDAD PARA MÓVILES Andrés Karp
Utilización
• Frecuencias de trabajo
• Facilidad de uso, afectará en función
• Frecuencia de uso
• El tiempo entre los usos
• Número de usos

84. USABILIDAD PARA MÓVILES Andrés Karp
Investigación
Las técnicas de investigación estándar
• Centradas en el contexto
• Ver que dispositivo ponen a la venta las compañías
• Opciones de captura de vídeo
• Pruebas en beta

85. USABILIDAD PARA MÓVILES Andrés Karp
¡¡¡Muchas Gracias!!!
Dudas y consultas:
andres@dinamiclab.com