Las aplicaciones móviles, se basan en experiencias construidas por piezas individuales, que se agrupan para crear contenidos. Esta forma de disponer las pantallas, se conoce como “Tarjetas”.

Las “Tarjetas” son pequeños rectángulos con contenidos (imágenes, texto, botones…) que sirven como punto de acceso a información más detallada. De esta manera, al colocarlas en la interfaz de usuario genera una buena usabilidad.

Este tipo de visualización permite comunicar más rápidamente, ya que es un modelo de interacción intuitivo para los usuarios, puesto que al parecerse a las tarjetas o “cromos” de la vida real, el usuario ya lo que representa.

Por otra parte, permite organizar los contenidos en secciones ocupando menos espacio y estructurando los elementos de información de manera similar, por lo que forman en su conjunto una pieza coherente.

Se puede asemejar a lo que se conoce como cuadrícula o grid, es decir, elementos dispuestos de forma cuadriculada sobre el espacio de la pantalla (ya sea web o app móvil). Este tipo de layouts son habituales en la mayoría de las web, y más aún desde el auge del diseño responsivo.

Esto se debe a que al necesitar que los contenidos se adapten a la resolución de la pantalla, y por tanto al espacio del que disponen, los elementos cuadriculados se ajustan correctamente.

Web TED – Ideas worth spreading

APP National Geographic

¿Cómo se diseñan?

Las “Tarjetas” deben de tener una anchura constante, aunque pueden tener una altura variable.

Una de las características más destacable son las esquinas, que deben de ser redondeadas y con sombra. Al ser redondeada genera una sensación de bloque de contenidos, mientras que la sombra proporciona profundidad.

El color debe de ser de tonos suaves para no crear distracción, ni romper con la armonía y equilibrio de la página.

En algunas ocasiones, las tarjetas adquieren movimiento gracias a la animación.

Animación «Tarjetas»

Ventajas

Las “Tarjetas” son contenedores de diseño que mejoran el aspecto de la aplicación, gracias que se intuye muy fácilmente su funcionamiento. Los usuarios acceden rápidamente al contenido que le interesa, interactuando con las “Tarjetas”.

Se usan muy habitualmente en el diseño de aplicaciones web y móviles, ya que se integran perfectamente en múltiples dispositivos. Es por eso, que sea tan fácil crear una experiencia consistente, con independencia del dispositivo.

Patrón de uso

Se utilizan para:

• Crear líneas de tiempo de acontecimientos. Por ejemplo, Facebook.
• Para revelar contenidos, como si de un libro se tratara.
• En diseños de página de tipo cuadrícula.
• En diálogos.

Usos incorrectos

Aunque se represente el contenido como una ficha, el concepto de “Tarjeta” no debe utilizarse en:

• Listas.
• Galerías de imágenes.
• En pantallas grandes (afecta a la velocidad de lectura).

En resumen, se está popularizando el uso de las “Tarjetas” pero hay que tener precaución a la hora de utilizarlas. Teniendo en cuenta algunas recomendaciones, gracias a ellas podemos crear un diseño flexible que generan experiencias consistentes. Si se usan correctamente, se garantiza una buena experiencia de usuario.