Usabilidad y diseño de formularios

Hola en este articulo os hablare de usabilidad y diseño de formularios. Cuando diseñamos un formulario debemos partir de la premisa que el usuario detesta rellenar formularios y que debemos facilitar en la medida de lo posible su compresión , introducción  y limitar los posibles errores con el objetivo de obtener:

• Menor número de abandonos.
• Mayor número de registros obtenidos
• Calidad de los registros obtenidos.

Para conseguir esto debemos seguir una serie de normas:

• Una presentación visual clara.
• Un etiquetado descriptivo e intuitivo.
• Eligir los controles adecuados para cada tipo de información solicitada
• Mostrar al usuario de forma clara las acciones que va a relizar.

Presentación visual clara

Debemos crear el formulario con una presentación que inspire al usuario facilidad. Para ello debemos diseñar un formulario simple,limpio e ordenado.Con ello conseguiremos un formulario que:

• Facilita su lectura
• Dirige la atención a los aspectos esenciales
• Aumenta la efectividad, ya que favorece que cumplan sus objetivos.
• Mejora la eficacia al reducir el esfuerzo y los errores

Técnicas a seguir para lograr un formulario claro, ordernado y simple

• Reducir el número de elementos de la página a los necesarios
• Eliminar repeticiones innecesarias
• Minimizar el uso de cajas, bordes y líneas.
• Aumentar los espacios blancos, para favorecer el descanso de los ojos y facilitar la visualización.
• Reducir elementos de distracción
• Limitar las instrucciones al mínimo necesario.

Ejemplo de un formulario claro

Etiquetado descriptivo e intuitivo

Un correcto etiquetado nos permitira:

• Conseguir registros con la información adecuada.
• Menor número de errores y por lo tanto mejor número de abandonos.

Técnicas a seguir para lograr un correcto etiquetado

• Nombres de etiquetas decriptivas.
• Aportar información acerca del contenido.
• Mostrar que elementos son obligatorios.

Eligir los controles adecuados

A la hora de elegir el control más adecuado debemos tener en cuenta:

• ¿Es más natural para los usuarios teclear la respuesta
  que seleccionarla?
• ¿Es fácil escribir mal las respuestas?
• ¿Necesita el usuario ver antes las opciones para
  entender claramente la pregunta?
• ¿Cuántas opciones hay?
• ¿Puede el usuario seleccionar más de una opción?
• ¿Están las opciones visualmente destacadas?
• Permitir introducir datos en el formato en que están acostumbrados

Una vez elegido el control debemos seguir unas sencillas normas:

• Ajustar el tamaño del campo de texto al dato esperado.
• Ofrecer pistas, modelos o ejemplos en las preguntas

Ejemplo de formulario con controles usables

Acciones claras

A llegado la hora de la verdad , nuestro usuario ha rellenado todo el formulario ¿y ahora que?; eso mismo se esta preguntando nuestro usuario. Para resolver esta pregunta y conseguir mayor número de registros debemos:

• Mostrar al usuario en que punto del proceso se encuentra
• Mostrar claramente que tipo de acción se va a efectuar en el botón de envio, no vale un OK

Para lograr esto podemos usar las siguientes técnicas:

• Diferencia la acción principal de las secundarias
• Migas de pan que muestren al usuario en que paso se encuentra.
• Bloqueo del boton de envio despues de ser pulsado con texto descriptivo . Ej: “Enviando información…”

Ejemplo de buena práctica

• Diseño defensivo en formularios
• Microinteracciones en el diseño de formularios