DISEÑO DE APLICACIONES     PARA MÓVILES
EXPERIENCIA DE USUARIO     Y USABILIDAD
USABILITY ≠ USER EXPERIENCE
USABILITY
USEREXPERIENCE
USABILITY“la facilidad con que laspersonas pueden utilizaruna herramienta con elfin de alcanzar unobjetivo concreto”
USEREXPERIENCE“El objetivo es que losusuarios se sientanfelices antes, durantey después de usar elproducto”
USABILITY                          FUNCIONALIDAD• Poco esfuerzo mental para usarlo• Haypocos errores o equivocaciones en s...
USER EXPERIENCE                                  SENTIMIENTOS•   Entorno   •   Confianza•   Colores   •   Branding•   Olfat...
Entonces, ¿por qué tenemos esto?
... o esto
ouch!
y esto...
y esto otro...
En definitiva...
“USABLE HAPPINESS”“Usable happiness: is a product that is simple to use, and makes              you smile every time you u...
ESTADÍSTICAS
DISTRIBUCIÓN DE  DISPOSITIVOS
DISTRIBUCIÓN DE  DISPOSITIVOS
Android OS: 36%
Apple iOS: 26%Android OS: 36%
Blackberry OS: 23%   Apple iOS: 26%  Android OS: 36%
Windows Mobile/WP7: 10%      Blackberry OS: 23%          Apple iOS: 26%        Android OS: 36%
Otros: 5%Windows Mobile/WP7: 10%      Blackberry OS: 23%          Apple iOS: 26%        Android OS: 36%
DESCARGAS29%                                                 26%                                         41%              ...
826.200 APPS400.000300.000200.000100.000     0                  ne        oi                               d     ad       ...
USUARIOS SMARTPHONES
USUARIOS SMARTPHONES
MOBILE USERS
MOBILE USERSMOBILE WEB ACCESS
MOBILE USERS  MOBILE WEB ACCESSDESKTOP WEB ACCESS
EL MÓVIL NO ESUN ORDENADOR         ≠
• Trabajo    sentado y en un ambiente cómodo• Pantalla   grande que permite multitarea• Soporte    de Ratón y Teclado
• Entorno     variable• Pantalla    pequeña que dificulta la introducción de datos• Visualización    de una única pantalla ...
NATIVAS VS WEB APPS
NATIVA
EXPLOTAR LASPRESTACIONES     DEL DISPOSITIVO     GPS
EXPLOTAR LASPRESTACIONES     DEL DISPOSITIVO   ACELERÓMETRO
EXPLOTAR LASPRESTACIONES     DEL DISPOSITIVO CAPTURA DE IMÁGENES
EXPLOTAR LASPRESTACIONES     DEL DISPOSITIVO   AUDIO Y VÍDEO
EXPLOTAR LAS PRESTACIONESDEL DISPOSITIVO      3D
EXPLOTAR LASPRESTACIONES     DEL DISPOSITIVO AGENDA DE CONTACTOS
EXPLOTAR LASPRESTACIONES     DEL DISPOSITIVO   CALENDARIO
APROVECHAREL CANAL DEDISTRIBUCIÓN
ENVÍO DE PUSHNOTIFICATIONS
IN APP PURCHASE
USO OFF-LINE
MAYOREXPERIENCIA DE   USUARIO
WEB APP
WEB VIEW SOLUCIÓN HÍBRIDA
WEB VIEW
WEB VIEWS QUE SIMULAN  A UNA APP NATIVA
¿CÓMO DISEÑAR UNABUENA INTERFAZ IPHONE?
TIPOLOGÍAS DE APLICACIONES
3TIPOLOGÍAS DE APLICACIONES
PRODUCTIVITYAPPLICATIONS•UX orientada a la tarea•Ordenación de informaciónjerárquica•Tareas complejas
UTILITY APPLICATIONS•Ricas gráficamente•Validar el estado de algo omirarlo por encima•Añaden controles standard
IMMERSIVE APPLICATIONS•Hay muchos datos pero nose muestran al usuario•Custom User Interface•Pantalla completa
GESTURES,NOT CLICKS
Touch and   Tap       Double tap                Drag                             holdPinch open   Pinch close    Swipe    ...
PROCESO DE TRABAJO
IDEA
REFERENTES
BOCETOS A  MANO
MAPA DE NAVEGACIÓN
DETALLES GRÁFICOS
GRÁFICA FINAL
REDISEÑO INFOVUELOS     TALLER PRÁCTICO
BUSCAR VUELO POR NOMBRE
BUSCAR POR SALIDAS
BUSCAR POR LLEGADAS
AÑADIR VUELO A FAVORITOS
ELIMINAR VUELO DE FAVORITOS
Mobility Everywhere
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Aplicaciones móviles: Usabilidad y Experiencia de Usuario
Upcoming SlideShare
Loading in...5
×

Aplicaciones móviles: Usabilidad y Experiencia de Usuario

754

Published on

