Lecciones UI para creativos

Las comparaciones son odiosas. A menudo, también injustas. Si no, mira la batalla en diseño de android versus iPhone.

apple había creado para sus apps un diseño muy estudiado con unas guías de estilo cuidadas y únicas que creaban tendencia.

Para el patito feo de Android, más abierto y libre, era complicado competir con las atractivas apps en iOS. En Android, las apps no tenían uniformidad, a menudo tenían una baja usabilidad y muchas de ellas distaban de lo estético.

Pero entonces el gigante Google tuvo una gran idea: él también crearía unas guías de diseño para crear apps atractivas e intuitivas. Así ofrecerían también uniformidad y reconocimiento. Vamos, que Google buscaba crear apps que fueran la envidia del resto.

Así nació Material Design. Toda una mina de oro para el diseño de tus apps. Sin embargo, puede ser complicado saber por dónde empezar. Por eso en el podcast de esta semana nos centramos en Material Design para ver qué es exactamente y algunos de sus principios fundamentales.

¿Empezamos?

En el episodio 16, 5 diferencias clave entre diseño iOS y diseño Android, ya hablamos de Material Design , pero lo hicimos viendo unas pinceladas muy generales.

En ese mismo episodio también os comenté que hablaríamos más en detalle sobre este tema en futuros episodios. Como lo prometido es deuda, he creado el episodio de hoy. Está compuesto por 2 secciones:

1. Qué es Material Design
2. Principios básicos. Para no extenderme hoy mucho, el resto de principios los veremos en el próximo episodio.

Material Design: ¿qué es?

En 2014 Google presentó Material Design en la Google I/O Conference. El nombre en código era “Quantum Paper”. Este nombre provenía del hecho que tenía un enfoque de papel, tinta y bolígrafo. Lo cual es importante porque veremos a lo largo del episoido todo lo que implica este enfoque en las bases de Material Design.

Hay quien ve Material Design como un lenguaje de diseño, pero desde mi punto de vista es más bien todo un marco de trabajo que podremos utilizar para el diseño de interfaces. Como veremos, Material Design hace unas reflexiones y sobre ellas crea unas recomendaciones, pero luego el diseñador tiene mucha libertad para moverse dentro.

Material Design: el usuario como centro

Un aspecto vital a destacar es el hecho de que este marco de trabajo está basado en una profunda reflexión sobre el diseño de interfaz centrada completamente en el punto de vista del usuario.

Este marco de trabajo presentado por Google para el diseño de interfaces fue toda una revolución en el diseño de apps con sus principios y sus especificaciones.

Pero no quedó en una revolución pasajera o una tendencia del momento. Seguramente debido a que parte de esa profunda reflexión del diseño de interfaz, se construyó sobre una base y unos principios sólidos.

Por todo ello, Material Design se ha aplicado en el diseño de apps dando buenos resultados, por lo que aún hoy sigue con nosotros. Aunque no lo hace de la misma manera exactamente, tal y como veremos a continuación en la siguiente sección.

Evolución de Material Design

En mayo del 2018, 4 años después de su presentación inicial, Google lanzó una nueva versión de Material Design. Lo hizo para solucionar un problema importante que se había detectado: (consistía en que) Las guías originales eran muy restrictivas y enfatizaban la función sobre estilo.

Esto provocó que las apps que se creaban con diseños basados en Material Design se parecieran visualmente entre sí, cosa que no gustaba a muchos creadores de apps. 

De ahí que Google detectara que debía equilibrar la consistencia con la capacidad de diferenciación. Es decir, la nueva versión de Material Design debía garantizar a los usuarios la flexibilidad de adaptarse a las necesidades de la marca.

En realidad, la segunda versión de Material Design va más allá de contemplar unas nuevas guías. Y lo hace ofreciendo un conjunto de herramientas, las cuales incluyen packs de iconos y el editor de themes de Material.

Puedes utilizar todos ellos para personalizar tus diseños.
En el próximo episodio hablaremos más sobre estos puntos más concretos relativos a la segunda versión de Material Design.

¿Material Design es sólo para apps?

Si estás pensando que igual esto no va contigo porque tú haces sobretodo diseño web, no diseño de apps, debo decirte que esto no es del todo cierto. Uno de los objetivos de Material Design es ofrecer resultados de alta calidad de manera consistente en todas las plataformas. Dicho de otra manera, que se utilice Material Design para sitios web para que no haya grandes diferencias con las aplicaciones de Android.

Por eso, en 2015, el equipo de Google Developers creó Material Design Lite (MDL), una librería destinada a implantar el estilo Material Design en sitios web. Esta librería cuenta con un conjunto de componentes (botones, menús, etc.) y plantillas para ser usados.

El kit de MDL está también disponible para descarga aquí. 

El mismo Goolge lleva a la práctica su objetivo de usar Material Design en la web y lo hace aplicándolo a todos sus productos y herramientas, empezando por Google Chrome. De esta manera unifica el diseño en diferentes plataformas y dispositivos.

Principios de Material Design

M.D. se basa en unos principios para crear este marco de referencia en el diseño de apps. Como hemos comentado antes, su objetivo es ayudar al diseñador, a la vez que dejarle libertad.
Material es la metáfora.

Como habrás imaginado, su nombre no es fortuito. Material Design se basa en la materia como metáfora en el diseño de las apps. Y es que Google se basó en la materia como realidad táctil. Si recuerdas lo que hemos dicho antes, Google se inspiró en el estudio del papel y la tinta en cuanto a la materia en sí. Precisamente es esta metáfora con el mundo del material la que le da nombre.

M.D. considera el material como una tela digital homogénea creada con píxeles. Los usuarios pueden tocar, deslizar o pellizcar esta tela de material y se moverá de acuerdo con la interacción del usuario.

Esta concepción basada en el mundo físico real la aplica Material Design al considerar que una interfaz móvil está formada por objetos materiales, como una barra rectangular o un botón circular, que se distribuyen en capas.

A diferencia de los objetos, el texto, las imágenes y vídeos, es decir, el contenido, se coloca plano sobre el material.

La materia y la aplicación de las leyes de la física

Tal y como decíamos en el primer principio, este marco de trabajo se basa en una metáfora realista. Ahora bien, esta metáfora se aplica a la materia, pero es más abierto respecto al comportamiento. A diferencia del papel real, el material en Material Design puede dividirse, reorganizarse y moverse cuando sea necesario.

Según M.D., las leyes de la física de los objetos, deben aplicarse. Por eso, según sus especificaciones, las animaciones deben ser lógicas, los objetos pueden superponerse pero nunca atravesarse entre ellos, y se deben aplicar los fundamentos de la luz.

Los atributos como las sombras, bordes, dimensionalidad, etc. proporcionan más señales visuales. Todos ellos son familiares para los usuarios porque existen en la realidad, lo cual les ayuda a comprender rápidamente las posibilidades que les ofrece la interfaz para usar cada objeto que esté en ella.

El objetivo es sencillo: respetar los principios de la materia en el momento de la interacción con los materiales, siempre proporciona una experiencia más realista a los usuarios.

Por todo esto, con Material Design crearemos diseños donde la profundidad, la superficie, los bordes, las sombras y los colores jugarán un papel fundalmental. No sólo para mantener coherencia con el mundo físico real, sino también para dar informaicón al usuario con el mínimo de carga cognitiva.

Para ello, M.D. define en su documentación aspectos como por ejemplo, cómo debe ser el movimiento y las transiciones, cómo debe expresarse la profundidad (con sombras, etc), aplicarse los fundamentos de la luz, la jerarquía de contenido, etc.

Como resultado, en las interfaces basadas en las guías de estilo creadas por Google, el usuario interaccionará con los objetos como si fueran objetos reales.

Beneficios de la aplicación del mundo físico

El beneficio que se busca al imitar el mundo físico es el de reducir la carga cognitiva del usuario, como ya hemos dicho antes. Para ello, Material Design ofrece una cuidadosa atención al diseño y al lenguaje visual, y ofrece una biblioteca de patrones. De esta manera maximiza la previsibilidad y elimina la ambigüedad.

Otro de los beneficios de la aplicación del mundo físico es que permiten responder a las expectativas de los usuarios sobre cómo deben comportarse los componentes. Los objetos en pantalla son más creíbles si siguen las leyes de la gravedad.

Por tanto, M.D. permite a los diseñadores optimizar la experiencia del usuario con efectos en 3D, iluminación realista y animaciones consistentes.

Elementos gráficos con intención

Para entender este principio debes recordar que Material Design bebe del mundo del papel y la tina. Lo que nos con sus especificaciones es que debemos utilizar la tipografía, espacio, escala,… y el resto de elementos fundamentales del diseño en formato impreso para mucho más que simplemenete crear un conjunto estéticamente bello. Como ves, Material Design da un gran papel a la función.

