Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Usabilidad para Móviles

7,410 views

Published on

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

Published in: Design

Usabilidad para Móviles

  1. 1. ANDRÉS KARP Twitter: @andreskarp Blog: andreskarp.es _dChris
  2. 2. 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
  3. 3. USABILIDAD PARA MÓVILES Andrés Karp Actualidad del uso del Móvil
  4. 4. 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
  5. 5. USABILIDAD PARA MÓVILES Andrés Karp ACCESO A REDES SOCIALES DESDE EL MÓVIL the cocktail analysis Actualidad del uso del Móvil
  6. 6. USABILIDAD PARA MÓVILES Andrés Karp FACEBOOK 76% 12% Acceso Web Acceso Móvil the cocktail analysis Actualidad del uso del Móvil
  7. 7. USABILIDAD PARA MÓVILES Andrés Karp TUENTI 39% 8% Acceso Web Acceso Móvil the cocktail analysis Actualidad del uso del Móvil
  8. 8. USABILIDAD PARA MÓVILES Andrés Karp YOUTUBE 50% 9% Acceso Web Acceso Móvil the cocktail analysis Actualidad del uso del Móvil
  9. 9. USABILIDAD PARA MÓVILES Andrés Karp TWITTER 11% 4% Acceso Web Acceso Móvil the cocktail analysis Actualidad del uso del Móvil
  10. 10. USABILIDAD PARA MÓVILES Andrés Karp Plataformas Móviles
  11. 11. USABILIDAD PARA MÓVILES Andrés Karp 4.0% 6.2% 8.6% 11.9% Android Blackberry iPhone Windows comScore MobiLens
  12. 12. USABILIDAD PARA MÓVILES Andrés Karp 69.3% Symbian comScore MobiLens
  13. 13. USABILIDAD PARA MÓVILES Andrés Karp Tipos de hardware
  14. 14. teclado numérico y joystick
  15. 15. teclado semi-numérico + ball
  16. 16. Cursor
  17. 17. Táctil (multi-touch)
  18. 18. Teclado completo y Táctil
  19. 19. USABILIDAD PARA MÓVILES Andrés Karp Workflow de Desarrollo
  20. 20. USABILIDAD PARA MÓVILES Andrés Karp IDEA Siempre hay que empezar por lo primero Equipamiento Móvil
  21. 21. USABILIDAD PARA MÓVILES Andrés Karp IDEA Siempre hay que empezar por lo primero NECESIDADES Saber que necesitan los usuarios Equipamiento Móvil
  22. 22. 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
  23. 23. Todos los derechos reservados por Cocoarmani
  24. 24. 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
  25. 25. http://www.flickr.com/photos/76074333@N00
  26. 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 ESTRATEGIA Como añadimos valor a nuestro negocio PLATAFORMA Buscar la plataforma adecuada Equipamiento Móvil
  27. 27. 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
  28. 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 PLATAFORMA Buscar la plataforma adecuada DISEÑO Crear experiencia de usuario PROTOTIPO Hay que probar el contexto Equipamiento Móvil
  29. 29. Todos los derechos reservados por martynreding
  30. 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 DISEÑO Crear experiencia de usuario PROTOTIPO Hay que probar el contexto DESARROLLAR Armar el Puzzle Equipamiento Móvil
  31. 31. Algunos derechos reservados por camflan
  32. 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 PROTOTIPO Hay que probar el contexto DESARROLLAR Armar el Puzzle TESTEAR Probar las cosas las veces que haga falta Equipamiento Móvil
  33. 33. Algunos derechos reservados por Kai Hendry
  34. 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 DESARROLLAR Armar el Puzzle TESTEAR Probar las cosas las veces que haga falta OPTIMIZACIÓN Simplificar imagenes y cargas Equipamiento Móvil
  35. 35. http://jonasraskdesign.com
  36. 36. USABILIDAD PARA MÓVILES Andrés Karp Diseño Móvil
  37. 37. 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”
  38. 38. USABILIDAD PARA MÓVILES Andrés Karp • Contexto • Mensaje • Look & Feel • Colores • Layout • Fuentes • Gráficos
  39. 39. USABILIDAD PARA MÓVILES Andrés Karp Mensaje
  40. 40. USABILIDAD PARA MÓVILES Andrés Karp Lo que usted está tratando de decir sobre su sitio o aplicación visualmente
  41. 41. USABILIDAD PARA MÓVILES Andrés Karp Look & Feel
  42. 42. USABILIDAD PARA MÓVILES Andrés Karp El Look & Feel se utiliza para describir la apariencia
  43. 43. USABILIDAD PARA MÓVILES Andrés Karp Color
  44. 44. USABILIDAD PARA MÓVILES Andrés Karp El obstáculo más común se encuentra cuando se trata de pantallas de color.
  45. 45. USABILIDAD PARA MÓVILES Andrés Karp Layout
  46. 46. USABILIDAD PARA MÓVILES Andrés Karp Cómo el usuario visualmente nuestra página
  47. 47. USABILIDAD PARA MÓVILES Andrés Karp
  48. 48. USABILIDAD PARA MÓVILES Andrés Karp Fuentes
  49. 49. USABILIDAD PARA MÓVILES Andrés Karp Qué tipos se representa en las pantallas de móviles
  50. 50. USABILIDAD PARA MÓVILES Andrés Karp Gráficos
  51. 51. USABILIDAD PARA MÓVILES Andrés Karp El uso de imágenes que se utilizan para crear o ayudar a una experiencia visual.
  52. 52. USABILIDAD PARA MÓVILES Andrés Karp Diagramas de Gestos
  53. 53. USABILIDAD PARA MÓVILES Andrés Karp Touch Target Sizes
  54. 54. 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
  55. 55. USABILIDAD PARA MÓVILES Andrés Karp Touch Gesture Diagrams
  56. 56. USABILIDAD PARA MÓVILES Andrés Karp
  57. 57. USABILIDAD PARA MÓVILES Andrés Karp Touch Interface Growth
  58. 58. USABILIDAD PARA MÓVILES Andrés Karp
  59. 59. USABILIDAD PARA MÓVILES Andrés Karp Testear aplicaciones web
  60. 60. 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
  61. 61. USABILIDAD PARA MÓVILES Andrés Karp • Dispositivo vs Emulador • Laboratorio vs Pruebas Reales • Interior vs Aire Libre
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. USABILIDAD PARA MÓVILES Andrés Karp Equipos de Captura
  66. 66. 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
  67. 67. USABILIDAD PARA MÓVILES Andrés Karp DYV = “Hagalo Usted Mismo”
  68. 68. USABILIDAD PARA MÓVILES Andrés Karp LAMP CAM · DIY modificaciones · Frágil · Hay que capturar la cara aparte
  69. 69. USABILIDAD PARA MÓVILES Andrés Karp ELMO CAM · DIY modificaciones · Fija en la superficie
  70. 70. USABILIDAD PARA MÓVILES Andrés Karp SLID CAM · Bricolaje · Permite capturar el lenguaje corporal
  71. 71. USABILIDAD PARA MÓVILES Andrés Karp Hagalo Usted Mismo...
  72. 72. USABILIDAD PARA MÓVILES Andrés Karp
  73. 73. USABILIDAD PARA MÓVILES Andrés Karp Beta Testing
  74. 74. USABILIDAD PARA MÓVILES Andrés Karp Eventos de Activación Encuestas Utilización Investigación
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. 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
  79. 79. USABILIDAD PARA MÓVILES Andrés Karp ¡¡¡Muchas Gracias!!! Dudas y consultas: andres@dinamiclab.com

×