El proceso de creación de una app consta de varias fases. El diseño es la que más debemos cuidar si queremos que la experiencia de usuario sea satisfactoria. Para ello, hay que tener en cuenta la usabilidad.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
754
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Aplicaciones móviles: Usabilidad y Experiencia de Usuario

  1. 1. DISEÑO DE APLICACIONES PARA MÓVILES
  2. 2. EXPERIENCIA DE USUARIO Y USABILIDAD
  3. 3. USABILITY ≠ USER EXPERIENCE
  4. 4. USABILITY
  5. 5. USEREXPERIENCE
  6. 6. USABILITY“la facilidad con que laspersonas pueden utilizaruna herramienta con elfin de alcanzar unobjetivo concreto”
  7. 7. USEREXPERIENCE“El objetivo es que losusuarios se sientanfelices antes, durantey después de usar elproducto”
  8. 8. USABILITY FUNCIONALIDAD• Poco esfuerzo mental para usarlo• Haypocos errores o equivocaciones en su empleo• Es eficiente: permite hacer más y más rápido• Cuesta muy poco aprender a usarlo
  9. 9. USER EXPERIENCE SENTIMIENTOS• Entorno • Confianza• Colores • Branding• Olfato • “Show-off ” effect• Tacto • Practicalidad• Sonido • Efecto• Vista emocional
  10. 10. Entonces, ¿por qué tenemos esto?
  11. 11. ... o esto
  12. 12. ouch!
  13. 13. y esto...
  14. 14. y esto otro...
  15. 15. En definitiva...
  16. 16. “USABLE HAPPINESS”“Usable happiness: is a product that is simple to use, and makes you smile every time you use it” Thomas Baekdal
  17. 17. ESTADÍSTICAS
  18. 18. DISTRIBUCIÓN DE DISPOSITIVOS
  19. 19. DISTRIBUCIÓN DE DISPOSITIVOS
  20. 20. Android OS: 36%
  21. 21. Apple iOS: 26%Android OS: 36%
  22. 22. Blackberry OS: 23% Apple iOS: 26% Android OS: 36%
  23. 23. Windows Mobile/WP7: 10% Blackberry OS: 23% Apple iOS: 26% Android OS: 36%
  24. 24. Otros: 5%Windows Mobile/WP7: 10% Blackberry OS: 23% Apple iOS: 26% Android OS: 36%
  25. 25. DESCARGAS29% 26% 41% 59% 71% 74% 48 por teléfono 35 por teléfono 15 por teléfono De pago Gratis
  26. 26. 826.200 APPS400.000300.000200.000100.000 0 ne oi d ad vi y 7 o dr iP O er r ne Palm iPh n kb ho A Blac sP ow ind W
  27. 27. USUARIOS SMARTPHONES
  28. 28. USUARIOS SMARTPHONES
  29. 29. MOBILE USERS
  30. 30. MOBILE USERSMOBILE WEB ACCESS
  31. 31. MOBILE USERS MOBILE WEB ACCESSDESKTOP WEB ACCESS
  32. 32. EL MÓVIL NO ESUN ORDENADOR ≠
  33. 33. • Trabajo sentado y en un ambiente cómodo• Pantalla grande que permite multitarea• Soporte de Ratón y Teclado
  34. 34. • Entorno variable• Pantalla pequeña que dificulta la introducción de datos• Visualización de una única pantalla a la vez• Difícil la multitarea y fácil perderse
  35. 35. NATIVAS VS WEB APPS
  36. 36. NATIVA
  37. 37. EXPLOTAR LASPRESTACIONES DEL DISPOSITIVO GPS
  38. 38. EXPLOTAR LASPRESTACIONES DEL DISPOSITIVO ACELERÓMETRO
  39. 39. EXPLOTAR LASPRESTACIONES DEL DISPOSITIVO CAPTURA DE IMÁGENES
  40. 40. EXPLOTAR LASPRESTACIONES DEL DISPOSITIVO AUDIO Y VÍDEO
  41. 41. EXPLOTAR LAS PRESTACIONESDEL DISPOSITIVO 3D
  42. 42. EXPLOTAR LASPRESTACIONES DEL DISPOSITIVO AGENDA DE CONTACTOS
  43. 43. EXPLOTAR LASPRESTACIONES DEL DISPOSITIVO CALENDARIO
  44. 44. APROVECHAREL CANAL DEDISTRIBUCIÓN
  45. 45. ENVÍO DE PUSHNOTIFICATIONS
  46. 46. IN APP PURCHASE
  47. 47. USO OFF-LINE
  48. 48. MAYOREXPERIENCIA DE USUARIO
  49. 49. WEB APP
  50. 50. WEB VIEW SOLUCIÓN HÍBRIDA
  51. 51. WEB VIEW
  52. 52. WEB VIEWS QUE SIMULAN A UNA APP NATIVA
  53. 53. ¿CÓMO DISEÑAR UNABUENA INTERFAZ IPHONE?
  54. 54. TIPOLOGÍAS DE APLICACIONES
  55. 55. 3TIPOLOGÍAS DE APLICACIONES
  56. 56. PRODUCTIVITYAPPLICATIONS•UX orientada a la tarea•Ordenación de informaciónjerárquica•Tareas complejas
  57. 57. UTILITY APPLICATIONS•Ricas gráficamente•Validar el estado de algo omirarlo por encima•Añaden controles standard
  58. 58. IMMERSIVE APPLICATIONS•Hay muchos datos pero nose muestran al usuario•Custom User Interface•Pantalla completa
  59. 59. GESTURES,NOT CLICKS
  60. 60. Touch and Tap Double tap Drag holdPinch open Pinch close Swipe Swipe
  61. 61. PROCESO DE TRABAJO
  62. 62. IDEA
  63. 63. REFERENTES
  64. 64. BOCETOS A MANO
  65. 65. MAPA DE NAVEGACIÓN
  66. 66. DETALLES GRÁFICOS
  67. 67. GRÁFICA FINAL
  68. 68. REDISEÑO INFOVUELOS TALLER PRÁCTICO
  69. 69. BUSCAR VUELO POR NOMBRE
  70. 70. BUSCAR POR SALIDAS
  71. 71. BUSCAR POR LLEGADAS
  72. 72. AÑADIR VUELO A FAVORITOS
  73. 73. ELIMINAR VUELO DE FAVORITOS
  74. 74. Mobility Everywhere
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×