Introducción al artículo de Wulin.com (www.vevb.com): una breve discusión sobre el diseño de formularios en el diseño web diario.
El cuadro de entrada (entrada) debe dividirse lógicamente en grupos para que el cerebro pueda manejar bien la relación entre grandes áreas. - "Guía HTML autorizada"
Las aplicaciones web siempre usan formularios para manejar la entrada y configuración de datos, pero no todos los formularios son consistentes. La alineación del área de entrada, las etiquetas respectivas, los métodos de operación y los elementos visuales circundantes afectarán más o menos el comportamiento del usuario.
Diseño de formulario
Teniendo en cuenta que el usuario debe completar el formulario lo más corto posible, y los datos recopilados son familiares para el usuario (como nombre, dirección, información pagada, etc.), se puede decir que las etiquetas y cuadros de entrada alineados verticalmente son los mejores. Cada par de etiquetas y cuadros de entrada está alineado verticalmente para dar la sensación de estar cerca de ambos, y una alineación de izquierda consistente reduce el movimiento ocular y el tiempo de procesamiento. El usuario solo necesita moverse en una dirección: abajo.
En este diseño, se recomiendan etiquetas en negrita, lo que puede aumentar su peso visual y aumentar su prominencia. Si no es audaz, desde la perspectiva del usuario, el texto de la etiqueta y el cuadro de entrada será casi el mismo.
Si los datos en un formulario no son familiares o se agrupan lógicamente (como múltiples componentes de una dirección), las etiquetas alineadas a la izquierda pueden leer fácilmente la información del formulario. Los usuarios solo necesitan mirar hacia arriba y hacia abajo en la etiqueta de la columna izquierda sin interrumpir su pensamiento por el cuadro de entrada. Pero de esta manera, la distancia entre la etiqueta y su cuadro de entrada correspondiente generalmente se alarga por una etiqueta más larga, lo que puede afectar el tiempo para completar el formulario. El usuario debe saltar de un lado a otro para encontrar las dos etiquetas y cuadros de entrada correspondientes.
Esto crea una solución alternativa, el diseño alineado a la derecha de las etiquetas, lo que hace la conexión entre las etiquetas y los cuadros de entrada más cerca. Sin embargo, el resultado es que los blancos y etiquetas desiguales a la izquierda dificultan que los usuarios recuperen rápidamente lo que el formulario debe completarse. En los países occidentales, las personas están acostumbradas a escribir de izquierda a derecha, por lo que este diseño alineado a la derecha causa dislexia para los usuarios.
Con la ayuda de elementos visuales
Debido a las ventajas del diseño alineado a la izquierda de la etiqueta (fácil de recuperar y reducir la altura vertical), es tentador corregir sus desventajas principales (la separación de la etiqueta y el cuadro de entrada).
Una solución es agregar colores de fondo y líneas divididas. Los diferentes colores de fondo producen una columna de etiquetas verticales y una columna de cuadros de entrada verticales. Cada conjunto de etiquetas y cuadros de entrada está separado por líneas horizontales transparentes. Aunque esto suena bien, todavía hay problemas.
Comparando la forma anterior (distinción visual subjetiva del usuario), esto agrega 15 elementos visuales: líneas medias, celdas de color de fondo y líneas horizontales. Estos elementos desvían la atención del usuario y dificultan que el usuario se concentre en elementos importantes, como etiquetas y cuadros de entrada. Como señaló Edward Tufte: existen diferencias en la información misma, lo que inevitablemente conduce a diferencias sensoriales. En otras palabras, cualquier elemento visual que sea inútil para el diseño interrumpirá constantemente el diseño. Cuando intentes navegar por las etiquetas a la izquierda, encontrarás que tu vista siempre se interrumpe, deja de pensar en esas líneas horizontales, celdas y colores de fondo.
Por supuesto, esto no significa renunciar a los colores y líneas de fondo. Todavía son muy efectivos para dividir la información del área relevante. Por ejemplo, una línea horizontal delgada o un color de fondo ligero se puede combinar visualmente con datos relevantes. Los colores y líneas de fondo son especialmente efectivos para los principales botones de operación que distinguen la forma.
Operaciones primarias y secundarias
La operación principal de un formulario (generalmente enviando o guardado) requiere un peso visual relativamente fuerte (en el ejemplo anterior, tonos brillantes, fuentes en negrita, colores de fondo, etc.). Esto es equivalente a darle un mensaje al usuario: tiene/está a punto de completar el formulario.
Cuando un formulario tiene múltiples operaciones, como continuar y regresar, es necesario reducir el peso visual de las operaciones secundarias. Esto minimiza el riesgo de posibles errores operativos para los usuarios.
Aunque el contenido anterior puede permitirle mejor diseñar formularios, combinar el diseño, los elementos visuales y el contenido aún requieren pruebas de usuario y análisis de datos (evaluación de finalización, informes de errores, etc.).