Saltar al contenido

6 Mejores Prácticas y Grandes Ejemplos a Seguir

febrero 26, 2022

¿Alguna vez ha intentado completar un formulario en un sitio web y se sintió confundido o perdido al hacerlo? ¿La ubicación de las etiquetas de los campos de formulario y los campos en sí no tenían ningún sentido? ¿El título del formulario y el botón de envío no estaban en ubicaciones fáciles de identificar?

Estos factores, entre varios otros, son aspectos importantes del diseño de un formulario web que tienen el potencial de mejorar o disminuir su experiencia de usuario (UX). Al implementar un diseño exitoso, creará una gran experiencia para sus visitantes e iniciará una relación positiva, y con suerte duradera, entre ellos y su marca.

En esta guía, revisaremos las seis mejores prácticas de diseño de formularios web, así como ejemplos de cada práctica para ayudarlo a comenzar. Pero primero, revisemos qué es realmente el diseño del formulario web y por qué es tan importante.

¿Por qué es importante el diseño del formulario web?

Casi todos los sitios web tienen un formulario web de algún tipo. El diseño de su formulario web juega un papel importante en la conversión de su formulario. Esto se debe a que un excelente diseño de formulario conduce a una finalización perfecta del formulario y mejora el proceso de envío para sus visitantes. Los visitantes se convertirán fácilmente ya que ha creado un formulario web que es sencillo y se siente profesional y reflexivo.

Por el contrario, un diseño mal planificado generará un formulario confuso y difícil de procesar que puede frustrar a sus visitantes e incluso provocar que abandonen su sitio por completo, lo que disminuirá sus conversiones.

Ahora que entendemos por qué obtener el diseño correcto de su formulario web es muy importante, profundicemos en cómo para crear un diseño óptimo para su formulario web. A continuación se presentan seis mejores prácticas a seguir al organizar su contenido.

Diseños de formularios: 6 mejores prácticas y excelentes ejemplos a seguir

Hemos seleccionado esta lista de mejores prácticas para aplicarlas a prácticamente todos los tipos de formularios web. También hemos incluido excelentes ejemplos de cada práctica para ayudarlo a aplicar mejor los conceptos a sus propios formularios.

1. Usa un diseño de una sola columna

Cuando se trata de su diseño, debe mantener la ubicación y el orden de todos sus campos lo más sencillos posible. Esto significa que debe usar un diseño de una sola columna. Al organizar sus campos de esta manera, sus visitantes no perderán ningún campo, completarán los campos en el orden que tenga más sentido y podrán enviar su formulario. más rápido de lo que lo harían si usara un formulario de varias columnas.

Gran ejemplo:

Este ejemplo le muestra cómo debería verse un formato de una sola columna. El diseño es tan simple, sencillo y minimalista como podría ser, que es exactamente lo que desea. De esta manera, reduce la cantidad de tiempo que sus visitantes necesitan para completar su formulario y no hay causa posible de error o confusión.

2. Alinear copia a la izquierda

Alinee todos los campos de su formulario al lado izquierdo de la página web. Esta es la forma más natural de diseñar su formulario porque así es como la gran mayoría de las personas aprenden a leer el contenido, moviéndose de derecha a izquierda. Si no está utilizando etiquetas de campo de formulario en línea (que se encuentran directamente en los propios campos de formulario), también debe alinear sus etiquetas a la izquierda. Nuevamente, este flujo natural ayudará a sus visitantes a completar su formulario de manera más eficiente sin sentirse confundidos acerca de qué etiqueta pertenece a qué campo.

Gran ejemplo:

alineación del formulario web del lado izquierdo

Fuente

Esta foto muestra la alineación del lado izquierdo tanto para los campos como para las etiquetas del formulario. El formulario está organizado de manera que sea claro para los visitantes y, por lo tanto, permite procesos rápidos de llenado y envío. No hay dudas sobre qué etiquetas pertenecen a qué campos y trabajar de derecha a izquierda a través del formulario es natural y sin complicaciones.

3. Usa un diseño de una página

Al crear sus formularios, debe usar un diseño de una página para que solo haya un formulario en cada página. Si tiene un formulario corto, todo debería caber fácilmente en una sola página, lo que hace que este sea un diseño fácil de implementar.

