Estructura básica de un formulario
En esta sección se encontrarán dos versiones de lo que se propone como estructura básica de un formulario, en versión móvil y escritorio.
Versión móvil
Versión escritorio
Elementos de un formulario
Un formulario se divide en los siguientes elementos:
- Título del formulario: describe el contenido, desde el primer paso hasta el último. Figura en todos los pasos sin modificaciones.
- Pasos del formulario: es una secuencia que indica, en escritorio, la cantidad total de pasos y una pequeña descripción de cada uno de los pasos a dar, y en móvil, solo la cantidad total de pasos (porque la pantalla es más pequeña y no cabe toda la información). Los pasos son una guía para ubicar a la persona usuaria, no tienen una exigencia de un rigor matemático de exactitud y precisión. Son útiles para dar una idea de la extensión total del formulario y del nivel de avance actual. Si bien pueden tener enlace para poder navegar, no son en general la mejor herramienta para ello, salvo que se diseñen específicamente.
- Título del paso: describe el paso actual dentro de todo el proceso. Es distinto del título del formulario y distinto para cada paso.
- Grupo de campos: representan una agrupación lógica de campos dentro de un paso. En móvil los separa el título y el uso del espacio en blanco, (porque en general no hay lugar para recuadros). En escritorio sí están enmarcados con un recuadro y llevan un título de grupo alineado.
No hay un número máximo de campos para incluir en un grupo, pero es muy importante cuidar que las agrupaciones sean razonables para la persona usuaria y que cada uno de los pasos se mantenga en todo momento equilibrado.
- Acciones: todas las acciones del formulario se encuentran al pie. Siempre debe haber una (y solo una) resaltada con el formato de botón que indique la acción a ejecutar por omisión. Las demás acciones se muestran como vínculos o como botón de acción secundaria. Deben tener siempre una apariencia clara de elementos de menor jerarquía. La tecla “Intro” del teclado físico o su equivalente en el teclado virtual del móvil tiene que funcionar en todos los casos de la misma forma que realizar clic en el botón de la acción por omisión del formulario.
El formulario del ejemplo tiene un estilo minimalista, focalizado en resaltar la estructura de un buen formulario digital. El estilo se puede adaptar a las necesidades y lineamientos estéticos de cada solución digital. Sin embargo, esta tarea debe ser hecha de tal forma que siempre sea posible ver con facilidad los elementos que componen el formulario.