Blog

Cómo diseñar la búsqueda de su aplicación móvil

Mientras trabajas en la creación de mejores experiencias para los usuarios de tu aplicación móvil, dedica algún tiempo a pensar en el diseño de la barra de búsqueda de tu aplicación. Aspectos como la ubicación, el texto de sugerencia y la forma en que se muestran los resultados de la búsqueda contribuyen a la forma en que los usuarios se involucran con la búsqueda, así como con su aplicación en general.

Por qué Google es el gigante de las búsquedas que es hoy en día? Parte de la razón es por cómo ha transformado nuestra capacidad de buscar respuestas.

Piensa en algo tan sencillo como buscar la definición de una palabra. Hace 20 años, tenías que sacar el diccionario de la estantería para encontrar la respuesta a tu pregunta. Ahora, abres el teléfono o enciendes el ordenador, escribes o dices la palabra y obtienes la respuesta en un abrir y cerrar de ojos y con poco esfuerzo.

Esta forma de atajo digital no sólo existe en los motores de búsqueda como Google. Ahora las aplicaciones móviles también tienen funciones de búsqueda autónomas.

¿Es necesaria una barra de búsqueda en la interfaz de una aplicación móvil o es una exageración? Veamos por qué el elemento de la barra de búsqueda es importante para la experiencia de la aplicación móvil. A continuación, veremos varias formas de diseñar la búsqueda basándonos en el contexto de la consulta y la función de la aplicación.

Uso de la web con un lector de pantalla

¿Sabías que VoiceOver representa el 11,7% de los usuarios de lectores de pantalla en ordenadores de sobremesa y aumenta hasta el 69% de los usuarios de lectores de pantalla en móviles? Es importante conocer el tipo de dificultades de primera mano a las que se enfrentan los usuarios con discapacidad visual y lo que los desarrolladores web pueden hacer para ayudar. Leer artículo →

La búsqueda de aplicaciones móviles no es negociable

La barra de búsqueda ha sido una parte estándar de los sitios web durante años, pero las estadísticas muestran que no siempre es vista como una necesidad por los usuarios. Estos datos de Neil Patel y Kissmetrics se centra en la percepción y el uso de la barra de búsqueda en el comercio electrónico sitios web:

Infografía de la búsqueda de sitios Kissmetrics
Datos de una infografía de Kissmetrics sobre la búsqueda de sitios. (Fuente: Kissmetrics) (Vista previa grande)

Como puede ver, el 60% de los usuarios encuestados prefiere utilizar la navegación en lugar de la búsqueda, mientras que el 47% opta por la “búsqueda” filtrada en lugar de la funcionalidad de búsqueda normal.

En un sitio web de escritorio, esto tiene sentido. Cuando un menú está bien diseñado y etiquetado -por muy extenso que sea- es bastante fácil de usar. Si a eso se le añaden opciones de filtrado avanzadas, entiendo que los visitantes del sitio web prefieran eso a la búsqueda.

Pero los usuarios de aplicaciones móviles son una raza diferente. Acuden a las aplicaciones móviles por razones diferentes a las de los sitios web. En resumen, quieren una experiencia más rápida, concentrada y cómoda. Sin embargo, como las pantallas de los teléfonos inteligentes tienen un espacio limitado, no es realmente factible incluir un amplio menú o un conjunto de filtros para ayudar a la navegación de una aplicación.

Esto es por qué las aplicaciones móviles necesitan una barra de búsqueda.

Vas a encontrar mucho uso para la búsqueda en las aplicaciones móviles:

  • Aplicaciones basadas en el contenido, como periódicos, plataformas de publicación y blogs;
  • Tiendas de comercio electrónico con grandes inventarios y categorización de los mismos;
  • Aplicaciones de productividad que contengan documentos, calendarios y otros registros con capacidad de búsqueda;
  • Sitios de listados que conectan a los usuarios con el hotel, el restaurante, el itinerario, el artículo en venta, el apartamento en alquiler, etc. adecuados;
  • Aplicaciones de citas y redes que conectan a los usuarios con una gran cantidad de “parejas”.

Hay muchas más razones por las que necesitarías utilizar una barra de búsqueda en tu aplicación móvil, pero voy a dejar que los ejemplos siguientes hablen por sí mismos.

Formas de diseñar la búsqueda para su aplicación móvil

Voy a dividir la siguiente sección en dos categorías:

  1. Cómo diseñar el elemento de búsqueda física en su aplicación móvil,
  2. Cómo diseñar la barra de búsqueda y sus resultados en el contexto de la aplicación.

