![4 patrones de diseño de formularios inspiradores [GRATIS]](/cdn-cgi/image/width=1024,quality=83,format=auto/api/_files/skUfFRwsVbubAsUUd7xwq7/download/)
Un estudio realizado por HubSpot descubrió que el 82% de los encuestados declaró haber abandonado el embudo de compra de un sitio web debido a formularios deficientes o incompletos, y que el 93% de esas personas se había encontrado por primera vez con esos formularios en ordenadores de sobremesa.
Los formularios son una parte esencial de su sitio web y de su negocio, ya sea que esté realizando una encuesta, ofreciendo a los clientes potenciales un medio para ponerse en contacto con usted o fomentando las inscripciones en el boletín informativo. Hay muchas maneras de hacer un formulario web atractivo y eficaz, pero siempre se puede mejorar. Los formularios no tienen por qué ser aburridos.
4 patrones de diseño de formularios inspiradores [GRATIS]
Un formulario bien diseñado añade valor al conjunto del diseño sin restarle utilidad. Además, estos formularios rinden mucho más. En el nuevo marco de diseño de interfaz de usuario de Salesforce, Lightning, pequeños cambios en el diseño de los formularios pueden mejorar la conversión de los mismos. Vamos a profundizar en esto.
Formularios sin caja
Los formularios web sin caja son formularios web que no tienen cajas o bordes visibles. Hace que los formularios web parezcan más contemporáneos y modernos ya que no tienen el aspecto tradicional de los formularios web con cajas que los rodean. Los formularios web tradicionales con cajas a su alrededor pueden parecer anticuados.
Los formularios web basados en curvas aprovechan el uso de líneas y esquinas curvas para crear interés. Las curvas se encuentran en las formas y en los diseños. Las cajas curvas bien diseñadas no tienen por qué seguir los diseños tradicionales en forma de caja. Si se hacen correctamente, las curvas pueden incluso guiar la mirada por todo el formulario web, añadiendo tensión entre el espacio negativo y el positivo. Añade un gran atractivo visual y puede ayudar a hacer que un formulario web de aspecto monótono sea más emocionante y atractivo.
Formas animadas
El diseño de formas animadas está diseñado con alguna animación dentro del propio formulario. Se puede hacer en muchos niveles diferentes, desde animaciones simples que ayudan a crear interés y llamar la atención (como flechas y botones que rebotan) hasta diseños más complejos y elaborados que sacan lo mejor del diseño web animado como animaciones de fondo o transiciones entre páginas. El objetivo principal de utilizar estos efectos animados es hacer que la experiencia del usuario sea lo más atractiva posible - ¡algo que todos sabemos que los usuarios luchan con esos tediosos formularios de sitios web!
Deslizamiento desde la parte inferior o lateral
Esta plantilla de flujo web permite a los usuarios enviar un formulario de contacto en cualquier momento sin desmerecer la apariencia general. Puede permitir que los consumidores se pongan en contacto con usted cuando estén preparados añadiendo un botón de contacto en la parte inferior del sitio.
También puede utilizar un menú deslizante para que la gente acceda a su formulario. En lugar de enviar a los visitantes a una página de contacto, tire del formulario desde el lado de la pantalla. Es un patrón excelente para los casos en los que alguien podría querer buscar información en el sitio mientras asiste.
Formulario de pantalla completa
Una gran técnica para atraer la atención a su formulario es eliminar las distracciones. En lugar de atiborrar su formulario en un lugar ya marcado de su sitio web (como el pie de página), intente incorporar un punto de enganche para que sea de pantalla completa. Esto ayuda a su usuario a introducir la información que desea de una manera fácil y enfocada, lo que hace que sea más fácil para ellos completar.
Formularios con lenguaje natural
Si los formularios web pudieran hablar, podrían sonar así: "Está a punto de enviar su información. ¿Está seguro? Es necesario". Los formularios en la web no siempre son tan sencillos como nos gustaría. Hoy en día esperamos que las experiencias web y las interfaces de usuario sean más humanas y familiares; por ejemplo, interactuar con una página web debería parecerse más a hablar que a teclear. La introducción de datos en lenguaje natural es una de las formas de hacer que los formularios web parezcan más conversacionales, es decir, que no sean un simple texto escrito que hay que rellenar. Una interfaz de lenguaje natural ayuda a los usuarios haciéndoles preguntas para que los humanos hagan preguntas. Permite crear un contexto conversacional y, al mismo tiempo, reducir los malentendidos al utilizar el patrón convencional de etiquetas de formularios y cuadros de entrada. También tiene una sensación única y bien diseñada.
Diseño de formulario paso a paso (procedimental)
Un diseño de formulario web paso a paso le permite dividir las secciones de información en partes digeribles que son fáciles de seguir. En este caso, el usuario recibe señales visuales para rellenar cada campo.
Esta página web tiene un camino claro para que los usuarios sigan los pasos de su formulario web, con títulos y señales visuales que les guían por el camino. El uso de este patrón de formulario facilita la tarea a las personas que pueden tener dudas sobre la conveniencia de dar su información en línea.
Permitir que la gente añada información en trozos fáciles de entender fomenta el impulso hacia adelante y proporciona una experiencia más centrada que simplemente mostrar todos los campos a la vez.
Un solo clic en un botón puede ser todo lo que se necesita en algunos casos. Pero a veces, querrá mostrar cuántos pasos son necesarios para rellenar el formulario, para que el usuario no se pierda durante el procedimiento.
Conclusiones
La web es una calle de doble sentido, y debemos crear contenido web valioso para los usuarios y mantenerlos comprometidos con un diseño de formulario web emocionante. Los formularios son una parte integral de la experiencia de navegación en la web, así que ¿por qué no dedicar algo de tiempo extra a pensar en cómo hacer que tus formularios web sean lo más atractivos posible? Si pensamos en estos patrones y añadimos un toque más humano a nuestros diseños de formularios web, podemos ayudar a reducir las tasas de abandono al tiempo que fomentamos un mejor compromiso con menos confusión.
