En esta primera parte del curso Diseño de apps y webs móviles veremos los pasos desde la idea hasta el prototipo. Incluye: 1. Porqué el contenido móvil es diferente, 2. Planeando una web/app móvil, 3. Diseñando una experiencia de usuario móvil.

1. Diseño de apps y webs móviles
Sesión 1: De la idea al prototipo
Juan Eladio Sanchez Rosas [juaneladio]
1 2 3

2. Acerca del autor
Juan Eladio Sánchez Rosas
Ingeniero Informático
Consultor de Aulas Virtuales
Mozilla Reps
Investigador y expositor
(offline y online)
de tecnologías web y móviles
about.me/juaneladio

3. ¿Porqué diseño móvil?
Porque es una carencia real:
se enfatiza la enseñanza de
tecnologías de desarrollo móvil,
pero no las mejores prácticas de
diseño móvil. Porque es un tema importante:
es necesario dedicarle tiempo a
pensar en los problemas que
resolveremos antes de escribir la
primera línea de código

4. ¿Porqué apps y webs?
Ambas formas de software
coexisten en dispositivos
móviles.
Puedes elegir usar una sola
de ellas, pero también
pueden complementarse
entre sí.
Web: “Consigue una
experiencia
personalizada
descargando nuestra
app”
Móvil: “Para completar
esta transacción sigue
este enlace web”
xkcd

5. ¿Qué veremos hoy?
Sesión 1: De la idea al prototipo
1. Porqué el contenido móvil es
diferente
2. Planeando una web/app móvil
3. Diseñando una experiencia de
usuario móvil
IDEA
PROTOTIPO
1
2
3

6. 1. Porqué el contenido
móvil es diferente
Diseño de apps y webs móviles1

7. 1. Porqué el contenido móvil es diferente
Pantallas pequeñas, no utilizables
como una pantalla amplia
Hacer zoom no debería ser la
única opción para elegir algo

8. 1. Porqué el contenido móvil es diferente
Los recursos de hardware y
conectividad son más limitados
que en una PC o Mac.
Es necesario optimizar los
requerimientos de software para
un mejor desempeño.

9. 1. Porqué el contenido móvil es diferente
Teclados ocultan la mitad de la
pantalla al activarse.
Teclas muy pequeñas,
autocorrectores, teclados que
cambian de acuerdo al contexto

10. 1. Porqué el contenido móvil es diferente
Los usuarios interactúan con el
móvil usando sus manos y
pueden ocultar la pantalla.
Pueden sostener el móvil como
prefieran y pueden usar gestos.

11. Antes de avanzar, repasemos:
¿Porqué el contenido móvil es
diferente?
1. Pantallas pequeñas
2. Recursos de hardware y
____________ _________
3. T _ _ _ _ _ _ _
4. M _ _ _ _
Si no recuerdas 2, 3 y 4,
retroceder y recordar.
Si ya los recuerdas,
¡felicidades!, haz completado
la primera parte de la sesión.

12. 2. Planeando una
web/app móvil
Diseño de apps y webs móviles2

13. Todo empieza con una declaración:
¿Qué quiero hacer con la web/app?

14. 2.A Concepción de una web/app
¿Qué quiero lograr con la app?
(¿Cuál es su objetivo?)
¿Qué problema soluciona?
¿Cuál es su valor agregado /
diferenciador?
Quiero ingresar a un 'aula virtual de
tecnologías' y consultar los
materiales de los cursos que llevo.
Educación continua.
Descargar contenidos para leer
después.
Las respuestas pueden
mejorarse con el tiempo.

15. ¿Porqué nos tomamos el tiempo en
concebir una web/app?
Porque necesitamos definir claramente los principios de nuestra
web/app, y considerar qué la haría diferente a las demás.

16. 2.B Concepción de un usuario
Concebimos una
Proto-persona:
El usuario 'modelo' de nuestra
web/app.

17. 2.B Concepción de un usuario
Protopersona:
–Nombre y dibujo
–Información demográfica /
comportamiento
“Alejandro Lara”
30 años, de clase media baja, soltero sin
hijos, familiarizado con el uso de
tecnología
Nació en Ica y vive en Jesús María, Lima.
Parte del equipo de desarrollo en una
entidad privada de Surco.
Sale con su pareja o amigos dos veces por
semana. No le gusta caminar.
En el segundo punto se puede
ahondar en actitudes,
cualidades y preferencias.

18. 2.B Concepción de un usuario
Protopersona:
–Cara y nombre
–Información demográfica /
comportamiento
–Puntos de dolor y necesidades
–Posibles soluciones
- Necesita certificarse en nuevas
tecnologías para conseguir un
ascenso en su trabajo.
- A veces hay imprevistos en la oficina
y sale tarde, por lo cual no puede
estudiar en horario fijo.
- Utiliza transporte público en Lima y
pasa varias horas en microbuses.
Tarea: piensa en cómo un móvil
resolvería estos puntos.

19. ¿Porqué nos tomamos el tiempo en
concebir un usuario?
Porque debemos pensar cómo nuestra web/app le resolvería la vida a
un usuario que lo necesita, no nosotros mismos.

