Vista de tarjetas

Descripción general

La vista de tarjetas es un mecanismo para visualizar y manipular conjuntos de datos más pequeños. Cada tarjeta representa un objeto junto con algunos detalles generales.

Cuándo se debe utilizar

• Necesita que el usuario se concentre en un objeto mientras realiza una tarea.
• No hay importancia en cuanto al orden en que se presentan los datos y el usuario no necesita controlar esto.
• Hay menos de 10 tarjetas para mostrar en la interfaz de usuario o demasiado espacio en blanco en la interfaz podría distraer a los usuarios.
• Los datos que se deben presentar al usuario son muy simples y fáciles de escanear.
• El caso de uso no requiere la comparación de datos.

Cuándo no se debe utilizar

• Los usuarios deben comparar los datos entre tarjetas. Esto ralentiza al usuario, ya que aumenta la carga cognitiva y limita la cantidad de registros visibles. En su lugar, utilice la vista de tabla.
• Cuando es necesario presentar datos complejos al usuario. En su lugar, utilice la vista de tabla.

Formato

Anatomía

1. Título (obligatorio): Ofrece una breve descripción sobre la vista de tarjetas, con un recuento opcional que indica la cantidad de tarjetas en la vista.
2. Subtítulo (opcional): El subtítulo proporciona información contextual adicional si fuera necesario.
3. Controles de la vista de tarjetas (opcional): Incluye un conjunto de controles para manipular la visualización de datos. No se deben confundir los controles de la vista de tarjetas con las acciones de la vista de tarjetas.

   1. Filtro de búsqueda (opcional): Se utiliza para filtrar el conjunto de datos mediante la búsqueda de palabras clave.

   2. Filtro (opcional): Incluye un conjunto avanzado de mecanismos para filtrar el conjunto de datos según varios parámetros.

   3. Selector de vista (opcional): Se utiliza para cambiar la visualización de los datos entre la vista de tabla y la vista de tarjetas.

4. Acciones de la vista de tarjetas (opcional): Proporciona los medios para realizar acciones en el conjunto de datos, ya sea en el conjunto completo o en conjuntos de datos seleccionados desde la vista de tarjetas.
5. Vista de tarjetas (obligatorio): Muestra las tarjetas en un orden definido por la aplicación.
6. Tarjeta individual (obligatoria): Muestra los datos en el formato definido.

Composición y disposición, dimensionamiento y comportamiento de repetición de flujo

• Las tarjetas están configuradas y dispuestas de tal manera que se use el espacio del mejor modo posible. La composición y disposición se puede cambiar para adaptarse a la cantidad de tarjetas disponibles.
• Cuando trabaje con conjuntos de datos más pequeños, puede recurrir a opciones de cambio de tamaño para evitar un espacio en blanco excesivo.
• Proporcione el espacio adecuado entre las tarjetas para garantizar que los usuarios escaneen con facilidad.
• Vuelva a colocar las tarjetas en la configuración de cuadrícula subyacente cuando agregue o elimine tarjetas de la composición y disposición.
• Una vez que se cambia el tamaño, el ancho de una columna se mantiene hasta que el usuario lo cambia o lo restablece a los valores predeterminados.

Orientación

• La orientación de las tarjetas se puede configurar para adaptarla al caso de uso.
• Para texto más largo y más de tres campos, analice la posibilidad de usar una composición y disposición de tarjeta vertical en lugar de horizontal.
• Las composiciones y disposiciones verticales son más adecuadas para tarjetas que contienen imágenes o íconos.

Detalles de la tarjeta individual

1. Ícono/imágenes (opcional): Ofrece una indicación visual sobre los detalles de la tarjeta o del tipo de tarjeta.
2. Título (obligatorio): Da una breve indicación sobre lo que trata la tarjeta.
3. Rótulo de información (opcional): Indica el estado de un objeto, si está disponible.
4. Datos de la tarjeta (obligatorios): Muestra los datos asociados a la tarjeta.
5. Acciones de la tarjeta (opcional): Proporciona los medios para realizar acciones en el objeto tarjeta.
   • Acción principal (opcional): Utilice un botón de acción principal para la acción más importante sobre el objeto. Cada tarjeta puede tener solo una acción principal.
   • Acción secundaria (opcional): Se utiliza para acciones adicionales.
   • Acción terciaria (opcional): Se utiliza para acciones destructivas o menos importantes.
   • Menú de desbordamiento (opcional): Se utiliza para mostrar más acciones asociadas con los datos del objeto.

Todas las tarjetas de la vista de tarjetas deben contener los mismos tipos de datos. No introduzca en una tarjeta detalles que las otras no tengan.

Cada detalle debe estar asociado con un rótulo, a menos que sea inmediatamente evidente para el usuario.

Use íconos solo como un medio para proporcionar contexto adicional a los datos. Use solo íconos comunes y fácilmente reconocibles si no tienen texto acompañante.

Todo el contenido de una celda debe estar visible. El texto más largo se ajusta a la siguiente línea con la opción para ver más en una vista detallada (cajón, nueva página, modal). No trunque el texto de las tarjetas.

Características de la vista de tarjetas

Estado vacío y estado cargando

• Cuando no haya datos para mostrar o cuando las condiciones impidan que se muestren los datos, use el estado vacío para informar a los usuarios. El mensaje debe indicar claramente el problema y los medios para solucionarlo.
• Cuando se recuperen datos, utilice el estado cargando para informar a los usuarios. El mensaje debe comunicar con claridad que los datos se están cargando y explicar por qué el usuario está esperando.
• Los botones de acciones se pueden utilizar para activar la actualización de la página si fuera necesario.

Ejemplo de un estado vacío de la vista de tarjetas

Ejemplo de un estado vacío de la vista de tarjetas

Capacidad de ser responsive

La vista de tarjetas se adapta por completo tanto a tablets como a dispositivos móviles, y las celdas se pueden eliminar, reordenar o combinar de una manera que sea útil para los usuarios.

De izquierda a derecha: vista de tarjetas en computadoras de escritorio, en tablets y en dispositivos móviles.

Filtros de la vista de tarjetas

El filtrado proporciona los medios para manipular conjuntos de datos específicos. Se puede realizar a través del panel de filtros, donde diferentes conjuntos de datos sirven como filtros. También hay un filtro de búsqueda, con el que los usuarios pueden reducir el conjunto de datos ingresando una palabra clave.

Selección de tarjetas

En la vista de tarjetas, se puede habilitar la selección de tarjetas única o múltiple, según el caso de uso.

Recursos

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)