Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles

1,863 views

Published on

Presentación introductoria de recomendaciones y buenas prácticas a tener en cuenta en el diseño de aplicaciones móviles. Curso a cargo del profesor Juan Paulo Madriaza - Uniacc - 2011

Published in: Design

Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles

  1. 1. Clase 02
  2. 2. Algo más universalPRINCIPIOS DE INTERACCIÓN
  3. 3. Principios de InteracciónIntegridad estéticaLa aplicación debe tener en sintonía su función y sudiseño
  4. 4. Principios de InteracciónConsistencia (externa e interna)La aplicación debe funcionar como funcionan otras.La aplicación debe comportarse consistentemente anivel interno.
  5. 5. Principios de InteracciónManipulación directaLa aplicación debe permitir que el usuario manipuledirectamente el contenido.• Rotando el dispositivo• Usando gestos para manipular por ejemplo el zoom• Debe sentir que la interfaz responde inmediatamente a sus interacciones
  6. 6. Principios de InteracciónFeedbackLa aplicación debe entregar constante y fluido feedbackde su funcionamiento para que el usuario sienta queestá todo bien
  7. 7. Principios de InteracciónMetáforas de la vida realLa aplicación puede comportarse como lo hacen losobjetos cotidianos para facilitar su interacción.• Prender / apagar• Carpetas• Micrófonos• Pasar páginas• Controles rotativos
  8. 8. Principios de InteracciónControl del usuarioLos usuarios deben ser quiénes detonen las acciones dela interfaz, no la aplicación
  9. 9. Las básicasRECOMENDACIONES
  10. 10. RecomendacionesMobile no es la web máspequeña, es diferente. Trátalacomo tal
  11. 11. RecomendacionesEnfócate en la tarea principal
  12. 12. RecomendacionesJerarquiza el contenido que elusuario está buscando
  13. 13. RecomendacionesPiensa de arriba a abajo
  14. 14. RecomendacionesSi es más grande que lapantalla, que se note
  15. 15. RecomendacionesDale a tus usuarios un recorridológico de uso
  16. 16. RecomendacionesUsa la terminología de tuusuario, no la de tu cliente
  17. 17. RecomendacionesEvita que el usuario ingresetexto
  18. 18. RecomendacionesGuarda el avanceautomáticamente (a menos quepueda ser perjudicial)
  19. 19. RecomendacionesPermite que el usuario searrepienta
  20. 20. RecomendacionesCuida el trabajo de tu usuario
  21. 21. RecomendacionesPermite y estimula la conexiónentre usuarios
  22. 22. RecomendacionesRealiza búsquedas mediantesuggestions
  23. 23. RecomendacionesPreocúpate de tu página en elAppStore
  24. 24. RecomendacionesUsa la animación paracomunicar
  25. 25. RecomendacionesRecuerda que la aprobación enel AppStore puede demorar
  26. 26. RecomendacionesUsa las notificaciones sólocuando el usuario las necesite
  27. 27. RecomendacionesRetrasa el proceso de registro lomás que puedas
  28. 28. RecomendacionesRecuerda que en cualquiermomento suena el celular
  29. 29. RecomendacionesLos controles deben parecer«Tappables»
  30. 30. RecomendacionesNo borres un botón sólo porqueestá temporalmente inactivo
  31. 31. RecomendacionesLa creatividad es la mezclaperfecta entre originalidad yfuncionalidad
  32. 32. RecomendacionesEstá bien usar gráfica propia,pero cuidado con pasar a llevarlas convenciones
  33. 33. RecomendacionesEn lo Mobile el contexto esmucho más variado que en laweb
  34. 34. RecomendacionesDiseña para pantallas chicas ypara punteros enormes eimprecisos
  35. 35. RecomendacionesLa interfaz es siempre a pantallacompleta
  36. 36. RecomendacionesEl usuario está por lo generalpendiente de mil cosas cuandousa nuestra interfaz
  37. 37. RecomendacionesDiseña especialmente paramóviles
  38. 38. RecomendacionesCéntrate en lo que un celularpuede hacer bien
  39. 39. RecomendacionesEstudia a tu usuario
  40. 40. RecomendacionesAcostúmbrate a los cambios detodo tipo
  41. 41. RecomendacionesLas actualizaciones temantienen en el radar
  42. 42. RecomendacionesMobile es bueno en el contextoespacial y temporal
  43. 43. RecomendacionesReduce la carga cognitiva
  44. 44. RecomendacionesDiseña para las distintasorientaciones
  45. 45. RecomendacionesPásalo al dispositivo cuantoantes
  46. 46. RecomendacionesSimple es mejor
  47. 47. RecomendacionesItera rápido
  48. 48. RecomendacionesPrueba con usuarios
  49. 49. RecomendacionesDocumenta el proceso
  50. 50. RecomendacionesEl resultado es la aplicación, noel proceso
  51. 51. RecomendacionesUn buen proyecto es la mejormezcla entre:• Los objetivos de negocio• Los requerimientos técnicos• Las necesidades de los usuarios
  52. 52. RecomendacionesPiensa en gestos, no en clicks
  53. 53. RecomendacionesEstudia los patrones de uso
  54. 54. RecomendacionesEl tamaño mínimo «tappable»es de 44x44 px.
  55. 55. RecomendacionesLas preferencias pueden estardentro y/o fuera de la app
  56. 56. RecomendacionesCuida la batería de tu usuario
  57. 57. RecomendacionesTen en mente los gestos:• Tap• Drag• Pinch Open• Pinch Close• Double tap• Flick• Swipe• Touch and hold
  58. 58. RecomendacionesSácale el jugo al dispositivo• Cámara • Calendario • Cloud• GPS • Contactos • QR Codes• Acelerómetro • Teléfono • Augmented Reality• Giroscopio • Redes sociales • Pago• Multitouch • RSS • Video• Audio • Wi-Fi • Micrófono• 3G • Mail • Gestos• SMS • Videochat • Video output• Notificaciones • Remote • Etc…
  59. 59. Una última cosaRECURSOS
  60. 60. Ya para terminarRecursos iOS Human Interface Guidelines http://developer.apple.com/library/ios/#documentati on/userexperience/conceptual/mobilehig/Introductio n/Introduction.html ¿Para qué sirve? Tiene mucha información valiosa para el diseño de interfaces para dispositivos móviles, su contenido, en muchos aspectos, es tanto útil para el diseño de iPhone /iPad apps como para el diseño de interfaces de otros dispositivos.
  61. 61. Ya para terminarRecursos Slideshare http://www.slideshare.net/djc1805/iphone-apps-what-how- why http://www.slideshare.net/mringlein/designing-iphone-ipad- apps http://www.slideshare.net/ribot/mobile-ux-the-intricacies-of- designing-for-mobile-devices-presentation http://www.slideshare.net/helgetenno/mobile-abilities-map http://www.slideshare.net/arivera71/guia-de-diseo-de-apps- para-iphone ¿Para qué sirve? Muchas presentaciones muy interesantes  entre otras cosas, sobre el diseño de interfaces para dispositivos móviles
  62. 62. Ya para terminarRecursos Axure http://www.axure.com/ ¿Para qué sirve? Para hacer wireframes tanto estáticos como interactivos
  63. 63. Ya para terminarRecursos LiveView http://www.zambetti.com/projects/liveview/ ¿Para qué sirve? Aplicación MAC para testear inmediatamente lo que está aún en el computador
  64. 64. ¿Preguntas? Gracias  Juan Paulo Madriaza Diseñador de Interfaces www.uxd.cl

×