Saltar al contenido

Diseñando formularios: los campos

El formulario es el rey absoluto de la interacción. La variedad y las posibilidades son infinitas, pero el buen diseño tiene siempre un denominador común: entender correctamente el funcionamiento de los campos básicos y elementales.

bosquejo de formularios de campos

Un formulario está compuesto de múltiples elementos, que en muchos casos llegan a decenas. Dentro de esta colección, los campos destacan como uno de los componentes sustanciales, ya que es allí que el usuario va a ingresar sus datos. Para diseñar buenos formularios, el punto de partida es conocer los campos más elementales: el campo de texto, los radio-buttons, los check-boxes y los descolgables y combo-boxes. Los recorreremos uno a uno.

El campo de texto

Un campo de texto es un área de la pantalla en el que el usuario puede ingresar texto libremente, y en algunos casos inclusive darle formato: negritas, listas, títulos y otros. Dejaremos los campos de texto más sofisticados para otra oportunidad y nos concentraremos en el básico: el campo de una linea de texto.

Un campo de texto debe obligatoriamente tener todas las propiedades de un campo de este tipo en HTML: escribir, copiar, cortar, editar, arrastrar, pegar, etc. con la única excepción de los casos en los que la seguridad imponga restricciones. No importa cuan bonito luzca el campo de su nueva biblioteca Javascript o de su herramienta de creación de Apps, si no cumple con esta regla, no está a la altura de los acontecimientos.

Es deseable que los campos de texto tengan tamaños similares, inclusive si la cantidad de texto a introducir no es la misma. Si hay mucha variación, elegir dos o a lo sumo tres largos, pero dar a cada campo un largo distinto da una impresión de desorden.

Los campos deben tener un largo similar, inclusive al costo de no reflejar correctamente el tamaño del contenido

Las etiquetas pueden ir a la izquierda del campo, alineadas a uno u otro lado. También pueden ir arriba, en particular en móviles es la ubicación recomendada, cuidando que la etiqueta esté mas cerca del capo de abajo que del de arriba, para evitar el Mal de Lucas, pero nunca deben ir dentro del campo, porque cuando se completa el formulario desaparecen, transformando un problema leo y entiendo en un problema pienso y entiendo.

En móvil las etiquetas van arriba del campo, pero nunca dentro del campo.

Por último, en este breve raconto, el valor del campo es siempre más importante que la etiqueta, por lo que si el tipo de letra de uno y de otro es distinto, debe estar más resaltado el contenido. Es muy frecuente encontrar etiquetas en negrita y campos con texto pleno, lo que es un error.

Lo importante es el dato: siempre que el tamaño y tipo de letra de etiqueta y campo sean distintos, el más destacado debe ser el del contenido

Los Radio Buttons

Los radio buttons se utilizan para seleccionar entre múltiples opciones excluyentes entre sí, es decir, el usuario solo puede elegir una de ellas a la vez. Si debe existir la posibilidad de no seleccionar ninguna, entonces es necesario agregar una opción del tipo “ninguna de las anteriores”, ya que una vez que se clickea el primer radio button, no es posible volver atrás.

La etiqueta va como la de cualquier campo, alineada con la primera opción. Los radio buttons van alineados uno debajo del otro y la etiqueta de cada uno de ellos a su derecha. Otras opciones no solo no son estándar, sino que producen confusión, en particular la de ponerlos todos en una línea porque cuando el radio button queda en el medio de dos etiquetas, es difícil saber cuál de las dos es la seleccionada.

Los Radio Buttons van uno debajo del otro, con la etiqueta a la derecha. La ubicación de los check boxes es idéntica

Check Boxes

Los check boxes se utilizan, al igual que los radio buttons, para seleccionar entre múltiples opciones pero cuando el usuario puede seleccionar más de una opción de la lista, incluyendo los casos en que las selecciona todas o ninguna.

Su presentación en la pantalla es idéntica a la de los radio buttons, con la excepción de que nunca va una opción del tipo “ninguno de los anteriores”, porque los check boxes se pueden seleccionar y deseleccionar todas las veces que sea necesario.

Es un error común transformarlos en radio buttons vía javascript, haciendo que al seleccionar un check box se deshabiliten los otros. Si este es el comportamiento adecuado, entonces lo que se necesitan son radio buttons.

Listas descolgables y combo boxes.

La lista descolgable cumple la misma función que los radio buttons y los check boxes, en un espacio más reducido, por lo que tiene la ventaja de permitir la selección entre muchas opciones, pero la contra de que la mayoría de las opciones o eventualmente todas menos una quedan ocultas, lo que hace más dificultoso su uso.

En HTML las listas descolgables siempre permiten avanzar en la lista digitando el texto de la entrada, lo que permite un funcionamiento de campo de texto limitado a una serie de opciones, por lo que se los denomina “combo box”, una caja que combina un campo de texto y una lista descolgable. También en HTML se puede configurar para que se muestre una parte de la lista, pero en general esto tiene problemas con el ancho de los textos y es una opción de uso poco frecuente.

Dos ejemplos de combo boxes en HTML, el segundo no es muy frecuente encontrarlo.

Las listas de selección múltiple requieren hacer click con la tecla Control presionada, algo que no solo es poco conocido, sino que no tiene un análogo razonable en móviles, por lo que es fuertemente desaconsejado. Por último, no abuse de las listas y combo boxes, si bien son sencillos de usar, los radio buttons y los check boxes son siempre más sencillos y muchas veces ahorrar unos renglones de pantalla no es una ganancia que justifique el cambio.

___

Taller Intensivo de Diseño de la Interacción

Un taller pensado como sesiones de entrenamiento en diseño, guiado por un grupo de profesionales del Diseño del equipo de Concreta.

Próximo comienzo: 18 de noviembre
Consultas: capacitacion@concreta.com.uy

Inscripciones abiertas.