Curso: Diseño de apps y webs móviles - Parte 1

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]