Dada la importancia de la búsqueda en el mundo digital actual, es fundamental diseñar experiencias que no solo sean utilizables, sino también realmente útiles. Y eso implica:
- Cumplir con diligencia las expectativas de los usuarios sobre la experiencia de búsqueda en sí
- Diseñar con cuidado el resto del sitio —y sus casos excepcionales— para mejorar la experiencia de búsqueda
Y como acabamos de lanzar la búsqueda en el sitio, pensamos que estos consejos te vendrían de perlas.
Empecemos por profundizar en los detalles para crear una gran experiencia de búsqueda, comenzando por el humilde formulario de búsqueda.
Diseñar tu formulario de búsqueda
Diseñar una experiencia de búsqueda de primer nivel empieza por el propio formulario.
Coloca la búsqueda donde la gente espera encontrarla
El primer paso para crear una gran experiencia de búsqueda es asegurarse de que los usuarios puedan encontrarla. Según los estudios de Nielsen-Norman, la gente suele buscar la barra de búsqueda en la parte superior derecha de la página web, justo donde suelen ir los elementos principales de navegación.
Para la gran mayoría de los sitios, seguir esta regla general debería bastar. Si estás creando un sitio orientado a la resolución de problemas —como un centro de ayuda, una wiki, un glosario o una base de conocimientos—, una ubicación aún más destacada te dará mejores resultados.
Si no sabes muy bien dónde colocar tu barra de búsqueda, ten en cuenta esta regla general:
La búsqueda es para personas que saben lo que están buscando.
Si tu sitio está más orientado al descubrimiento y la exploración, o tiene un objetivo más concreto como conseguir registros, la parte superior derecha funcionará perfectamente. De lo contrario, ponla en un lugar destacado y central para facilitar la resolución de problemas basada en tareas específicas.
Combina un icono de lupa con un texto de apoyo
Como comentamos en “Los pros y los contras de los iconos en el diseño web”, por lo general es mejor no depender solo de los iconos para comunicar significados a los usuarios. Los estudios sobre el uso de la búsqueda respaldan esto: aunque el icono de la lupa se ha convertido en un símbolo casi universal de la función de búsqueda, los diseños que solo usan iconos suelen ralentizar la finalización de las tareas.
La ventaja de añadir un poco de texto a tus elementos de búsqueda es que puedes guiar a los visitantes sobre qué pueden buscar en tu sitio.
Dada la ubicación destacada que se sugiere para la búsqueda, este texto de marcador de posición funciona casi como un eslogan. No solo te dice qué puedes encontrar en IMDb, sino que, en realidad, resume de qué trata todo el sitio.
Elige un tamaño razonable para el cuadro de entrada
Por lo general, querrás que tu cuadro de búsqueda sea lo suficientemente grande como para contener la consulta promedio de tu contenido. Después de todo, es difícil escribir lo que no puedes ver.
Si tienes poco espacio o quieres minimizar el tamaño del estado predeterminado del cuadro, puedes configurar una interacción para que se expanda cuando los visitantes hagan clic en él.
Activa la búsqueda al hacer clic y al presionar Intro/Enter
Aunque la mayoría de nosotros, acostumbrados a Google, simplemente presionamos Intro/Enter al terminar de escribir, nunca está de más ofrecer una opción muy visible, como un botón que envíe la búsqueda al hacer clic. Como suele ocurrir en el diseño digital, ¡lo mejor es facilitar las cosas tanto a los usuarios novatos como a los expertos con cada función!
Pon la búsqueda en un lugar destacado en dispositivos móviles
La búsqueda es realmente más potente cuando la idea de navegar por la arquitectura de información de un sitio parece, en el mejor de los casos, agotadora. ¡Lo cual suele ocurrir a menudo en los móviles!
Así que, en lugar de pedir a los visitantes que recorran tu menú oculto y se arriesguen a pulsar los enlaces equivocados una y otra vez, ayúdalos a llegar a donde quieren ir más rápido destacando tu formulario de búsqueda en las vistas móviles.
Nunca dependas solo de la búsqueda
A pesar de su potencia y facilidad, tener una función de búsqueda en tu sitio no te exime de contar con una estructura de sitio racional y visible de inmediato.
Como se mencionó anteriormente, la búsqueda funciona mejor para quienes saben lo que están buscando. Una navegación clara y bien expuesta ayuda a quienes solo están explorando y, si está bien diseñada, a menudo puede ayudar a las personas a llegar a donde quieren ir incluso más rápido que la búsqueda.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Diseñando tu página de resultados del motor de búsqueda (SERP)
Por supuesto, una experiencia de búsqueda hermosa no significa mucho si los resultados no son útiles y claros para el usuario. Afortunadamente, estos consejos te ayudarán a completar la experiencia de búsqueda de tu sitio.
Incluye una barra de búsqueda en tu página de resultados
La búsqueda a menudo no termina después del primer intento. Ya sea porque los resultados presentados no satisfacen las necesidades del usuario o porque simplemente decide buscar otra cosa, tiene sentido no obligarlo a retroceder.
Al colocar una barra de búsqueda en tu página de resultados —lo cual Webflow hace de forma predeterminada—, haces que sea fácil (y menos frustrante) para los usuarios intentarlo de nuevo. Y si buscan información sobre varios temas, pueden abrir fácilmente un resultado tras otro en una pestaña nueva, sin salir nunca de la página de resultados.
Crea un buen estado vacío (es decir, una página de "sin resultados")
Cualquier diseñador que se precie conoce el valor de un buen estado vacío. La idea fundamental es que, si no puedes ofrecer a alguien exactamente lo que busca, puedes proponerle acciones alternativas que le permitan seguir avanzando en lugar de dejarlo sin saber qué hacer.
En muchas interfaces, el estado vacío es el lugar ideal para sugerir una acción creativa. ¿Aún no tienes documentos de Google? ¡¿Por qué no creas uno?! ¿No hay proyectos en tu sitio de Webflow? Mmm... ese botón azul debe ser importante.
Pero en las búsquedas, no hay ninguna acción creativa que sugerir. En su lugar:
- Indica claramente que no hay resultados para los términos buscados. Esto es vital: no querrás que nadie pase por alto el resultado de su búsqueda entre tus sugerencias para los siguientes pasos.
- No culpes al usuario. No es su culpa que tu sitio no tenga contenido sobre ese tema, así que evita comentarios sarcásticos como "No escribimos sobre diseño web, bobo".
- Dale al usuario un siguiente paso. Lo que hagas aquí dependerá de tu sitio y su propósito, pero podrías intentar: sugerir términos de búsqueda alternativos, destacar contenido popular o añadir un enlace de vuelta a la página de inicio. Esto es exactamente lo que hace Google con su sugerencia de "mejor coincidencia".
Excluye contenido con criterio
Cuando un algoritmo de búsqueda "rastrea" un sitio para crear un índice de su contenido, no es precisamente lo que llamarías inteligente por defecto. En otras palabras: rastrea e indexa todo. Lo que significa un montón de resultados duplicados, además de una gran cantidad de resultados que podrían no ser particularmente útiles para quien busca.
Afortunadamente, la función de búsqueda de sitios de Webflow ayuda a crear resultados más inteligentes al:
- Excluir automáticamente símbolos, listas de colección, páginas de utilidad y páginas protegidas por contraseña
- Permitirte marcar una casilla para excluir cualquier otra cosa que desees
Excluir símbolos y listas de colección ayuda porque estos elementos suelen contener contenido que se repite en varios lugares de tu sitio, y solo algunos de ellos podrían ser realmente útiles. Por ejemplo, si convertiste tu menú de navegación principal en un símbolo y este incluía la palabra blog, entonces cualquier consulta con la palabra blog devolvería... ¡cada una de las páginas de tu sitio web!
Esas exclusiones predeterminadas te llevarán lejos hacia un conjunto de resultados bastante limpio, pero querrás considerar excluir:
- Cualquier colección puramente "funcional". Las colecciones que creaste para referencia o filtrado, pero que tienen plantillas de colección poco útiles (es decir, vacías o sin contenido), probablemente deberían omitirse.
Ejemplo: En mi tiempo libre, estoy creando un sitio de curación para destacar sitios web increíbles basados en contenido. El sitio tiene una colección de referencia para "colores utilizados". He diseñado páginas para estos colores, pero por el momento, solo son una muestra a pantalla completa del color con su nombre y código hexadecimal. No es muy útil, así que podría querer excluir eso de la búsqueda por ahora. - Elementos de metadatos mostrados. En el mismo proyecto, la página de detalles de cada sitio web curado tiene una pequeña tabla que muestra fuentes, colores utilizados y una calificación (expresada como un emoji). Al previsualizar los resultados de búsqueda, noto que estos elementos se muestran de forma extraña y, lo que es peor, no tienen mucho sentido sin el contexto que proporciona el diseño. Así que probablemente omitiré el elemento que contiene esos fragmentos de metadatos para limpiar mis resultados.
- Cualquier otra cosa que se vea rara en los resultados. Es difícil abstraer todos los problemas potenciales con las exclusiones de contenido, así que asegúrate de probar muchas consultas diferentes en tu sitio y omite todo lo que no se vea bien al pasar de la página a la página de resultados de búsqueda (SERP).
Mantén los slugs
Por defecto, la búsqueda de sitios de Webflow muestra el slug de la página (la parte de la URL después del dominio) para cada resultado en una página de resultados de búsqueda.
Mostrar el slug en la búsqueda ayuda a los usuarios a entender mejor la estructura general de tu sitio y, lo que es más importante, les ayuda a decidir qué resultados son los más adecuados para sus necesidades.
Por ejemplo, si una persona quiere encontrar todas tus publicaciones de blog sobre estrategia de contenido, pero no le interesan los casos de estudio que la mencionan, mantener el slug le ayudará a centrarse solo en las publicaciones del blog.
Si tu buscador no hace esto por defecto, considera activarlo. O, ya sabes, usa Webflow.
Resalta los términos de búsqueda en tus resultados
Otra función útil de las búsquedas es resaltar los términos buscados en los resultados. En Webflow y Google, esto significa que cualquier palabra que hayas buscado aparecerá en negrita en tu lista de resultados. Al igual que los slugs, el resaltado ayuda a los usuarios a centrarse rápidamente en los resultados que mejor se ajustan a lo que necesitan.
Los términos resaltados atraen la mirada del usuario, confirmando que el contenido coincide con su consulta y animándole a leer el texto que rodea al término buscado para darle contexto.
Por ejemplo, si alguien busca "diseño" en tu sitio, que trata sobre todas sus formas, los términos resaltados pueden ayudar a diferenciar entre publicaciones sobre diseño de moda y diseño tipográfico.
Muestra los resultados con lógica
Basándote en tu propia experiencia, puede que te sientas tentado a mostrar los resultados de búsqueda en una lista sencilla, ¡como hace Google!
Pero espera un segundo. Ve a Google Imágenes y prueba de nuevo. ¿Lo ves? Ahora tienes una cuadrícula.
Hablamos de esto con más detalle en “Cómo —y por qué— crear sitios de curación de contenido con Webflow CMS”, pero en resumen:
- Si una imagen puede transmitir la mayor parte de la información necesaria, usa una cuadrícula centrada en imágenes.
- Si un poco de texto puede transmitir la mayor parte de la información necesaria, usa una lista centrada en texto (y añade imágenes si es útil).
En caso de duda: copia a Google
Las expectativas de cualquier usuario de internet sobre las búsquedas las marca Google. Así que no tengas miedo de hacer lo mismo. Puede que no sea "innovador" ni nada de eso, pero seguro que funciona.
