10 Reglas para hacer formularios web fáciles de usar

Sep 12, 2025

Cómo

Illustration of web forms on an iMac and tablet

[dieciséis]

A pesar de la evolución de la interacción humana-computadora, las formas siguen siendo uno de los tipos de interacción más importantes para los usuarios. Las personas que usan su solicitud o sitio web tienen un objetivo en particular, y muchas veces, una cosa que se interpone entre el usuario y su objetivo es un formulario. Todos los días, los usamos para nuestras actividades esenciales, para completar las compras, para registrarse en las redes sociales, para proporcionar comentarios sobre un producto que hemos comprado, y más, son una gran parte de experiencia de usuario .

Como resultado, es muy importante para nosotros poder completar los formularios en línea rápidamente y sin confusión. El menor esfuerzo tenemos que gastar, lo más feliz que somos. Como diseñadores y desarrolladores, debemos esforzarnos por producir experiencias más rápidas, más fáciles y más productivas para nuestros usuarios.

En el segundo de mis dos artículos que exploran cómo construir mejores formas ( encuentra el primero aquí ), Aquí están mis 10 consejos para diseñar formularios que son fáciles de usar. ¿No estás buscando? Es posible que necesites nuestros guías a la cima. Creador de sitios web o almacenamiento en la nube Servicio.

01. Solo pregunta qué se requiere

Cortar la cantidad de información requerida hace que el formulario sea más fácil de llenar. Siempre debe cuestionar por qué y cómo se está utilizando la información que solicita. Trate de minimizar la cantidad de campos tanto como sea posible, ya que cada campo que agrega a un formulario afectará su tasa de conversión. Limitar el número de preguntas y campos hacen que su forma sea menos cargada, especialmente cuando solicita mucha información de sus usuarios.

02. Pida los campos lógicamente.

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically

Es útil pensar en una forma como similar a una conversación. Como cualquier conversación normal, debe estar representada por una comunicación lógica entre dos partes: una persona y su aplicación. Se deben solicitar detalles en un pedido que sea lógico desde la perspectiva de un usuario, no la de la aplicación o la base de datos. Por ejemplo, es inusual pedir la dirección de alguien antes de su nombre.

También es muy importante conocer preguntas relacionadas en los bloques, por lo que el flujo de un conjunto de preguntas a la siguiente se asemeja mejor a una conversación. El agrupamiento de campos relacionados también ayuda a los usuarios a dar sentido a la información que deben completar.

Las imágenes anteriores son ejemplos de dos formularios de inscripción. Las formas largas pueden sentirse abrumadoras si no alberga los campos relacionados, comparan el formulario a la izquierda a la versión mejorada a la derecha.

La agrupación debe realizarse visualmente, así como en el código. Por ejemplo, podrías usar el & lt; fieldset & gt; y & lt; leyend & gt; Elementos para asociar los controles de formulario relacionados:

 & lt; Fieldset & GT;
  & lt; leyend & gt; Información personal: & lt; / leyend & gt;
  & lt; div & gt;
    & lt; etiqueta for = "first_name" & gt; Nombre y lT; / Label & GT;
    & lt; type = "texto" nombre = "first_name" id = "first_name" & gt;
  & lt; / DIV & GT;
  & lt; div & gt;
    & lt; etiqueta for = "last_name" & gt; apellido & lt; / label & gt;
    & lt; type = "texto" nombre = "Last_name" id = "Last_name" & gt;
  & lt; / DIV & GT;
    & lt; etiqueta para = "género" & gt; profesión & lt; / label & gt;
    & lt; type = "texto" nombre = "profesión" id = "profesión" & gt;
  & lt; / DIV & GT;
& lt; / fieldset & gt;

03. Mantenga las etiquetas cortas

Las etiquetas de campo le dicen a los usuarios lo que significan los campos de entrada correspondientes. El texto de la etiqueta transparente es una de las formas principales de hacer que UIS sea más accesible. Las etiquetas le dicen al usuario el propósito del campo, pero no son textos de ayuda. Por lo tanto, garantizar que escanen fácilmente es una prioridad, debe diseñar etiquetas sucursales, cortas y descriptivas (mantenerlas en una o dos palabras).

04. No duplicar campos

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password

Este problema es particularmente común para los formularios de registro: casi todos se han encontrado con un formulario que requiere que escriba una dirección de correo electrónico o contraseña dos veces. Históricamente, esto fue diseñado para evitar errores de mal humor. Sin embargo, la mayoría de los usuarios simplemente copian el campo necesario cuando la aplicación lo permitió. Y si los datos del campo originales contenían un error, se duplicó.

05. Resalte los campos opcionales

Idealmente, es mejor no tener campos opcionales. En línea con la regla número 1, si no se requiere una información, no tiene sentido perder el tiempo de un usuario. Pero si los usa, debe distinguir claramente qué campos de entrada no se pueden dejar en blanco. Por lo general, una marca pequeña como una etiqueta de asterisco (*) o 'opcional' es suficiente.

06. Ten cuidado con los valores predeterminados

Evite incluir un valor predeterminado estático a menos que usted cree que una gran parte de sus usuarios (por ejemplo, 90 por ciento) seleccionará ese valor, especialmente si es un campo obligatorio. ¿Por qué? Con este enfoque, es probable que presenten errores porque las personas escanean formas rápidamente en línea. No asuma que se tomarán el tiempo para analizar todas las opciones. Pueden saltarse alegremente algo que ya tiene un valor.

