Diseño de formularios – Composición visual

Antes de empezar: el concepto de formulario no se limita a los FORM de html y del mundo web, el formulario nace antes de Internet y perdura más allá de él. Los podemos encontrar en los cajeros automáticos, en las aplicaciones ofimáticas y hasta en los móviles. Por esta razón y para ayudar a generalizar este concepto, en los ejemplos que aquí se muestran no se han utilizado formularios web.

Espacio en blanco

Los formularios han de dar sensación de claridad evitando lo que podríamos llamar el exceso de tinta (texto, líneas, recuadros, iconos, etc.).

Para ello las principales recomendaciones son:

• El espacio ocupado por texto y grafismos no debe sobrepasar el 40% del total.
• Eliminar grafismos innecesarios. Por ejemplo, no abusar de los recuadros de grupo y sobretodo nunca poner un recuadro de grupo dentro de otro.
• Sustituir líneas y recuadros de separación por espacio en blanco.
• En formularios de entrada de datos, pedir solo la información necesaria minimizando los campos opcionales.
• En formularios en los que se ofrezca información a consultar, debe mostrarse solo información relevante.
• Redactar textos cortos para las etiquetas de campos eliminando palabras innecesarias.

Organización de los elementos

La organización de los elementos dentro del formulario depende de dos factores: a) las relaciones entre unos elementos y otros; b) la prioridad en el orden de colocación de estos elementos.

a) Relaciones lógicas entre los elementos
La ubicación de un elemento en un punto determinado de la pantalla puede ayudar a comunicar una relación lógica con otros elementos ayudando a su comprensión.
Las principales recomendaciones son:

• Proximidad: la cercanía de los elementos comunica una relación entre ellos.
• Agrupación: crear grupos de elementos relacionados y separar los grupos para clarificar diferencias.
• Inclusión: indica las jerarquías de los elementos. Para ello se pueden alinear unos más a la derecha que los otros o bien incluirlos dentro de un recuadro.

b) Prioridad en el orden de colocación
La prioridad en el orden de colocación de los elementos vendrá dada por los intereses y necesidades del usuario. Para ello se tendrán en cuenta los siguientes criterios:

• Sus prioridades en la introducción de datos: si es posible, colocar los datos obligatorios en primer lugar y también aquellos que deban ser utilizados con más frecuencia.
• Si el formulario es de consulta también deberemos intentar ofrecer en primer término los datos que sean más relevantes.

Estética y orden visual:

Muchas veces se da poca importancia a la composición estética de los formularios. Debemos desconfiar de los formularios poco agradables visualmente ya que por lo general és un síntoma de poca usabilidad. Los diseños estéticamente satisfactorios contribuyen a orientar al usuario en la dirección de lectura y de entrada de datos.
Las principales directrices para conseguir un buen diseño son: consistencia, alineación y proporción.

a) Consistencia:
Este es un principio general de usabilidad que podría definirse como la similitud visual y de comportamiento de los componentes que tienen la misma función. Es decir, los campos deben tener el mimo aspecto, los botones también y además deben comportarse igual. Para el usuario esto tiene muchas ventajas ya que reduce el tiempo de aprendizaje y aumenta el grado de reconocimiento de los elementos en nuevas situaciones.

Una buena práctica para conseguir un alto grado de consistencia es la de seguir alguna guía de estilo. Primero, si la hay, la de la empresa para la que estemos desarrollando; si no, podemos echar mano de algún estándar más o menos reconocido. En el caso de aplicaciones Java podemos utilizar la Java Look and Feel Design Guidelines, para aplicaciones Windows, Microsoft también ha creado sus estándares y para aplicaciones web, qué decir, la misma red está llena de recomendaciones.

b) Alineación:
La alineación proporciona orden visual ayudando a agrupar la información relacionada y a crear relaciones jerárquicas de inclusión. En un próximo artículo se tratarán más extensamente las principales directrices de alineación de los diversos componentes de un formulario.

c) Proporción:
La proporción en un formulario implica que los componentes que lo forman, campos, botones, etiquetas, etc., deben tener una aspecto visual que respete una cierta proporción entre ellos y su distribución en el formulario. Por lo general, todas las guías de estilo determinan los diversos tamaños aconsejados de cada uno de los elementos y la separación que debe haber entre ellos.

Una buena práctica para conseguir una distribución proporcionada de los elementos consiste en trazar una cuadrícula de diseño. Las líneas de la cuadrícula definirán espacios en blanco para separar, agrupar y alinear los componentes. Algunas herramientas de diseño permiten también utilizar líneas guía además de cuadrículas. La separación entre las líneas de la cuadrícula o de las guías se establecerá a partir de una separación básica que, normalmente, tomaremos de la guía de estilo, si disponemos de ella.

Ejemplo de diseño utilizando cuadrícula y líneas guía

Para terminar, a continuación se muestra en ejemplo de diseño de formulario utilizando cuadrícula de diseño y líneas guía.

Medios utilizados en el ejemplo:

• Guía de estilo: Java Look and Feel Design Guidelines
• Herramienta de diseño: Macromedia Fireworks (otras herramientas permiten funciones similares como, por ejemplo: Macromedia Dreamweaver, Microsoft Visio e incluso Microsoft PowerPoint)

Ejemplo a diseñar: Formulario en una ventana de Windows XP destinado a la introducción de los datos de un nuevo contacto en un directorio. Partiremos de la siguiente maqueta hecha a mano alzada.

Paso 1:
Crear una ventana con cabida para los elementos en horizontal. Para ello aplicaremos una cuadrícula de 30 px de separación y, siguiendo la guía de estilo, reservaremos un margen de 12 píxeles entre los componentes y el borde de la ventana.

Paso 2:
Colocaremos los primeros componentes ajustándolos a los márgenes y a la cuadrícula.

Paso 3:
Seguir añadiendo elementos. Podemos quitar la cuadrícula y utilizar líneas guía para marcar las separaciones de 6 px entre los elementos (o múltiplos de 6).

Paso 4:
Utilizar líneas guía verticales para marcar separaciones cuando sea necesario.

Nota: Este artículo es continuación del titulado «Diseño de formularios – Conceptos básicos«.