Las tarjetas convierten el contenido disperso en unidades fáciles de escanear
Una tarjeta es un contenedor pequeño que agrupa algunas piezas de contenido relacionadas en torno a un solo tema, como la descripción de un servicio, la vista previa de una entrada de blog o la ficha de un solo producto. Los sistemas de diseño en toda la industria describen una tarjeta de la misma manera: un contenedor que aloja contenido, y a menudo una acción, vinculado a un solo tema.
Un borde, un color de fondo o una sombra ligera la separa visualmente del resto de la página.
Muchas tarjetas funcionan como un resumen breve que conduce a más detalle en otra página, aunque algunas simplemente muestran una sola pieza de información sin nada más detrás. De cualquier forma, una tarjeta agrupa contenido relacionado en una sola unidad en lugar de dispersarlo por la página.
Qué suele incluir una tarjeta
Una tarjeta se construye a partir de algunas partes comunes: un contenedor, un encabezado opcional, un área de medios opcional como una imagen, un cuerpo y acciones opcionales como botones. Aun así, una tarjeta necesita suficiente contenido para indicar de qué trata, típicamente un encabezado o una etiqueta breve, incluso cuando se omiten otras partes.
- Una descripción o resumen breve del tema
- Una imagen u otro medio, cuando el contenido lo requiere
- Una o más acciones, como un botón o un enlace, cuando la tarjeta lleva a otro lugar
Las partes que use una tarjeta deben ajustarse a lo que necesita ese contenido, en lugar de seguir una plantilla fija para cada tarjeta de la página.
Estilos y disposiciones comunes de las tarjetas
Las tarjetas suelen presentarse en tres estilos visuales. Las tarjetas elevadas usan una sombra para destacar.
Las tarjetas rellenas usan un color de fondo claro en su lugar. Las tarjetas delineadas usan un borde visible.
Cada estilo aporta un nivel distinto de énfasis.
La disposición es otra elección. Una tarjeta puede organizarse verticalmente, con un encabezado sobre el cuerpo, u horizontalmente, con el contenido colocado de izquierda a derecha.
Algunas herramientas de diseño también permiten colocar los medios en distintas partes de una tarjeta, como al ras del borde o insertados dentro del margen interno. Estas son decisiones de estilo, no cambios en lo que hace una tarjeta.
Cuándo funcionan bien las tarjetas y cuándo no
Las tarjetas suelen funcionar mejor cuando una página muestra varios tipos de contenido uno junto a otro, como un panel de control, una colección de artículos o una sección de sitio web con contenido variado.
Las tarjetas son una opción menos adecuada en algunos casos. No son un buen reemplazo para una fila de tabla cuando un visitante necesita escanear datos estructurados, y una llamada a la acción sencilla suele funcionar mejor como un botón simple que como una tarjeta completa.
Las tarjetas también pueden dificultar las comparaciones detalladas entre elementos, ya que el tamaño y el contenido pueden variar de una tarjeta a otra.
Esta es una decisión que vale la pena tomar mientras se diseña un sitio, no algo que se agrega después. Cuando diseñamos un sitio web en Precise Wolf Digital, analizamos de cerca el contenido de un cliente antes de elegir una disposición para él, un enfoque sobre el que puedes leer más en nuestra página de servicios de diseño web.
Cómo construir tarjetas usables y accesibles
Una disposición de tarjetas no se vuelve accesible o adaptable de forma automática; ambas cosas requieren decisiones deliberadas durante el diseño y el desarrollo. Accesible significa que funciona bien con lectores de pantalla y teclados, y adaptable significa que se ajusta sin problemas a distintos tamaños de pantalla.
Algunos hábitos ayudan. Evita repetir la misma imagen o el mismo texto en cada tarjeta de un grupo, ya que el contenido idéntico dificulta distinguir una tarjeta de otra.
Ajusta el tamaño de las imágenes para que se vean bien en distintos anchos de pantalla. Usa niveles de encabezado que encajen lógicamente en la página, y organiza un grupo de tarjetas para que los lectores de pantalla puedan anunciar cuántos elementos contiene.
La página del componente de tarjeta de USWDS cubre esta guía con más detalle.
Los elementos interactivos también requieren cuidado. Cualquier botón o enlace dentro de una tarjeta debe funcionar solo con el teclado, con un indicador de enfoque visible que muestre la posición del visitante en la página.
Si una tarjeta usa color para señalar algo, como un cambio de estado, combínalo con una etiqueta de texto o un icono, para que el significado no dependa únicamente del color.
Elegir tarjetas es una decisión de contenido, no una decisión de estilo
La disposición correcta depende de lo que necesita el contenido, no de lo que se ve de moda. Las tarjetas son adecuadas para colecciones de contenido relacionado pero variado, mientras que la lectura secuencial, las comparaciones detalladas y los datos estructurados suelen requerir una lista o una tabla en su lugar.
Sin importar el estilo visual que elija un equipo, la estructura y el trabajo de accesibilidad detrás de ella importan más que el acabado final, por lo que vale la pena planificarlo durante el diseño en lugar de después de construir la disposición.
Preguntas frecuentes sobre las tarjetas en el diseño web
¿Puede una tarjeta incluir más de una acción sin volverse desordenada?
Sí, pero mantén una acción principal clara. Una tarjeta puede tener un enlace principal más una acción secundaria, como un botón para compartir, separados visualmente para que los visitantes puedan distinguirlos.
¿Cuántas columnas debe usar una disposición de tarjetas?
No hay un número fijo. Las herramientas de diseño basadas en cuadrícula permiten que una disposición use distintos números de columnas en diferentes anchos de pantalla, así que el número correcto depende del contenido y del dispositivo.
¿Cómo evito que se superpongan las áreas de clic cuando una tarjeta tiene más de un elemento interactivo?
Algunos componentes de tarjeta incluyen un área de acción dedicada, una región definida que responde al clic, separada de cualquier botón adicional dentro de la tarjeta. Esto ayuda a evitar que los objetivos de clic se superpongan en la misma tarjeta.
¿Es lo mismo un mosaico (tile) que una tarjeta?
No siempre. Algunos sistemas de diseño tratan un mosaico (tile) como un bloque de construcción más simple y básico, y una tarjeta como un patrón más complejo construido sobre esa base, a menudo con más acciones u opciones de disposición.
¿Una llamada a la acción individual debe tener su propia tarjeta, o solo un botón?
Generalmente solo un botón. Cuando solo hay una acción breve y nada más que valga la pena agrupar, un botón simple suele ser la opción más clara.
¿Sigue siendo una buena opción una disposición de tarjetas para elementos muy similares y uniformes?
No siempre. Cuando los elementos son casi idénticos, como una galería de fotos sencilla, una lista o cuadrícula simple suele ser más fácil de escanear que un conjunto de tarjetas.