Diseño UI

Consideraciones para diseñar un buscador y filtros

Cuando navegamos por Internet e intentamos buscar algo específico, una de las peores situaciones que nos puede ocurrir, es encontrarnos con un resultado con más de 50 páginas con elementos que se ajustan o adaptan a nuestra búsqueda. Sin embargo, para evitar esta situación uno de nuestros principales aliados son los filtros y un buen buscador. ¿Cómo implementarlos de manera correcta? y ¿qué debemos considerar para evitar que las búsquedas se vuelvan molestas?

La importancia del buscador

Sabemos que la barra de búsqueda es parte importante de un sitio web. No podemos esperar que un usuario encuentre lo que está buscando sin otorgarle un buscador. Otra opción es dejar que navegue dentro del sitio hasta encontrar lo que buscaba, pero sabemos que las personas necesitan encontrar el resultado antes de que abandonen el sitio.

Por este motivo, sólo implementar un buscador no es suficiente. Es importante que pensemos más allá y consideremos la navegación para así implementarlo de mejor forma. NN Group menciona algunos puntos para considerar cuando estemos diseñando un buscador, estos son:

• La búsqueda requiere conocimiento del espacio
• La búsqueda aumenta la carga de memoria
• Los usuarios tienen pocas habilidades de búsqueda y no saben cómo funciona la búsqueda.
• La búsqueda tiene un costo de interacción más alto que la navegación
• La búsqueda de un sitio específico a menudo puede funcionar mal

Por ello, lo recomendable es tener un buscador balanceado, considerando los diferentes comportamientos de nuestros usuarios y teniendo en cuenta si tienen un perfil más bien de principiante/inexperto o experto.

Patrones de interacción

Teniendo en cuenta estos antecedentes, podemos empezar a diseñar un buscador. Para esta labor, también debemos tener en cuenta algunos de los patrones de interacción que nos permitirán diseñarlo de manera exitosa. Es importante que no olvidemos que todo es aplicable y que siempre debemos tener presentes a nuestros usuarios. Los patrones más relevantes son:

Autocompletar

Cuando el usuario está escribiendo en el buscador y se muestra sugerencias de acuerdo a lo que va escribiendo.

Sugerir

Mostrar al usuario sugerencias sobre temas o elementos que pueden ser relevantes o lo más buscado dentro del sitio web.

Autocorregir

La interfaz puede corregir al usuario, sugiriendo un resultado más cercano a la búsqueda. Esto no solo le facilitará la búsqueda, si no que también lo ayudará a ver, encontrar y acercarse al mejor resultado.

Paginación

Cuando los resultados de la búsqueda son muchos, es bueno cuantificarlos y mostrar la paginación. Lo anterior, también debe incluir el número de la última página, para tener como referencias cuánto podrá navegar dentro de los resultados.

Ordenar o Categorizar

Debemos entregarle la oportunidad al usuario para ordenar los resultados por categorías según la utilidad que le dará. Un caso común es el del e-commerce, en donde vemos el famoso “ordenar resultados por más recomendados”.

Nunca olvidar los filtros

Los usuarios esperan poder encontrar de manera fácil y rápida lo que están buscando, pero ¿qué pasa si la barra de búsqueda no es suficiente? Aquí es cuando los filtros estarán a su favor. Aunque, ¿cómo podemos sacarle un mayor provecho a los filtros?

Jerarquizar

Cuando el usuario está filtrando los elementos para poder llegar al mejor resultado de búsqueda y le presentamos muchas opciones para hacer este filtro una buena idea es jerarquizar estas opciones, ¿por qué? No todas son igual de importantes, ni presentarán la misma utilidad o serán usadas con la misma frecuencia.  

Un ejemplo es ubicar los elementos más buscados al principio. De esta forma, es más sencillo de identificar y seremos más asertivos al momento que un usuario intente filtrar los elementos en la búsqueda.

Entregar información adicional

Otra manera de ayudar al usuario en su búsqueda es informar o enseñar sobre lo que está filtrando. Por ejemplo cuando estamos buscando una prenda y queremos filtrar por color, no sólo se presenta el nombre del color en caracteres, sino también un círculo con el color que se está nombrando, esto lo hace más fácil y reconocible al ojo humano. 

Esto hace que no sea necesario leer cada uno de los nombres, sino que sólo basta con mirar los círculos para identificar el elemento. 

Multiselección

A veces nuestro usuario puede estar enfocado en buscar algo en específico, habiendo pensado y considerado muchas opciones antes de empezar a filtrar los elementos para llegar a él. 

Pero, ¿qué pasa cuando cambia de opinión o encuentra nuevas opciones y desea filtrar por más de una categoría o cuando sólo saben los que no quieren? Por esto debemos darle la opción de seleccionar más de un elemento para filtrar y/o reducir la búsqueda de forma rápida y sencilla.  

Muestra qué está filtrando

Ya sabemos que es importante mantener informado al usuario de lo que está pasando en la interfaz en todo momento. Por esto mismo, es bueno señalarles qué es lo que están filtrando bajo una sección de “filtros aplicados”. 

Cuando un usuario quiera eliminar o deshacer un filtro, es ahí donde podrán hacerlo de manera rápida. 

Lo básico pero esencial

Finalmente estos son sólo algunos de los patrones de diseño y/o lineamientos que nos ayudarán a diseñar mejores filtros y buscadores. Si bien, podríamos seguir hablando en extendido sobre ambos elementos, pero estos son una gran base a considerar para implementar en nuestros futuros diseños de interfaces.