En esta presentación veremos cuáles son los principales patrones de diseño e interacción para aplicaciones en Android. Tendremos una introducción a los conceptos básicos del diseño centrado en el usuario (Ux) y conoceremos las reglas heurísticas para la creación de prototipos que mejoren la experiencia de nuestros usuarios. Temario: Introducción a Ux Patrones de diseño de interacción en Android Principios de Material design Creación de wireframes Reglas Heurísticas

1. Experiencia de usuario en Android
UX en Android

2. Sobre mi
Sandhy Vargas Cruz
UX /UI Designer
sandhy.vargas@gmail.com
linkedin.com/in/sandhyvargascruz/
Soy Diseñadora gráfica (UBA) y me dedico al diseño
de interfaces digitales desde el año 2004.
Actualmente trabajo en el área de Experiencia de
usuario de almundo.com y me desempeño como
Diseñadora UX/UI Freelance.
También trabajé en: UBA, La Usina ONG, Despegar,
Zonaprop.

3. 1. Introducción a UX

4. ¿Qué es experiencia
de usuario?

5. Es el conjunto de factores y elementos relativos a la interacción
del usuario, un entorno o dispositivo concretos, cuyo resultado es la
generación de una percepción positiva o negativa de dicho
servicio, producto o dispositivo.
Wikipedia

6. Concepto integrador de todos los aspectos de la interacción entre el
usuario final y la compañía, sus servicios y productos.
Nielsen & Norman Group (2003)

8. Sirve para entender la causa, el objetivo y el
contexto, que busca el usuario al utilizar nuestro
producto o servicio y poder mejorar la efectividad.

9. Un buen UX es invisible

10. ¿Qué variables
intervienen en UX?

11. UX
Problemas, necesidades y
deseos de los usuarios
Beneficios
Objetivos organizacionales
Estrategia de marketing
Infraestructura
Arquitectura
Rendimiento
Soporte

13. Mapa de las disciplinas relacionadas a UX

15. Usabilidad
Es la eficacia, eficiencia y satisfacción con la que un
producto permite alcanzar objetivos específicos a
usuarios específicos en un contexto de uso
específico.

16. Proceso iterativo de mejora continua

17. Pruebas con usuarios
Pruebas con usuarios
Se basa en la observación y análisis de cómo un grupo de usuarios reales utiliza la
App, anotando los problemas de uso con los que se encuentran para poder
solucionarlos posteriormente.
Permiten evaluar desiciones con productos existentes o con prototipos económicos,
bajando costos y riesgos del proyecto
Son pruebas rápidas de bajo costo y alto impacto.

18. 2. De lo abstracto a lo concreto

19. The Elements of User Experience (Jesse James Garret)

20. Diseño de
Experiencia
(UX)
ABSTRACTO CONCRETO
Diseño de
servicios
Diseño de
interacción
(IxD)
Diseño visual Diseño de
interfaces
User research
Personas
Card Sorting
Entrevistas
Arquitectura de información
Pruebas con usuarios
Sketching
Investigación
Prototipado
Benchmark Evaluación Heurística

21. Diseño de Experiencia (UX)
ESTRATEGIA Objetivos de la app
¿Qué problema queremos
resolverle a quién?
Necesidades del usuario:
¿Quiénes son nuestros usuarios?
¿Qué necesitan?

22. • Investigación
• Entrevistas con usuariosDiseño de Experiencia (UX)
ESTRATEGIA • User research
• Brief del cliente

23. Requerimientos de contenido
¿Qué contenido necesitamos
para satisfacer las
necesidades del usuario?
Especificaciones funcionales
¿Cuáles van a ser las funcionalidades
detalladas que la app debe incluir para
satisfacer las necesidades del usuarios?
(Feature set)
Diseño de servicios
ALCANCE

24. Diseño de servicios
ALCANCE • Técnica personas
• Modelos mentales
• User Journey Maps
• Análisis Funcional
https://blog.mailchimp.com/new-mailchimp-user-persona-research/

25. Arquitectura de información:
¿Qué estructura de información
facilita al usuario el acceso
intuitivo al contenido?
Diseño de interacción
¿Cómo va a interactuar el usuario
con la app?
¿Qué flows necesitamos definir para
facilitar las tareas del usuario?
Diseño de Interacción (IxD)
ESTRUCTURA

26. Diseño de Interacción (IxD)
ESTRUCTURA • Arquitectura de información
• Card sorting
• Mapas conceptuales

27. Diseño de la interfaz y la navegación
¿Cuáles son los elementos concretos
que facilitarán la interacción del usuario
con la funcionalidad?
¿Qué elementos facilitarán el movimiento
de los usuarios a través de la
arquitectura de la información?
Diseño de información
¿Cómo vamos a presentar la
información para facilitar el
entendimiento?
Diseño de Interfaces
ESQUEMA

28. Diseño de Interfaces
ESQUEMA • Sketching
• Wireframes
• Prototipos de baja fidelidad
• Pruebas con usuarios

29. Diseño Visual
SUPERFICIE Estilos y elementos gráficos
¿Qué tratamiento visual va a tener la interfaz (“look and feel”)?
¿Qué lenguaje, carácter e identidad visual va a tener nuestra app?

30. Diseño Visual
SUPERFICIE • Patrones de diseño
• Jerarquías visuales
• Convenciones
• Material design

31. 3. UX mobile

32. Contexto mobile
Ambientes dinámicos
Poca atención
Interrupciones
Pantalla pequeña
Datos limitados /conexiones variables
Batería
Distraídos
Imprecisos
Sin paciencia
Sin tiempo
Usuarios

33. ¿Qué?
¿Cómo?
¿Dónde?
¿Cuándo?

34. ¿Dónde lo usan?
¿En qué momentos?
¿Durante cuánto tiempo?
¿En qué posición?
¿Con quién comparten el
dispositivo?
Smartphones Tablets
Tanto en casa como fuera
de ella.
En ratos libres, para pasar
el tiempo.
Interacciones medias de
10 minutos, fragmentadas
En cualquier posición,
cómoda e incómoda.
Con nadie, son
dispositivos personales
Mayormente en los
hogares.
En la cama o viendo la
televisión.
Interacciones medias de
media hora, son más
continuas
Posiciónes cómodas, cama
o sofá.
Una misma tablet suele ser
usada por más de un
integrante de la familia

36. Heurísticas
de usabilidad

37. Planteadas en 1995 por Jakob Nielsen.
Jakob estudió 249 problemas de usabilidad y a partir de ellos estableció las “reglas
generales” para reducir las frustraciones que un usuario puede tener al utilizar
nuestro sistema.

38. 1. MOSTRAR EL ESTADO DEL SISTEMA
La app siempre debe mantener a los usuarios informados sobre lo que
está pasando, a través de una retroalimentación apropiada en un tiempo
razonable. Feedback constante.

39. 2. HABLAR EL LENGUAJE DEL USUARIO
El sistema debe hablar el lenguaje de los usuarios, en lugar de términos
orientados al sistema. Debe seguir las convenciones del mundo real,
haciendo que la información aparezca en un orden natural y lógico.
Palabras, frases y conceptos familiares para el usuario.

40. 3. CONTROL Y LIBERTAD DEL USUARIO
Los usuarios deben sentir que tienen el control en todo momento. El
usuario debe poder navegar libremente, encontrar fácilmente salidas, y
rutas alternativas.

41. 4. CONSISTENCIA Y ESTÁNDARES
Los usuarios no deberían tener que preguntarse si diferentes palabras,
situaciones o acciones significan lo mismo. Se debe seguir un estándar y ser
consistentes con las decisiones que tomamos a lo largo de toda la
plataforma.

43. 5. PREVENIR ERRORES
Ayudar a los usuarios a no cometer errores. La mayoría de los errores
son previsibles. Prevenir pérdida de datos, errores en el ingreso de
datos, salidas de un flujo.

45. 6. ALIVIAR LA CARGA EN MEMORIA DEL USUARIO
Haciendo visible objetos, acciones y opciones. El usuario no debería tener
que recordar información de una parte a otra. Las instrucciones de uso del
sistema deberían ser visibles o fácilmente accesibles cuándo sea necesario.

46. 7. ATAJOS, FLEXIBILIDAD Y EFICIENCIA
Flexibilidad y eficiencia de uso Aceleradores - no vistos por el usuario principiante
- a menudo pueden acelerar la interacción para el usuario experto de tal manera
que el sistema puede servir tanto a los usuarios sin experiencia y con experiencia.
Aceleradores - atajos de teclado - Recomendaciones

47. 8. ESTÉTICA Y MINIMALISMO
Eliminar el ruido visual. Jerarquizar la información.
Eliminar información irrelevante o que no suele utilizarse.

48. 9. COMUNICAR ERRORES CON CLARIDAD
Que sean fáciles de reconocer visualmente. Explicar el problema con
claridad. Proveer una solución o camino a seguir. Proponer una alternativa.

49. 10. AYUDA Y DOCUMENTACIÓN
El usuario necesitará en ocasiones, ayuda y documentación. Es preciso
que sea fácil de encontrar y ,preferentemente, que esté orientada a
tareas concretas. Necesidad de aprendizaje . Soporte. Tour en pantalla

