Search
El componente search permite a los usuarios buscar contenido relevante al especificar una palabra o frase.
Definición
El componente search permite a los usuarios buscar contenido relevante al especificar una palabra o frase, sin necesidad de navegar a través de la estructura de la interfaz de usuario.
Anatomía
Estados
5Disable: El componente no esta habilitado para su uso.
Variantes
1 Search
2Search con audio y/o imágenes
Tamaños
1Small
1Medium
2Large
Cuándo usar
Se usa el componente search para permitir a los usuarios buscar información específica dentro de la aplicación o sitio web.
Puedes usarlo también para integrar en la búsqueda otras funcionalidades de la aplicación, como el filtrado o la ordenación, para permitir a los usuarios refinar su búsqueda y encontrar lo que necesitan más rápidamente.
Cuándo no usar
Cuando el sitio o aplicación es muy simple y no tiene suficiente contenido para justificar el uso de la búsqueda.
Cuando la búsqueda no es relevante para el objetivo del sitio o aplicación.
Accesibilidad
Las Pautas de Accesibilidad al Contenido Web 2.1 y 2.2 ofrecen recomendaciones para mejorar la accesibilidad a personas con discapacidades visuales, auditivas, de movimiento, del habla, cognitivas y fotosensibilidad. Aunque las guías no cubren todas las necesidades, sí ayudan a que más personas puedan acceder a los servicios digitales.
Las guías de accesibilidad se dividen en cuatro principios: Perceptible, entendible, operable y robusto, consideramos abarcar únicamente los principios perceptible, entendible y operable, dejando fuera robusto ya que este no tiene un campo de acción en el diseño de los componentes UI.
La siguiente lista son recomendaciones de la WCAG que afectan al componente search.
Perceptible
Color y Contraste SC 1.4.3
La relación de contraste mínima recomendada para la accesibilidad es de 4.5:1 para el texto normal y de 3:1 para el texto grande (18 puntos o más).
Recursos:
Estado Focus SC 2.4.7
El propósito del estado focus es ayudar a las personas que dependen del teclado para operar una página, permitiéndoles determinar visualmente en qué lugar se encuentran. Beneficia a las personas con limitaciones de atención, limitaciones de memoria a corto plazo o limitaciones en los procesos ejecutivos.
Entendible
Etiquetado SC 2.4.6
Porporcionar etiquetas que identifiquen los controles en un formulario para que los usuarios sepan qué datos de entrada se esperan.
1 Icono
2Label
Operable
Nombre, Rol, Valor SC 4.1.2
Asegúrese de que el componente search tenga diseñado sus diferentes estados.
1 Enable
2Hover
3Focus
4Disable
Search field
Usa un search field para guiar a los usuarios en las consultas de búsqueda que pueden realizar en tu sitio. Esto es útil para las barras de búsqueda del sitio web donde los usuarios pueden buscar diferentes elementos. Limita la longitud de tu texto de marcador de posición para reducir la carga cognitiva y asegúrate de que haya suficiente contraste para que sea legible.
Mayúsculas y minúsculas
La etiqueta dentro del campo de búsqueda debe estar en mayúscula inicial en cada palabra (sentence case).
Estado de "Sin resultados"
Mostrar un estado de «Sin resultados» en lugar de un error. La funcionalidad de búsqueda debe anticipar errores de ortografía en las consultas de búsqueda y permitir múltiples ortografías de las palabras en los resultados de búsqueda, en lugar de tratar cualquier término de búsqueda como un error.
Destaca tu search field
Evita ocultar tu search field en un menú desplegable o detrás del icono de búsqueda (disclosure progresivo), ya que hace que sea difícil para los usuarios encontrarla. Además, cuando ocultas la search field, agregas una acción adicional que los usuarios deben realizar antes de buscar en tu sitio.
Button y search field
Dependiendo del tipo de sitio que esté diseñando, puede elegir tener un button de búsqueda junto a su search field en lugar de un icono de lupa. El button muestra a los usuarios que necesitan enviar una consulta de búsqueda antes de poder obtener sus resultados de búsqueda.
Función de auto-sugerencia
La función de auto-sugerencia guía a los usuarios cuando escriben sus consultas de búsqueda para evitar errores en la formulación de la consulta. Asegúrate de que tus sugerencias automáticas sean útiles para evitar confundir o distraer a los usuarios. Muestra la diferencia entre la información ingresada por el usuario y las sugerencias automáticas en negrita. Haz que tus sugerencias automáticas sean navegables desde el teclado y no des demasiadas sugerencias automáticas, ya que esto puede causar confusión.
Atajos útiles
Considera proporcionar atajos útiles y otro contenido cerca de un search field. Por ejemplo, Safari muestra marcadores tan pronto como las personas tocan o hacen clic en el campo de búsqueda, lo que les permite seleccionar un marcador para abrirlo de inmediato.
