Una barra de búsqueda (y en la mayoría de los casos, funciona como barra superior) suele estar en la parte superior de la página de inicio de una aplicación, y es un diseño común para que el usuario identifique la búsqueda como un portal. Es un gran objetivo táctil en la parte superior y se puede detectar cuando el usuario está directamente en la página de inicio.
Por lo general, un contenedor, el texto del marcador de posición (con o sin lupa) y los botones de acción forman una barra de búsqueda.
Desglose de la barra de búsqueda
Envase
Regla general: contrastar el contenedor con el fondo de esa página.
Un contenedor suele tener un fondo blanco o gris para resaltar el texto del marcador de posición. Pero, ¿cuándo utilizar un recipiente blanco y cuándo uno gris claro? Depende del fondo de la página de inicio de la aplicación. La regla general aquí es contrastar siempre el contenedor con el fondo de esa página. Llevar Mapa de Google y Lecturas de WeChat Por ejemplo, una barra de búsqueda blanca tiene un fondo gris claro (u otro color) y viceversa.
Barra de búsqueda como barra superior
Sin embargo, hay excepciones, como en el caso de Airbnb, que tiene una barra de búsqueda blanca sobre un fondo blanco. Sin embargo, en este caso la barra de búsqueda tiene una sombra más fuerte que otras barras de búsqueda, volviendo a nuestra regla general: el contraste.
Contrastando la barra de búsqueda con el fondo
Texto del marcador
El texto del marcador de posición tiene el peso de indicarle al usuario lo que quiere buscar o desde dónde lo está buscando. Un texto de marcador de posición puede ser tan simple como “Buscar” o “Buscar algo aquí”, cuando una aplicación no tiene que señalar al usuario en una dirección determinada. Sin embargo, cuando lo haga, un marcador de posición útil debería indicarle exactamente lo que puede obtener de la búsqueda. Como en el caso de Tienda de aplicaciones iOSel marcador de posición le indica que puede buscar “Juegos, aplicaciones, historias y más”, mientras que MensajeroEl marcador de posición puede ser simplemente “Buscar”.
Ejemplos de marcadores de posición
Un tercer caso de uso para un marcador de posición es común en las aplicaciones de exploración de contenido: no solo le indica las categorías de contenidos que tienen, sino que también promueve activamente algunos contenidos mostrando las tendencias y/o cambiando el contenido promocionado de vez en cuando. Llevar Lecturas de WeChat por ejemplo, utiliza el nombre de un libro de tendencia como marcador de posición y cambia su contenido cada vez que el usuario vuelve a ingresar a esta página.
Contenidos de tendencia como marcador de posición
Botones de acción
Cuando se utiliza una barra de búsqueda como barra superior, irá acompañada de los elementos de acción que normalmente irían en la barra superior de una aplicación. Consulte mi artículo anterior para descubrir qué iconos/botones de texto aparecerán en la barra superior de una aplicación. Lo que quiero enfatizar aquí es lo que aparece en la barra de búsqueda versus lo que aparece fuera de ella; aunque no existe ninguna regla estricta que estipule esto, descubrí algunos patrones comunes que tienen mucho sentido para mí.
La conclusión es:
Aunque las acciones relacionadas con la búsqueda no necesariamente van a la barra de búsqueda, lo que va a la barra de búsqueda debe estar relacionado con la búsqueda.
¿Qué iconos/vínculos de texto pueden ayudar con la búsqueda? Los más comunes son el código QR que genera la aplicación para sus usuarios y productos (para que el usuario pueda encontrarse o encontrar las cosas que desea) y la funcionalidad de grabación/reconocimiento de voz para la accesibilidad del diseño. Ver en los ejemplos de Mapa de Google (usando el reconocimiento de voz como segunda forma de entrada de búsqueda) y LinkedIn(usando el código QR para agregar personas como conexiones).
Elementos de acción en una barra de búsqueda
Por supuesto, si una barra de búsqueda reemplaza a una barra superior, entonces no todas las acciones en la parte superior estarán relacionadas con la búsqueda. La clave para diseñar una buena UX aquí, entonces, es distinguir visualmente los iconos relacionados con la búsqueda y el resto. En el ejemplo de Mapa de Googleutiliza un divisor simple, mientras que en LinkedInel código QR relacionado con la búsqueda se coloca dentro de una barra de búsqueda y el ícono de perfil/mensajería se coloca afuera.