Filtrado
Descripción general
Utilice el filtrado para refinar o restringir el contenido que se muestra en función de criterios o atributos específicos.
El filtrado es un elemento crucial en las interfaces de usuario, especialmente en aplicaciones o sitios web que presentan grandes conjuntos de datos o contenido.
Este patrón abarca:
- Filtros simples
- Filtros por facetas
Cuándo se debe utilizar
- Cuando se trata de grandes cantidades de contenido o datos. Los usuarios pueden aplicar filtros para concentrarse en segmentos específicos de datos para el análisis.
- Para complementar la funcionalidad de búsqueda y refinar aún más los resultados en función de criterios específicos.
- Cuando los usuarios deben personalizar su vista de datos. Pueden utilizar filtros para adaptar la información mostrada a sus preferencias y prioridades.
Cuándo no se debe utilizar
- El conjunto de datos es pequeño, sencillo y no tiene muchos atributos distintivos.
- Los usuarios saben exactamente lo que están buscando y pueden encontrarlo a través de una simple consulta de búsqueda.
- Para contenidos que sean críticos y deban presentarse en su totalidad sin exclusión.
Métodos de selección
Selección única
Con la selección única, los usuarios pueden elegir solo un atributo de un conjunto de opciones mutuamente excluyentes.
- Use un grupo de botones de selección cuando haya 5 atributos o menos.
- Utilice un campo de selección única para listas más largas de opciones (6 o más).
- Use conmutadores para opciones binarias o filtros con solo dos estados posibles. Los resultados del filtro se actualizan en tiempo real y no se requiere la acción “Aplicar filtros”.
No recomendamos botones de conmutación para filtrar porque el espacio donde se muestran los filtros tiende a ser estrecho. En su lugar, use un grupo de botones de selección, un campo de selección única o un conmutador, según su caso de uso.
Selección múltiple
Para selecciones múltiples, los usuarios pueden aplicar múltiples atributos a la vez.
- Use casillas de verificación cuando haya 5 atributos o menos.
- Utilice un campo de selección múltiple para listas más largas de opciones (6 o más).
Al igual que con la selección única, no recomendamos botones de conmutación para el filtrado. La composición y disposición puede dividirse fácilmente en contenedores más pequeños, como una ventana emergente o una pantalla móvil responsive. En su lugar, utilice casillas de verificación o un campo de selección múltiple, según su caso de uso.
Filtro de fecha
Con el filtro de fecha, los usuarios pueden realizar una selección única o un intervalo. Este control filtra los resultados de datos según un día específico o un intervalo de días.
Los equipos de aplicación establecen una selección predeterminada de opciones. También existe una selección de fecha personalizada opcional que activa un selector de fecha.
Las opciones predeterminadas frecuentes incluyen las siguientes:
- Hoy
- Ayer
- Últimos x días
- La semana pasada
- Últimas x semanas
- Mes actual (desde 01.xx.xxxx hasta hoy/ahora)
- Últimos x meses
- Año actual (xxxx)
- Año pasado
- Últimos x años
Al seleccionar “personalizado”, los usuarios pueden elegir una fecha o un intervalo de fechas desde un selector de fechas. Si los usuarios seleccionan una sola fecha, ese día específico se muestra en la entrada de selección. Al volver a activar el menú desplegable de selección, aparece “Personalizado (fecha)”.
Si los usuarios seleccionan un intervalo de fechas, ese intervalo se muestra en la entrada de selección. Al volver a activar el menú desplegable de selección, aparece “Personalizado (fecha hasta fecha)”.
Intervalos
Con los filtros de intervalo, los usuarios pueden establecer un intervalo de valores. Esto es frecuente para filtrar datos numéricos dentro de un intervalo especificado o cualquier otro dato continuo.
- Utilice dos entradas de números para establecer el intervalo de valores, ya que permite una mayor precisión.
- Use el control deslizante cuando necesite una pantalla más atractiva visualmente (por ejemplo, aplicaciones para consumidores o aplicaciones con un fuerte enfoque en el uso móvil). El valor exacto no importa tanto y el número máximo está establecido.
Entrada
Los filtros de entrada hacen coincidir la entrada del usuario con las del conjunto de datos y devuelven los resultados correspondientes. Esto es útil para grandes conjuntos de datos o cuando los usuarios tienen elementos específicos en mente.
- Utilice la búsqueda para filtrar todo el conjunto de datos.
- Utilice la entrada de número para restringir el filtrado a números o a subconjuntos numéricos específicos del conjunto de datos, como una columna de tabla de números.
- Utilice la entrada de texto para restringir la búsqueda a strings. Es similar a la búsqueda, pero se aplica a un subconjunto o categoría específicos dentro del conjunto de datos.
Filtros simples
Anatomía de un filtro simple
Ventana emergente
- Desencadenante del filtro: Muestra la ventana emergente del filtro.
- Contenedor del filtro: Organiza los controles y las opciones del filtro dentro de un espacio definido.
- Área de filtros: Incluye hasta 3 controles de filtro recomendados.
- Área de acciones: Incluye botones para aplicar los filtros o cancelar la operación.
Sección
- Desencadenador del filtro: Muestra la sección de filtro, que empuja el contenido de la página. En una segunda interacción, el desencadenador del filtro oculta la sección.
- Contenedor del filtro: Organiza los controles y las opciones del filtro dentro de un espacio definido. El contenedor del filtro tiene un color de fondo diferente a fin de que se destaque para los usuarios.
- Área de filtros: Incluye hasta 6 controles de filtro. Estos filtros normalmente corresponden a las columnas de una tabla.
- Área de acciones: Incluye botones para aplicar los filtros o cancelar la operación.
Pautas para usar filtros simples
Prácticas recomendadas para filtros simples
- Para activar los filtros simples, los usuarios deben interactuar con el desencadenador. Los filtros simples se muestran en una ventana emergente, sobre el contenido actual o en una sección integrada. Cuando la visibilidad se establece en true, la sección integrada empuja el contenido de la página.
- Para lograr simplicidad, use hasta 3 controles de filtro. Los filtros son aditivos, lo que significa que cuantos más filtros se apliquen, más restringidos serán los resultados. Si el usuario aplica demasiados filtros a un conjunto de datos, es posible que no se devuelva ningún resultado.
- La actualización por lotes aplica todos los filtros juntos al hacer clic en la acción de envío. En este caso, la acción de envío es normalmente Aplicar (solicitud sincrónica). El conjunto de datos solo se actualiza una vez. Use la actualización por lotes cuando los filtros estén ocultos de forma predeterminada y sea necesario invocarlos. La actualización por lotes debe tener al menos dos acciones: Aplicar y Cancelar.
- La actualización instantánea aplica filtros apenas el usuario interactúa con ellos (solicitud asíncrona). Los resultados de los filtros se actualizan instantáneamente para encontrar coincidencias con las condiciones. Use la actualización instantánea para los casos en que los controles de filtro sean persistentes en la interfaz de usuario.
- Desde Jutro, le recomendamos utilizar actualizaciones por lotes siempre que fuera posible.
Retroalimentación y filtros simples
- Siempre informe a los usuarios cuando se apliquen filtros al conjunto de datos actual.
- Use una insignia o cualquier otro tipo de indicador en el botón desencadenador del filtro.
- También puede usar retroalimentación, como chips, o agregar una línea de texto en la interfaz de usuario principal sobre el conjunto de datos. Esto ayuda a los usuarios a reconocer que se le han aplicado filtros.
Restablecimiento de filtros simples
- Agregar una acción para restablecer filtros es opcional. Esto es más adecuado para mecanismos de filtrado más complejos, como filtros por facetas o filtros booleanos.
Filtrado de tablas
Para filtrar el contenido de una tabla completa, use un filtro de sección en lugar de una ventana emergente.
Filtrado de tablas por columnas
Habilitar el filtrado de columnas para las tablas es opcional. Aparece un ícono de filtro en las columnas que se pueden filtrar. Al interactuar con el ícono de filtro, se activa una ventana emergente con los controles de filtro relevantes.
Filtros por facetas
Anatomía de un filtro por facetas
- Desencadenante del filtro: Muestra la ventana emergente del filtro o la sección del filtro.
- Cantidad de filtros aplicados: Muestra cuántos filtros están actualmente activos o aplicados a los resultados de la búsqueda.
- Borrar todos los filtros: Elimina todos los filtros aplicados actualmente en una sola acción, y restaura los resultados de la búsqueda a su estado original.
- Chips de filtro: Indican qué filtros están aplicados actualmente e incluye una acción para eliminarlos.
- Agrupación: Agrupa uno o más controles de filtro en una categoría. Puede ser tan simple como un divisor de líneas o tan complejo como un acordeón.
- Área de filtros: No hay límites en los controles de filtro ni en las categorías.
- Área de acciones: Incluye botones para aplicar los filtros o cancelar la operación.
Pautas para el uso de filtros por facetas
Prácticas recomendadas para los filtros por facetas
- Para activar filtros por facetas, los usuarios deben interactuar con el desencadenador. Los filtros por facetas pueden mostrarse sobre una ventana emergente, un cajón o ser persistentes en la interfaz de usuario, normalmente en una sección lateral.
- Los filtros por facetas pueden incluir todos los filtros que sean necesarios. Los filtros son aditivos, lo que significa que cuantos más filtros se apliquen, más restringidos serán los resultados. Si el usuario aplica demasiados filtros a un conjunto de datos, es posible que no se devuelva ningún resultado.
- La actualización por lotes aplica todos los filtros juntos al hacer clic en la acción de envío. En este caso, la acción de envío es normalmente Aplicar (solicitud sincrónica). El conjunto de datos solo se actualiza una vez. Use la actualización por lotes cuando los filtros estén ocultos de forma predeterminada y sea necesario invocarlos. La actualización por lotes debe tener al menos dos acciones: Aplicar y Cancelar.
- La actualización instantánea aplica filtros apenas el usuario interactúa con ellos (solicitud asíncrona). Los resultados de los filtros se actualizan instantáneamente para encontrar coincidencias con las condiciones. Use la actualización instantánea para los casos en que los controles de filtro sean persistentes en la interfaz de usuario.
Retroalimentación y filtros por facetas
- Siempre informe a los usuarios cuando se apliquen filtros al conjunto de datos actual.
- Use una insignia o cualquier otro tipo de indicador en el botón desencadenador del filtro.
- Indique la cantidad de filtros aplicados.
Restablecimiento de filtros por facetas
- Los filtros por facetas deben tener una acción para borrar los filtros.
- Desde Jutro, le recomendamos incluir la acción para borrar en la parte superior del cuadro de filtro por facetas, junto a la cantidad de filtros aplicados.
- También puede usar chips para borrar filtros específicos.
Composiciones y disposiciones
Los filtros por facetas se muestran en:
- Ventana emergente
- Cajón
- Sección lateral (persistente y mejor para solicitudes asíncronas)
Agrupación
Las categorías se agrupan mediante lo siguiente:
- Divisor
- Divisor con encabezado
- Acordeones (vea el siguiente ejemplo)
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.
Accesibilidad
Cuando los filtros se muestran sobre una ventana emergente, esto funciona como una trampa de foco.
Una vez activado, el primer elemento interactivo dentro de la ventana emergente recibe el foco. Al presionar Tab, el foco se desplaza hacia adelante.
Al presionar Tab una vez más cuando el foco está en el último elemento interactivo (normalmente el botón Aplicar), los usuarios pasan a la parte superior de la ventana emergente, al primer elemento interactivo.
Para desestimar la ventana emergente, los usuarios pueden interactuar con las acciones Cancelar o Aplicar, o pueden presionar Esc.
Capacidad de ser responsive
Aunque las ventanas emergentes pueden reducirse o expandirse a casi cualquier tamaño, recomendamos mantener las de los filtros entre 240 y 480 px.
Las ventanas emergentes para filtrado tienen un tamaño mínimo de 160 px.
Tematización
De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.
Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.
Más información sobre la tematización con tokens de diseño
Componentes y patrones relacionados
Componentes
Los filtros tienen los siguientes componentes relacionados:
- Botón
- Casilla de verificación
- Menús desplegables
- Entradas (por ejemplo, texto)
- Búsqueda
- Grupo de selección
Patrones
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.