1. Diseño del elemento de búsqueda física

Hay una serie de puntos a considerar cuando se trata de la presencia física del elemento de búsqueda de su aplicación:

¿Superior o inferior?

Shashank Sahay explica por qué hay dos lugares donde aparece el elemento de búsqueda en una aplicación móvil:

  • 1. Barra de ancho completo en la parte superior de la aplicación.
    Esto es para las aplicaciones que son impulsadas por la búsqueda. La mayoría de las veces, los usuarios abren la aplicación con el propósito expreso de realizar una búsqueda.
Búsqueda en la aplicación de Facebook
Facebook prioriza la búsqueda de aplicaciones colocándola en la parte superior. (Fuente: Facebook) (Vista previa grande)

Facebook es un buen ejemplo. Aunque lo más probable es que los usuarios de Facebook utilicen el feed de noticias de la aplicación, tengo la ligera sospecha de que los datos de Facebook indican que la función de búsqueda es la más utilizada, al menos en términos de primeros pasos. De ahí que esté situada en la parte superior de la aplicación.

  • 2. Una pestaña en la barra de navegación alineada en la parte inferior.
    Esto es para las aplicaciones que utilizan la búsqueda como una mejora de la experiencia principal de uso de las características principales de la aplicación.

Comparemos Facebook con una de sus propiedades hermanas: Instagram. A diferencia de Facebook, Instagram es una aplicación de redes sociales muy sencilla. Los usuarios siguen a otras cuentas y obtienen un vistazo de los contenidos que comparten a través de las actualizaciones de las historias a pantalla completa, así como desde su feed de noticias de desplazamiento infinito.

Búsqueda de la aplicación Instagram
Instagram coloca su función de búsqueda en la barra de navegación inferior. (Fuente: Instagram) (Vista previa grande)

Dicho esto, la función de búsqueda existe en la barra de navegación para que los usuarios puedan buscar otras cuentas para examinarlas o seguirlas.

En cuanto a este desglose básico, Sahay tiene razón en cuanto a la correlación entre la ubicación de la búsqueda y la intención. Pero el diseño del elemento de búsqueda va más allá de su ubicación en la aplicación.

¿Superficial o profundo?

Habrá ocasiones en las que una aplicación móvil se beneficie de una función de búsqueda profunda dentro de la experiencia de la aplicación.

Verás este tipo de cosas con bastante frecuencia en aplicaciones de comercio electrónico como Bed Bath & Beyond:

Bed Bath & Beyond búsqueda de aplicaciones
Bed Bath & Beyond utiliza la búsqueda profunda para ayudar a los usuarios a encontrar tiendas cercanas (Fuente: Bed Bath & Beyond) (Vista previa grande)

En este ejemplo, esta función de búsqueda existe fuera de la búsqueda estándar de productos en la página de destino principal. Los resultados de este tipo de búsqueda también se muestran de una manera única que refleja el propósito de la búsqueda:

Resultados de la búsqueda en el mapa de Bed Bath & Beyond
Bed Bath & Beyond muestra los resultados de la búsqueda en un mapa. (Fuente: Bed Bath & Beyond) (Vista previa grande)

Hay otras formas de utilizar las funciones de búsqueda “profunda” en las aplicaciones de comercio electrónico.

Piensa en las tiendas que tienen un montón de comentarios adjuntos a cada producto. Si tus usuarios quieren saber lo que otros consumidores han dicho sobre un producto (por ejemplo, si una tienda de campaña es impermeable), la función de búsqueda les ayudaría a llegar rápidamente a los comentarios que contengan palabras clave específicas.

También verás que las búsquedas profundas se plantan en aplicaciones de viajes y entretenimiento como Hotels.com:

Búsqueda de la aplicación Hotels.com
Hotels.com incluye una búsqueda profunda para acotar los resultados por nombre de la propiedad. (Fuente: Hotels.com) (Vista previa grande)

Probablemente todos conozcáis la función de búsqueda básica que acompaña a cualquier aplicación relacionada con los viajes. Introduces los detalles de tu viaje y te muestra los resultados más relevantes en forma de lista o mapa. Eso es lo que muestra esta captura de pantalla.

Sin embargo, ¿ves dónde dice “Nombre de la propiedad” junto a la lupa? Esta es una función de búsqueda dentro de una función de búsqueda. Y lo único que los usuarios pueden buscar aquí son los nombres reales de las propiedades del hotel.

¿Barra, pestaña o lupa?

Esto me lleva al siguiente punto de diseño: cómo saber con qué elemento de diseño representar la función de búsqueda.

