Construir un formulario

Los formularios permiten a las personas interactuar con el sistema, ingresando, editando o confirmando información. Un diseño claro y ordenado facilita la comprensión de cada paso y ayuda a completar las tareas sin fricción.

Uso

Cuándo usar

  • Para crear una cuenta o iniciar sesión.
  • Para registrarse en un servicio, programa o beneficio.
  • Para solicitar turnos o inscribirse en actividades.
  • Para completar una transacción.
  • Para configurar o modificar preferencias y datos de perfil.
  • Para responder encuestas de feedback.

Buenas prácticas

Antes de construir un formulario, es fundamental comprender quiénes lo van a usar. Para eso, se recomienda realizar investigaciones UX, como entrevistas, encuestas, análisis de soluciones similares y testeos con personas usuarias.

Seguir los lineamientos de diseño y desarrollo ayuda a garantizar formularios usables y accesibles. Además, muchos recopilan datos sensibles, por lo que es clave respetar las normas de privacidad y seguridad.

  • Sólo campos necesarios: formularios breves facilitan la carga y reducen errores.
  • Protección de datos: los formularios deben cumplir con las normativas vigentes de privacidad y protección de datos personales.
  • Sin redundancias: no pedir información que ya haya sido proporcionada. Si el dato está disponible en el sistema, puede mostrarse en modo solo lectura (read-only).
  • Autocompletado:cuando sea posible, ciertos campos pueden completarse automáticamente. Por ejemplo, cargar el código postal tras ingresar el domicilio.
  • Tipo de campo adecuado: elegir el formato correcto según el tipo de dato.
  • Orden lógico: disponer los campos de forma coherente. Por ejemplo, país antes que ciudad.

Elementos que componen un formulario

  1. Título del formulario y bajada descriptiva.
  2. Campos de entrada (Inputs).
  3. Accionables.
Anatomía de Elementos que componen un formulario

Título del formulario y bajada descriptiva

Título del formulario

Identifica al formulario y brinda información sobre la acción a realizar.

Mala práctica en patrones de formularios ejemplo 1
close

Evitar el uso de tecnicismos o siglas internas que las personas desconocen.

Buena práctica en patrones de formularios ejemplo 1
check

Indicar la acción que están realizando las personas al completar el formulario.

Bajada descriptiva

Aporta contexto y brinda instrucciones claras, ayudando a que las personas sepan qué información necesitan y cuánto tiempo estimado les llevará completar el formulario.

Buena práctica en patrones de formularios ejemplo 2
close

La bajada no orienta, ni anticipa qué se necesita o cuánto tiempo tomará.

Mala práctica en patrones de formularios ejemplo 2
check

La bajada aporta contexto, requisitos y duración estimada, usando un lenguaje claro y cercano.

Tipos de Input

Cada tipo de input tiene una funcionalidad específica. Es importante elegir el indicado según el dato que se requiera.

Inputs de texto

Para conocer más sobre usos, especificaciones de código y accesibilidad, consultar la ficha de Inputs de texto.

Text

Permite ingresar una línea de texto de pocas palabras.

Input de texto - Texto

Text Area

Permite ingresar múltiples líneas de texto.

Input de texto - Textarea

Password

Permite ingresar contraseñas y datos sensibles.

Input de texto - Password

Email

Permite ingresar un correo electrónico.

Input de texto - Email

Number

Permite ingresar números.

Input de texto - Number

Tel

Permite ingresar un número telefónico.

Input de texto - Telefono

Date

Permite ingresar una fecha.

Input de texto - Date

Time

Permite ingresar un horario.

Input de texto - Time

Input de búsqueda

Para conocer más sobre usos, especificaciones de diseño y código, y accesibilidad, consultar la ficha de Search.

Search

Permite buscar información.

Input de búsqueda

Inputs de selección

Para conocer más sobre usos, especificaciones de diseño y código, y accesibilidad, consultar las fichas de Select, Radio y Checkbox.

Select

Permite seleccionar un valor único o múltiples valores dentro de una lista desplegable de opciones.

Input de selección - Select

Radio

Permite seleccionar un único valor dentro de un número limitado de opciones.

Input de selección - Radio

Checkbox

Permite seleccionar cero o múltiples valores dentro de un número limitado de opciones.

Input de selección - Checkbox

Input de carga de archivo

Para conocer más sobre usos, especificaciones de diseño y código, y accesibilidad, consultar la ficha de File.

File

Permite cargar uno o múltiples archivos.

Input de carga de archivo

Accionables

Se colocan al final del formulario y sirven para enviar la información ingresada, guardar, avanzar o retroceder. Para más lineamientos consultar la ficha de Botones.

Mala práctica en patrones accionables ejemplo 1
close

Evitar términos ambiguos como "Enviar" o "Aceptar".

Buena práctica en patrones accionables ejemplo 1
check

Relacionar el texto de los accionables con el contenido del formulario para mayor claridad.

Mala práctica en patrones accionables ejemplo 2
close

Evitar términos vagos como "Volver" y "Continuar" para avanzar o retroceder en un formulario multi-página.

Buena práctica en patrones accionables ejemplo 2
check

El texto de los botones debe indicar claramente que se avanza o retrocede en un mismo formulario.

Navegación de pie de página