Micaela 13 de marzo de 2009 a las 10.16
   Imprimir artículo
elWebmaster.com

Breve gu√≠a para dise√Īar y desarrollar formularios extensos


formsCuando 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:

  • stepsUtilizarlo 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:

  • wizardUtilizarlo 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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. fsdfsdf dice:

    Muy bueno, gracias.

    Un saludo!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder