Todos los formularios se componen de varios elementos:
Etiquetas: informe a los usuarios qué significan los campos de entrada correspondientes.
Text Input o Campos de entrada: permite a los usuarios proporcionar información. La información se puede ingresar a través de una variedad de diferentes campos de entrada que van desde campos de texto, casillas de verificación y muchos otros tipos.
Texto de ayuda : proporciona ayuda sobre cómo completar un campo. El texto auxiliar es opcional.
Placeholder: sugiere lo que se incluye en un campo. El texto del marcador de posición es opcional.
Botones: permite a los usuarios enviar un formulario.
Validación: garantiza que los datos enviados por el usuario se ajusten a parámetros aceptables.
Validación
Recomendamos utilizar señales visuales para guiar al usuario sobre dónde se encuentra el problema dentro del formulario. Esto ayudará a identificar fácilmente los elementos que deben corregirse.
La validación debería aparecer cuando el usuario haya hecho clic fuera del campo de texto. Una vez que el usuario corrige los errores dentro del campo de texto, la validación debería desaparecer una vez que los datos se conviertan en válidos.
La etiqueta de validación debajo del campo debe ser lo más informativa posible al describir el problema con los datos de los usuarios. Por ejemplo, si las limitaciones de la contraseña requieren 16 caracteres, pero el usuario ingresa una contraseña con solo seis caracteres, el texto debe leer algo como "La contraseña debe tener al menos 16 caracteres".
La validación en tiempo real ayuda a agilizar el proceso y mantener los datos limpios cuando el usuario está completando formularios. El mensaje de validación debe incluirse para advertir al usuario sobre el texto que se ingresó incorrectamente o un campo obligatorio que falta.
Labels
El etiquetado de formularios eficaz ayuda a los usuarios a comprender qué información ingresar en una entrada de texto.
Mejores prácticas de accesibilidad para etiquetas:
Las etiquetas deben ser visibles cuando se enfoca una entrada.
Las etiquetas deben anunciarse al lector de pantalla en foco.
Asegúrese de que el texto de ayuda que aparece debajo de una entrada se lea cuando un usuario de tecnología de asistencia se detiene en una entrada usando ARIA.
Utilice mayúsculas al estilo de la oración (solo la primera palabra de una frase y los nombres propios en mayúscula).
Placeholder
El texto del marcador de posición proporciona sugerencias o ejemplos de qué ingresar. El texto del marcador de posición desaparece después de que el usuario comienza a ingresar datos en la Entrada y no debe contener información crucial. Use mayúsculas al estilo de una oración y, en la mayoría de los casos, escriba el texto como una declaración directa sin puntuación. El uso de placeholder en lugar del label a veces se emplea como método para ahorrar espacio. Sin embargo, esto no se recomienda porque oculta el contexto y presenta problemas de accesibilidad.
Texto de ayuda
El texto auxiliar es información pertinente que ayuda al usuario a completar un campo. El texto auxiliar siempre está disponible cuando la entrada está enfocada y aparece debajo de la etiqueta.
El texto auxiliar opcional debe usarse para proporcionar instrucciones que ayuden a los usuarios a comprender cómo completar el campo de texto, así como también para indicar cualquier entrada requerida y opcional, formatos de datos y otra información relevante.
Text Input
Los input de texto permiten al usuario interactuar e introducir contenido y datos. Este componente se puede utilizar para entradas de formato largo y corto.
Siempre que sea posible, detectar y rellenar previamente las entradas para reducir errores y ahorrar tiempo. Cuando no se puede determinar el valor, usar la escritura anticipada para hacer sugerencias. Utilizar mayúsculas y minúsculas para valores predeterminados, valores detectados y texto de autocompletado.
Validación
La validación en tiempo real ayuda a agilizar el proceso y mantener los datos limpios cuando el usuario está completando formularios. El mensaje de validación debe incluirse para advertir al usuario sobre el texto que se ingresó incorrectamente o un campo obligatorio que falta.
Mensaje de error
Los mensajes de error efectivos pueden ayudar al usuario a comprender el problema y cómo solucionarlo. Primero, informe al usuario lo que ha sucedido y luego proporcione orientación sobre los próximos pasos o posibles soluciones. Las notificaciones en línea se pueden utilizar para indicar el problema general con la entrada de los usuarios, como "Introduzca los campos obligatorios". Las notificaciones en línea pueden ocurrir antes o después del envío, según el tipo de datos que ingrese el usuario.
Text Area
Los componentes Text Area son utilizados como campos de texto, se diferencian de los Text Field en que son capaces de almacenar una cantidad mucho mayor de texto, incluso son capaces de crecer para contener más información.
Los campos de texto y las áreas de texto pueden tener un límite de caracteres y un contador. Use el límite de caracteres y el contador para que los usuarios sepan antes de comenzar a escribir, así entender cuándo supera el límite de caracteres.
Search
El componente Search es utilizado para realizar la búsqueda del contenido de forma mucho más rápida, evitando tener que revisar cada sección para encontrar lo que se está buscando.
Toggle
Toggle es un control que se utiliza para cambiar rápidamente entre dos estados posibles. Los conmutadores solo se utilizan para estas acciones binarias que se producen inmediatamente después de que el usuario "acciona" el conmutador. Se utilizan comúnmente para interruptores de "encendido / apagado".
Select
El componente de selección permite a los usuarios elegir una opción de una lista. Se utiliza en formularios para que los usuarios envíen datos.
Radio buttons
Se utilizan cuando hay una lista de dos o más opciones que se excluyen mutuamente y el usuario debe seleccionar exactamente una opción. En otras palabras, al hacer clic en un botón de opción no seleccionado, se anulará la selección de cualquier otro botón que se haya seleccionado previamente en la lista.
Checkboxes
Se utilizan cuando hay listas de opciones y el usuario puede seleccionar cualquier número de opciones, incluidas cero, una o varias. En otras palabras, cada casilla de verificación es independiente de todas las demás casillas de la lista, por lo que marcar una casilla no desmarca las demás. Se puede utilizar una casilla de verificación independiente o una palanca para una sola opción que el usuario puede activar o desactivar.
Select
Se utilizan para campos en los que se requiere una única selección y hay una gran cantidad de opciones posibles.
File
El componente File es utilizado para visualizar, agrupar y seleccionar archivos dentro de una vista.
Picker date
El componente Picker Date es utilizado como una forma expliícita y sencilla de seleccionar una fecha.
Picker Time
El componente Picker Time es utilizado como una forma expliícita y sencilla de seleccionar una hora.
| Info |
|---|
Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidady guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color. |