Formularios: Usabilidad en el diseño de formularios

En corto: Luke Wroblewski presenta 3 motivos que justifican la existencia de formularios en su libro “Web Form Design: Filling in the Blanks” a saber: comercio, comunidad y productividad.

Los formularios son una herramienta esencial en el mundo digital, facilitando el comercio, la creación de comunidades y la productividad. Sin embargo, su diseño puede ser un desafío. En este artículo, exploraremos cómo mejorar la usabilidad en el diseño de formularios.

|Etiquetas

Es el texto que indica qué información introducir en cada campo en un formulario, ya sea en Web o para una App.

• Cantidad de palabras: Una o dos palabras serán suficientes. En algunos casos, una oración más larga quizás se requiera para eliminar alguna ambigüedad.

• Consistencia: Utilizar siempre las mismas etiquetas para los mismos conceptos, esto ayudar a que el usuario tenga certidumbre de los elementos y sus acciones.

• Minúsculas y mayúsculas: Cuando hay 2 o más palabras en una etiqueta, es requerido aplicar la mayúscula sólo a la primera letra de la 1a palabra, para no entorpecer la lectura. Así mismo, no utilizar todo el texto en mayúsculas ya que su lectura es más lenta y difícil de conseguir.

• Posición y alineación: Para que el usuario complete de forma rápida el formulario, es conveniente colocar las etiquetas encima de cada campo.
  Cuando no se tenga mucho espacio vertical, colocar las etiquetas de lado izquierdo del campo, con una alineación a la derecha.
  Si la información a llenar es compleja, es conveniente colocar las etiquetas al lado del campo, alineado a la izquierda; por muy extraño que parezca, con esta técnica el usuario es obligado a leer de forma más atenta la información a llenar en los campos.

|Campos de información

Son elementos que incluyen tanto campos de texto, como checkboxes, radio buttons y drop-downs.

• Tamaño de los campos: El tamaño de los campos debe corresponder a la longitud de la información a introducir. El ancho debe ser homogéneo, con esto se evita el ruido visual.

• Tipos de campos: Proporcionar el tipo de campo según la información que se requiera. Por ejemplo, utilizar radio buttons si el usuario debe seleccionar sólo una opción entre varias; utilizar check boxes si el usuario debe elegir más de una opción.

• Flexibilidad: Los campos deberán ser lo suficientemente flexibles para admitir el ingreso de datos de cualquier formato -paréntesis, guiones, etc- siempre y cuando no se vulnere la seguridad de esta por inyección de código.
  Si por lo anterior no es posible, proporcionar una alternativa. Por ejemplo, en vez de mostrar el formato MM/DD/AA utilizar 3 drop-downs, o mejor un date-picker.

• No fragmentar el pedido de información: Deberá evitarse el pedir información por separado a menos que sea muy necesario. Por ejemplo, el nombre y el apellido o la calle y colonia son datos que deberían llenarse dentro de un mismo campo.
  Normalmente estos campos -Nombre, apellido y campos similares- se piden de esta forma, debido a las limitaciones de consulta y filtrado en las bases de datos; pero esto dependerá de la calidad de trabajo de cada “backend”.

• Campos obligatorios y opcionales: Mostrar con claridad los campos que son obligatorios de los que son opcionales. Se logra usando un asterisco (*) en el margen derecho de cada campo, mostrando el texto al final del formulario que indique “campo obligatorio”.
  • Para definir si marcamos los obligatorio o los opcionales, dependerá de lo siguiente:
  • Indicar los campos obligatorios cuando sean menos que los opcionales.
    Indicar los campos opcionales cuando sean menos obligatorios.
  • Aunque hay que irnos con cuidado ya el usuario no le e interpretará que cualquier campo que este marcado con asterisco (*) será obligatorio.

|Acciones

Son links o botones que, al darles clic, permiten al usuario llevar a cabo una acción -call to action- determinada como el envío del formulario.

• Distinguir acciones primarias y secundarias: Dentro de las acciones primarias se encuentran “Guardar” y “Enviar”. En las secundarias se encuentran “Regresar” y “Cancelar”. cuando se les da clic por error puede conducir a los usuarios a perder la información completa, por eso siempre es recomendable no incluir acciones secundarias.
  Por el contrario, si es necesario lo anterior, se requiere de darle jerarquía visual menor, mostrando las acciones principales con botones y las secundarias como text links (usando el principio de usabilidad “contraste”).

