Download - Taller Diseno de apps móviles
![Page 1: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/1.jpg)
Text
Diseño de apps móviles@juaneladio
![Page 2: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/2.jpg)
Cosas que NO debes hacer en móviles
No intentes esto en casa
![Page 3: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/3.jpg)
No están haciendo una sábana
![Page 4: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/4.jpg)
Tampoco es una pantalla fija
![Page 5: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/5.jpg)
No sólo muestres información
![Page 6: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/6.jpg)
No reinventes la rueda
![Page 7: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/7.jpg)
No hagas apps para ingenieros
![Page 8: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/8.jpg)
No debes resolver TODO
![Page 9: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/9.jpg)
No debes elegir una plataforma(o quizá sí)
![Page 10: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/10.jpg)
Lean UXSólo como dato
![Page 11: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/11.jpg)
Lean UX
Declarar supuestos
Retroalimentación e investigación
Crear unMVP
Correr un experimento
![Page 12: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/12.jpg)
Ahora síEl taller
![Page 13: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/13.jpg)
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?
![Page 14: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/14.jpg)
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
![Page 15: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/15.jpg)
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
![Page 16: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/16.jpg)
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
![Page 17: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/17.jpg)
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
![Page 18: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/18.jpg)
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í?
![Page 19: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/19.jpg)
Patrones de diseño móvilUna guía rápida
![Page 20: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/20.jpg)
Patrones: Navegación
![Page 21: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/21.jpg)
Patrones: Navegación (2)
![Page 22: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/22.jpg)
Patrones: Formularios
![Page 23: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/23.jpg)
Patrones: Tablas y listas
![Page 24: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/24.jpg)
Patrones: Búsquedas
![Page 25: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/25.jpg)
Patrones: Ordenamiento
![Page 26: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/26.jpg)
Patrones: Filtrado
![Page 27: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/27.jpg)
Patrones: Barras de herramientas
![Page 28: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/28.jpg)
Patrones: Gráficos
![Page 29: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/29.jpg)
Patrones: Invitaciones
![Page 30: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/30.jpg)
Patrones: Retroalimentación
![Page 31: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/31.jpg)
Patrones: Interacción
![Page 32: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/32.jpg)
Patrones: Ayuda
![Page 33: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/33.jpg)
Un modelo de interacción
buildingfirefoxos.com
![Page 34: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/34.jpg)
Firefox OS Building Blocks
![Page 35: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/35.jpg)
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?
![Page 36: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/36.jpg)
Más patrones - lovelyui.com
![Page 37: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/37.jpg)
Más patrones - pttrns.com
![Page 38: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/38.jpg)
Más - mobile-patterns.com
![Page 39: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/39.jpg)
Android: google.com/design
![Page 40: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/40.jpg)
iOS: developer.apple.com/library/ios/design/
![Page 41: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/41.jpg)
¿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
![Page 42: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/42.jpg)
Y una última cosa másO quizá dos
![Page 43: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/43.jpg)
Quizá no necesitas elegir una plataforma
![Page 44: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/44.jpg)
Mozilla Appmaker apps.webmaker.org/designer
![Page 45: Taller Diseno de apps móviles](https://reader037.vdocuments.net/reader037/viewer/2022102618/547e95d9b4af9f01558b468d/html5/thumbnails/45.jpg)
¡Gracias!
• Juan Eladio Sánchez Rosas
• @juaneladio
• Mozilla Perú
• @mozillaperu