Fullscreen search: la capa de búsqueda a pantalla completa para tu eCommerce

El diseño fullscreen search es el layout del buscador interno de una tienda online que muestra los resultados de búsqueda a pantalla completa, sin distracciones alrededor para una experiencia de búsqueda más intuitiva e inteligente, priorizando la imagen del producto sobre cualquier otro elemento de la página. En este artículo explicamos qué es y cuándo conviene usarlo, por qué mejora la experiencia en dispositivos móviles, qué opciones de personalización ofrece Doofinder (secuencia de búsqueda, voz, imagen) y cómo se compara frente a los diseños floating, embedded y mobile.

Dependiendo del sector, el número de productos que ofreces en tu eCommerce o el diseño de tu página web te puede interesar implementar un diseño fullscreen en tu capa de búsqueda.

También puedes configurar la apariencia de la capa de búsqueda usando HTML y CSS, descubre aquí un ejemplo 😉

En la siguiente demo se puede ver cómo funciona un diseño fullscreen:

👉 ¿Qué es el diseño «fullscreen search”?

Al igual que existe la opción de maximizar las pestañas del navegador a pantalla completa, encontramos también la posibilidad de adaptar las funcionalidades del buscador de tu web a toda la pantalla cuando tus clientes realizan alguna búsqueda de producto.

La capa fullscreen, que es en la que nos centraremos en este post, proporciona muchas ventajas para tu tienda online. En este post descubrirás cuáles son y cómo aprovecharlas al máximo para incrementar tu tasa de conversión hasta niveles insospechados.

¡Vamos a por ello!

✅ La búsqueda en tu eCommerce como principal funcionalidad

Visualmente, un diseño de búsqueda fullscreen te permite aprovechar la búsqueda y crear una experiencia de compra mucho más intensa. 

Esto significa que el cliente “se sumerge en la búsqueda”, es decir, no existen distracciones a la hora de buscar un producto. De esta forma podemos asegurar que la atención del cliente se centra en el buscador y en los resultados del producto, lo que permite unos ratios de conversión post-búsqueda mayores.

Este diseño es especialmente popular en la industria de la moda para presentar los productos disponibles. Grandes marcas como Zara, Nike o Adidas son algunos de los que lo utilizan para poder centrar toda la atención del cliente en la búsqueda.

✅ ¿Por qué utilizar este estilo de capa de búsqueda?

Proporciona mayor importancia a las imágenes de tus productos. Esta estética de búsqueda transmite mayor valor a cada producto de tu eCommerce e incita a los clientes a navegar y pasar más tiempo buscando.

Es importante poder ofrecer imágenes de calidad. No debes mostrar imágenes de baja calidad que aparezcan pixeladas cuando cada imagen puede llegar a ocupar un tercio de la pantalla.

No es un detalle menor: según las pruebas de usabilidad de Baymard Institute, se necesitan al menos 3 imágenes por producto para transmitir suficiente información visual en los resultados de búsqueda. Un mínimo que muchas tiendas con catálogos visuales no alcanzan. El diseño de la capa de búsqueda, no solo su motor, es una de las variables que más pesa en si esa información llega o no al usuario.

A continuación, te mostramos un ejemplo de la capa fullscreen de Doofinder en Aristocrazy: al pulsar sobre el buscador, la capa ocupa toda la pantalla y muestra de entrada las búsquedas populares y una selección de productos recomendados, sin que el usuario tenga que escribir nada todavía.

Si quieres ver qué pasa un paso más allá, es decir, cuando el usuario ya ha escrito algo y la capa fullscreen despliega los filtros dinámicos (precio, tipo de metal, color, tipo de piedra) adaptados a los resultados, te lo contamos en el artículo sobre búsqueda facetada.

✅ Añade contenido adicional en la capa de búsqueda

Además de los propios resultados de búsqueda, el diseño fullscreen te permite mostrar muchas más características o información del producto que cualquier otra capa de búsqueda. 

Esto se debe a que tenemos mucho más espacio para poder especificar lo que queramos de cada producto, como los colores disponibles del producto, disponibilidad, precios sin IVA o cualquier característica que ayude a la venta.

De esta manera, los clientes que utilicen tu buscador tendrán una mayor información sobre los productos que les interesan en el momento más crucial de la decisión de compra y, en muchos casos, no les hará falta ir a otras páginas ya que tendrán mucha información del producto dentro del buscador.

