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