You are on page 1of 45

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 UX Sólo como dato .

Lean UX Declarar supuestos Retroalimentación Crear un e investigación MVP 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 • Solucionael problema de uso de transporte público en una ciudad • Buscaofrecer información confiable de las rutas de transporte de una ciudad • Sediferencia 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 .

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

recibir avisos de otros usuarios acerca de estado de rutas o paraderos .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.

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í? .Parte práctica 3 • Concepción de funcionalidades de la app • Función .

Patrones de diseño móvil Una 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? .

lovelyui.Más patrones .com .

com .Más patrones .pttrns.

mobile-patterns.com .Más .

Android: google.com/design .

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

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

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

Quizá no necesitas elegir una plataforma .

webmaker.org/designer .Mozilla Appmaker apps.

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