Card-based design: Pongamos las cartas sobre la mesa

Desde su inclusión dentro del sistema de búsqueda de Google para móviles, allá por el 2012, soy bastante «fan» de Google Now. Aunque ni yo ni nadie lo pedimos, de pronto todos podíamos visualizar en nuestro dispositivo móvil la predicción meteorológica para toda la semana sin mover ni un dedo e incluso conocer, en tiempo real, el resultado de los partidos de fútbol de nuestro equipo favorito (ver Fig.1). Pero no es de la capacidad de recomendación y personalización de este sistema de Google de lo que quiero hablar en esta entrada, sino del patrón de diseño que aplica para presentar la información, el cuál es denominado en inglés como «Card-based design» (en castellano puede ser traducido como «Diseño basado en tarjetas»). Este patrón de diseño puede ser englobado dentro del lenguaje visual lanzado por Google el pasado mes de Junio, Material Design, lenguaje del que ya hablábamos en una entrada anterior del blog.

Fig. 1. Tarjeta ofrecida por Google Now sobre el resultado de un partido de fútbol

¿Y por qué merece la pena hablar de este patrón de diseño si solo lo utiliza Google? Pues porque eso no es del todo cierto. Por el contrario, existen numerosos ejemplos de otros «gigantes» que también lo están aplicando, tales como Twitter, Spotify o Pinterest que lo han elevado a la categoría de patrón de diseño y que lo hacen digno de prestarle un poco de atención. Es más, recientemente ha sido caracterizado por la reputada revista UX Magazine como una de las principales tendencias de diseño para dispositivos móviles y pantallas de dimensiones reducidas del año 2015. Pero, ¿y qué se entiende realmente por tarjeta en este contexto? ¿Y cómo utilizarlas y por qué? He aquí el quid de la cuestión. Antes de aplicar un patrón de diseño, primero se debe conocer el problema que resuelve y sus características básicas a fin de discernir si realmente aplica a nuestro caso. Teniendo en cuenta esto, esta entrada trata de arrojar un poco más de luz sobre el «Diseño basado en tarjetas» estableciendo sus características básicas y mostrando algunos buenos ejemplos de su utilización. Pues venga, ¡vamos a ello!

Material Design, el nuevo lenguaje de diseño de Google

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!