Cuando de formularios se trata, la web está repleta de excelentes ejemplos, pero también de especímenes para desechar completamente. La concepción de mal o buen diseño pasa en gran medida por la usabilidad: la experiencia del usuario.

La cosa se complica cuando el formulario debe ser extenso, a veces incluyendo decenas de campos para completar… ¿Qué hacer? La clave es la organización, agrupado los campos en grupos significativos utilizando tres patrones básicos…

1. Divide al formulario en pestañas

Esta puede que no sea la solución perfecta pero te ayudará de seguro a reorganizar el formulario.

Básicamente el patrón de pestañas es muy simple pero tienes que tener cuidado al agrupar los campos. Deben estar agrupados de acuerdo a las reglas del negocio o a las preferencias del usuario. De ser posible, intenta hablar con usuarios que vayan a utilizar el sistema, eso te ayudará a entender cómo funciona el proceso real y cómo es la mejor form de diseña el formulario.

El lado malo de esta solución es que los usuarios no podrán ver el formulario completo de una sola vez.

2. Divide el formulario en regiones expandibles y contraíbles

Este es similar a las pestañas.

Aunque el patrón de los paneles plegables es utilizado mayoritariamente para la navegación, también puede utilizarse en esta ocasión.

La diferencia entre estas dos opciones es que en este patrón el usuario puede ver el formulario completo si expande todas las regiones.

3. Divide el proceso de rellenar el formulario en varios pasos

Si tienes procesos de negocio que soportan esto, deberías definitivamente utilizar este patrón. Puedes dividir el proceso de completar el formulario en varios pasos. Esto no sólo hará que completar toda la información necesaria sea más fácil sino que también guiará al usuario a través de todo el proceso. Puedes utilizar dependiendo de las reglas del negocio los patrones: Setps Left o Wizard.

De acuerdo a UI-Patterns, estos son los casos en que el patrón Steps Left puede ser utilizado:

steps
  • Utilizarlo cuando el usuario está por comenzar un largo formulario mayor a dos pantallas (o pasos generales).
  • Utilizarlo cuando los pasos de un proceso son tan largos que el usuario puede que tenga la impresión de que continuará por siempre si no tiene la guía de los pasos.
  • No utilizarlo cuando hay sólo 1 o 2 pasos para ingresar los datos al sitio.
  • No utilizarlo cuando el proceso de completar la información es fácilmente previsible.

Y estos son los casos en que el patrón Wizard se puede utilizar:

wizard
  • Utilizarlo cuando el usuario debe realizar una tarea o meta que requiere más de un paso.
  • Utilizarlo cuando el usuario necesita realizar una tarea compleja consistente de varias sub-tareas dependientes.
  • Utilizarlo cuando partir el proceso en múltiples pasos facilite la tarea de comprender las instancias del formulario.
  • Utilizarlo cuando es necesario guiar al usuario: es el caso de cuando desea lograr una meta general, pero puede que no esté familiarizado con los pasos necesarios para alcanzar esta meta.
  • Utilizarlo cuando los pasos necesarios para alcanzar la meta final pueden variar debido a decisiones tomadas en los pasos anteriores.
  • Utilizarlo cuando al usuario le falta conocimiento necesario para completar el formulario.
  • Utilizarlo cuando el usuario debe completar pasos en una secuencia específica.

Fuente: Janko At Warp Speed

[[Sigue en: http://cursotallers.blogspot.com]]