Ya has visto razones claras para utilizar una barra de búsqueda completa en lugar de colocar una pestaña en la barra de navegación. ¿Pero qué tal una lupa miniaturizada?

Aquí tienes un ejemplo de cómo se utiliza en el YouTube aplicación móvil:

Icono de búsqueda en la aplicación de YouTube
YouTube utiliza una lupa para representar su función de búsqueda. (Fuente: YouTube) (Vista previa grande)

Tal y como yo lo veo, la lupa es el elemento de diseño de búsqueda que se utilizaría cuando:

  • Una de las principales razones por las que los usuarios acuden a la aplicación es para realizar una búsqueda,
  • Y compite con otro caso de uso primario.

En este caso, YouTube necesita la minilupa porque sirve a dos tipos de usuarios:

  1. Los usuarios que acuden a la aplicación para buscar vídeos.
  2. Usuarios que acuden a la aplicación para subir sus propios vídeos.

Para conservar el espacio, los enlaces a ambos existen dentro de la cabecera de la aplicación de YouTube. Si tienes prioridades que compiten dentro de tu aplicación, considera hacer lo mismo.

“¿Buscar o dar una pista?

Otra cosa en la que hay que pensar a la hora de diseñar la búsqueda para aplicaciones móviles es el texto dentro del cuadro de búsqueda. Para decidir esto, tienes que preguntarte:

“¿Sabrán mis usuarios qué tipo de cosas pueden buscar con esta función de búsqueda?”

En la mayoría de los casos lo sabrán, pero podría ser mejor incluir un texto de sugerencia dentro de la barra de búsqueda sólo para asegurarte de que no estás añadiendo una fricción innecesaria. Esto es lo que quiero decir:

Esta es la aplicación para Airbnb:

Texto de búsqueda de la aplicación Airbnb
Airbnb ofrece un texto de sugerencia para guiar a los usuarios hacia resultados de búsqueda más precisos. (Fuente: Airbnb) (Vista previa grande)

La barra de búsqueda me dice que “pruebe con ‘Costa de Valencia'”. No es necesariamente una sugerencia explícita. Es más bien una ayuda para saber cómo puedo utilizar esta barra de búsqueda para buscar lugares donde alojarme en un próximo viaje.

Para los usuarios que son nuevos en Airbnb, este sería un consejo útil. Puede que lleguen al sitio pensando que es como Hotels.com, que permite a los usuarios buscar cosas como vuelos y alquileres de coches. Airbnb, en cambio, se dedica a ofrecer alojamiento y experiencias, por lo que este texto de búsqueda es una buena manera de guiar a los usuarios en la dirección correcta y evitar que reciban una respuesta del tipo “Lo sentimos, no hay resultados que coincidan con su consulta”.

2. Diseñar la barra de búsqueda y los resultados en contexto

Averiguar dónde colocar el elemento de búsqueda es un punto a tener en cuenta. Ahora tienes que pensar en cómo presentar los resultados a los usuarios de tu aplicación móvil:

Búsqueda simple

Esta es la más básica de las funciones de búsqueda que puede ofrecer. Los usuarios escriben su consulta en la barra de búsqueda. Los resultados relevantes aparecen debajo. En otras palabras, dejas que tus usuarios sepan lo que buscan y lo introduzcan correctamente.

Cuando se introduce una consulta relevante, puede proporcionar resultados de varias maneras.

Para una aplicación como Flipboardlos resultados se muestran como hashtags de tendencia:

Resultados de la búsqueda en la aplicación Flipboard
Flipboard muestra los resultados de la búsqueda como una lista de hashtags. (Fuente: Flipboard) (Vista previa grande)

No es la forma más habitual de mostrar los resultados de las búsquedas, pero tiene sentido en este contexto concreto. Lo que los usuarios buscan son categorías de contenido que quieren ver en su feed. Estas categorías con hashtags permiten a los usuarios elegir los temas de alto nivel que son más relevantes para ellos.

ESPN tiene una función de búsqueda básica más tradicional:

Resultados de la búsqueda en la aplicación de ESPN
ESPN ha diseñado sus resultados de búsqueda en una lista tradicional. (Fuente: ESPN) (Vista previa grande)

Como puedes ver, ESPN proporciona una lista de resultados que contienen la palabra clave. Sin embargo, no hay nada más que eso. Como verás en los siguientes ejemplos, puedes programar la búsqueda de tu aplicación para guiar a los usuarios de forma más precisa hacia los resultados que desean ver.

Búsqueda filtrada

