El documento ofrece pautas sobre el diseño de aplicaciones móviles, enfatizando la importancia de no complicar la interfaz y centrarse en las necesidades del usuario. Se presenta un enfoque práctico que incluye la creación de un MVP, identificación de problemas a resolver y diseño de funcionalidades. Además, se sugieren patrones de diseño y recursos útiles para el desarrollo de estas apps.

1. Text
Diseño de apps móviles
@juaneladio

2. Cosas que NO
debes hacer en móviles
No intentes esto en casa

3. No están haciendo una sábana

4. Tampoco es una pantalla fija

5. No sólo muestres información

6. No reinventes la rueda

7. No hagas apps para ingenieros

8. No debes resolver TODO

9. No debes elegir una plataforma
(o quizá sí)

10. Lean UX
Sólo como dato

11. Lean UX
Declarar
supuestos
Retroalimentación
e investigación
Crear un
MVP
Correr un
experimento

12. Ahora sí
El taller

13. Parte práctica 1
• Formación de grupos de trabajo
• Concepción de una app
• ¿Qué problema soluciona?
• ¿Cuál es su objetivo?
• ¿Cuál es su valor agregado / diferenciador?

14. Ejemplo
• Concepción de una app: Vías de Lima
• Soluciona el problema de uso de transporte
público en una ciudad
• Busca ofrecer información confiable de las rutas
de transporte de una ciudad
• Se diferencia de las demás porque se apoya en
información del usuario y reporta los puntos más
congestionados

15. Parte práctica 2
• Concepción del usuario de la app:
proto-persona
• Cara y nombre
• Información demográfica / comportamiento
• Puntos de dolor y necesidades
• Posibles soluciones

16. Ejemplo
• Usuario de Vías de Lima
• Nombre:
José Pasquel
• Información demográfica / comportamiento:
19 años,
estudiante universitario,
vive en San Juan de Miraflores,
presupuesto reducido,
clase media

17. Ejemplo
• Usuario de Vías de Lima
• Puntos de dolor / necesidades:
Hay horas límite para tomar buses,
debe llegar a tiempo a clases (en la UNI) o a
recoger a su enamorada (vive en San Borja),
debe aprovechar el medio pasaje en transporte
público
• Posibles soluciones:
Ahorrar en pasajes,
recibir avisos de otros usuarios acerca de estado
de rutas o paraderos

18. Parte práctica 3
• Concepción de funcionalidades de la app
• Función - Para qué sirve
• Categorizarlas entre principales y secundarias
• Concepción del diagrama de arquitectura de
información
• ¿Cómo se distribuyen las pantallas?
• ¿Cómo se relacionan entre sí?

19. Patrones de diseño móvil
Una guía rápida

20. Patrones: Navegación

21. Patrones: Navegación (2)

22. Patrones: Formularios

23. Patrones: Tablas y listas

24. Patrones: Búsquedas

25. Patrones: Ordenamiento

26. Patrones: Filtrado

27. Patrones: Barras de herramientas

28. Patrones: Gráficos

29. Patrones: Invitaciones

30. Patrones: Retroalimentación

31. Patrones: Interacción

32. Patrones: Ayuda

33. Un modelo de interacción
buildingfirefoxos.com

34. Firefox OS Building Blocks

35. Parte práctica 4
• Concepción de las pantallas de la app
• ¿Cuáles son las pantallas principales?
• ¿Cuáles permiten seguir una tarea completa?

36. Más patrones - lovelyui.com

37. Más patrones - pttrns.com

38. Más - mobile-patterns.com

39. Android: google.com/design

40. iOS: developer.apple.com/library/ios/design/

41. ¿Qué sigue?
• Prototipado
• Que las pantallas tengan la secuencia lógica
• Test de usabilidad
• Que sea probado por terceros, sin guía pero con
seguimiento

42. Y una última cosa más
O quizá dos

43. Quizá no necesitas elegir una
plataforma

44. Mozilla Appmaker
apps.webmaker.org/designer

45. ¡Gracias!
• Juan Eladio Sánchez Rosas
• @juaneladio
• Mozilla Perú
• @mozillaperu