Card
Las cards son componentes visuales que presentan información de manera concisa y atractiva.
Definición
La card es un componente flexible que agrupa contenido e información relacionados en una sola unidad. Sirve como una representación breve y vinculada de un concepto o para mostrar información breve en la interfaz de usuario.
Anatomía
Estados
Tipos
Product cards
Están diseñadas para la venta de productos y servicios. Pueden incorporar información adicional para generar el temor a perderse una oferta y atraer a los compradores, como una etiqueta de venta/descuento, puntuación de reseñas y disponibilidad.
Ads cards
Estas cards presentan una imagen del producto junto con un botón que permite a los usuarios realizar una compra directamente. Su diseño atractivo y funcionalidad simplificada hacen que sean una herramienta esencial para promocionar productos y servicios, incentivando las conversiones y el crecimiento de ventas en línea.
Media cards
Estas tarjetas resaltan tanto el contenido multimedia (imagen o video) como el título (encabezado) para captar la atención y fomentar la interacción.
Data cards
Presentan análisis y gráficos, siendo esenciales tanto en empresas como en productos de consumo. Facilitan a los administradores visualizar información crítica de manera eficiente, con nombres, datos actuales y gráficos para una interpretación sencilla.
Social cards
Se usan en las redes sociales para proporcionar a los usuarios una vista previa del contenido compartido, lo que fomenta la interacción y la divulgación en línea.
Cuándo usar
Agrupación de información
Las cards se emplean para resumir el contenido, lo que permite una exploración rápida de la información a través de elementos como texto e imágenes.
Puntos de acceso a detalles
Las cards sirven como puntos de acceso a niveles más profundos de detalle o navegación, como la visualización de detalles de un álbum de música o información sobre unas próximas vacaciones.
El inicio de la aventura
Las cards no ofrecen toda la información completa, sino que invitan al usuario a hacer clic en el enlace para obtener más detalles.
Cuándo no usar
¡Adiós, cards! Bienvenidas, lists
Cuando se trata de contenido homogéneo que consta de pocas líneas, es preferible utilizar una lista en lugar de una card. Esto permite una exploración más rápida y eficiente, sin la necesidad de cards.
¿Más datos? Usa tablas
Utiliza una tabla en lugar de una tarjeta para conjuntos de datos extensos que contengan muchas variables del mismo tipo que necesitan ser examinadas, ordenadas y/o filtradas.
Accesibilidad
Las Pautas de Accesibilidad al Contenido Web 2.1 y 2.2 ofrecen recomendaciones para mejorar la accesibilidad a personas con discapacidades visuales, auditivas, de movimiento, del habla, cognitivas y fotosensibilidad. Aunque las guías no cubren todas las necesidades, sí ayudan a que más personas puedan acceder a los servicios digitales.
Las guías de accesibilidad se dividen en cuatro principios: Perceptible, entendible, operable y robusto, consideramos abarcar únicamente los principios perceptible, entendible y operable, dejando fuera robusto ya que este no tiene un campo de acción en el diseño de los componentes UI.
La siguiente lista son recomendaciones de la WCAG que afectan al componente card.
Perceptible
Color y contraste SC 1.4.3
La relación de contraste mínima recomendada para la accesibilidad es de 4.5:1 para el texto normal y de 3:1 para el texto grande (18 puntos o más). Utiliza colores y contrastes adecuados para asegurarte de que el texto y los elementos visuales sean fácilmente legibles.
Estado focus SC 1.4.3
En el diseño de cards, es esencial incorporar el estado focus para beneficiar a usuarios que navegan con teclado, permitiéndoles identificar su ubicación en la página. Esto mejora la accesibilidad y brinda una experiencia clara y estructurada, beneficiando a personas con diversas necesidades y limitaciones.
Operable
Target size SC 2.5.5
Los target size se aplican a cualquier dispositivo sea táctil o no táctil, deben tener como mínimo 48 dp permitiendo que los usuarios con discapacidad motriz lo seleccionen fácilmente.
Asegúrese de que el botón y los iconos interactivos en la card tenga un tamaño suficiente.
La armonía del conjunto
Al alinear las tarjetas, prioriza la alineación del conjunto de tarjetas en lugar de cada componente individual. Esto crea una apariencia más cohesiva y facilita la lectura.
Menos es más
Es esencial mantener la información resumida y evitar saturarla con datos. La sobrecarga de información puede desalentar a los usuarios de leer o interactuar con la card.
Claridad visual
Evita el uso de imágenes pixeladas o de baja calidad en las tarjetas, ya que pueden afectar negativamente a la percepción del contenido.
No incluyas links
Una card debe ser un enlace individual o proporcionar un conjunto limitado de acciones.
Guía la interacción
Haz que las tarjetas sean cliqueables y añade detalles visuales al hacer hover, como un cambio en el cursor y efectos de sombra, para guiar a los usuarios hacia una interacción más significativa.
¡No aplastes tus cards!
Tener un sistema de espaciado ayudará a mantener la coherencia al diseñar la tarjeta y facilitará su escaneo.
Botonitis aguda
No coloques un exceso de botones o acciones en una card, ya que esto puede abrumar al usuario y dificultar la toma de decisiones.
