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

1. Clase 02

2. Algo más universal
PRINCIPIOS DE INTERACCIÓN

3. Principios de Interacción
Integridad estética
La aplicación debe tener en sintonía su función y su
diseño

4. Principios de Interacción
Consistencia (externa e interna)
La aplicación debe funcionar como funcionan otras.
La aplicación debe comportarse consistentemente a
nivel interno.

5. Principios de Interacción
Manipulación directa
La aplicación debe permitir que el usuario manipule
directamente el contenido.
• Rotando el dispositivo
• Usando gestos para manipular por ejemplo el zoom
• Debe sentir que la interfaz responde
inmediatamente a sus interacciones

6. Principios de Interacción
Feedback
La aplicación debe entregar constante y fluido feedback
de su funcionamiento para que el usuario sienta que
está todo bien

7. Principios de Interacción
Metáforas de la vida real
La aplicación puede comportarse como lo hacen los
objetos cotidianos para facilitar su interacción.
• Prender / apagar
• Carpetas
• Micrófonos
• Pasar páginas
• Controles rotativos

8. Principios de Interacción
Control del usuario
Los usuarios deben ser quiénes detonen las acciones de
la interfaz, no la aplicación

9. Las básicas
RECOMENDACIONES

10. Recomendaciones
Mobile no es la web más
pequeña, es diferente. Trátala
como tal

11. Recomendaciones
Enfócate en la tarea principal

12. Recomendaciones
Jerarquiza el contenido que el
usuario está buscando

13. Recomendaciones
Piensa de arriba a abajo

14. Recomendaciones
Si es más grande que la
pantalla, que se note

15. Recomendaciones
Dale a tus usuarios un recorrido
lógico de uso

16. Recomendaciones
Usa la terminología de tu
usuario, no la de tu cliente

17. Recomendaciones
Evita que el usuario ingrese
texto

18. Recomendaciones
Guarda el avance
automáticamente (a menos que
pueda ser perjudicial)

19. Recomendaciones
Permite que el usuario se
arrepienta

20. Recomendaciones
Cuida el trabajo de tu usuario

21. Recomendaciones
Permite y estimula la conexión
entre usuarios

22. Recomendaciones
Realiza búsquedas mediante
suggestions

23. Recomendaciones
Preocúpate de tu página en el
AppStore

24. Recomendaciones
Usa la animación para
comunicar

25. Recomendaciones
Recuerda que la aprobación en
el AppStore puede demorar

26. Recomendaciones
Usa las notificaciones sólo
cuando el usuario las necesite

27. Recomendaciones
Retrasa el proceso de registro lo
más que puedas

28. Recomendaciones
Recuerda que en cualquier
momento suena el celular

29. Recomendaciones
Los controles deben parecer
«Tappables»

30. Recomendaciones
No borres un botón sólo porque
está temporalmente inactivo

31. Recomendaciones
La creatividad es la mezcla
perfecta entre originalidad y
funcionalidad

32. Recomendaciones
Está bien usar gráfica propia,
pero cuidado con pasar a llevar
las convenciones

33. Recomendaciones
En lo Mobile el contexto es
mucho más variado que en la
web

34. Recomendaciones
Diseña para pantallas chicas y
para punteros enormes e
imprecisos

35. Recomendaciones
La interfaz es siempre a pantalla
completa

36. Recomendaciones
El usuario está por lo general
pendiente de mil cosas cuando
usa nuestra interfaz

37. Recomendaciones
Diseña especialmente para
móviles

38. Recomendaciones
Céntrate en lo que un celular
puede hacer bien

39. Recomendaciones
Estudia a tu usuario

40. Recomendaciones
Acostúmbrate a los cambios de
todo tipo

41. Recomendaciones
Las actualizaciones te
mantienen en el radar

42. Recomendaciones
Mobile es bueno en el contexto
espacial y temporal

43. Recomendaciones
Reduce la carga cognitiva

44. Recomendaciones
Diseña para las distintas
orientaciones

45. Recomendaciones
Pásalo al dispositivo cuanto
antes

46. Recomendaciones
Simple es mejor

47. Recomendaciones
Itera rápido

48. Recomendaciones
Prueba con usuarios

49. Recomendaciones
Documenta el proceso

50. Recomendaciones
El resultado es la aplicación, no
el proceso

51. Recomendaciones
Un buen proyecto es la mejor
mezcla entre:
• Los objetivos de negocio
• Los requerimientos técnicos
• Las necesidades de los usuarios

52. Recomendaciones
Piensa en gestos, no en clicks

53. Recomendaciones
Estudia los patrones de uso

54. Recomendaciones
El tamaño mínimo «tappable»
es de 44x44 px.

55. Recomendaciones
Las preferencias pueden estar
dentro y/o fuera de la app

56. Recomendaciones
Cuida la batería de tu usuario

57. Recomendaciones
Ten en mente los gestos:
• Tap
• Drag
• Pinch Open
• Pinch Close
• Double tap
• Flick
• Swipe
• Touch and hold

58. Recomendaciones
Sá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. Una última cosa
RECURSOS

60. Ya para terminar
Recursos
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. Ya para terminar
Recursos
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. Ya para terminar
Recursos
Axure
http://www.axure.com/
¿Para qué sirve?
Para hacer wireframes tanto estáticos
como interactivos

63. Ya para terminar
Recursos
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. ¿Preguntas?
Gracias 
Juan Paulo Madriaza
Diseñador de Interfaces
www.uxd.cl