En el mundo actual utilizamos formularios para prácticamente todo: trabajos, propuestas, encuestas, etc

En general, los formularios suelen venir en forma de una caja que contiene: etiquetas, campos y botones CTA. El uso de los formularios se extiende a miles de posibilidades:

  • Inicio de sesión/registro
  • Datos para la compra
  • Reservas de entradas
  • Reservas de habitaciones
  • Proceso de Checkout
  • Suscripciones/Newsletters
  • Consultas
  • Donaciones
  • Encuestas
  • Y mucho más

Para empezar hay 1 regla principal en cuanto a diseño:

Haz pruebas con Usuarios reales y nunca rechaces la opinión de un usuario, aunque no estés de acuerdo

Realizar pruebas con usuarios reales ayuda a valorar métricas como el tiempo de interacción, los pain points, interacción con el formulario, dónde encontraron obstáculos o por qué no encuentran los elementos necesarios para su propósito

Realizar estas pruebas ayuda enormemente a evitar los errores en los formularios

#1 – Evita los campos en Zig-Zag

Evita los campos en Zig-Zag, se ha demostrado a través de estudios de “Eye tracking” que los usuarios pierden más tiempo pasando de un campo a otro y que tienen más problemas para encontrar el siguiente campo

El diseño más efectivo es el más simple, una columna de arriba a abajo

#2 – Agrupa la información relacionada

Los campos agrupados dan una imagen más organizada, clara y limpia así que siempre es buena idea agrupar campos en secciones con títulos o separadores

Además, los campos agrupados bajo un título ayudan a los usuarios a recordar bajo que agrupación estaba en el caso de que quieran modificar alguna información

#3 – No obligues a los usuarios a encontrar los errores

La información de los campos debe ser validada en tiempo real. No se debe obligar a los usuarios a rellenar los campos y darse cuenta que hay un error al pulsar enviar

Además, los avisos de errores deben apuntar claramente al campo incorrecto

Cuando crees un formulario, asegúrate que todos los campos son realmente necesarios, únicos y no repetitivos. Esto genera una sensación de pesadez que destruye la tasa de formularios completados

Además, siempre es una buena idea mostrar al participante cual es su progreso o cuanto pasos más ha de rellenar.

#4 – Evita campos duplicados y utiliza una barra de progreso

#5 – Usa autocompletar

Los usuarios somos cómodos – Una verdad universal

Así que, si tienes la oportunidad de hacer su vida más fácil, te lo agradeceremos. El autocompletado reduce el tiempo necesario en un 30%. Tómate el tiempo para ver que campos son “autocompletables” (Nombre, teléfono, país, email, etc)