El componente LookupField permite a los usuarios seleccionar un valor de entre los valores disponibles utilizando palabras clave. Puede ser una fuente principal para descubrir o filtrar contenido.
Si se utiliza como barra de búsqueda, su ubicación determina el alcance de la búsqueda y sus resultados.
Las barras de búsqueda colocadas en un encabezado buscarán resultados en toda la aplicación.
Las barras de búsqueda colocadas dentro de un elemento solo buscarán resultados dentro del elemento.
Use texto de marcador de posición para guiar a los usuarios en cuanto a los términos apropiados para el contexto.
Incluya la sugerencia automática siempre que sea posible.
Indique claramente las categorías de los valores disponibles.
Tenga un mensaje claro de estado vacío que dirija a los usuarios al siguiente paso y ofrezca sugerencias para avanzar. (Consulte los aspectos que deben tenerse en cuenta sobre la redacción de UX a continuación).
Use búsquedas con moderación en toda la aplicación. No todos los elementos requieren una búsqueda.
Resalte los términos que el usuario ingresó en los resultados.
Agregue descripciones a los resultados para ayudar a los usuarios a navegar y elegir la opción adecuada.
Mostrar el número de resultados devueltos.
Mantenga el texto original después de que los usuarios ejecuten la consulta.
Utilice un ícono de procesamiento si la recuperación de valores tarda más de 5 segundos.
Los usuarios entienden el propósito de un campo de búsqueda; por lo tanto, utilice únicamente un rótulo específico del contenido (en lugar del término genérico “búsqueda”).
Al presionar la tecla Tab, el foco del teclado pasa al campo de entrada. Al presionar la barra espaciadora o las teclas de flecha abajo, se abre el menú emergente con una lista de valores. La lista se filtra escribiendo los primeros caracteres del nombre que necesite.
El campo de entrada y el rótulo se asocian a través del atributo WAI-ARIA aria-labelledby. El campo también incluye el valor de aria-autocomplete="list" para indicar que contiene una ventana emergente de lista con función de autocompletar. A medida que escribe, el campo de entrada va rellenando una lista desplegable de valores que en su mayoría coinciden con lo que se ingresa en el campo. La opción que coincide con la información escrita recibe el foco automáticamente y es expresada por el lector de pantalla.
Al escribir para estados vacíos (por ejemplo, búsquedas que no devuelven resultados), evite decir a los usuarios lo que no hay. En lugar de eso, aproveche la oportunidad para comunicar lo que hay.
NO utilice términos como sistema, consultas o valores. Por ejemplo, “No se encontraron resultados para los valores ingresados” o “La consulta no produjo resultados”.
Los estados vacíos de los resultados de búsqueda deben dirigir a los usuarios al siguiente paso y mantenerlos en movimiento a través del flujo del producto.
Explique la situación. Haga saber a los usuarios que no se ha encontrado lo que buscaban. Su tono debe ser empático.
Sugiera formas alternativas de avanzar que sean relevantes para su tipo de contenido, por ejemplo:
Por lo general, hay varias formas de buscar lo mismo. Esto incluye buscar por categoría, buscar un término más general o específico, tratar de usar sinónimos y revisar la ortografía.
¿Hay cosas que sean similares a lo que el usuario buscó? Puede sugerir elementos o enlaces que sean lo más parecidos posible. Por ejemplo: - Artículos del mismo fabricante (como otros vehículos Ford).
Artículos con especificaciones similares de diferentes fabricantes (como vehículos de 2010).
Artículos que sean de un tipo, estilo o característica similar (como sedanes medianos).
¿Puede el motor de búsqueda encontrar términos similares? Si fuera así, considere la posibilidad de ofrecer esos resultados a los usuarios para ahorrarles la molestia de realizar otra búsqueda.
Es fundamental comprender lo que los usuarios intentan lograr con su búsqueda. Ofrézcales algo que los acerque a su objetivo.
Trate de usar un lenguaje amigable y conversacional, por ejemplo, “No pudimos encontrar ningún resultado. ¿Quiso decir [enlace a un término similar]? Intente buscar otra cosa o amplíe su búsqueda”.
Use texto de marcador de posición para ayudar a formar la experiencia. Por ejemplo, puede reducir la gama de opciones definiendo categorías dentro del campo de búsqueda. Esto permite a los usuarios centrarse en las posibilidades y los guía a medida que realizan su búsqueda.
Como alternativa, considere hacer una pregunta directa a los usuarios (preferiblemente en segunda persona “usted”) en campos que sean particularmente importantes. Esto motivará a los usuarios a encontrar respuestas y sumergirse en el sitio.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
If set to true, this field is required. If used with @jutro/validation, this prop can also be used to set the custom message overwrite. This can be done by using a tuple with the first value as true and the second value as the custom message. For example: required: [true, "a custom message"].
Shows an indicator that informs the user whether the current input value is valid. Whether the input is valid depends on the object entered in the validator prop.
An object which should contain a regex pattern as string and a validation message as string. If a user's input matches the regex pattern, the value will be valid, otherwise the message will be shown.
Consulte la sección Uso para obtener detalles sobre cómo diseñar un look-up field correctamente y las diferentes opciones de configuración que ofrecemos.
Una look-up field consiste en un campo de texto conectado a una colección de valores que un usuario utiliza para buscar valores específicos. Para una look-up field básica, establezca los valores válidos usando la propiedad availableValues, junto con una propiedad optionTypes para distinguir el tipo del valor. En el siguiente ejemplo, puede buscar la cuenta “John Doe” o la póliza “Seguro de transporte”. Puede hacer clic en el cuadro de búsqueda para ver las opciones válidas o escribir para limitar las opciones a las que contengan los caracteres escritos.
Si escribe una opción que no existe, la look-up field le indicará que no hay opciones y no se seleccionará nada.
Puede cargar valores desde una fuente externa, por ejemplo, una API. Para ello, cree una función asíncrona y pásela a la propiedad onLoadValues.
En este ejemplo, definimos una función para simular una llamada asíncrona que cargará valores aproximadamente un segundo después de haber escrito en el cuadro.