Si tiene muchos campos de formulario, debe dividirlos en un formulario de varios pasos. Cuando haga esto, habrá varias páginas web con partes separadas del formulario, lo que hará que la cantidad de trabajo que su visitante necesita completar parezca más manejable. (Si usted hacer tiene un formulario de varios pasos, también puede agregar una barra de progreso en la parte superior de la página para que sus visitantes sepan cuánto tiempo más van a estar trabajando en él).

Gran ejemplo:

diseño de formulario web de una página

Fuente

Debido a la gran cantidad de campos de formulario que los visitantes deben completar, este es un formulario de varios pasos que se distribuye en tres páginas web separadas. Al organizar el formulario de esta manera, revisarlo y completarlo no parece ser un proceso largo y tedioso.

En lugar de mirar una larga lista de campos de formulario que deben completarse, ver solo unos pocos campos a la vez hace que el formulario se sienta menos abrumador. (La barra de progreso en la parte superior de la página también ayuda con esto, especialmente porque etiqueta claramente los nombres de las páginas web en las que el visitante debe trabajar).

4. Cree un diseño compatible con dispositivos móviles

En estos días, casi todo el mundo lleva consigo algún tipo de dispositivo móvil en todo momento. No importa si están en movimiento, viajando, viajando o simplemente sentados en la comodidad de su hogar, no es ningún secreto que las personas se suscriben a su boletín informativo, se registran para obtener una cuenta y compran sus productos a través de su teléfonos inteligentes y tabletas. Por eso es fundamental que su sitio incluya formularios compatibles con dispositivos móviles.

Gran ejemplo:

diseño de formulario web compatible con dispositivos móviles

Fuente

Este ejemplo muestra muchos aspectos importantes de un diseño de formulario móvil exitoso. El formulario tiene un título claro en la parte superior de la pantalla pequeña, una opción clara y simplificada para agregar (o escanear) la información de la tarjeta de crédito para que un visitante no tenga que escribir nuestra serie de números en un teclado tan pequeño, una forma sencilla , diseño de una sola columna y de varios pasos, diseño minimalista y más. Este formulario está diseñado de manera que permite a los usuarios entenderlo y completarlo fácilmente a través de un dispositivo móvil.

5. Agregue etiquetas de campo de formulario en línea

Las etiquetas de campo y el texto en línea hacen que sea excepcionalmente fácil para los visitantes comprender dónde deben colocar sus respuestas en sus formularios. Eliminan las conjeturas de qué etiqueta pertenece a qué campo, lo que facilita que los visitantes se desplacen por el formulario sin dudarlo. También mantienen su formulario limpio, minimalista, ordenado y elegante.

Gran ejemplo:

formulario-en-línea-campos-formulario-web

Fuente

Dado que estas etiquetas de campo están en línea, el formulario parece simple y más corto de lo que sería si las etiquetas estuvieran ubicadas fuera de los campos de entrada. Los visitantes no tendrán problemas para determinar dónde deben ingresar su información. A veces, cuando las etiquetas de campo se ubican arriba, abajo o al costado de los campos, es difícil determinar qué etiqueta pertenece a qué campo.

6. Usa mensajes de error en línea

El uso de mensajes de error en línea en formularios web es una forma eficaz de asegurarse de que alguien comprenda que hay un problema con un campo que intentaron completar. También dirigen a ese visitante a la ubicación exacta del error para que no pierda tiempo determinando dónde está el problema.

Una vez que cree sus mensajes en línea, asegúrese de agregar algo de contexto sobre por qué existe el error y cómo sus visitantes pueden corregirlo. Esto no solo ahorra tiempo a sus visitantes al corregir los errores, sino que también evita que usted y sus compañeros de trabajo tengan que trabajar con respuestas no válidas una vez que se envía el formulario.

Gran ejemplo:

En este formulario, el mensaje de error aparece en línea, lo que significa que el campo no válido está resaltado en rojo. El formulario incluye un símbolo de error junto al campo para resaltar aún más el hecho de que hay un problema y dónde se encuentra. Por último, el mensaje explica por qué existe el error y cómo solucionarlo.

De nuevo a usted

Con un diseño de formulario web exitoso, creará una gran experiencia de usuario para sus visitantes que les dejará una impresión positiva y duradera. Su diseño debe simplificar los procesos de finalización y envío de formularios para sus visitantes para que no haya confusión o incertidumbre con respecto al formulario en sí. Comience a mejorar el diseño de su formulario hoy pensando en estas prácticas y cómo puede incorporarlas en sus propios formularios para mejorar la experiencia de usuario y aumentar sus conversiones.