Cómo diseñar la caja de búsqueda de tu eCommerce

¿Alguna vez has entrado en una tienda online o Marketplace con la intención de buscar algún producto y no has encontrado la caja de búsqueda? Apuesto a que sí. 

Cuanto mayor protagonismo le des al buscador en tu homepage, más utilizarán tu buscador, como es lógico. Esto provocará que en lugar de navegar por categorías en tu eCommerce, tus visitantes utilicen directamente el buscador y lleguen al producto que desean de una forma más rápida, sin necesidad de visitar varias páginas. 

👉 Búsqueda por categorías

Por lo tanto, en los sectores en los que la caja de búsqueda búsqueda es la manera más utilizada para encontrar productos, puede ser beneficioso «promover» el campo de búsqueda con un diseño y una ubicación destacados, especialmente en la página de inicio.

Este es el típico caso de compras más específicas, basadas en la comparación de precios, siempre que el usuario conozca el nombre exacto de la marca y el modelo del producto que pretende comprar (es decir, tiene claro el artículo específico que quiere, antes incluso de visitar tu eCommerce).

Por otro lado, en los sectores en los que los usuarios prefieren utilizar la navegación por categorías (porque no saben qué producto exacto quieren, cómo se llama o se escribe), o en el caso de que la jerarquía del sitio sea completamente plana, se puede emplear un diseño del campo de búsqueda menos llamativo para fomentar la navegación por categorías, en lugar de la búsqueda. 

Por ejemplo: los sectores de moda y decoración del hogar, en particular, muestran un claro sesgo hacia la navegación por categorías, tanto sobre la preferencia inicial de los usuarios, como de su posterior tasa de éxito (tasa de conversión post-búsqueda)

En términos de diseño e implementación existen múltiples formas de atenuar o enfatizar visualmente el campo de búsqueda sobre el diseño general. Por eso, el formato exacto a emplear variará de un sitio a otro, dependiendo en gran medida del contexto en el que aparezca el campo de búsqueda (es decir, el diseño general del sitio).

👉 Elementos de diseño de la caja de búsqueda

Existen múltiples elementos de diseño del campo de búsqueda que pueden utilizarse para enfatizar o atenuar visualmente, siempre dependiendo del grado en que se quiera animar a los usuarios a adoptar una estrategia de búsqueda. Los tres elementos principales de diseño de la caja de búsqueda que suelen tener mayor impacto son:

✅ Posición

En la imagen que vemos a continuación tenemos a Amazon. Como puedes apreciar, a Amazon le interesa que busques en su marketplace, ya que vende más y te guía mejor cuando utilizas su buscador, que si navegas por sus categorías. 

Debido a los millones de productos que dispone y teniendo en cuenta que normalmente los usuarios ya saben qué tipo de producto quieren una vez que entran a su web, ponen el buscador en un lugar preferente, centrado y ocupando prácticamente todo el ancho de pantalla. 

Además, si quieres dar protagonismo al buscador e incitar a que los usuarios lo usen, es muy importante que tu buscador funcione correctamente. Es decir:

• Que muestre resultados al momento: no puedes tener un buscador que tarda en cargar los productos una vez hecha la búsqueda. 
• Que coloque los resultados en el orden que quieras: ten en cuenta que cuanto más arriba y más a la izquierda, más relevantes serán los resultados para tus visitantes. 
• Que tenga una calidad de imágenes decentes: ¡que no estén pixeladas, por favor! 
• Que muestre especificaciones de tus productos: tamaños, tallas, descuentos o promociones, colores disponibles… Todo esto dentro de tu propia búsqueda.
• Que facilite la opción de añadir al carrito dentro del propio buscador: para que puedan comprar varios productos sin necesidad de entrar y volver a salir del buscador.

✅ Los estilos de tu buscador

Es de vital importancia que una vez se haga clic en la caja de búsqueda, se respete la imagen de tu web. Para ello, hay muchos elementos a tener en cuenta: 

• Colores: Debes utilizar los colores corporativos igual que en tu web. Prueba a añadir el logo también en alguna parte del buscador. 
• Fuentes: El tipo de letra es otro elemento importante, utiliza los mismos tipos de letra que utilizas en tu web, para números, títulos, botones…
• Botones: Procura tener los mismos estilos que los botones de tu web en los botones de comprar o “add to cart”. 
• Otros elementos: Como los descuentos, bordes, utilizar las mismas categorías que tienes en tu eCommerce…

✅ Tamaño

Al hacer que el campo de búsqueda sea relativamente pequeño, su prominencia visual se reduce en gran medida. Algo que hacen muchas tiendas online que quieren aumentar el uso del buscador es aumentar el contraste entre la cabecera y el buscador. Por ejemplo Amazon, como veíamos antes, tiene su cabecera en negro, pero el buscador centrado y en blanco.

Cuando combinas tamaño, posición y contraste, haces que la caja de búsqueda sea altamente dominante, incitando a que la búsqueda sea la forma preferida para encontrar productos en tu eCommerce. Eso sí, esto requiere un motor de búsqueda como Doofinder, que sea inteligente para no decepcionar a tus usuarios. Si no es así, esto se puede convertir en un arma de doble filo.

👉 Diseño de la caja de búsqueda en la página de inicio

En la página de inicio en particular, la relevancia del diseño del campo de búsqueda es muy importante, ya que la mayoría de los usuarios tienden a decidir su estrategia de búsqueda de productos nada más llegar a un sitio web.

Según datos de Baymard Institute, el 60% de los usuarios utilizan inmediatamente la búsqueda como primera estrategia en la página de inicio de un sitio para móviles. Por lo tanto, cuanto más llamativo sea el diseño del campo de búsqueda en la página de inicio, más usuarios lo tomarán como un estímulo para adoptar la búsqueda sobre la navegación por categorías.

Además, puede ser beneficioso dar al buscador un toque visual adicional en la página de inicio, siempre y cuando quieras promover la navegación en el buscador por encima de la navegación por categorías.

Un diseño eCommerce diferenciado del buscador para la página de inicio puede hacerse de muchas maneras: desde unos bordes del campo de búsqueda más atrevidos, un color de fondo más contrastado, un mayor tamaño de la caja y de la fuente, una mayor viveza del botón «buscar»… E incluso dar al campo el enfoque del teclado por defecto. Cualquier modificación del diseño que haga que el campo de búsqueda destaque por sí mismo, sin cambiar fundamentalmente su posición o estilo visual, ayudará a destacarlo.

De esta manera, el campo de búsqueda sigue siendo totalmente reconocible y no quita el foco en las páginas siguientes, pero conseguirás un contraste visual añadido en la página de inicio.

Este contraste visual adicional no debería llegar a promover la búsqueda como «la única opción» en el sitio, sino que debería ayudar a los usuarios a ver el campo de búsqueda más fácilmente cuando llegan al sitio.

Ya sabes… La página de inicio suele presentar muchos gráficos y elementos visuales diferentes que luchan por la atención del usuario, lo que significa que lo que en las páginas posteriores (como las páginas de categorías, listas de productos o páginas de productos) podría ser un campo de búsqueda dominante, en la página de inicio el diseño puede resultar insuficiente.