0

Material design, el nuevo lenguaje de diseño de Google, por Sara Pérez

El pasado mes de junio se celebró el congreso Google I/O, donde se presentaron numerosas novedades relativas, sobre todo, al futuro de Android y la web, según Google. Una de las más destacadas fue la salida a la luz de material design, donde Google se aleja de sus anteriores líneas de diseño para crear este “lenguaje visual para los usuarios que sintetiza los principios clásicos del buen diseño con la innovación y las posibilidades de la tecnología y la ciencia”, según las propias palabras de Google. Pretende servir de guía para crear una experiencia de usuario unificada a través de distintas plataformas y tamaños de dispositivos. Por una parte, se tienen en cuenta los principios del diseño móvil, pero también dedican parte de las líneas de diseño al ratón, el teclado, los gestos y la voz como métodos de entrada usuales.

Desde su salida a la luz, no han parado de crecer las entradas en la red dedicadas a la nueva iniciativa de Google. Tanto ha sido el revuelo, que cada nueva aplicación que incorpora las nuevas líneas de diseño, se gana un puesto especial en los blogs del área. Parece que el trabajo de Google se ha visto recompensando, porque este mes de septiembre los User Experience Awards 2014 han reconocido a Material Design como la mejor contribución a la experiencia de usuario. En este post voy a revisar algunos de los principios básicos y propuestas que han permitido este reconocimiento. Pues bien, ¡empecemos!

 

Metáfora de lo material

Lo primero que me sorprende es la sencillez de la metáfora en la que se basa este lenguaje visual. Se trata de la metáfora de lo material, basada en trasladar a la tecnología la interacción que realizamos con materiales como el papel. Las superficies y los bordes cobran protagonismo como elementos que delimitan una realidad y ayudan a los usuarios a entender affordances. Se utilizan los fundamentos del movimiento, la luz y la superficie para definir el espacio en el que se encuentran los elementos y para describir la forma en la que éstos se mueven e interactúan. Un ejemplo claro de este concepto se materializa en las tarjetas, como se puede ver a continuación en la aplicación de Google Now para Android:

En este caso, los elementos, es decir, las tarjetas, se encuentran en una superficie común. Sin embargo, cada una de ellas es como un papel sobre una mesa: se entiende que es posible interactuar con cada uno de ellos de manera independiente, puesto que están complementamente delimitados por un borde y una sombra. Por ejemplo, es posible eliminar la tarjeta que muestra la información del tiempo desplazándola hacia cualquiera de los lados. Mientras el usuario realiza esta acción, el sistema le proporciona feedback de que la tarjeta va a ser eliminada al realizar ese movimiento disminuyendo la transparencia del elemento. Sin embargo, si la tarjeta no se llega a eliminar y se vuelve a desplazar al centro, la transparencia volverá a ser del cien por cien.

Hasta el más mínimo detalle

Se nota que los de Google han invertido mucho tiempo y han cuidado cada detalle a la hora  de diseñar cada uno de los componentes y patrones que conforman su nuevo lenguaje visual. En la propia página de Material Design se explica el porqué de cada uno de los componentes y se establecen guías completas para su aplicación en interfaces reales. No sólo se definen elementos que permitan complacer al usuario desde un punto de vista visual, sino que los colores, los espacios, la tipografía y el uso de imágenes, entre otros, permiten crear un significado, una experiencia completa. El punto de mira se traslada a las acciones del usuario, destacando la funcionalidad principal de una vista. Tanto es así, que han creado un nuevo componente específico para resaltar las acciones principales de una pantalla. Se trata de losbotones de acción flotantes, un tipo de botón que se distingue por tener un icono en forma de círculo flotando por encima de la interfaz. No se debe utilizar en todas las vistas, sino en aquellas cuya acción principal no interfiera con el resto de elementos de la vista. Por ejemplo, en una galería fotográfica no debe utilizarse, puesto que la acción principal es pulsar sobre las imágenes para verlas a tamaño completo. Sin embargo, en un explorador de archivos, el botón de acción flotante puede indicar la opción de crear un nuevo documento, como se muestra en la aplicación AndroidCabinet Beta, que ya incorpora interfaz Material Design:

El movimiento y las animaciones cobran protagonismo

Como tercer punto fuerte de estos nuevos principios de diseño, se presta mucha atención al uso de las animaciones como la forma primaria de dar feedback al usuario acerca de las acciones que realiza en su dispositivo. A pesar del uso de estas animaciones, la experiencia del usuario se mantiene de manera continua porque, aunque los elementos de una interfaz se transformen o reorganicen, todas las acciones se realizan sobre el mismo entorno (volvemos a la metáfora de lo material :P). Un ejemplo se puede ver en la propia aplicación de Google I/O en Android, la primera en presentar una interfaz actualizada a Material Design:

Se puede ver que al hacer scroll sobre una de las conferencias, se produce un movimiento del contenido de la barra inicial a la zona superior. De esta manera, se centra la atención del usuario en esta zona, manteniendo en todo momento constancia de dónde se encuentra y permitiendo la interacción con el resto de elementos de la vista. Además, cuando se pulsa sobre el botón de acción flotante para añadir la conferencia a tus favoritas, se vuelve a hacer uso de la metáfora de lo material para mostrar una reacción en esa superficie, de manera independiente al resto de elementos.

¿Dónde se ha aplicado Material Design?

Estos principios ya se han aplicado a algunas de las páginas y aplicaciones Android de Google, como Documentos,Presentaciones, o el propio Google+, así como en la propia página de Material Design.

 

Resumen e impresiones

En este post, se han repasado los principios en los que se basa el nuevo lenguaje de diseño de Google, Material Design, y se han revisado algunos ejemplos en los que se aplican estos principios. Personalmente, considero que hacía falta un lavado de cara en las líneas de diseño de Google y, sobre todo, en Android. Con las nuevas propuestas, es posible unificar la experiencia de usuario a través de los dispositivos que utilizamos día a día, mejorando la forma en la que interactuamos con ellos. Y vosotros, ¿qué opináis? ¿se va a ver enriquecida la experiencia de usuario con este nuevo lenguaje de diseño? Los UX Awards 2014 lo han tenido bastante claro. Desde UX con tilde, ¡esperamos vuestras respuestas!

¡Hasta la próxima!

Fuentes: http://developer.android.com/design/index.htmlhttps://www.google.com/design/spec/material-design/introduction.html


 Por Sara Pérez publicado originalmente en UX con Tilde. Sara es Graduada en Ingeniería Informática y  apasionada del diseño de aplicaciones Android.

Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /web/htdocs/www.uxinperu.com/home/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273