En el caso de Aristocrazy, esto se ve al buscar por texto: al escribir “novedades”, la capa no solo devuelve los resultados, también despliega encima los filtros relevantes para esa búsqueda, sin que el usuario tenga que salir de la capa de búsqueda para acotar por sí mismo.

Este espacio extra también sirve para diferenciar visualmente resultados de producto de contenido informativo, algo especialmente útil en non-product search o búsquedas sin producto.

✅ Mejora de la usabilidad y la búsqueda móvil

Principalmente, en los dispositivos móviles, la búsqueda interna debe ser atractiva y fácil de usar.

En lo que se refiere al uso desde teléfonos móviles es importante que demos una respuesta rápida (tiempo de carga de los productos en el buscador y de las páginas de la web) porque estamos acostumbrados a ello, y para conseguir mayores ratios de conversión en dispositivos móviles, la velocidad de tu web debe ser superior a la media.

Realizar filtros, búsquedas (escritas o por voz)  o hacer scroll dentro de tu buscador interno debe ser sencillo, rápido y cómodo para el usuario.

Esto lo logramos con la capa para dispositivos móviles de Doofinder, en menos de un segundo mostramos los resultados de búsqueda con una capa de búsqueda fullscreen acompañada de los filtros que tengas implementados en tu motor de búsqueda y la posibilidad de realizar búsquedas por voz.

Además, una vez tienes configurado el buscador en tu web para escritorio, simplemente necesitas activar la capa para dispositivos móviles desde tu Admin de Doofinder y se mostrará automáticamente la capa para móviles con las características que tengas implementadas sin necesidad de programar nada más.

Ese control no se limita a activar o desactivar la capa: desde el Admin puedes definir la “secuencia de búsqueda” completa, es decir, qué ve el usuario en cada momento de la búsqueda. Se aplica para mostrar al usuario qué aparece al hacer clic (búsquedas populares y productos recomendados, antes de escribir nada), qué se muestra mientras escribe (aquí es donde entra en juego el autocompletado en eCommerce) y qué resultado final aparece al pulsar Enter.

Esa secuencia se puede configurar de forma independiente para Desktop y Mobile, junto con complementos como la búsqueda por voz, la búsqueda visual, las sugerencias en pantalla o “Más búsquedas como esta”, cada uno activable en el dispositivo donde tiene sentido.

La capa fullscreen para dispositivos móviles también permite hacer búsquedas por voz y por imagen. Tanto utilizando el icono del micro como el de la cámara, podrás realizar búsquedas por voz o subir imágenes desde tu dispositivo para encontrar resultados similares a los de la imagen mostrada.

Si quieres profundizar en la búsqueda por imagen como capa de UX adicional, aquí tienes una guía completa sobre visual search en eCommerce.

Esta combinación de voz, imagen y filtros es justo lo que diferencia una búsqueda móvil pensada de una genérica. Si quieres más contexto de por qué el móvil cambia las reglas de cualquier estrategia de marketing, no solo la de búsqueda, tienes un desarrollo completo en nuestra guía de Mobile Marketing.

✅ Opción: “Añadir al carrito”

Gracias a este tipo de capa de búsqueda (incluido en búsquedas móviles) este diseño del buscador te permite añadir un “call to action”. Mediante un botón visible como puede ser el de “añadir al carrito” que permite a los usuarios añadir los productos que quieran a su cesta de la compra sin necesidad de salir del buscador.

Esto ayudará a incrementar tu ratio de conversión ya que en una misma búsqueda podrán realizar compras de varios productos y también ayuda en gran medida a la experiencia de navegación del usuario en tu web.

👉 Fullscreen vs. floating vs. embedded vs. mobile layouts: ¿qué diseño elegir para el buscador interno de mi tienda online?

Fullscreen no es el único diseño de capa de búsqueda disponible en Doofinder, ya que también está floating, embedded y mobile layout.

Antes de decidir, conviene saber qué ofrece cada uno:

Puedes ver una demo en vivo de cada uno de estos diseños en la página de tipos de diseño de Doofinder, y activarlos o combinarlos sin necesidad de desarrollo.

Si, además, quieres verlo en acción en tu propia tienda online, puedes probar Doofinder gratis, sin necesidad de tarjeta de crédito.