01/07/2015

Consejos para implementar filtros de búsqueda facetados

Consejos para implementar filtros de búsqueda facetados

Ya conocimos las distintas maneras de ayudar al usuario a refinar su búsqueda en nuestro sitio web. También comentamos las ventajas y las desventajas de la búsqueda facetada, la modalidad más utilizada en sitios web con una gran variedad y cantidad de contenido. Los problemas de este enfoque son tan importantes como sus beneficios, pero siguiendo los consejos que daremos en este artículo lograremos el mejor diseño posible tanto para el usuario como para el desarrollador.

Permitir la deselección

Bumeran.com permite quitar un filtro haciendo clic en una cruz al costado del mismo.

Una vez elegido un filtro, el usuario debería poder quitarlo. Hay dos opciones: reemplazar el filtro por otro dentro de la misma faceta (por ejemplo, cambiar Rodado 26 por Rodado 24 dentro de la faceta Rodado) o bien dejar de usar cualquier filtro dentro de la faceta, expandiendo la lista de resultados.

Buena ubicación

La lista de facetas suele estar en una de estas dos ubicaciones:

  • Horizontal: encima de los resultados, ocupando todo el ancho de la página.
  • Vertical: a la izquierda de los resultados, en una barra lateral.

Con la disposición horizontal, los filtros son más visibles. Sin embargo, también empujan los resultados hacia abajo, quitándoles visibilidad a estos últimos. Por eso, muchos diseñadores eligen la disposición vertical. Además, colocando una barra a la izquierda es posible recorrer los resultados sin perder de vista los filtros.

El elemento correcto

MercadoLibre (izquierda) permite establecer un rango de precios a través de enlaces o bien con dos campos de texto. Trek (derecha) usa un control deslizante para el mismo fin.

¿Cuál debería ser el elemento de interfaz que permite seleccionar un filtro? Tenemos varias opciones:

  • Enlaces. Simples links de texto.
  • Checkboxes. Cajas de verificación, que se tildan o destildan.
  • Campos de texto. Campos donde podemos ingresar caracteres. Generalmente, se usan para valores numéricos (por ejemplo, nos permiten filtrar productos por un precio mínimo y un precio máximo). MercadoLibre usa esta implementación.
  • Controles deslizantes de rango. Nos permiten desplazarnos fácilmente entre un número mínimo y un máximo ya establecidos. Por ejemplo, el precio, el nivel de calificaciones, etc.
  • Selectores de color. Útiles cuando queremos un producto de un color determinado.

Lo ideal es utilizar una combinación de todos estos controles, eligiendo el adecuado para cada tipo de dato. En el caso de los checkboxes y los controles deslizantes, es ideal que apliquen el filtro automáticamente, sin cargar una página nueva, a través de Ajax. El sitio de Trek hace una buena combinación de estos elementos.

Mostrar la cantidad de resultados

Al lado del elemento correspondiente a cada filtro (sea cual sea) debería mostrarse la cantidad de resultados que incluye. Por ejemplo, suponiendo que usemos enlaces, si dentro del filtro Rodado 26 hay 30 resultados, el enlace debería verse como «Rodado 26 (30)». Si la cantidad de resultados es 0, el texto no debería estar enlazado, y hasta podría distinguirse con otro color.

Usar las facetas adecuadas

Ofrecer una gran cantidad de facetas permite un alto nivel de especificidad, pero a veces innecesario o incluso contraproducente: el usuario puede terminar abrumado ante tantas opciones. Las facetas deben elegirse en función de los patrones de búsqueda de los usuarios. Cuando sean necesarias muchas facetas, se puede mostrar inicialmente solo algunas y ofrecer una opción para mostrar todas las demás. Otra opción es mostrar solo los títulos de las facetas, y permitir que el usuario despliegue la lista de filtros correspondiente a través de un clic (ver: menús desplegables).

Ocultar resultados a los buscadores

Como ya comentamos, cada posible combinación de filtros es una página diferente. Esto genera resultados repetitivos para motores de búsqueda como Google, Yahoo! y Bing. La forma de evitarlo es excluir de los resultados de búsqueda las combinaciones a partir de cierto nivel de profundidad. Por ejemplo, la sucesión de facetas Producto/Rodado/Marca sería visible en Google, pero la combinación Producto/Rodado/Marca/Género, no.

Siguiendo estos consejos crearemos una experiencia de búsqueda facetada que ayudará a los usuarios a encontrar lo que desean y, en consecuencia, nos brindará mejores tasas de conversión.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce