El nuevo blog de alzado está en alzado.org/blog





Portada > Artículo

Diseño de formularios - Composición visual

04-03-2005 - Josep Casanovas

Resumen: Un buen diseño visual de formulario es aquel que ayuda al usuario a entender con facilidad la información a introducir. Debe ser sencillo, estéticamente satisfactorio y su elementos organizados teniendo en cuenta el punto de vista del usuario y no el de la estructura interna de la aplicación.

Debate (30 comentarios) | Valoración media: 2,96 | Votos: 8749 | Lecturas: 133271

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.


ejemplo de formulario

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.


ejemplo de formulario con inclusión

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.


ejemplo de formulario con prioridad

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:
?ste 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.


ejemplo de formulario con proporcion

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.


maqueta 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.


tabla comparativa hosting

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


tabla comparativa hosting

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).


tabla comparativa hosting

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


tabla comparativa hosting

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

Comentarios

Debate en torno a este artículo: Debate (30 comentarios)

Quieres dejar tus comentarios a este artículo? Acude a la página de Comentarios

Puntúa este artículo 1 punto 2 puntos 3 puntos 4 puntos 5 puntos

Ofertas de Empleo

Más ofertas »

RSS Ofertas de empleo

autor: Josep Casanovas

Autor: Josep Casanovas

Ingeniero de Software. Desarrolla su actividad en "la Caixa", imparte habitualmente cursos y seminarios.

Artículos publicados: 16

Búsquedas

  

Otros artículos

Archivo »

Aviso de novedades

Recibe todas las novedades de alzado en tu correo.

Todo sobre alzado

De interés

Publicar en alzado »

© Alzado.org | Algunos derechos reservados. Licencia Creative Commons