Mejores prácticas de diseño de formularios

Las formas siguen siendo una de las tipos de interacciones más importantes para usuarios en la web y en aplicaciones. A menudo se considera que las formas último paso en el camino de completar su objetivos. Las formas son sólo un medio para un fin. Por último, pero no menos importante, según una investigación reciente, El 84% de las personas completa al menos un formulario web por semana..

Los usuarios deberían poder completarlos rápidamente y sin confusión.

En este artículo, encontrará las mejores prácticas para el diseño de formularios que se han obtenido de pruebas de usabilidad, pruebas de campo, estudios de seguimiento ocular y real quejas de usuarios descontentos. Estas técnicas, cuando se utilizan correctamente, permiten a los diseñadores producir de forma más rápida, sencilla y productiva. formar experiencias.

Los componentes de las formas.

La forma típica tiene los siguientes cinco componentes:

Estructura: Esto incluye el orden de los campos, la apariencia del formulario en la página y las conexiones lógicas entre múltiples campos.Campos de entrada: Estos incluyen campos de texto, campos de contraseña, casillas de verificación, botones de opción, controles deslizantes y cualquier otro campo diseñado para la entrada del usuario.Etiquetas de campo: Estos indican a los usuarios qué significan los campos de entrada correspondientes. Botón de acción: cuando el usuario presiona este botón, se realiza una acción (como el envío de datos).Comentario: Se hace que el usuario comprenda el resultado de sus aportaciones a través de la retroalimentación. La mayoría de las aplicaciones y sitios web utilizan texto sin formato como forma de comentarios. Un mensaje notificará al usuario sobre el resultado y puede ser positivo (lo que indica que el formulario se envió correctamente) o negativo (“El número que proporcionó es incorrecto”).

Los formularios también pueden tener los siguientes componentes:

Asistencia: Esta es cualquier explicación de cómo completar el formulario.Validación: Esta verificación automática garantiza que los datos del usuario son válidos.

Este artículo cubre muchos aspectos relacionados con la estructura, los campos de entrada, las etiquetas, los botones de acción y la validación.

Si bien las partes de su formulario pueden estar diseñadas por expertos, El contenido de un formulario puede presentar un desafío para sus usuarios. ¿A quién le gusta completar formularios largos y detallados?

2 ejemplos de formularios que ayudan al usuario a centrarse en tareas individuales

Para evitar crear un formulario largo que pierda a su usuario, es importante centrarse en la tarea principal. No distraiga al usuario con el diseño, sino que haga que las piezas sean predecibles. Intentar limitar las opciones para su usuario tanto como sea posible. Puede hacer esto, por ejemplo, ofreciendo opciones a su usuario, si corresponde, como un desplegable o botones de radio.

Incluye solo las partes de tu formulario que el usuario espera. .¿Tienes que pedir información adicional? Luego intenta explicarle al usuario. ¿Por qué necesitas esta información adicional?. Y una última comprobación: ¿realmente necesitas saberlo todo? El Protocolo de preguntas es un buen recurso que pueden leer todos los miembros de la organización que crean un formulario.

En definitiva, recuerda que es necesario diseñar un formulario más accesible y también un sitio web que tenga en cuenta la privacidad del usuario.

Una etiqueta le dice al usuario qué tipo de información debe ingresar y, por lo tanto, es una parte esencial de un campo de entrada. Cuando no hay ninguna etiqueta y alguien está usando un lector de pantalla para navegar, este usuario no sabrá qué completar.

Un marcador de posición no es lo mismo que una etiqueta. Cuando alguien hace clic en el campo (cuando el campo está activo), el el marcador de posición ya no se muestra. Es muy dificil para que el usuario sepa el tipo de información que debe completarse. Un marcador de posición está destinado a dar información adicional al completar un campo.

Hay situaciones que se desvían de esto. Basta con mirar los elementos del formulario de El sistema de diseño de Google. (Diseño de materiales de Google). Google parece tener la etiqueta actuando como marcador de posición. Cuando el usuario activa el campo, el la etiqueta se mueve hacia la parte superior, creando espacio para ingresar texto. El texto opcional se coloca debajo del campo. Esto puede funcionar, siempre que un desarrollador codifique correctamente esta configuración.

Recuerde que cuanto más se desvíe de la forma estándar de elementos de formulario, más probabilidades tendrá de cometer errores. Además, podría preguntarse: ¿Los cambios realmente ayudarán al usuario? ¿O estás haciendo los cambios porque te gustan más?

Al diseñar un campo de entrada, hay varias formas de hacerlo. Generalmente comienzas con un describir o un plano llenopero a veces también se utilizan otras formas.

Cualquiera que sea la forma que elijas, asegúrate de que pueda ser claramente reconocido por el usuario como campo de entrada. Recuerda ser coherente con el diseño. Asegurar contraste de color suficiente. Los bordes del formulario deben tener una relación de contraste mínima de 3:1.

En muchas formas se encuentra el pequeña estrella muy conocida junto a uno o más campos. Todos los diseñadores ya sabemos lo que esto significa: un campo obligatorio. Sin embargo,Muchos usuarios no están tan familiarizados con el significado de esta estrella. , también conocido como asterisco. Cuando utilice un asterisco en su formulario, asegúrese de incluir un explicación en la parte superior

que un asterisco significa un campo obligatorio. Además, puede haber maneras más amigables para indicar estos campos obligatorios. ¿Su formulario tiene más campos obligatorios que opcionales? Entonces puedes optar por indicar solo los campos opcionales (mediante añadir la palabra opcional con la etiqueta). Este es un mensaje mucho más amigable que solo mencionar lo que el usuario debería