Formularios

Los formularios se utilizan para enviar datos, así que debemos ser lo más conciso posible al diseñarlos. Piense en cada campo y en el valor que proporcionarán los datos. ¿Qué ganaremos al recopilar esta información? ¿Es esta una información valiosa para nosotros? ¿Es esta una información tan valiosa que vale la pena evitar que el usuario continúe si decide no proporcionarla?

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.

⬛ Link a Figma

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.

Open

Texto de ayuda o contador de caractéres

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

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.

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.

Progress indicator o Stepper

Un indicador de progreso es una representación visual del progreso de un usuario a través de un conjunto de pasos, que lo guía hacia la finalización de un proceso específico.

Se utilizan para mantener al usuario en el camino al completar una tarea específica. Al dividir el objetivo final en subtareas más pequeñas, aumenta el porcentaje de cumplimiento a medida que se completa cada tarea.

Progresión lógica

Muestra los pasos en orden de izquierda a derecha. Indicando al usuario que está realizando un proceso de varios pasos y muestra la dirección del movimiento. Permite que el usuario regrese a un paso anterior para revisar su envío de datos.

Indicar el paso actual

Mantener al usuario informado de dónde se encuentra actualmente dentro del proceso o la tarea en cuestión le dará una sensación de control. Esto ayuda al usuario a saber dónde se encuentra en relación con dónde ha estado y qué secciones debe seguir. Las etiquetas deben acompañar al indicador de progreso para indicar lo que el usuario logrará en cada paso. Mantenga las etiquetas entre una y dos palabras.

Validación

Utilice la validación para confirmar que se ha completado un paso anterior. Si el usuario no puede continuar con otro paso sin antes completar una tarea, use una Notificación en línea para informarle.

⬛ Link a Figma

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.