curso: diseño de apps y webs móviles - parte 1
TRANSCRIPT
![Page 1: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/1.jpg)
Diseño de apps y webs móvilesSesión 1: De la idea al prototipoJuan Eladio Sanchez Rosas [juaneladio]
1 2 3
![Page 2: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/2.jpg)
Acerca del autorJuan Eladio Sánchez Rosas
Ingeniero InformáticoConsultor de Aulas Virtuales
Mozilla Reps
Investigador y expositor (offline y online)
de tecnologías web y móviles
about.me/juaneladio
![Page 3: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/3.jpg)
¿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
![Page 4: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/4.jpg)
¿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
![Page 5: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/5.jpg)
¿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
12
3
![Page 6: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/6.jpg)
1. Porqué el contenido móvil es diferente
Diseño de apps y webs móviles1
![Page 7: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/7.jpg)
1. Porqué el contenido móvil es diferentePantallas pequeñas, no utilizables
como una pantalla amplia
Hacer zoom no debería ser la única opción para elegir algo
![Page 8: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/8.jpg)
1. Porqué el contenido móvil es diferenteLos 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.
![Page 9: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/9.jpg)
1. Porqué el contenido móvil es diferenteTeclados ocultan la mitad de la
pantalla al activarse.
Teclas muy pequeñas, autocorrectores, teclados que
cambian de acuerdo al contexto
![Page 10: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/10.jpg)
1. Porqué el contenido móvil es diferenteLos 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.
![Page 11: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/11.jpg)
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.
![Page 12: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/12.jpg)
2. Planeando una web/app móvil
Diseño de apps y webs móviles2
![Page 13: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/13.jpg)
Todo empieza con una declaración: ¿Qué quiero hacer con la web/app?
![Page 14: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/14.jpg)
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.
![Page 15: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/15.jpg)
¿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.
![Page 16: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/16.jpg)
2.B Concepción de un usuarioConcebimos una Proto-persona:
El usuario 'modelo' de nuestra web/app.
![Page 17: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/17.jpg)
2.B Concepción de un usuarioProtopersona:
–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.
![Page 18: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/18.jpg)
2.B Concepción de un usuarioProtopersona:
–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.
![Page 19: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/19.jpg)
¿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.
![Page 20: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/20.jpg)
2.C FuncionalidadesAlgunos 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.
![Page 21: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/21.jpg)
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ónListar cursos disponibles
Matricularse en curso
Ver página de un curso / Ver recurso
Descargar recurso
Elige la funcionalidad más importante
![Page 22: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/22.jpg)
2.D Diagrama de arquitectura de informaciónIniciar sesión
Listar cursos Olvidé mi contraseña Crear nueva cuenta
Inscribirse en cursoAbrir curso
Ver recurso Descargar recurso
Abandonar curso Cerrar sesión
![Page 23: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/23.jpg)
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.
![Page 24: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/24.jpg)
¿Porqué nos tomamos el tiempo en detallar funcionalidades y
diagramas?Porque así podremos diseñar mejor nuestra web/app.
![Page 25: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/25.jpg)
3. Diseñando la experiencia de usuario móvil
Diseño de apps y webs móviles3
![Page 26: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/26.jpg)
3.A Modelos de interacciónGoogle's Material Design
Guidelines
design.google.com
![Page 27: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/27.jpg)
3.A Modelos de interaccióniOS Human Interface Guidelines:
Designing for iOS
developer.apple.com/design
![Page 28: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/28.jpg)
Interfaces nativas, ¿si o no?
La vida es lo que pasa mientras argumentamos a favor o en contra.
![Page 29: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/29.jpg)
No tenemos tanto tiempo
Así que usaremos un atajo
![Page 30: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/30.jpg)
3.B Lineamientos de interacción móvilMúltiples opciones, pero enfócate en una funcionalidad bien hecha.
¿Recuerdas que antes enfatizamos elegir la funcionalidad más importante?
1 2 3 4
![Page 31: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/31.jpg)
3.B Lineamientos de interacción móvilNo reinventes la rueda: delega a
otras apps o al navegador, deja que otras apps te utilicen.
12
3
![Page 32: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/32.jpg)
3.B Lineamientos de interacción móvilLas opciones disponibles deben ser familiares.
Un botón debe verse como un botón, un enlace web se diferencia del texto.
![Page 33: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/33.jpg)
3.C Elementos gráficos Barras de herramientas: ¡acción!
1 2 3 4
![Page 34: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/34.jpg)
3.C Elementos gráficos Navegación: de dónde vine y a
dónde voy, siempre visible.
1 2 3
![Page 35: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/35.jpg)
3.C Elementos gráficos La forma del texto nos dice algo:
tamaños, colores, contrastes.
1 2
3
![Page 36: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/36.jpg)
3.C Elementos gráficos Los colores son tus amigos
1
2
3
4
![Page 37: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/37.jpg)
3.C Elementos gráficos Si iconos tienen significado,
mantener ese significado.
12 3 4
![Page 38: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/38.jpg)
¡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
![Page 39: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/39.jpg)
Ahora te toca poner esto en práctica
Realiza todo el proceso con tu idea de web/app
![Page 40: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/40.jpg)
Referencias bibliográficasDon’t Make Me Think, Revisited: A
Common Sense Approach to Web Usability
by Steve KrugPublisher: New RidersRelease 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 appsBy Javier CuelloPublisher: disenoenviaje.comRelease Date: June 2014
Mobile Design Pattern Gallery, 2nd Edition
by Theresa Neil Publisher: O'Reilly Media, Inc. Published: May 2014
Material Design Guidelinesdesign.google.com
iOS Human Interface Guidelines: Designing for iOS
developer.apple.com/design
![Page 41: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/41.jpg)
¿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
![Page 42: Curso: Diseño de apps y webs móviles - Parte 1](https://reader031.vdocuments.co/reader031/viewer/2022012919/589b1b391a28abc1148b63f9/html5/thumbnails/42.jpg)
Diseño de apps y webs móvilesSesión 1: De la idea al prototipoJuan Eladio Sanchez Rosas [about.me/juaneladio]