50. 4. Material design

51. Principios

52. • Alto, ancho y profundidad
• Sombras
• Ocupan distintos espacios.
No se superponen.
Básicamente, la idea detrás de los
principios de Material Design es
hacer diseños que se asemejan al
mundo real, pero sólo en un cierto
nivel de abstracción.
Es decir, no se quiere hacer un
diseño excesivamente realista,
sino que se quiere transmitir la
idea de “material” al usuario.
¿Porqué material?

53. Material is the metaphor
Teoría unificadora entre
espacio racional y sistema
de movimiento.
El material (papel y tinta) y su
comportamiento. Como estos
se mueven, interactúan y
existen en el espacio, en
relación el uno con el otro.
Bold, graphic, intentional
Tiene en cuenta los
elementos gráficos de diseño
impreso, tipografía, grillas,
escalas, color, imágenes.
Estos hacen mucho más que
agradar a la vista, crean
jerarquías, significado y
enfoque.
Motion provides meaning
Mediante las acciones de los
usuarios se inicia el movimiento
y la transformación de todo el
diseño.
Este movimiento es significativo
y apropiado y sirve para centrar
la atención y mantener la
continuidad de la experiencia.

54. Elevación y sombras

55. Los objetos en Material poseen cualidades similares a los
objetos en el mundo físico.
Es decir, los objetos se pueden apilar o unirse entre sí, pero
no pueden pasar através de unos a otros.
Los objetos proyectan sombras y reflejan luz.

56. Estas cualidades forman un modelo espacial que
es familiar para los usuarios y puede ser aplicado
consistentemente a través de aplicaciones.
Lo que sustenta este modelo espacial son los
conceptos de la elevación y la sombra.

58. Todos los objetos materiales, independientemente de su
tamaño, tienen una elevación de descanso, o
elevación por defecto que no se cambia.
Si un objeto cambia la elevación, debe regresar a su
elevación de descanso tan pronto como sea posible.

59. Las sombras se utilizan para transmitir la jerarquía de
los diversos elementos, el movimiento y las capas en
que están ubicados

60. Lo importante es la estructura del diseño, que las
sombras tengan sentido para el ojo humano y que se
interprete el concepto de materiales reales.

61. Color

62. Material design es minimalista.
No utiliza muchas herramientas de diseño ni gustos
estilísticos. Por lo tanto, propone el uso del color para
crear significado y el enfoque correcto.

63. Esta paleta de colores comprende colores primarios y de
acento diseñados para trabajar en armonía con los demás.
Google sugiere utilizar el color 500 como primario,
seleccionar tres colores de la misma paleta y otro color de
acento de una paleta secundaria.
Utilizar colores llamativos

64. Se pueden usar para cosas como:
• Fondos
• Campos
• Cajas
• Fuentes
• Elementos clave de la App
Colores primarios
Dá un impulso adicional, tiene que tener un alto
contraste respecto de los colores primarios:
• Botones, botones de acción flotantes, y el texto del
botón
• Los campos de texto, cursores y selección de texto
• Las barras de progreso
• Los controles de selección, botones y controles
deslizantes
Colores de acento

66. Contraste
Asegurar suficiente contraste de color entre los elementos para que los
usuarios con problemas de visión pueden ver y utilizar la aplicación.
Utilizar herramientas para validar el contraste de los colores
http://webaim.org/resources/contrastchecker/

68. Iconos

69. Productos Sistema
Proto físico Estudio de la luz
Proto material Estudio del color

70. Íconos de acceso directo
Pueden ser hasta 4 como máximo. Estos accesos dan
al usuario fácil y rápido acceso a las 4 acciones
principales de tu App. Cada acción puede ser
agregada a la Home principal.

71. Claridad
Es necesario dejar un adecuado espacio alrededor
del ícono para permitir legibilidad y tapeo (48x48dp)

72. Imágenes

73. Utilizar imágenes auténticas, que cuenten historias reales.
Tener en cuenta el contexto.
Contar una historia.
Significado perceptible inmediatamente.
Pocos elementos con mínimas distracciones.

74. Material Design es realmente muy amigable con las imágenes.
Si se decide incluir alguna en su diseño, se deberá darle un
papel de liderazgo.
En Material las imágenes se ofrecen de full screen (de borde a
borde). Esto significa que no hay márgenes entre el borde de la
imagen y el borde de la pantalla de la ventana

76. Layout

77. Un layout para todos los dispositivos
Material Design usa herramientas que provienen del mundo del diseño impreso,
como las cuadrículas de líneas base y conjuntos comunes de cuadrículas
estructurales que funcionan a lo largo de las diferentes páginas.
Los layouts están diseñados para escalar en todas las distintas pantallas, facilitan
el desarrollo de la interfaz de usuario y te permitirá crear apps escalables.

