Los formularios de contacto son un componente clave de muchos sitios web. Si bien generalmente son sencillos, debe asegurarse de que sean fáciles de usar si desea recopilar clientes potenciales y mantenerse en contacto con sus usuarios. Por lo general, esto no es un problema con el tráfico de la oficina, pero el uso de formularios puede resultar difícil si utiliza un dispositivo móvil.

En este tutorial, hablaremos un poco sobre la importancia de diseñar formularios optimizados para dispositivos móviles. A continuación, lo guiaremos a través de cinco consejos para asegurarse de que sus formularios funcionen sin problemas en dispositivos móviles.

¡Vamos a trabajar!

¿Por qué es importante que sus formularios sean compatibles con dispositivos móviles?

Los formularios vienen en todas las formas y tamaños. La mayoría de las veces, tendrá que lidiar con formularios de contacto:

ejemplo de contacto form.png

Los formularios de registro (suscripción) también son muy populares porque le permiten recopilar correos electrónicos y orientarlos durante las campañas:

correos de destino durante la campaña.png

Sin embargo, los formularios se pueden utilizar para todo tipo de otros fines. Por ejemplo, puede recopilar información utilizando una encuesta o cuestionario en línea , en cuyo caso necesitará formularios que permitan a los usuarios ingresar respuestas.

En otras palabras, los formularios son muy versátiles y casi todos los sitios usan formularios de una forma u otra. Por lo tanto, es esencial que sus formularios sean fáciles de usar (a menos que desee brindar una experiencia frustrante a sus visitantes).

El uso de formularios desde una computadora de escritorio o portátil suele ser muy fácil. Tiene un mouse y un teclado completos, por lo que seleccionar el campo que desea usar e ingresar datos no debería ser un problema. Sin embargo, navegar por la web desde su teléfono inteligente u otro dispositivo compacto tiene complicaciones.

Cuando se trabaja con los dedos en una pantalla pequeña, la interacción con los formularios a veces puede resultar abrumadora debido a malas decisiones de diseño. Esto es algo que debes evitar en tus propios diseños. Después de todo, si los usuarios de dispositivos móviles no pueden interactuar con sus formularios, es posible que pierda conversiones, clientes potenciales o simplemente moleste a los visitantes.

También es fundamental comprender que el tráfico móvil es ahora, si no más, importante que las fuentes de escritorio. De hecho, el tráfico móvil ya ha superado a este último en los últimos años. Esto significa que el diseño de un sitio web optimizado para dispositivos móviles debe ser su objetivo principal al iniciar un nuevo proyecto.

Consejos de 5 para diseñar formularios móviles fáciles de usar

Afortunadamente, diseñar formularios optimizados para dispositivos móviles no es tan difícil como podría imaginar. En la mayoría de los casos, solo necesita tener en cuenta algunos fundamentos y probar sus formularios a fondo antes de ponerlos en uso. ¡Hablemos de cómo hacerlo!

1. Borrar todas las secciones innecesarias

Cuantos más campos contenga su formulario, más difícil será su uso en dispositivos móviles. De hecho, el uso de formularios en dispositivos móviles es simplemente más complicado. Al reducir la cantidad de campos o secciones incluidos en sus formularios, puede maximizar sus posibilidades de que los visitantes los completen.

Aquí hay un ejemplo rápido de un formulario de contacto con algunos campos adicionales que no son necesarios en el móvil:

campos no necesarios en mobile.png

En la mayoría de los casos, todo lo que necesita para una gran formulario de contacto es un nombre, correo electrónico y el cuerpo del mensaje que desea recibir. Todo lo demás depende del tipo de sitio web que esté utilizando y si está tratando de recopilar clientes potenciales.

En última instancia, cuantos menos campos tenga el formulario, más fácil será para los visitantes móviles utilizarlos. Después de todo, seleccionar un campo usando una pantalla táctil puede ser complicado, sin importar lo bien diseñado que esté, para minimizar la cantidad de saltos que los usuarios deben realizar.