Según la mencionada encuesta de Kissmetrics, el filtrado avanzado es un método de búsqueda muy popular entre los usuarios de sitios web. Si su aplicación móvil tiene mucho contenido o un vasto inventario de productos, considere añadir filtros al final de su función de búsqueda para mejorar aún más la experiencia. Sus usuarios ya están familiarizados con la técnica de búsqueda. Además, le ahorrará la molestia de tener que añadir avances a la propia funcionalidad de búsqueda.

Yelp tiene un buen ejemplo de esto:

Filtros de búsqueda de la aplicación Yelp
Los usuarios de Yelp disponen de opciones de filtrado tras realizar una búsqueda. (Fuente: Yelp) (Vista previa grande)

En la búsqueda anterior, originalmente busqué restaurantes en mi “Ubicación actual”. Entre los diversos filtros que se mostraban, decidí añadir a mi consulta “Pedir a domicilio”. Mi búsqueda se convirtió entonces en:

Restaurantes > Ubicación actual > Entrega

En realidad, esto no difiere del uso de las migas de pan en un sitio web. En este caso, se deja que los usuarios hagan el trabajo inicial introduciendo una consulta de búsqueda. A continuación, se les ofrecen filtros que les permiten acotar más su búsqueda.

De nuevo, esta es otra forma de reducir las posibilidades de que los usuarios se encuentren con la respuesta “Sin resultados” a su consulta. Debido a que los filtros se correlacionan con las categorías y segmentaciones reales que existen dentro de la aplicación, puedes asegurarte de que terminen con resultados de búsqueda válidos cada vez.

Los sitios web de comercio electrónico son otro buen caso de uso para los filtros. Así es como Wayfair hace esto:

Filtros de búsqueda de la aplicación Wayfair
Wayfair incluye filtros en la búsqueda para ayudar a los usuarios a acotar los resultados. (Fuente: Wayfair) (Vista previa grande)

La lista de resultados de búsqueda de Wayfair es bastante estándar para un mercado de comercio electrónico. Se muestra el número de artículos, seguido de una cuadrícula de imágenes de productos coincidentes y detalles resumidos.

Sin embargo, la cuestión es la siguiente: Wayfair tiene un inventario masivo. Lo mismo ocurre con otros mercados en línea como Amazon y Zappos. Así que, cuando le dices a los usuarios que su consulta de búsqueda ha producido 2.975 artículos, necesitas una forma de mitigar parte del agobio que puede suponer.

Si colocas los botones de clasificación y filtrado directamente al lado del total de resultados de la búsqueda, estarás animando a los usuarios a trabajar un poco más en su consulta de búsqueda para asegurarse de que obtienen los resultados mejores y más relevantes.

Búsqueda predictiva

Autocompletar es algo con lo que tus usuarios ya están familiarizados. En el caso de las aplicaciones con mucho contenido, utilizar este tipo de funcionalidad de búsqueda podría ser de gran ayuda para tus usuarios.

Por un lado, ya saben cómo funciona y, por lo tanto, no se sorprenderán cuando aparezcan ante ellos sugerencias de consultas relacionadas. Además, la función de autocompletar ofrece una especie de personalización. A medida que se reúnen más datos sobre un usuario, así como sobre el tipo de búsquedas que realiza, la función de autocompletar se anticipa a sus necesidades y le proporciona un acceso directo al contenido deseado.

Pinterest es una aplicación de redes sociales que la gente utiliza para agregar contenidos que le interesan y para buscar inspiración para prácticamente cualquier cosa que haga en la vida:

Autocompletar la búsqueda en la app de Pinterest
Pinterest se anticipa a las consultas de búsqueda de los usuarios y ofrece atajos de autocompletar. (Fuente: Pinterest) (Vista previa grande)

Echa un vistazo a los resultados de la búsqueda de arriba. ¿Puedes decir en qué he estado pensando últimamente? El primero es cómo voy a decorar mi nuevo apartamento. El segundo es mi próximo tatuaje. Y a pesar de que sólo escribí la palabra “Pequeño”, Pinterest supo inmediatamente lo que ha estado en mi mente últimamente. Eso no significa necesariamente que yo, como usuario, haya llegado a la aplicación con esa intención específica hoy… pero es agradable ver ese toque personalizado cuando me relaciono con la barra de búsqueda.

Otra aplicación con la que me relaciono mucho es la Apple Aplicación de fotos:

Búsqueda en la aplicación Fotos de Apple
Apple Photos utiliza la función de autocompletar para ayudar a los usuarios a encontrar las fotos más relevantes. (Fuente: Apple) (Vista previa grande)

