taller diseno de apps móviles
Post on 03-Dec-2014
368 Views
Preview:
DESCRIPTION
TRANSCRIPT
Text
Diseño de apps móviles@juaneladio
Cosas que NO debes hacer en móviles
No intentes esto en casa
No están haciendo una sábana
Tampoco es una pantalla fija
No sólo muestres información
No reinventes la rueda
No hagas apps para ingenieros
No debes resolver TODO
No debes elegir una plataforma(o quizá sí)
Lean UXSólo como dato
Lean UX
Declarar supuestos
Retroalimentación e investigación
Crear unMVP
Correr un experimento
Ahora síEl taller
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?
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
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
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
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
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í?
Patrones de diseño móvilUna guía rápida
Patrones: Navegación
Patrones: Navegación (2)
Patrones: Formularios
Patrones: Tablas y listas
Patrones: Búsquedas
Patrones: Ordenamiento
Patrones: Filtrado
Patrones: Barras de herramientas
Patrones: Gráficos
Patrones: Invitaciones
Patrones: Retroalimentación
Patrones: Interacción
Patrones: Ayuda
Un modelo de interacción
buildingfirefoxos.com
Firefox OS Building Blocks
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?
Más patrones - lovelyui.com
Más patrones - pttrns.com
Más - mobile-patterns.com
Android: google.com/design
iOS: developer.apple.com/library/ios/design/
¿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
Y una última cosa másO quizá dos
Quizá no necesitas elegir una plataforma
Mozilla Appmaker apps.webmaker.org/designer
¡Gracias!
• Juan Eladio Sánchez Rosas
• @juaneladio
• Mozilla Perú
• @mozillaperu
top related