Embed Size (px)
Citation preview
Material Design. La humanización del diseño de interacción.
#LibreCon2015
Hola!
Soy Laura, somos Worköholics.
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
Diseño de interacción y Material Design
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
29 de diciembre de 2014Worköholics
Material Design. La humanización del diseño de interacción.
#LibreCon2015
Material Design. La humanización del diseño de interacción.
#LibreCon2015
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
Material Design. La humanización del diseño de interacción.
#LibreCon2015
“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
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
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 enla pantalla
Material Design. La humanización del diseño de interacción.
#LibreCon2015
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
Material Design. La humanización del diseño de interacción.
#LibreCon2015
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
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
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.
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
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.
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.
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.
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.
PrincipiosMaterial Design
“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
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.
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.
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.
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.
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.
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.
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.
#LibreCon2015
Material Design. La humanización del diseño de interacción.
El contenido es el rey
El contenido es el rey
También consistencia en la iconografía
La interfaz de tu próximo proyecto web, APP o e-commerce
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
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
Material Design. La humanización del diseño de interacción.
#LibreCon2015
Material Design. La humanización del diseño de interacción.
#LibreCon2015
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
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
Material Design. La humanización del diseño de interacción.
#LibreCon2015
Material Design. La humanización del diseño de interacción.
#LibreCon2015
¡Gracias!Moitas grazasEskerrik asko
Nos vemos en LibreCon 2016
Comunicación y proyecto digitales
www.workoholics.es