La única excepción para este punto es incumplimiento inteligente, como aquellos que preseleccionan el país del usuario en función de sus datos de geolocalización, lo que puede hacer que finalice el formulario más rápido y preciso. Pero aún debe usar esto con precaución, porque los usuarios tienden a abandonar los campos preseleccionados como lo son.

07. Minimiza la necesidad de escribir.

La escritura es un proceso lento y propenso a errores, y es especialmente doloroso en un móvil, donde los usuarios se enfrentan a las restricciones de la central limitada. Y con más y más personas que usan pantallas pequeñas, cualquier cosa que se pueda hacer para evitar la escritura innecesaria mejorará la experiencia del usuario. Cuando sea apropiado, puede usar funciones como AutoComplete y prefronte los datos, para que los usuarios solo tengan que escribir la cantidad mínima de información básica.

Rellenar su información de dirección es a menudo la parte más engorrosa de cualquier formulario de registro en línea, gracias a múltiples campos, nombres largos, etc. Guarde que sus usuarios tengan que escribir su dirección completa implementando Prefleeles para estos campos. Bibliotecas como Google Maps Ofrecer una simple API de JavaScript lograr esto. Usted puede Encuentra una solución de trabajo aquí. .

08. Usa la validación en tiempo real.

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it

En un mundo ideal, los usuarios completan formularios con la información necesaria y terminan su trabajo con éxito, pero en el mundo real, las personas a menudo cometen errores. Es frustrante pasar por el proceso de completar un formulario completo solo para averiguarlo en el punto de envío que ha cometido un error.

El momento adecuado para informar a alguien sobre el éxito o el fracaso de los datos que han proporcionado es justo después de que envíen la información. Aquí es donde entra en juego la validación en tiempo real. Alerta a los usuarios cometer errores de inmediato y le permiten corregirlos más rápido, sin tener que esperar hasta que presionen el botón 'Enviar'.

Y recuerde, la validación no solo debe indicar a los usuarios lo que hicieron mal; También debe decirles lo que están haciendo bien. Esto le da a los usuarios más confianza para moverse por el formulario.

Perejil Es una excelente biblioteca de validación de formulario de JavaScript. Es de origen abierto y enfocado en UX, por lo que puede anular casi cada comportamiento predeterminado para satisfacer sus necesidades exactas. En el siguiente código hay un ejemplo de validación de perejil simple para un campo 'mensaje'. El campo debe tener al menos 20 caracteres, pero no más de 100.

 & lt; etiqueta para = "Mensaje" & gt; Mensaje (20 caracteres min, 100 max): & lt; / Label & GT;
& lt; textarea id = "Mensaje" Clase = "Formulario-Control" Nombre = "Mensaje" Data-Parsley-Treatle = "KeyUp" Data-Parsley-minlength = "20" Data-Parsley-MaxLength = "100" Data-Parsley -Minlength-Message = "¡Vamos! Necesitas ingresar al menos un comentario de 20 caracteres". Data-Parsley-Validation-Upholold = "10" & gt; / lt; / textarea & gt;

Usted puede Encuentra la muestra de código completo aquí .

09. Evite los formatos de entrada fijos.

La razón más común para forzar un formato fijo es la limitación de la script de validación (la parte posterior no puede determinar el formato que necesita), que en la mayoría de los casos es un problema de implementación. En lugar de forzar el formato de algo como un número de teléfono durante la entrada del usuario, debe hacer posible transformar lo que el usuario ingrese en el formato que desea mostrar o almacenar.

10. No use los botones de reinicio

Illustration shows Reset button next to a Save button below a form, with a red cross through it

Un botón de reinicio casi nunca ayuda a los usuarios. Es difícil imaginar que alguien quisiera un botón que deshaga todo su trabajo, y mucho menos que querrían que ese botón estuviera sentado junto al botón que lo guarda. La web sería un lugar más feliz si se eliminaron prácticamente todos los botones de reinicio.

¿Quiere saber cómo sus usuarios responden a su sitio web? Un decente Alojamiento web El servicio le dará los análisis que necesitas.

Este artículo apareció originalmente en neto , la revista para diseñadores y desarrolladores profesionales web. Suscríbete a la red aquí .

Artículos relacionados:

29 herramientas de diseño web para acelerar su flujo de trabajo
Las 41 mejores fuentes web gratis.
13 mejores piezas de software de prueba de usuario

10 Reglas para hacer formularios web fáciles de usar

01. Solo pregunta qué se requiere

02. Pida los campos lógicamente.

03. Mantenga las etiquetas cortas

04. No duplicar campos

05. Resalte los campos opcionales

06. Ten cuidado con los valores predeterminados

07. Minimiza la necesidad de escribir.

08. Usa la validación en tiempo real.

09. Evite los formatos de entrada fijos.

10. No use los botones de reinicio

Cómo - Artículos más populares

Explore la visualización de datos con p5.js

Cómo ocultar su código JavaScript de Ver Fuente

Use espacio negativo para dibujar mejores manos

Agregue animaciones de UI a su sitio

Cómo crear esmaltes con acuarela

Agregue la vitalidad a sus pinturas al óleo con estos puntas superiores

13 consejos para hacer un mundo de juegos VR

15 consejos para la optimización de dispositivos cruzados

Categorías