Saltar al contenido principal

Tarjetas

Tarjetas en Storybook

Uso​

Descripción general​

Una tarjeta es un elemento de interfaz de usuario que agrupa información relacionada en un contenedor. Las tarjetas consisten en bloques de contenido que, en su conjunto, se relacionan con un solo asunto, tema o destino. Estos objetos de contenido interactivos y autónomos se encuentran dentro de una composición y disposición de página de aplicación. Los diseños basados en tarjetas proporcionan soluciones simples, intuitivas y estéticamente agradables para aplicaciones web. Las tarjetas están diseñadas para abordar necesidades de contenido específicas y su composición y disposición varía en función de su contenido. Como tal, una composición y disposición basada en tarjetas puede ser una herramienta poderosa para el diseño responsive.

Cuándo se debe utilizar​

  • Para agrupar varias informaciones relacionadas en unidades digeribles.
  • Para que la información sea fácil de leer y procesar.
  • Como un punto de entrada vinculado a información adicional.

Cuándo no se debe utilizar​

  • Para información no relacionada a la que no le beneficie estar agrupada.
  • Para información que sea tan compleja que deba dividirse en un formato de tarjeta.
  • Cuando el contenido o la disposición no se puedan mantener uniformes dentro de una serie.

Formato​

Anatomía​

formato de tarjeta

Composición y disposición de cuadrícula y puntos de interrupción para aplicaciones de diseño web responsive​

Las tarjetas son rectangulares y tienen esquinas redondeadas y sombras paralelas. Su composición y disposición es flexible y depende del contenido. Pueden incluir una variedad de elementos, entre ellos, elementos multimedia, texto de ayuda y acciones. El contenedor de tarjetas es el único elemento obligatorio. Los elementos de la tarjeta, como texto e imágenes, están dispuestos en una jerarquía para facilitar el escaneo.

Las tarjetas constan de los siguientes elementos:

Elementos básicos de las tarjetas​

  1. Contenedor de tarjetas: Alberga todos los elementos de la tarjeta. El tamaño de los contenedores de tarjetas depende de su contenido. Las tarjetas básicas son blancas y tienen una sombra paralela y un contorno claro; se colocan sobre un fondo ligeramente coloreado.
  2. Elementos multimedia: Las imágenes se ubican en la parte superior de la tarjeta y pueden extenderse al ancho total.
  3. Texto del encabezado: El texto del encabezado tiene un estilo de acuerdo con las directrices de tipografía de Jutro.
  4. Texto del cuerpo: Tiene un estilo de acuerdo con las directrices de tipografía de Jutro. Incluye elementos como material de resumen y descripciones.
  5. Íconos y rótulos: Se colocan en la parte inferior de las tarjetas y tienen un estilo de acuerdo con las directrices de iconografía de Jutro. Los íconos se pueden utilizar para acciones complementarias.
  6. Botones: Las interacciones, como los botones, se pueden colocar directamente en las tarjetas.

Composición y disposición de cuadrícula y puntos de interrupción para aplicaciones de diseño web responsive​

  1. Composición y disposición amplia (escritorio)
  2. Composición y disposición mediana (escritorio)
  3. Composición y disposición (columna única)

Prácticas recomendadas​

Important: Las tarjetas deben separarse para colocar contenido dentro de ellas. Los componentes o estilos que contienen seguirán recibiendo actualizaciones.
  • Las tarjetas deben parecerse a tarjetas físicas y tener una sensación táctil (para pantallas táctiles, se pueden aplicar interacciones hápticas).
  • Use las sombras dinámicamente (a diferentes profundidades) para ayudar con la interacción de las tarjetas. Por ejemplo, puede secundar un gesto de recoger y mover creando la ilusión de elevar la tarjeta. Para ello, utilice una sombra exterior más profunda durante la interacción.
  • La jerarquía de los elementos de la tarjeta debe estar bien diseñada y mantenerse uniforme en una serie de tarjetas.
  • Los gestos deben implementarse con coherencia dentro de una serie de tarjetas. Los gestos que se usan con frecuencia en las tarjetas incluyen deslizar, levantar y mover, y desplazarse.
  • Las tarjetas deben contener un número limitado de acciones y usar enlaces para llevar a los usuarios a áreas más profundas de la experiencia del contenido.
  • Las tarjetas son coplanares y varias tarjetas en una página deben agruparse como una serie.
  • Asegúrese de que las composiciones y disposiciones de las tarjetas sean fáciles de usar. Las tarjetas deben ser fáciles de escanear y estar ubicadas en patrones uniformes.
  • Use una composición y disposición de tarjeta de tablero para asuntos que no están relacionados pero que, sin embargo, deben agruparse en una sola sección.

Contenido​

Pautas generales de redacción​

  • En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
  • Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
  • Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
  • Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
  • Las palabras y las oraciones deben ser breves.

Pautas de redacción específicas de la tarjeta​

  • Se debe ser selectivo con respecto al contenido que incluya en las tarjetas. Su objetivo es servir como punto de partida a información más detallada. El contenido superfluo puede sobrecargar las tarjetas y crear fricciones.
  • Coloque el contenido jerárquicamente dentro de las tarjetas para facilitar el escaneo.
  • Use diferentes niveles de énfasis para que el contenido comunique la posición jerárquica.
  • Si una tarjeta incluye más de dos acciones complementarias, utilice un menú adicional.
  • Limite el número de acciones en una tarjeta a solo lo esencial.
  • En las tarjetas, use mayúsculas como se usan en las oraciones, incluso en los encabezados y títulos. Escriba con mayúsculas los nombres propios.

Capacidad de ser responsive​

La composición y disposición de cuadrícula y los puntos de interrupción para aplicaciones de diseño web responsive incluyen esto:

  1. Composición y disposición amplia: Es el ancho de página máximo permitido, que permite de 3 a 4 tarjetas horizontalmente.
  2. Composición y disposición mediana: Es adecuada para pantallas más pequeñas, casos de uso de múltiples navegadores y navegadores de tablets, que permite 3 tarjetas horizontalmente.
  3. Composición y disposición móvil: Utiliza una sola columna para compensar el espacio de pantalla drásticamente reducido en comparación con las pantallas de escritorio y las tablets.

Interacciones​

Teclado​

El contenido que puede recibir el foco dentro del componente de tarjeta (es decir, la descripción emergente) es accesible y procesable a través del teclado.

La tarjeta en la que se puede hacer clic también puede recibir el foco con el teclado y accionarse a través de la barra espaciadora y la tecla Intro.

Lector de pantalla​

De manera predeterminada, el campo de encabezado dentro de la tarjeta implementa contenido <h2> y, como tal, es accesible a través del acceso directo de encabezado del lector de pantalla. La descripción emergente incluye un atributo aria-label de “Mostrar descripción emergente”. La descripción emergente utiliza aria-live='polite', lo que permite que el lector de pantalla verbalice mediante narración su contenido automáticamente.

La tarjeta en la que se puede hacer clic utiliza el elemento <button> HTML5 y, como tal, el texto dentro de las etiquetas actúa como el nombre accesible de la tarjeta.

Accesibilidad​

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

  • La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
  • El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
  • El elemento se puede operar con teclado, así como con mouse.
  • Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Al agregar contenido a la tarjeta, asegúrese de seguir las directrices de accesibilidad, incluidos, por ejemplo, los requisitos de contraste de color, el uso de encabezados apropiados si fuera necesario y texto alternativo en imágenes informativas.