Zips del Conocimiento - Diseño de formularios: etiquetas

Resumen del recurso

Pautas de diseño y recomendaciones de usabilidad para la creación de etiquetas de texto en formularios web y GUI. Tabla de contenidos

1. Diseño de formularios: etiquetas
2. Tipografía
3. Redacción
4. Ubicación
5. Estados
6. Interacciones

1. Diseño de formularios: etiquetas

Las etiquetas son los textos que describen cada objeto o grupo de objetos que forman parte de un formulario. Por lo tanto siempre van asociadas a otros elementos, los cuales reciben el nombre de controles.

Las etiquetas ayudan al usuario a entender la función cada control del formulario. Entre otras cosas describen el contenido de los campos y dan nombre a los valores de las casillas de verificación (checkboxes) y de los botones de opción (radiobuttons).

2. Tipografía

Se recomienda usar tipos de letra sin serifa, es decir sin remates, como son los tipos Verdana, Arial y Tahoma. Esta recomendación sirve también para cualquier texto que aparezca en una pantalla.

El tipo Tahoma es el recomendado por Microsoft en el diseño de aplicaciones GUI en Windows. En el entorno web está muy extendido el tipo Verdana.

3. Redacción

1. Utilizar el lenguaje del usuario
Evitar el lenguaje técnico o especializado. Debemos investigar cuales son los términos usados por los usuarios para referirse a los conceptos que contiene el formulario y utilizarlos.

Por ejemplo, en un entorno de banca online, términos como "Reintegro", "Imposición" y "Transferencia" podrían ser sustituidos por "Sacar dinero", "Poner dinero" y "Enviar dinero".

2. Ser breve
No usar palabras innecesarias y colocar el texto en una única línea.

Por ejemplo, en un directorio el término "Teléfono móvil", "Dirección de correo electrónico" y "Número de fax" pueden ser sustituidos por "Móvil", "Correo electrónico" y "Fax".

3. Capitalizar la primera palabra
Deberá ir en mayúscula la primera letra de la primera palabra. Esto ayuda a identificar el inicio de una etiqueta.
En español, a diferencia del inglés, el resto de palabras llevarán la primera letra en minúscula, excepto si son nombre propios. Lo contrario confunde más que ayuda puesto que no es un uso habitual de nuestro idioma.

4. Palabras clave al inicio
Colocar al inicio de la etiqueta la palabra más significativa. Esto ayuda a la exploración y localización rápida de la etiqueta.

5. Evitar abreviaciones
Seguir las siguientes reglas cuando sea inevitable usar abreviaciones:

* Ser consistente: usar la misma abreviación siempre para la misma palabra.
* Seguir los estándares del usuario, su argot profesional o el de su organización. Por ejemplo: "Cial." por "Comercial" en un entorno financiero.
* Cuando no exista ningún estándar para una palabra, se preferirán las abreviaciones por truncamiento: Por ejemplo, "Dir." por "Directorio".
* En textos largos, puede ser que el truncamiento no sea efectivo, en este caso se podrá usar un acrónimo o crear abreviaciones por compresión. Por ejemplo: "AMEX" por "American Express".

6. Poner dos puntos al final de la etiqueta
Aunque algunas guías de estilo indican la opcionalidad de los dos puntos al final de las etiquetas, en mi opinión es preferible usarlos puesto que de esta manera se indica claramente el final del texto de la etiqueta, evitando confusiones con otros textos próximos.

Son excepciones a esta regla los textos de los botones de opción y de las casillas de verificación así como los títulos de los recuadros de grupo.

4. Ubicación

1. Posición

a) A la izquierda del campo o área de texto

Deben situarse preferiblemente a la izquierda del campo, nunca a la derecha ni debajo. Evitar poner las etiquetas encima del campo puesto que dificulta su exploración visual. Cuando sea inevitable, se situarán encima del campo alineados a la izquierda. Esto es habitual cuando el campo o área de texto ocupa mucho espacio.

b) A la derecha de los botones de opción y de las casillas de verificación

Es importante seguir esta regla, de lo contrario el usuario puede confundirse y asociar la etiqueta a otro botón de opción o casilla de verificación.

2. Alineación vertical

Sobre si las etiquetas deben alinearse a la derecha o a la izquierda no hay ningún acuerdo establecido. Tanto un caso como el otro tiene sus ventajas e inconvenientes.

a) Alineación izquierda:

Ayuda al escaneo del ojo ya que el inicio de todas las etiquetas queda encolumnado y facilita su localización rápida, sin embargo tiene como inconveniente que algunas etiquetas pueden quedar excesivamente separadas de su campo o control.

b) Alineación derecha:

Lo que para la alineación izquierda es una ventaja, aquí se convierte en un inconveniente y viceversa.

c) Mi estrategia preferida:

Consiste en alinear las etiquetas a la izquierda excepto cuando, en un grupo, alguna de ellas tenga un texto muy largo. En este caso alineo las etiquetas a la derecha.

3. Alineación horizontal

Los textos de las etiquetas y de los campos deben estar alineados horizontalmente tomando como referencia la línea base del cuerpo del texto.

4. Separación con el campo o control:

Si se adopta la alineación derecha, todas las etiquetas tendrán la misma separación de su campo o control. La distancia de separación no debe ser nunca excesiva. Una separación aproximada de 12 píxeles será suficiente.
Si se adopta la alineación izquierda, se tomará como referencia una separación aproximada de 12 píxeles desde la etiqueta más larga hasta su campo o control. El resto de etiquetas se alinearán en referencia a esta.

5. Estados

La etiqueta debe reflejar el estado del campo o control al que está asociado. Por ejemplo, si un campo, casilla de verificación o botón de opción no está no disponible, su etiqueta también lo mostrará.

6. Interacciones

En las etiquetas de las casillas de verificación y de los botones de opción, el texto debe ser clicable y activar la misma acción de su control asociado.

----------------------------------------------------------------
Autor y Licencia de esta obra:
Josep Casanovas - alzado.org
Licencia Creative Commons: creativecommons.org/licenses/by-nc-sa/2.1/es/