Diseño de apps y webs móvilesSesión 1: De la idea al prototipoJuan Eladio Sanchez Rosas [juaneladio]
1 2 3
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
¿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
¿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
¿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
1. Porqué el contenido móvil es diferente
Diseño de apps y webs móviles1
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
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.
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
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.
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.
2. Planeando una web/app móvil
Diseño de apps y webs móviles2
Todo empieza con una declaración: ¿Qué quiero hacer con la web/app?
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.
¿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.
2.B Concepción de un usuarioConcebimos una Proto-persona:
El usuario 'modelo' de nuestra web/app.
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.
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.
¿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.
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.
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
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
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.
¿Porqué nos tomamos el tiempo en detallar funcionalidades y
diagramas?Porque así podremos diseñar mejor nuestra web/app.
3. Diseñando la experiencia de usuario móvil
Diseño de apps y webs móviles3
3.A Modelos de interacciónGoogle's Material Design
Guidelines
design.google.com
3.A Modelos de interaccióniOS Human Interface Guidelines:
Designing for iOS
developer.apple.com/design
Interfaces nativas, ¿si o no?
La vida es lo que pasa mientras argumentamos a favor o en contra.
No tenemos tanto tiempo
Así que usaremos un atajo
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
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
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.
3.C Elementos gráficos Barras de herramientas: ¡acción!
1 2 3 4
3.C Elementos gráficos Navegación: de dónde vine y a
dónde voy, siempre visible.
1 2 3
3.C Elementos gráficos La forma del texto nos dice algo:
tamaños, colores, contrastes.
1 2
3
3.C Elementos gráficos Los colores son tus amigos
1
2
3
4
3.C Elementos gráficos Si iconos tienen significado,
mantener ese significado.
12 3 4
¡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
Ahora te toca poner esto en práctica
Realiza todo el proceso con tu idea de web/app
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
¿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
Diseño de apps y webs móvilesSesión 1: De la idea al prototipoJuan Eladio Sanchez Rosas [about.me/juaneladio]