Al diseñar una página web, a menudo nos encontraremos con que tenemos que diseñar un formulario, en unos casos tendremos que diseñar formularios pequeños como los de registro, pero en otros podemos llegar a encontrarnos con formularios muy largos, que por algún motivo de programación no pueden dividirse en otros más pequeños.

A continuación os explico algunas de las condiciones que debemos de tener en cuenta a la hora de diseñar estos formularios.

¿Cómo diseñar un formulario?

En los tres casos de la figura, podemos ver la diferencia que hay a la hora de colocar los textos descriptivos de cada caja.

En el caso 1 conseguimos una buena legibilidad entre los textos y sus correspondientes cajas, en el caso 2 identificamos bien los distintos textos de caja, pero por otro lado contamos con el inconveniente de que cuando un texto es mucho más corto que otro, la distancia entre el texto corto y su caja dificulta mucho la identificación. Este problema se ve solucionado en el caso 3, pero por contra perdemos la legibilidad en vertical.

En cuanto al espacio, vemos que en las figuras 2 y 3 se reduce considerablemente el espacio vertical del formulario, ya que en el caso 1 nos obliga a meter dos lineas por casilla.

En definitiva, habrá que valorar el tipo de formulario al que nos enfrentamos y usar la opción 1 si disponemos de espacio y la opción 2 acompañada de un background que vaya identificando lineas y que facilite la conexión entre descripción y caja.

En cuanto a los botones, el botón del formulario siempre debe de estar al final del formulario y alineado a la derecha. En caso de que haya varios botones, uno primario (guardar, enviar,…) y otro secundario (atrás, borrar,…), deberemos seguir el siguiente criterio:

  • El botón primario debe de tener un mayor peso visual, para que el usuario vea con claridad el final del formulario.
  • Siempre alineado más a la derecha que los demás secundarios.