Búsqueda
Descripción general
El patrón de búsqueda sirve de herramienta de investigación que permite a los usuarios explorar rápidamente una aplicación mediante palabras clave.
La ubicación del campo de búsqueda depende de la arquitectura de la aplicación y del ámbito de la búsqueda. Una búsqueda global buscará en toda una aplicación, mientras que una búsqueda en la página o en una tabla de datos se centrará en una base de datos determinada.
El patrón de búsqueda abarca los siguientes tipos de búsqueda:
- Búsqueda sencilla
- Búsqueda avanzada
- Búsqueda móvil
Cuándo se debe utilizar
Cada vez que se deba realizar una búsqueda en la aplicación.
| Tipo | Propósito | Caso de uso |
|---|---|---|
| Búsqueda sencilla | Se utiliza para buscar en toda la base de datos dentro de una aplicación. | Una búsqueda global que redirige a una página única o a una página de resultados de búsqueda. Por ejemplo, un agente al buscar una cuenta en su portal. |
| Búsqueda avanzada | Se utiliza para acotar el ámbito de la búsqueda mediante filtros e identificadores únicos. La búsqueda avanzada solo busca el subconjunto de la base de datos que ha determinado el usuario. Combina las características de la búsqueda sencilla y un menú desplegable, que permite a los usuarios agregar parámetros de búsqueda. |
|
| Búsqueda móvil | Se utiliza para realizar una búsqueda sencilla en aplicaciones de consumidores, como CustomerEngage Account Management. Las aplicaciones empresariales rara vez utilizan la búsqueda móvil. Esto se debe a la complejidad del tipo de búsqueda realizada por los agentes. El patrón es el mismo en computadoras de escritorio y dispositivos móviles. | Consumidor que realiza una búsqueda sencilla en su administrador de cuentas. |
El patrón de búsqueda puede adaptarse a varios casos de uso diferentes. Este patrón sienta las bases de cómo se verá su búsqueda. Mantiene su coherencia, ya sea una búsqueda en la página, una búsqueda en tabla de datos o una búsqueda global.
Anatomía
Búsqueda sencilla
Ícono de búsqueda (obligatorio): Muestra un ícono dentro de la barra de búsqueda. Este ícono es dinámico y cambia con el estado de la búsqueda. También se muestra un ícono de cierre en el estado activo.
Resultados de la búsqueda avanzada
El siguiente ejemplo es una página de resultados de búsqueda avanzada, en la que los usuarios pueden agregar parámetros de búsqueda adicionales para obtener una búsqueda más definida:
Pautas generales
- Utilice texto de marcador de posición para indicar al usuario qué buscar.
- Cuando una búsqueda no arroje resultados, ofrezca sugerencias sobre cómo obtener resultados. Por ejemplo, “Intente ajustar su búsqueda o filtro para encontrar lo que está buscando”. También se pueden incluir acciones, como un enlace de redirección a una línea de ayuda.
- Informe al usuario cuando una búsqueda se esté cargando. Utilice un cargador de páginas con texto útil o una estimación de cuánto tiempo tardará la búsqueda.
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Comportamientos
Estado predeterminado
El estado predeterminado del patrón de búsqueda contiene texto de marcador de posición y un ícono.
El texto de marcador de posición sirve como una sugerencia sobre lo que los usuarios pueden buscar en su aplicación. Por ejemplo, una aplicación de agente podría incluir lo siguiente como texto marcador de posición: “Busque cuentas, pólizas y documentos”.
Estado activo
En el estado activo, el ícono de búsqueda se reemplaza por el ícono Cerrar. El ícono de cierre borra los caracteres en la barra de búsqueda.
Capacidad de ser responsive
Computadoras de escritorio: 360 px
Ancho máx. en dispositivos móviles: 246 px
El patrón de búsqueda está diseñado de tal manera que se requieren cambios mínimos cuando se usa en un dispositivo móvil. Los campos de entrada se adaptan al visualizarlos en un dispositivo móvil. Las computadoras de escritorio y las tablets comparten los mismos valores.
Tematización
De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.
Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.
Más información sobre la tematización con tokens de diseño
Investigación que lo avala
La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron los patrones de muchas otras bibliotecas de diseño. Buscaron fortalezas y debilidades relativas, tendencias y diferencias. Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.
Componentes relacionados
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.