78. Las propiedades físicas del papel son trasladadas a la pantalla.
Elementos visuales, cuadrículas y reglas de espaciado que crean una
consistencia, un aspecto coherente y un entorno para que el usuario
reconozca fácilmente cualquier producto, esto proporciona un alto nivel
de familiaridad y comodidad.

79. Navegación lateral
Si está presente, los menús de navegación de la derecha e izquierda pueden fijarse para
mostrarse permanentemente o pueden flotar temporalmente superponiendo el contenido.
El contenido en el menú izquierdo es ideal para navegación.
El contenido del derecho debería ser utilizado como una página secundaria del
contenido principal (por ejemplo para mostrar notificaciones).

80. Menú izquierda
Puede tener Scroll si la cantidad de elementos de la lista excede una pantalla.
Es el lugar donde debemos poner opciones de configuración “Settings” y Soporte
o “Send feedback”

81. Appbar
Es una banda de papel que se usa para mostrar acciones.
Las acciones se agrupan una al lado de otra.
Las acciones de navegación, como el ícono del menú o la flecha de volver a atrás,
aparecen a la izquierda, mientras que las acciones contextuales aparecen en la
derecha.

83. Componentes

84. Menús
Es una hoja de papel temporal que siempre se superpone sobre la barra de la
App, en lugar de comportarse como una extensión de la misma.

85. Botones
El uso de los botones dependerá de la importancia o acción que
conlleva su uso en la App.
Función: ¿Qué importancia tiene?
Dimensión: Tener en cuenta el contenedor y las cantidad de capas.
Layout: un tipo de botón por contenedor.

86. Botones
Un botón comunica claramente que acción ocurrirá cuando el usuario lo toque.
Se compone de texto, una imagen, o ambos, diseñado de acuerdo con el tema elegido
para su aplicación.

87. Otros botones
Los iconos son apropiados para las barras de aplicaciones, barras de herramientas,
botones de acción, etc.

88. Action button
Aparece en forma de círculo flotando por encima de la interfaz y representa la acción
principal en una aplicación.
Tamaño predeterminado (56 px): para la mayoría de los casos de uso.
Mini: (40px): Sólo se utiliza para crear continuidad visual con otros elementos de la pantalla.

94. Cards
Una tarjeta es un pedazo de papel con datos únicos relacionados que sirve
como un punto de entrada a más información detallada.
Por ejemplo, una tarjeta puede contener una foto, texto, y un enlace sobre un
solo tema

95. ¿Cuándo usar cards?
- Como una colección, se compone de varios tipos de datos (ej: la colección de la tarjeta
consta de imágenes, películas y texto).
- Soporta contenido de longitud muy variable, tales como comentarios.
- Consta de contenido o la interacción rica, como botones +1 o comentarios.
- De otro modo sería en una lista pero tiene que mostrar más de 3 líneas de texto.

96. Animación

97. Movimiento
Al igual que la forma de un objeto indica cómo podría comportarse, el movimiento de un
objeto demuestra si es ligero, pesado, flexible, rígido, pequeño o grande.
En el mundo de material design, el movimiento describe las relaciones espaciales, la
funcionalidad y la intención con belleza y fluidez.

98. Movimiento
El movimiento en material debe imitar el comportamiento de los objetos físicos, en el mundo
real, sin sacrificar la elegancia y la belleza
- Entrada y salida
- Pesos
- Movimiento curvo, evitar trayectorias lineales

99. Movimiento
Muestra como está organizada y qué puede hacer la App.
- Orienta el foco entre las diferentes vistas
- Sugerencias sobre lo que sucederá si un usuario completa un gesto
- Marca relaciones jerárquicas y espaciales entre elementos
- Ofrece feedback

107. ¡Gracias!

108. Tools
Validador de contraste
http://webaim.org/resources/contrastchecker/
Paletas de color
https://www.materialpalette.com
Creación de prototipos interactivos
https://www.invisionapp.com/
https://marvelapp.com/
Programas para prototipar
Axure
Balsamiq
Sketch (Zeplin)
Recursos / links útiles
https://developer.android.com/design/index.html
http://desarrollador-android.com/
https://design.google.com/
https://material.io/
Libros
Don't Make Me Think, Steve Krug
https://www.amazon.es/Dont-Make-Think-Revisited-
Usability/dp/0321965515
The Design of Everyday Things, Donald Norman
https://www.amazon.com/Design-Everyday-Things-
Donald-Norman/dp/1452654123
Designing mobile apps
http://appdesignbook.com/