Su objetivo en este momento es revisar los formularios existentes en su sitio. Revise cada una de sus secciones y determine si realmente necesita campos adicionales además de los mencionados anteriormente. Si hay un campo superfluo, simplemente elimínelo.

2. Use listas desplegables si es posible

La mayoría de nosotros nos sentimos cómodos escribiendo en dispositivos móviles y usando pantallas táctiles. Sin embargo, enviar un mensaje de texto a un amigo y completar un formulario de contacto Son dos experiencias muy diferentes. Con esto, es muy probable que se sienta frustrado si tiene que escribir mucha información.

Una forma de hacer la vida más fácil para su visitante móvil es simplificar las elecciones que tienen que hacer sobre los elementos de su sitio. Para que te hagas una idea de lo que hablamos, aprovechemos nuestro ejemplo anterior de reserva restaurante:

hacer una reserva.png

Hacer un reserva, probablemente debas dejar un nombre, correo electrónico, teléfono  et  indicar una hora, así como el número de personas presentes. Hay dos formas de crear un campo de formulario para validar una hora del día. reserva:

  1. Configure un campo que acepte solo entradas numéricas.
  2. Diseñe una lista desplegable que incluya todos los horarios disponibles para una reserva.

Como puede imaginar, este último es más fácil de usar para los usuarios de dispositivos móviles. Con este enfoque, no es necesario que ingresen números y solo pueden elegir lo que funcione mejor para ellos entre las opciones que incluye.

La idea es que mire sus formularios y vea si incluyen campos que podría reemplazar con menús desplegables. Este no siempre será el caso, ya que no puede usar menús desplegables para recopilar nombres o correos electrónicos, pero se pueden usar otras opciones.

Cualquiera que sea su caso de uso, desea asegurarse de que sus menús desplegables incluyan opciones que sean fáciles de seleccionar desde dispositivos móviles. En otras palabras, haga que el menú sea lo suficientemente grande como para que nadie tenga que picotear para elegir la opción correcta.

3. Asegúrese de que sus botones de envío sean fáciles de tocar

Este consejo es bastante simple, pero aún debe mencionarse. Cada formulario que diseñe debe incluir una forma para que los usuarios confirmen que desean enviar los datos ingresados. En la mayoría de los casos, eso significa crear un botón de envío:

crear un botón de enviar.png

Cuando se usa una computadora normal, hacer clic en un botón de envío es lo más natural del mundo. Sin embargo, nos hemos encontrado con algunos formularios en dispositivos móviles en los que es mucho más difícil presionar un botón.

Si sus visitantes no pueden enviar la información que ingresaron en sus formularios, todos sus esfuerzos serán en vano. Además, nada parece tan poco profesional como un botón Enviar  eso no funciona como se esperaba.

Para diseñar mejores botones de envío para dispositivos móviles, aquí hay tres consejos a considerar:

  1. Asegúrese de que sean lo suficientemente grandes como para poder tocarlos fácilmente en un dispositivo móvil.
  2. No coloque los botones demasiado cerca de otros elementos para que los usuarios no los toquen correctamente.
  3. Resalte sus botones, por ejemplo, usando colores contrastantes o tipografía creativa.

Además de todo eso, también querrá probar sus botones antes de que su sitio entre en funcionamiento. Vamos a profundizar más en cómo hacer esto en un minuto. Por ahora, hablemos de rendimiento.

4. Asegúrate de que tus formularios se carguen rápidamente

Hablamos mucho sobre el rendimiento del sitio web en muchos de nuestros artículos y no es porque necesitemos velocidad. El caso es que a la mayoría de la gente no le gustan los sitios web lentos, lo que tiene mucho sentido.

Con la velocidad de Internet más rápida, puede ser difícil esperar a que un sitio web se cargue demasiado. Además, las velocidades de Internet móvil tienden a variar mucho más que las conexiones domésticas normales. Esto significa que su sitio web deberá estar altamente optimizado para dispositivos móviles si desea mantener contentos a estos usuarios, ya que no todos tendrán acceso a Internet (es decir, rápido).

