Material Design, una profunda reflexión sobre el diseño de interfaz desde el punto de vista del usuario. Nuestro punto de vista, nuestra experiencia. Y un marco de trabajo para el diseño de interfaz, más que una guía de diseño para un sistema operativo concreto.

1. Material Design.
La humanización del
diseño de interacción.
#LibreCon2015

2. Hola!
Soy Laura,
somos Worköholics.

4. Somos una agencia de comunicación y diseño digital,
con sede en Bilbao y 10 años de experiencia.
Aportamos diferenciación a través de la presentación de
conceptos únicos, dotando de expresión al contenido y
con un trabajo cuidado en cada detalle.
Trabajamos en consultoría estratégica de comunicación
centrada en el usuario, comunicación de marca y
desarrollo de proyectos digitales.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

5. Diseño de interacción
y Material Design

6. 25 de junio de 2014
Presentación Material Design
7th annual Google I/O developer conference
Material Design. La humanización del diseño de interacción.
#LibreCon2015

7. 29 de diciembre de 2014
Worköholics
Material Design. La humanización del diseño de interacción.
#LibreCon2015

8. Material Design. La humanización del diseño de interacción.
#LibreCon2015

9. Qué es Material Design
Una profunda reflexión sobre el diseño de interfaz desde el
punto de vista del usuario. Nuestro punto de vista, nuestra
experiencia. Y un marco de trabajo para el diseño de interfaz,
más que una guía de diseño para un sistema operativo concreto.
Qué no es Material Design
No es una nueva tendencia de diseño, tras el skeuomorphism o
el flat. Y no es un dogma.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

10. Material Design. La humanización del diseño de interacción.
#LibreCon2015

11. “Material Design isn’t just about tablet
or smartphone screens. It’s about a
systematic approach to how its products
interact with millions of users”
Gizmodo
Material Design. La humanización del diseño de interacción.
#LibreCon2015

12. Qué es el diseño de interacción (IxD)
La interacción (IxD) es la esencia de todas las experiencias del
usuario. Es la conversación entre vuestro producto y el usuario.
El diseño de interacción está en todas partes. Siempre que
tomas una decisión en un entorno digital proyectas tu necesidad
en una máquina que deberá responder como si te conociera,
interpretando tus deseos.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

13. Material Design. La humanización del diseño de interacción.
#LibreCon2015
Interacción
(Interaction design IxD)
Experiencia
(User Experience UX)
Interfaz
(User Interface, UI)
DISPOSITIVO USUARIO
Lo que sucede
delante de la
pantalla
Lo que sucede en
la pantalla
Material Design. La humanización del diseño de interacción.
#LibreCon2015

14. Qué es el diseño de interfaz (UI)
Podemos distinguir entre diseño de interacción y diseño de
interfaz. Diseño de interfaz es lo que los usuarios ven.
El diseño de interacción se refiere a cómo los usuarios se
relacionan con la interfaz, y cómo esta interfaz responde de tal
forma que los usuarios saben que se han logrado sus metas.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

15. Material Design. La humanización del diseño de interacción.
#LibreCon2015

16. Qué es la experiencia de usuario (UX)
Como resultado de esta interacción, la forma en la que el usuario
disfruta o percibe la interfaz forma la experiencia general del
usuario.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

17. 5 Pilares del diseño de interacción
● Diseño centrado en el usuario.
● Usabilidad.
● Posibilidades sugeridas (afforances) y significados.
● Capacidad de aprendizaje (learnability).
● Feedback y tiempo de respuesta.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

18. Diseño centrado en el usuario
Diseño orientado al público objetivo. Tal y como expresa
Andrew Maier “en todas las disciplinas del diseño, el
artista debe primero conocer sus limitaciones, y luego
diseñar una solución.” En el caso del diseño de
interacción, los propios usuarios en general, forman la
base de las limitaciones de una interfaz.
El Diseño Centrado en el Usuario pretende crear
experiencias, más allá de los productos y servicios y un
ambiente que conecte a nivel emocional con el
usuario.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

19. Implica involucrar desde el comienzo a los usuarios
en el proceso de desarrollo del proyecto, con el objetivo
de mejorar su experiencia.
Valorar si tu sitio web, tu e-commerce, o tu aplicación,
consigue o no sus objetivos está condicionado al nivel
de satisfacción del usuario.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

20. Usabilidad
La usabilidad es el punto de partida. Si tu audiencia no
puede usar tu producto o servicio, no hay relación
posible: usabilidad, utilidad y deseo son ingredientes
básicos para un buen diseño.
Eficacia, eficiencia y satisfacción.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

21. Posibilidades sugeridas y significados
El concepto “affordance” significa que una función
tiene que sugerir su propio uso, hablar por sí misma.
No es incompatible con apoyar el entendimiento o
acotar los significados a través de tooltips, textos de
introducción, etc.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

