Diseñando Formularios más efectivos

Los Forms podrían tener incluso los siguientes elementos:

• Asistencia. Cualquier tipo de ayuda que explica, por ejemplo, como llenar el formulario.
• Validación. Checkeo automático que garantiza que el Usuario ingresó datos válidos

Estructura del Form

Un formulario es una conversación. Y como toda conversation, esta debe estar estructurada de manera lógica, entre dos partes— el Usuario y tu app.

Sólo pregunta lo necesario

Asegúrate de que sólo preguntas lo que realmente necesitas. Cada campo extra que agregas a un form va a impactar en el rate de conversión. Esa es la razón por la que siempre debes preguntar PORQUÉ y CÓMO será usada la información que pedimos a los usuarios.

Organiza el Form de manera lógica

Los detalles deben ser preguntados en la lógica del Usuario, no en la lógica de la app, o de la base de datos. Comúnmente nadie te pregunta la dirección antes de solicitar tu nombre.

Agrupa la información relacionada

La continuidad entre un set de preguntas y otras debe imitar una conversación.

Una columna vs. Múltiples columnas

Los formularios nunca deberían consistir en más de una columna. El principal problema con los forms de multiples columnas, es que los Usuarios interpretan los campos de manera inconsistente. Si los campos aparecen de manera adyacente sobre el eje horizontal, el usuario debe escanearlos en forma de Z, alentando la velocidad de comprensión y “embarrando” el camino al completarlo. Pero si el formulario se encuentra en una sola linea, el camino es directo hacia el final de la página.

Campos (input fields)

Estos son los que permiten al Usuario completar tu form. Dependiendo en la información a completar, hay diferentes tipos de campos— campos de texto, de contraseñas, dropdowns, check boxes, radio buttons, selectores de fecha y otros.

Cantidad de campos

Intenta minimizar el numero de campos cuanto se pueda. Esto hace que tu formulario sea menos “pesado”

Obligatorio vs Opcional

Intenta evitar campos opcionales en tus formularios.

Sobre los valores por defecto (default values)

Debes evitar tener un valor por defecto a no ser que una gran proporción de tus usuarios (ej. 90%) va a seleccionar ese valor. Particularmente si es un valor obligatorio.

Pero smart defaults pueden hacer que el llenado del formulario sea mucho más rápido y efectivo.

En Computadoras: Haz al formulario Teclado-friendly

Los Usuarios deben poder navegar y editar cada campo usando solamente el teclado. Usuarios expertos, quienes tienden a usar el teclado mayormente, deben poder pasar de un campo a otro y hacer los cambios necesarios sin levantar los dedos del teclado.

Solo Celulares: Modifica los teclados en función de los datos a llenar por el Usuario

Los usuarios de las apps aprecian que les proveas del teclado correcto para el ingreso de texto. Asegúrate de que este implementado consistentemente en toda la app, y no solo para algunas tareas.

Labels (etiquetas)

Etiquetas claras es una de las formas primarias en hacer una UI más accesible.

Número de Palabras

Los labels NO son textos de ayuda. Debemos usar expresiones cortas, sucintas y descriptivas (una palabra, o dos) para que el Usuario pueda escanear rápidamente el formulario. 

Botones

Cuando se clickean, estos botones disparan una acción, como por ejemplo, enviar el formulario.

Acciones Primarias vs. Secundarias

Una diferenciación poco clara entre una acción primaria y una secundaria fácilmente lleva al usuario a cometer errores. Reduciendo la prominencia visual de las acciones secundarias minimiza el riesgo de errores potenciales y guía a nuestros usuarios envíos exitosos.

Convenciones en los nombres

Evita palabras genéricas como “Enviar” para las acciones, porque dan la sensación que el formulario en sí mismo es genérico. En su lugar deja claramente que va a ocurrir cuando el botón sea clickeado, como ‘Crea mi cuenta GRATIS’ o ‘Envíenme promociones Semanales’.