Según este planteamiento, el uso adecuado de colores, imágenes, y espacios sumergirá al usuario en una mejor experiencia de uso de la app o interfaz. En el episodio de la semana que viene hablaremos más sobre estos elementos.

De todas formas ya podemos decir de forma genérica que según Material Design todos los elementos deben tener una intención de mantener el foco en lo que debe tenerlo, dar un sentido de orden y jerarquía, y sumergir al usuario en la experiencia.

Para ello nos ofrece una guía de diseño con una tipografía clara, casillas bien ordenadas, y especificaciones de uso de colores e imágenes llamativas.

El movimiento proporciona significado

En cuanto al movimiento, Material Design pone mucho énfasis en él y lo describe como no arbitrario o porque sí, sino todo lo contrario: el movimiento proporciona significado. 

Material Design considera el movimiento como un mecanismo de respuesta a la interacción del usuario que muchas veces puede imitar la realidad y que le aporta este significado que comentábamos.

Cuando se empujan, algunos objetos se deslizan más rápido que otros. Cuando se presionan, algunos objetos se comprimen más profundamente que otros. Google tiene una sección completa dedicada al movimiento auténtico. En las notas del programa…

Recuerda que hemos dicho que Material Design respeta las propiedades del material. De esta manera, el material se comporta como una superficie digital ordenada en una estructura jerárquica. El movimiento se utiliza para demostrar la relación entre la interacción de un usuario y cómo el material se está reajustando.

Una norma de oro según Material Design, y que complementa el hecho de aportar significado, es que la animación no debe interrumpir la experiencia de usuario de ninguna manera. Por tanto, la continuidad en la experiencia debe respetarse.

Por ejemplo, un objeto que parpadea significa que está llamando tu atención porque tiene una acción primaria importante a destacar, o un elemento que se expande quiere decir que se acaba de abrir, etc. Todo aportando información y significado, a la vez que dentro del flow de la experiencia de usuario.

Basado en este concepto de movimiento, nos encontramos con menús deslizantes, botones, ventanas modales e incluso iconos que también se mueven. Y lo hacen no porque pueden hacerlo, sino respondiendo a una necesidad de dar una información al usuario, tienen un significado.

Nada porque sí: El usuario es el motor

El movimiento cae en cascada desde los puntos de contacto (o sea, desde donde el usuario ejecuta la acción) y la respuesta visual se siente realmente conectada con lo que el usuario ha hecho.

Es decir, el usuario es el motor principal del movimiento de los objetos ya que es él el que inicia el movimiento, transformando el diseño. Como resultado, la animación hace que la experiencia del usuario sea más natural e inmersiva.

Toda acción tiene lugar en un solo entorno

Todas las acciones tienen lugar en un contexto único. Los objetos son presentados al usuario sin romper la continuidad de la experiencia, incluso cuando se transformen y reorganicen. Esto se traduce como que las animaciones deben ir sincronizadas.

El movimiento sirve para enfocar la atención y mantener continuidad

En Material Design el movimiento tiene como objetivo centrar la atención del usuario en lo que es importante. Debe evitar crear distracciones innecesarias. 

Es por ello que el movimiento suele usarse para dar feedback al usuario. En este caso será de forma sutil pero clara. Además, también se utiliza el movimiento para crear las transiciones eficientes y coherentes que den continuidad en la experiencia de uso de la interfaz.

Conclusiones

Como hemos podido ver en el episodio de hoy, Material Design es un marco de diseño completo para apps y webs.

Una vez se entiende lo que Google quiere decir con la palabra “Material”, el resto de los principios y especificaciones de Material Design empieza a tener mucho más sentido.

En el episodio de hoy hemos entrado más en detalle en qué es Material Design y los principios fundamentales. La semana que viene ampliaremos el tema con otros aspectos fundamentales de Material Design, así como hablando de theming y otros puntos de la versión 2, y hablaremos también de su aplicación a un proyecto web.

Y ahora, sólo decirte que muchas gracias por escucharme. Si te ha gustado y te ha parecido interesante este podcast, puedes subscribirte a mi newsletter en maria-pascual.es para no perderte los próximos capítulos y poder acceder al material e información exclusiva para mis suscriptores.

También podrás contactar conmigo a través de la página de contacto si quieres que hablemos de un proyecto web o app que quieres realizar y para el cual te gustaría contar conmigo.

Y con esto me despido. Te espero en el episodio de la semana que viene con más herramientas, estrategias, metodologías y sistemas para proyectos y negocios User Interface que te ayuden cada vez a empoderarte más y más, y llegar más y más lejos.