22. Capacidad de aprendizaje
Los usuarios no recordamos cada funcionalidad con un
solo uso. El diseño tiene que tener en cuenta lo familiar
y la capacidad de intuición del usuario.
La consistencia crea predictibilidad, lo cual mejora la
capacidad de aprendizaje del usuario.
Crea un espacio consistente, utiliza los patrones básicos
de diseño de interfaz de usuario: UI-Patterns, utiliza
guías de diseño.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

24. Feedback y tiempo de espera
Si la interacción del usuario es una conversación entre el
usuario y el producto, entonces hagamos que sea
amigable, interesante y útil.
El feedback es el corazón de la interacción.
Y un factor clave es el tiempo de respuesta: mejor
cuanto más inmediato.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

25. Principios
Material Design

26. “En lugar de tratar de imponer una
estricta estética visual, Google define un
conjunto de principios que dejan libertad
al diseñador.”
Sacha Greif
Material Design. La humanización del diseño de interacción.
#LibreCon2015

27. Una solución simple
a un problema complejo
Un sistema de diseño que podemos utilizar para
expresar una marca y su identidad, y para crear un
espacio de relación entre esa marca y su audiencia.
Material Design recibe su nombre por estar basado en
objetos materiales, en la realidad táctil. Los
elementos se colocan en un lugar, ocupando un espacio
y con un movimiento determinado.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

28. Los principios
Material Design se guía por las leyes de la física: animaciones
lógicas, objetos que se superponen pero que no pueden atravesarse
el uno al otro, y los fundamentos de la luz. Un diseño donde la
profundidad, las superficies, los bordes, las sombras y los colores
juegan un papel fundamental.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

29. Para todas las pantallas
Material Design nace con un objetivo, adaptarse a todas las
pantallas. Es multiplataforma, tanto los smartphones, tablets,
smartwatches o televisores pueden hacer uso de este diseño.
También tu página web y e-commerce.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

30. El objetivo es desarrollar un sistema que permita una experiencia
unificada independiente de la plataforma o el dispositivo.
Crear un lenguaje visual que sintetiza los principios clásicos del
buen diseño con la innovación y las posibilidades que ofrecen la
tecnología y la ciencia.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

31. La materia
La materia como metáfora, bajo una teoría unificadora: se cumplen
los fundamentos de la luz, la superficie y el movimiento.
Animaciones lógicas y objetos que se superponen pero no pueden
atravesarse el uno al otro.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

33. La intención
Una guía de diseño con una tipografía clara, casillas bien
ordenadas, colores e imágenes llamativas para no perder el foco y
dar un sentido de orden y jerarquía y sumergir al usuario en la
experiencia.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

35. El movimiento
Tiempo, velocidad y dirección.
Toda acción tiene lugar en un único entorno. Los objetos se
presentan sin romper la continuidad de la experiencia.
Un objeto que parpadea significa que está llamando tu atención.
Un elemento que se expande, se acaba de abrir.
#LibreCon2015
Material Design. La humanización del diseño de interacción.

36. #LibreCon2015
Material Design. La humanización del diseño de interacción.

37. El contenido es el rey

38. El contenido es el rey

39. También consistencia en la iconografía

40. La interfaz de tu próximo proyecto
web, APP o e-commerce

41. La interfaz diseñada para dispositivos
táctiles y móviles.
Todo apunta a que en un futuro a corto/medio plazo los
ordenadores desktop dejarán de ser el referente para la
navegación web y quedarán reducidos al uso profesional/laboral.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

42. Tendremos en cuenta los principios de
Material Design y los adaptaremos a las
necesidades de nuestro proyecto.
Material Design no es un dogma, pero no sólo es una guía para un
uso concreto o una tendencia de diseño.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

43. Material Design. La humanización del diseño de interacción.
#LibreCon2015

44. Material Design. La humanización del diseño de interacción.
#LibreCon2015

45. Pensaremos en Material Design Lite.
Y seguiremos trabajando con Bootstrap.
“Material Design can replace many parts of Bootstrap. However, it
does not intend to feature-match everything Bootstrap offers.
Instead MDL intends to implement the components specified by
the Material Design specification. This allows it to provide the
most comprehensive and accurate solution available.”
http://www.getmdl.io/faq/#bootstrap
Material Design. La humanización del diseño de interacción.
#LibreCon2015

46. Material Design Lite (MDL)
MDL es el framework creado por los equipos de UX de Chrome y
Material Design para dotar a los sitios del look and feel de Material.
Su intención no es proporcionar estructuras de todas las posibles
necesidades UX sino crear una base sobre la que crear tu propio
proyecto.
Material Design. La humanización del diseño de interacción.
#LibreCon2015

47. Material Design. La humanización del diseño de interacción.
#LibreCon2015

48. Material Design. La humanización del diseño de interacción.
#LibreCon2015

49. ¡Gracias!
Moitas grazas
Eskerrik asko
Nos vemos en LibreCon 2016

51. Comunicación y proyecto digitales
www.workoholics.es