El diseño de cuadro de búsqueda perfecto para su comercio electrónico

¿Alguna vez ha navegado por una tienda en línea o Marketplace con la intención de buscar un producto y no pudo encontrar el cuadro de búsqueda? Estamos seguros de que tienes.

No hace falta decir que cuanto más protagonismo le dé a la búsqueda en el sitio en su página de inicio, más probable es que se utilice su búsqueda en el sitio. Esto significa que en lugar de pasar por diferentes categorías en su sitio web de comercio electrónico, sus visitantes utilizarán la Búsqueda del sitio directamente para encontrar el producto que desean más rápido, sin tener que perder el tiempo buscando cosas que no necesitan.

Así, en sectores en los que la búsqueda es la forma más habitual de encontrar productos, puede ser una buena idea “promocionar” el campo de búsqueda con un diseño llamativo y situarlo en un lugar estratégico, especialmente en la página de inicio.

Navegación por categorías

Este suele ser el caso de los sitios web de comparación de precios más específicos, siempre que el usuario conozca la marca y el modelo exactos del producto que desea comprar (en otras palabras, sabe exactamente lo que quiere, incluso antes de visitar su sitio web). sitio web de comercio electrónico).

En cambio, en sectores en los que los usuarios prefieren navegar por categorías (porque no saben exactamente el producto que quieren, su nombre o cómo se escribe), o con una web jerárquica plana, un diseño de campo de búsqueda menos llamativo puede utilizarse para fomentar la navegación por categoría en lugar de por búsqueda.

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

Cuando se trata de diseño e implementación, hay una amplia gama de formas de hacer que el campo de búsqueda se destaque dentro del diseño general. Por lo tanto, el formato exacto a utilizar variará de un sitio web a otro, dependiendo en gran medida del contexto en el que aparezca el campo de búsqueda (en otras palabras, el diseño general del sitio web).

Elementos de diseño del campo de búsqueda.

Hay varios elementos de diseño del campo de búsqueda que se pueden usar para que se destaque, según el grado en que desee animar a los usuarios a usar la función de búsqueda. Los tres elementos principales del diseño del cuadro de búsqueda que tienden a tener el mayor impacto son:

Posición

Echa un vistazo a Amazon en la imagen de abajo. Como puede ver, a Amazon le interesa que busque en su mercado, ya que vende más y puede guiarlo mejor cuando usa su Site Search en lugar de navegar por categorías.

Debido a los millones de productos que tiene y, teniendo en cuenta que los usuarios normalmente ya saben qué tipo de producto quieren una vez que visitan su sitio web, colocan el Site Search en una ubicación preferente, justo en el centro y ocupando prácticamente la totalidad ancho de la pantalla.

Además, si quieres dar protagonismo al Site Search y animar a los usuarios a utilizarlo, debe funcionar correctamente. En otras palabras:

• Muestre los resultados al instante: no puede tener una búsqueda en el sitio que tarde demasiado en cargar los productos una vez que se han buscado.
• Enumere los resultados en el orden que desee : tenga en cuenta que, cuanto más arriba ya la izquierda, más relevantes serán los resultados para sus visitantes.
• Calidad de imagen decente: ¡sin imágenes pixeladas, por favor!
• Muestra las especificaciones de tu producto : tallas, descuentos o promociones, colores disponibles… Todo dentro de tu propia búsqueda.
• Ofrezca a los usuarios la opción de agregar al carrito dentro de Site Search: para que puedan comprar varios productos sin tener que ir y venir entre Site Search y el carrito.

Tus estilos de búsqueda en el sitio

Es de suma importancia que, una vez que se haga clic en el cuadro de búsqueda, se respete la imagen de su sitio web. Para ello hay que tener en cuenta bastantes elementos.

• Colores : Debe utilizar los mismos colores corporativos que en su sitio web. Intente agregar el logotipo en algún lugar de la Búsqueda del sitio también.
• Fuentes : La fuente es otro elemento importante; usa las mismas fuentes que usas en tu sitio web, para números, títulos, botones…
• Botones : Intenta tener los mismos estilos que los botones de tu web en los botones de compra o “ añadir al carrito ”.
• Otros elementos: Como descuentos, bordes , usar las mismas categorías que tienes en tu web de eCommerce…

Tamaño

Al hacer que el campo de búsqueda sea relativamente pequeño, su prominencia visual se reduce significativamente. Una cosa que hacen muchas tiendas en línea que buscan aumentar el uso de Site Search es aumentar el contraste entre el encabezado y Site Search. Por ejemplo, Amazon , como vimos arriba, tiene su encabezado en negro, pero el Site Search está centrado y en blanco.

Cuando combina el tamaño, la posición y el contraste, hace que el cuadro de búsqueda realmente se destaque, fomentando la búsqueda como la forma preferida de buscar productos en su sitio web de comercio electrónico. Sin embargo, esto requiere una búsqueda inteligente en el sitio como Doofinder para reducir su tasa de rebote. Si no, esto puede convertirse en un arma de doble filo.

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

En la página de inicio en particular, el diseño del cuadro de búsqueda es aún más importante, ya que la mayoría de los usuarios tienden a idear su estrategia de búsqueda de productos tan pronto como visitan el sitio web.

Según los datos del Instituto Baymard , el 60% de los usuarios utilizan inmediatamente la búsqueda como primera estrategia en la página de inicio de un sitio web móvil. 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 incentivo para buscar en lugar de navegar por categoría.

Además, es una buena idea darle a Site Search un toque visual adicional en la página de inicio, siempre que desee fomentar la navegación en Site Search en lugar de navegar por categoría.

Un diseño de búsqueda en el sitio diferenciado para la página de inicio se puede hacer de muchas maneras: desde bordes de campo de búsqueda más llamativos, un color de fondo más contrastante, un cuadro y un tamaño de fuente más grandes, un botón de "búsqueda" más animado... Y tal vez incluso hacer que el teclado de campo sea enfocable. por defecto. Cualquier modificación de diseño que haga que el campo de búsqueda se destaque por sí solo, sin cambiar fundamentalmente su posición o estilo visual, ayudará a que se destaque.

De esta manera, el campo de búsqueda permanece completamente reconocible sin quitar el foco de atención de las otras páginas, pero le dará un contraste visual adicional en la página de inicio.

Este contraste visual adicional no debería ir tan lejos como para promover la búsqueda como “ la única opción ” en el sitio web, sino que debería ayudar a los usuarios a ver el campo de búsqueda más fácilmente cuando visiten el sitio web.

Como sabe... La página de inicio a menudo presenta muchos gráficos y elementos visuales diferentes que compiten por la atención del usuario, lo que significa que, lo que en las páginas posteriores (como páginas de categorías, listas de productos o páginas de productos) podría ser un campo de búsqueda dominante, puede no ser suficiente para la página de inicio.