Este consejo en particular puede aplicarse a todo su sitio web, pero también es importante para las páginas móviles que muestran sus formularios. Si estas partes de su sitio están tardando demasiado en cargarse, usted perder conversiones y oportunidades para conectarse con sus visitantes.

Por lo general, un sitio web no debería tardar más de dos segundos en cargarse. Una vez que supera este límite, las tasas de rebote tienden a aumentar dramáticamente, lo cual es una noticia terrible para usted, y dada la naturaleza de la navegación móvil, es mejor mantener este tiempo lo más bajo posible. .

Teniendo esto en cuenta, existen muchas formas de mejorar el rendimiento general de su sitio. Por ejemplo, puedes actualizar a un plan mejoralojamiento, utilice un tema responsivo optimizado para velocidad y comprime tus imágenes. Por supuesto, estos ayudarán a todos los usuarios, pero serán especialmente útiles para aquellos que usan dispositivos más pequeños.

5. Prueba tus formularios antes de publicar

Teniendo en cuenta que los formularios son una parte clave de la mayoría de los sitios web, tiene sentido que los pruebe a fondo antes de publicarlos. Con WordPress, este proceso es bastante sencillo. Puede seguir adelante y diseñar páginas específicas para mostrar sus formularios y no publicarlos hasta que los haya probado por completo.

Por supuesto, cualquier complemento o tema que desee utilizar depende de usted (siempre que pueda ayudar a desarrollar sitios móviles). Sin embargo, cuando se trata de la fase de prueba, le recomendamos que sea simple y utilice herramientas como outils de desarrollo Chrome para hacer el trabajo.

Veamos un ejemplo rápido. Si está utilizando Chrome, siga adelante y obtenga una vista previa de la página con el formulario que desea probar. Luego haga clic derecho en cualquier lugar de esta página y elija la opción inspeccionar . Chrome mostrará un conjunto de herramientas que puede usar para revisar y editar el código fuente de la página a la derecha y a la izquierda, puede ver una vista previa de su apariencia desde un dispositivo móvil:

Una descripción general de las herramientas de desarrollo de Chrome.

En la parte superior de la pantalla, puede usar un menú para cambiar entre diferentes resoluciones. Chrome incluye configuraciones para varios dispositivos móviles populares, pero también puede ingresar una resolución personalizada.

En este punto, debe verificar la apariencia y el comportamiento de su formulario de contacto en múltiples dispositivos. Tome el siguiente ejemplo: el formulario funciona bien, pero puede ver que no encaja tan bien como debería. Preste especial atención al texto y los iconos en particular, que están demasiado cerca del borde de la pantalla:

diseño de formulario para mobile.png

Una forma de prevenir este problema es mantener los formularios simples, como mencionamos en el primer consejo. En el siguiente ejemplo, el formulario utiliza varias listas desplegables y solo requiere tres campos. Esto hace que sea fácil de usar y, lo que es más importante, el formulario es tan simple que tiene que adaptarse perfectamente a todos los dispositivos:

Un ejemplo de un formulario sin problemas de escala.

Si tiene algún problema con alguno de sus formularios, obviamente debe resolverlo de inmediato. De lo contrario, corre el riesgo de alienar a su audiencia móvil, ¡lo cual intentamos evitar primero!

Conclusión

Asegurarse de que su sitio web sea compatible con dispositivos móviles es clave para mantener el tráfico y no frustrar a sus visitantes. Específicamente, sus formularios deben ser fáciles de usar en dispositivos móviles si no desea perderse la recepción de mensajes o la recopilación de clientes potenciales valiosos.

Cuando se trata de diseñar formularios aptos para dispositivos móviles, aquí hay cinco consejos para simplificar tu vida:

  1. Eliminar todas las secciones innecesarias.
  2. Utilice listas desplegables si es posible.
  3. Asegúrese de que sus botones de envío sean fáciles de presionar.
  4. Asegúrese de que sus formularios se carguen rápidamente.
  5. Prueba tus formularios antes de publicarlos.