20. 2.C Funcionalidades
Algunos objetivos:
- Puedo iniciar sesión con mi cuenta.
- Puedo ver los cursos que llevo y los
que puedo llevar.
- Puedo matricularme en
los cursos que quiera.
- Por cada curso puedo consultar los
materiales disponibles.
- Puedo descargar el contenido de mis
cursos para leerlos sin conexión.
Comienza con los objetivos desde
el punto de vista del usuario.
Luego pasarás a las
funcionalidades en si.

21. 2.C Funcionalidades
- Puedo iniciar sesión con mi cuenta.
- Puedo ver los cursos que llevo y los
que puedo llevar.
- Puedo matricularme en
los cursos que quiera.
- Por cada curso puedo consultar los
materiales disponibles.
- Puedo descargar el contenido de mis
cursos para leerlos sin conexión.
Iniciar sesión
Listar cursos disponibles
Matricularse en curso
Ver página de un curso
/ Ver recurso
Descargar recurso
Elige la funcionalidad más
importante

22. 2.D Diagrama de arquitectura de información
Iniciar sesión
Listar cursos Olvidé mi contraseña Crear nueva cuenta
Inscribirse en cursoAbrir curso
Ver recurso Descargar recurso
Abandonar curso Cerrar sesión

23. Antes de avanzar, repasemos:
Pasos para planear una web/app:
1. Concebir una web/app
2. Concebir un _______ (o también
llamado ____________, que tiene _
componentes y son ...)
3. Elaborar las _______________
a partir de _________
4. Elaborar un ...
Si no recuerdas 2, 3 y 4,
retroceder y recordar.
Si ya los recuerdas,
¡felicidades!, haz completado
la segunda parte de la sesión.

24. ¿Porqué nos tomamos el tiempo en
detallar funcionalidades y
diagramas?
Porque así podremos diseñar mejor nuestra web/app.

25. 3. Diseñando la experiencia
de usuario móvil
Diseño de apps y webs móviles3

26. 3.A Modelos de interacción
Google's Material Design
Guidelines
design.google.com

27. 3.A Modelos de interacción
iOS Human Interface Guidelines:
Designing for iOS
developer.apple.com/design

28. Interfaces nativas, ¿si o no?
La vida es lo que pasa mientras argumentamos a favor o en contra.

29. No tenemos tanto tiempo
Así que usaremos un atajo

30. 3.B Lineamientos de interacción móvil
Múltiples opciones, pero enfócate
en una funcionalidad bien hecha.
¿Recuerdas que antes enfatizamos elegir
la funcionalidad más importante?
1 2 3 4

31. 3.B Lineamientos de interacción móvil
No reinventes la rueda: delega a
otras apps o al navegador,
deja que otras apps te utilicen.
1
2
3

32. 3.B Lineamientos de interacción móvil
Las opciones disponibles deben ser familiares.
Un botón debe verse como un botón, un enlace web se diferencia del texto.

33. 3.C Elementos gráficos
Barras de herramientas: ¡acción!
1 2 3 4

34. 3.C Elementos gráficos
Navegación: de dónde vine y a
dónde voy, siempre visible.
1 2 3

35. 3.C Elementos gráficos
La forma del texto nos dice algo:
tamaños, colores, contrastes.
1
2
3

36. 3.C Elementos gráficos
Los colores son tus amigos
1
2
3
4

37. 3.C Elementos gráficos
Si iconos tienen significado,
mantener ese significado.
1
2 3 4

38. ¡Terminamos!
¿Qué vimos hoy?
PROTOTIPO
1
2
3
IDEA
3. Diseñando una
experiencia de usuario
móvil
2. Planeando una
web/app móvil
1. Porqué el contenido
móvil es diferente

39. Ahora te toca poner esto en
práctica
Realiza todo el proceso con tu idea de web/app

40. Referencias bibliográficas
Don’t Make Me Think, Revisited: A
Common Sense Approach to Web
Usability
by Steve Krug
Publisher: New Riders
Release Date: December 2013
OSCON 2014: Complete Video
Compilation
by O'Reilly Media, Inc.
Publisher: O'Reilly Media, Inc.
Release Date: August 2014
- Unfortunately, Design Tutorial Has
Stopped, and Other Ways to Infuriate
People With Mobile Apps - Paris Buttfield-
Addison, Jonathan
Taller de UX y diseño de apps
By Javier Cuello
Publisher: disenoenviaje.com
Release Date: June 2014
Mobile Design Pattern Gallery, 2nd
Edition
by Theresa Neil
Publisher: O'Reilly Media, Inc.
Published: May 2014
Material Design Guidelines
design.google.com
iOS Human Interface Guidelines:
Designing for iOS
developer.apple.com/design

41. ¿Esto tenía que ver con Mozilla?
Todas las capturas usadas aquí
corresponden a webs/apps en
Firefox OS
Puedes probar a hacer prototipos
en Mozilla Webmaker para
Android

42. Diseño de apps y webs móviles
Sesión 1: De la idea al prototipo
Juan Eladio Sanchez Rosas [about.me/juaneladio]