UX/UI5 min de lectura

Cómo diseñar filtros de búsqueda que ayuden a encontrar

Organizá criterios, selecciones y estados sin resultados. Un ejemplo inmobiliario para pensar búsqueda persistente y filtros en móvil.

Catálogo inmobiliario ilustrativo con controles de filtros y una propiedad seleccionada.

Un filtro ayuda cuando reduce opciones de una manera que la persona puede entender y controlar. Agregar criterios no mejora una búsqueda por sí solo. Hay que elegir cuáles responden a decisiones reales, mostrar qué está seleccionado y explicar cómo esas condiciones afectan los resultados. La interfaz también debe permitir volver atrás sin reconstruir todo.

Diseñar filtros exige pensar estados, no solamente controles. Importan el conjunto inicial, las combinaciones, la espera, los resultados vacíos y el regreso desde una ficha. Una selección correcta puede dejar de ser útil si el sistema la aplica de una manera que la persona no anticipa.

Criterios relevantes y datos disponibles

Los filtros deberían relacionarse con decisiones del catálogo. En inmuebles pueden importar ubicación, presupuesto o ambientes; en indumentaria, talle y disponibilidad. No conviene copiar una barra de otra industria sin revisar qué datos existen y cuáles permiten distinguir opciones. Un criterio sin información confiable puede producir exclusiones difíciles de explicar.

También hay que acordar nombres y unidades. Una etiqueta interna puede ser clara para quien administra el catálogo, pero no para quien busca. Si un rango se expresa con una unidad, esa unidad debe mantenerse en resultados y fichas. La consistencia ayuda a interpretar la selección sin memorizar convenciones distintas.

Qué significa combinar condiciones

La interfaz debe anticipar si varias opciones se suman como alternativas o restringen el conjunto. Elegir dos barrios puede significar buscar en cualquiera de ellos; elegir un barrio y un presupuesto puede significar cumplir ambos. Son relaciones diferentes. La propuesta debería explicar ese comportamiento mediante etiquetas, resumen y resultados, no exigir conocer lógica de consultas.

Cuando un criterio depende de otro, hay que decidir qué ocurre al cambiar la selección inicial. No corresponde borrar un filtro silenciosamente. Se puede conservar si sigue siendo válido o explicar por qué debe revisarse. Los estados incompatibles necesitan una respuesta diseñada, no una combinación de controles aparentemente activos.

Selecciones visibles y fáciles de quitar

Un resumen de filtros activos permite revisar la búsqueda después de cerrar un panel. Cada condición debería poder quitarse de forma individual, con una acción clara para reiniciar todo cuando convenga. Ese resumen no debe duplicar controles de manera confusa; muestra el estado y facilita corregirlo.

También importa conservar la selección al abrir una ficha y volver. Si la persona evaluó una opción que no le sirve, necesita continuar sobre el mismo conjunto. Guardar filtros, orden y una referencia de posición puede apoyar ese recorrido. Qué se conserva y por cuánto tiempo depende del producto y de sus condiciones de privacidad.

Aplicar cambios o actualizar resultados

Actualizar mientras se selecciona puede ser útil cuando la respuesta es comprensible y no interrumpe la tarea. Un botón “Aplicar” puede servir si hay varias condiciones, un panel móvil o una consulta costosa. No existe una única elección correcta: importa que el comportamiento sea coherente y que la persona sepa cuándo la búsqueda cambió.

Si se actualiza automáticamente, conviene revisar carga, anuncios de resultados y foco. El contenido no debería saltar ni mover el control que se está usando. Si se usa una acción explícita, el panel debe diferenciar lo seleccionado de lo ya aplicado y explicar cómo descartar cambios. Son estados distintos que el diseño necesita representar.

Cero resultados también es una respuesta

Un estado vacío debería mostrar las condiciones activas y ofrecer una forma de ajustar la búsqueda. Puede sugerir ampliar un criterio, pero no quitarlo por cuenta propia. Si no hay datos o hubo una falla de conexión, hay que distinguirlo de una búsqueda que realmente no tiene coincidencias.

  • Indicar qué búsqueda se realizó y qué filtros siguen activos.
  • Permitir quitar una condición o editarla sin empezar de nuevo.
  • Evitar presentar alternativas como coincidencias exactas.
  • Separar ausencia de resultados de un error del sistema.
  • Conservar el foco y explicar cualquier actualización relevante.

Ejemplo hipotético: un catálogo inmobiliario

Una persona busca departamentos en una zona con un presupuesto máximo. Agrega cantidad de ambientes y obtiene pocas opciones. Abre una ficha, revisa características y vuelve. La búsqueda debería conservar esos criterios. Si luego elige otro barrio, el sistema puede actualizar resultados o esperar una confirmación, pero debe hacerlo de forma reconocible.

Si la combinación no tiene coincidencias, se puede mostrar un resumen y ofrecer quitar el criterio de ambientes. La persona mantiene control sobre la decisión. Un mapa puede complementar el listado, pero moverlo no debería modificar la búsqueda sin una indicación. Eso es especialmente importante cuando una acción visual afecta una selección que no está a la vista.

Nuvora explora estas decisiones como proyecto conceptual de diseño independiente. Sus imágenes muestran una propuesta de búsqueda y consulta; no son evidencia de uso, validación ni resultados de una plataforma implementada. Sirven para conversar sobre el recorrido y sobre qué necesitaría comprobarse.

Menos espacio, la misma capacidad de decidir

En móvil, un panel puede reunir filtros y dejar visible un resumen compacto en resultados. Lista y mapa pueden ser vistas alternables. Los controles necesitan espacio táctil, nombres legibles y una forma clara de cerrar o aplicar. Reducir la pantalla no debería eliminar criterios necesarios ni volver invisible el estado de búsqueda.

Antes de implementar, probá un recorrido que incluya cambiar, deshacer y volver desde una ficha. El brief ayuda a definir los criterios; el alcance UX/UI debe contemplar los estados. Si necesitás diseñar ese catálogo, podemos trabajar flujos e interfaz sin asumir que una barra de filtros resuelve toda la búsqueda.

Ver el blog
  1. Composición de un brief, mapa del sitio y wireframes junto a una propuesta web de restaurante.
    UX/UI5 min de lectura

    Diseñar una web no empieza en Figma

    Definí objetivos, tareas, contenido y mantenimiento antes de dibujar pantallas. Incluye preguntas para armar un brief útil.

  2. Composición de flujos, wireframes móviles, componentes y referencias de una interfaz.
    UX/UI5 min de lectura

    Qué incluye un proyecto UX/UI más allá de las pantallas

    Problema, flujos, componentes y estados: entregables y criterios para revisar una propuesta UX/UI sin dar por hecha su validación.

  3. Aviones de papel ante una barrera roja, con uno atravesando una abertura.
    UX/UI5 min de lectura

    Por qué una web recibe visitas pero no genera consultas

    Revisá el recorrido desde la llegada hasta el envío: intención, oferta, confianza, formularios y medición, sin confundir hipótesis con causas.