Formularios
Descripción general
Un formulario es un grupo de elementos de interfaz de usuario que se pueden utilizar para recopilar información de un usuario en una variedad de contextos. Hay diferentes medios para presentar los formularios, como en un cajón, como parte de un proceso o en una página. Los formularios presentan información en fragmentos lógicos que son fáciles de entender por los usuarios y para actuar en consecuencia.
Cuándo se debe utilizar
- Cuando una aplicación debe recopilar datos del usuario.
- Cuándo el usuario necesita ver los datos disponibles.
Cuándo no se debe utilizar
No utilice formularios como el único medio para mostrar datos. Considere la posibilidad de usar tarjetas y vistas de lista para conjuntos de datos más simples, además de tablas o gráficos de visualización de datos para conjuntos de datos complejos.
Anatomía
- Título de la página/formulario: Indica el propósito de la página o el formulario. Utilice el estilo de texto h1 para el título de la página o el formulario.
- Título de la sección: Indica el propósito de una sección o de un grupo de información. Utilice el estilo de texto h2 para el título de la sección.
- Elemento de formulario de interfaz de usuario: Permite a los usuarios ingresar o seleccionar datos.
- Grupo de botones: Permite a los usuarios enviar o cancelar los datos introducidos en el formulario.
Pautas generales
Estructura, espaciado, composición y disposición
- Use un título apropiado para indicar el propósito del formulario. Los títulos de página o formulario utilizan el estilo de texto h1.
- Estructure los formularios de manera lógica y utilice la fragmentación para que la información sea más fácil de comprender y recordar.
- Utilice secciones con encabezados apropiados para indicar grupos de información. Los encabezados de sección utilizan el estilo de texto h2.
- Para formularios más largos, divida el flujo en diferentes pasos, fases o secciones utilizando elementos de la interfaz de usuario como tarjetas, acordeones, indicadores de progreso o pestañas.
- Asegúrese de que haya un espacio adecuado entre el título, los controles del formulario y entre las diferentes secciones del formulario.
| Agrupación de información mediante tarjetas | Agrupación de información mediante secciones de página |
|---|---|
 |  |
Formularios de varias columnas
- Use formularios de una sola columna cuando el espacio sea limitado. Por ejemplo, en paneles, dispositivos móviles y formularios con pasos.
- En dispositivos más grandes y cuando una disposición de una sola columna pueda distraer, use una composición y disposición de varias columnas para aprovechar el espacio disponible.
- Organice los grupos o secciones en el orden natural de lectura de los usuarios y de manera que una sección conduzca a la otra.
Acciones del formulario/sección
- Utilice un botón principal para la acción principal y un botón terciario para cancelar.
- Agrupe acciones junto con el contenido que se está manipulando. Esto garantiza que los usuarios asocien la acción con el contenido.
Validación
- Utilice la validación del lado del cliente o del lado del servidor en los formularios, según la complejidad del formulario y el caso de uso.
- Utilice mensajes de estado de campos para mostrar los resultados de la validación del lado del cliente en campos individuales.
- Indique el estado del campo con mensajes apropiados para ayudar a los usuarios a solucionar errores.
- Utilice notificaciones emergentes para mostrar mensajes de validación de formularios del lado del servidor.
- Si se prevé que las llamadas al servidor para la validación causen demoras, utilice el cargador para indicar el estado del sistema.
Elementos de formulario de la interfaz de usuario
| Tipo | Propósito |
|---|---|
| Entrada de texto y área de texto | Ingresar texto y números en los campos de entrada de datos. |
| Botones de selección | Seleccionar solo una opción de una lista de 6 opciones o menos. |
| Menú desplegable, búsqueda | Seleccionar solo una opción de una lista de más de 6 opciones. |
| Casilla de verificación | Seleccionar una o más opciones de una lista. |
| Botón de conmutación | Seleccionar las opciones opuestas. |
| Selector de fechas | Seleccionar una fecha, hora o intervalo de fechas. |
| Cargador de archivos | Cargar uno o más archivos en el formulario. |
| Control deslizante | Seleccionar un valor numérico dentro de un intervalo especificado. |
| Selector numérico | Aumentar o disminuir gradualmente un valor numérico. |
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.
Agrupamiento de los campos de forma lógica
Si el formulario requiere que los usuarios ingresen muchos datos, agrupe los campos relacionados. Esto ayuda a los usuarios encontrar el sentido a la información que deben completar. Por ejemplo, el nombre y la fecha de nacimiento de un usuario podrían clasificarse como Información personal. La dirección y el número de teléfono podrían incluirse en Información de contacto.
Fuente: Nielsen Norman
Marcado de los campos obligatorios
Use un asterisco para marcar los campos obligatorios. El asterisco debe preceder al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo. Si bien no es obligatorio, también puede marcar campos opcionales para reducir aún más la carga cognitiva de los usuarios.
Fuente: Nielsen Norman
Explicación para los requisitos de entrada y formato
Si hubiera requisitos específicos que un usuario debe seguir para ingresar datos correctamente, indique las instrucciones exactas. No haga que los usuarios tengan que adivinar, por ejemplo, los requisitos de contraseña o el formato de una fecha. Para sugerencias o instrucciones que sean esenciales para completar el formulario, coloque ese texto fuera del campo para que siempre esté visible.
Fuente: Nielsen Norman
Evitar el texto de marcador de posición
El texto de marcador de posición causa diversos problemas de usabilidad. Cuando los usuarios comienzan a escribir, el texto del marcador de posición desaparece. Esto pone a prueba la memoria a corto plazo de los usuarios. Además, el texto de marcador de posición a menudo tiene poco contraste, lo que significa que los usuarios con baja visión podrían tener dificultades para leerlo.
Fuente: Nielsen Norman
Accesibilidad
- Todos los campos deben tener un rótulo aria apropiado que denote el propósito previsto del campo.
- Use
aria-describedbypara texto complementario más largo que sea accesible para los usuarios de lectores de pantalla. - El color no debe utilizarse como único medio para comunicar situaciones de error. Use texto e íconos complementarios para ayudar a los lectores de pantalla a anunciar errores y regiones activas a medida que se producen errores globalmente.
- En el caso de las imágenes decorativas que no aportan información al contenido de la página, proporcione un texto alternativo vacío (alt="") para que las tecnologías de asistencia las ignoren. Fuente: Iniciativa de Accesibilidad Web W3C: Imágenes decorativas
Capacidad de ser responsive
La composición y disposición de formulario de varias columnas se ajusta de modo que las columnas se apilan una debajo de la otra en pantallas estrechas (móviles) y las imágenes quedan del mismo ancho que los elementos de la interfaz de usuario que se encuentran debajo. Las imágenes se pueden eliminar o colocar de tal manera que no afecten a los elementos críticos que se presenten al usuario.
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
Componentes relacionados
- Selector de fechas
- Botón de conmutación
- Enlace
- Botón
- Selector de hora
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.