• Wording: Evitar el uso de textos genéricos como en los call to action, como “Enviar, Siguiente, Continuar, etc” y en su lugar utilizar palabras o frases que describan la acción que se está llevando a cabo. Ej: “Registrarse”, con la finalidad de dar más certidumbre al usuario, de lo que se hará, o de lo que se viene.

|Ayuda

Son los textos de asistencia o micro soporte para completar el formulario.

• Soporte:  La información de ayuda debe ser un soporte sólo los escenarios donde sea estrictamente requerido; por ejemplo, para explicar por qué se requiere los datos de la tarjeta de crédito u otro dato sensible para el usuario. Así mismo los textos no deberán pasar de las 100 palabras.

• Lugar del texto:  Sólo debe mostrarse en los campos en donde se requiera. Deberá incluirse un icono al lado del campo a completar, para que el usuario haga uso de él cuando tenga dudas.

|Mensajes en formularios 

Es el mensaje de feedback del sistema en acorde a los datos introducidos por el usuario, normalmente son de alerta, de error o validación.

• Mensajes de error: Se deberá mostrar el texto junto al campo correspondiente, resaltando con color -generalmente rojo- y si es posible, con un icono -como por ejemplo el de alerta-. De igual forma usar un tamaño de fuente más grande.
  El mensaje tendrá que ser redactado de forma positiva, mencionando cómo completar correctamente el campo donde existe el error. 

• Mensajes de error en formularios grandes:  En formularios grandes y en la cual la validación sea después de dar clic en el call to action, procurar anclar la vista del usuario al error del campo, así no tendrá que buscar en todo el formulario donde está el error.
  Ahora bien, lo ideal en temas de validación de errores, es mostrarlos en tiempo real ya que para el usuario será muy frustrante llenar un formulario y al final salten errores de validación.

• Mensajes de éxito: Cuando el usuario complete el formulario, se le deberá indicar si el envío se ha realizado correctamente y qué debe esperar como resultado.

|Validaciones

Normalmente usados en el registro y validación de usuarios, garantiza que los datos ingresados por el usuario se ajusten a ciertos parámetros.

• Cuando sea necesario:  Usar las validaciones en casos concretos, como en la disponibilidad de nombre de usuario y contraseña; en tales casos proporcionar una alternativa en base a la información ingresada si hay similitudes.

• Valores predeterminados: Para acelerar el ingreso de datos, hay cierta información que se puede autocompletar. Por ejemplo, al llenar la información de “Dirección”, en la colonia o la entidad se deberían autocompletar al ingresar el Código Postal.

|Otros

• Colocar un título general al formulario:  El título del formulario debe explicar al usuario por qué tiene que completarlo. 

• Ordenar los campos de forma lógica: Justin Mifsud (2011) Menciona que “hay que reflejar el flujo de una conversación, pidiendo la información adecuada en el momento indicado”.
  Por ejemplo, preguntar el nombre antes que el teléfono. Con esto se logra involucrar al usuario poco a poco, dejando así, las preguntas más personales hasta el final

• Agrupar los campos: Agrupar campos relacionados por temática. Por ejemplo, Agrupar por, datos básicos, Dirección, datos de contacto, etc.

• Reutilizar campos cuando sea posible: Por ejemplo, en el registro de un usuario, utilizar el email como nombre de usuario. Esto permitirá reducir la cantidad de campos requeridos y además no forzará al usuario a tener que recordar este dato cada vez que inicie sesión.

• Progreso: El mostrarle al usuario el progreso del llenado de los datos, lo ayudará a tener más certidumbre de que tanto falta para finalizar. Normalmente se usa en formularios grandes, esto no debería de ser limitante para usarlo en formularios más cortos.
  Mencionado lo anterior, es recomendable utilizar numeración o puntos, que porcentajes, así también se sabrá si se está optimizado la petición de información o no.

• Guardar: En formularios extendidos o demasiado largos, se deberá ofrecer la opción de retomar el llenado de este, guardando el punto desde donde se quedó; es decir ofrecer un botón de guardar o que el propio sistema lo haga de manera automática. 

Conclusión

El diseño de formularios es una parte esencial de la experiencia del usuario. Un formulario bien diseñado puede facilitar la interacción del usuario con una plataforma digital, mientras que un formulario mal diseñado puede frustrar al usuario y llevar a una mala experiencia.

Al seguir los consejos y recomendaciones presentados en este artículo, puedes mejorar la usabilidad de tus formularios y, en última instancia, mejorar la experiencia general del usuario.