Text

Diseo de apps mviles

@juaneladio
 Cosas que NO
debes hacer en mviles
No intentes esto en casa
No estn haciendo una sbana
Tampoco es una pantalla fija
No slo muestres informacin
No reinventes la rueda
No hagas apps para ingenieros
No debes resolver TODO
No debes elegir una plataforma
(o quiz s)
Lean UX
Slo como dato
Lean UX

Declarar
supuestos

Retroalimentacin Crear un
e investigacin MVP

Correr un
experimento
Ahora s
El taller
Parte prctica 1

Formacin de grupos de trabajo

Concepcin de una app

Qu problema soluciona?

Cul es su objetivo?

Cul es su valor agregado / diferenciador?

Ejemplo

Concepcin de una app: Vas de Lima

Solucionael problema de uso de transporte

pblico en una ciudad

Buscaofrecer informacin confiable de las rutas

de transporte de una ciudad

Sediferencia de las dems porque se apoya en

informacin del usuario y reporta los puntos ms
congestionados
Parte prctica 2

Concepcin
del usuario de la app:
proto-persona

Cara y nombre

Informacin demogrfica / comportamiento

Puntos de dolor y necesidades

Posibles soluciones
Ejemplo

Usuario de Vas de Lima

Nombre:
Jos Pasquel

Informacin demogrfica / comportamiento:

19 aos,
estudiante universitario,
vive en San Juan de Miraflores,
presupuesto reducido,
clase media
Ejemplo
Usuario de Vas de Lima

Puntos de dolor / necesidades:

Hay horas lmite 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
pblico

Posibles soluciones:
Ahorrar en pasajes,
recibir avisos de otros usuarios acerca de estado
de rutas o paraderos
Parte prctica 3

Concepcin de funcionalidades de la app

Funcin - Para qu sirve

Categorizarlas entre principales y secundarias

Concepcin
del diagrama de arquitectura de
informacin

Cmo se distribuyen las pantallas?

Cmo se relacionan entre s?

Patrones de diseo mvil
Una gua rpida
Patrones: Navegacin
Patrones: Navegacin (2)
Patrones: Formularios
Patrones: Tablas y listas
Patrones: Bsquedas
Patrones: Ordenamiento
Patrones: Filtrado
Patrones: Barras de herramientas
Patrones: Grficos
Patrones: Invitaciones
Patrones: Retroalimentacin
Patrones: Interaccin
Patrones: Ayuda
Un modelo de interaccin

buildingfirefoxos.com
Firefox OS Building Blocks
Parte prctica 4

Concepcin de las pantallas de la app

Cules son las pantallas principales?

Cules permiten seguir una tarea completa?

Ms patrones - lovelyui.com
Ms patrones - pttrns.com
Ms - mobile-patterns.com
Android: google.com/design
iOS: developer.apple.com/library/ios/design/
Qu sigue?

Prototipado

Que las pantallas tengan la secuencia lgica

Test de usabilidad

Quesea probado por terceros, sin gua pero con

seguimiento
Y una ltima cosa ms
O quiz dos
Quiz no necesitas elegir una
plataforma
Mozilla Appmaker
apps.webmaker.org/designer
Gracias!

Juan Eladio Snchez Rosas

@juaneladio

Mozilla Per

@mozillaperu