Además de usarlo para almacenar todas mis fotos personales, lo uso regularmente para hacer capturas de pantalla para el trabajo (como hice en este artículo). Como puedes imaginar, tengo mucho contenido guardado en esta aplicación y puede ser difícil encontrar lo que necesito simplemente desplazándome por mis carpetas.

En el ejemplo anterior, intentaba encontrar una foto que había tomado en las cataratas del Niágara, pero no recordaba si la había etiquetado como tal. Así que escribí “agua” y recibí algunas sugerencias útiles de autocompletar sobre palabras relacionadas con el agua, así como fotos que se ajustaban a la descripción.

Yo también pondría los resultados de la “Búsqueda reciente” en este cubo. Este es un ejemplo de Uber:

Resultados de la búsqueda reciente de la aplicación Uber
Los resultados de las búsquedas recientes de Uber ofrecen accesos directos con un solo clic a los usuarios que repiten. (Fuente: Uber) (Vista previa grande)

Antes de tener la oportunidad de escribir mi consulta de búsqueda en la aplicación de Uber, me muestra mis consultas de búsqueda más recientes.

Creo que esto sería especialmente útil para las personas que utilizan los servicios de transporte compartido de forma habitual. Piensa en los profesionales que trabajan en una ciudad. En lugar de poseer un coche, utilizan Uber para ir y volver de su oficina, así como para las citas con los clientes. Al ofrecer un acceso directo a los viajes recientes en los resultados de la búsqueda, la aplicación Uber reduce el tiempo que dedican a reservar un viaje.

Si tienes suficientes datos sobre tus usuarios y tienes una forma de anticiparte a sus necesidades, el autocompletado es una forma fantástica de personalizar la búsqueda y mejorar la experiencia general.

Búsqueda limitada

Creo que este punto de ahorro de tiempo es importante de recordar cuando se diseña la búsqueda para las aplicaciones móviles.

A diferencia de los sitios web, en los que los tiempos de permanencia en la página son importantes, no siempre es el caso de las aplicaciones móviles. A menos que hayas creado una aplicación de juegos o de noticias en la que los usuarios deban pasar mucho tiempo interactuando con la aplicación a diario, lo que suele importar no es la cantidad de tiempo que se pasa dentro de la aplicación.

Tu objetivo al crear una aplicación móvil es retener a los usuarios durante períodos más largos, lo que significa proporcionar una experiencia significativa mientras están dentro de ella. Una función de búsqueda bien pensada contribuirá en gran medida a ello, ya que lleva a los usuarios inmediatamente a lo que quieren ver, incluso si eso significa que abandonan la aplicación unos segundos después.

Si tienes una app que necesita que los usuarios entren y salgan de ella rápidamente, piensa en limitar los resultados de la búsqueda como Ibotta ha hecho:

Categorías de búsqueda de la aplicación Ibotta
Ibotta muestra las categorías en las que los usuarios pueden buscar. (Fuente: Ibotta) (Vista previa grande)

Aunque los usuarios pueden introducir cualquier consulta que deseen, Ibotta deja claro que las categorías que aparecen a continuación son las únicas disponibles para la búsqueda. Esto sirve tanto como un recordatorio de lo que la aplicación es capaz de hacer como un medio para eludir los resultados de búsqueda que no importan a los usuarios.

Hoteles.com también pone límites a su función de búsqueda:

Hotels.com limita los resultados de las búsquedas
Hotels.com obliga a los usuarios a elegir para que no aparezcan demasiados resultados. (Fuente: Hotels.com) (Vista previa grande)

Como se puede ver aquí, los usuarios no pueden buscar hoteles en todo el país de Croacia. Es una búsqueda demasiado amplia que Hotels.com no debería ofrecer. Por un lado, probablemente sea demasiado exigente para el servidor de Hotels.com ejecutar una consulta de esa naturaleza. Además, sería una experiencia terrible para los usuarios. Imagina cuántos hoteles aparecerían en esa lista de resultados.

Si se controla lo que los usuarios pueden buscar y los resultados que pueden ver, se puede mejorar la experiencia general y acortar el tiempo que tardan en convertirse.

Conclusión

Como puedes ver aquí, una barra de búsqueda no es un elemento de diseño desechable. Cuando tu aplicación promete una experiencia rápida y cómoda a sus usuarios, una barra de búsqueda puede reducir el tiempo que tienen que pasar dentro de ella. También puede hacer que la aplicación sea un recurso más valioso, ya que no requiere mucho trabajo o esfuerzo para llegar al contenido deseado.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar
Cerrar