Los formularios de contacto son un componente clave de muchos sitios web. Aunque por lo general tienen una funcionalidad simple, aún debe asegurarse de que sean fáciles de usar si desea recopilar clientes potenciales y mantenerse en contacto con sus usuarios. Esto no suele ser un problema con el tráfico de escritorio, pero el uso de formularios puede ser complicado si está en un dispositivo móvil.
En este artículo, vamos a hablar un poco sobre la importancia de diseñar formularios compatibles con dispositivos móviles. Luego, lo guiaremos a través de cinco consejos para garantizar que sus formularios funcionen a la perfección en dispositivos móviles.
¡Pongámonos a trabajar!
Las formas vienen en todas las formas y tamaños. Lo más común es que se trate de formularios de contacto :
Los formularios de registro (u opt-ins) también son muy populares, ya que le permiten recopilar correos electrónicos y orientarlos durante las campañas:
Sin embargo, los formularios se pueden utilizar para todo tipo de otros fines. Por ejemplo, es posible que desee recopilar información mediante una encuesta o cuestionario en línea , en cuyo caso necesitará formularios para que los usuarios ingresen las respuestas.
Para decirlo de otra manera, los formularios son muy versátiles y casi todos los sitios usan formularios de una forma u otra. Por lo tanto, es fundamental asegurarse de que sus formularios sean fáciles de usar (a menos que desee proporcionar una experiencia frustrante para sus visitantes).
El uso de formularios desde una computadora de escritorio o una computadora portátil suele ser muy simple. Tiene un mouse y un teclado completo, 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 de factor de forma pequeño presenta complicaciones.
Cuando trabaja con los dedos en una pantalla pequeña, la interacción con formularios a veces puede ser una molestia 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 móviles no pueden interactuar con sus formularios, puede perder conversiones , clientes potenciales o simplemente molestar a los visitantes.
También es esencial comprender que el tráfico móvil ahora es tan importante, si no más, 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 compatible con dispositivos móviles debe ser su objetivo principal al lanzar un nuevo proyecto.
5 consejos para diseñar formularios compatibles con dispositivos móviles
Afortunadamente, diseñar formularios compatibles con dispositivos móviles no es tan difícil como podría imaginar. En la mayoría de los casos, todo lo que se necesita es tener en cuenta algunos aspectos básicos y probar los formularios a fondo antes de que se publiquen. ¡Hablemos de cómo hacerlo!
1. Elimina las secciones innecesarias
Cuantos más campos incluyan sus formularios, más difícil será usarlos en dispositivos móviles. Esto se debe a que, por muy bien diseñados que estén, usar formularios en dispositivos móviles es simplemente más complicado. Al reducir la cantidad de campos o secciones que incluyen 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 podría prescindir:
En la mayoría de los casos, todo lo que necesita para un excelente formulario de contacto es un nombre, un correo electrónico y el cuerpo del mensaje que desea recibir. Todo lo demás depende del tipo de sitio web que esté ejecutando y si está tratando de recopilar clientes potenciales.
En última instancia, cuantos menos campos incluya su formulario, más fácil será para los visitantes móviles usarlos. Después de todo, seleccionar un campo usando una pantalla táctil puede ser difícil, incluso si está bien diseñado, por lo que desea minimizar la cantidad de «saltos» que los usuarios deben realizar.
Su objetivo en esta etapa es echar un vistazo a los formularios existentes de su sitio. Repase cada una de sus secciones y considere si realmente necesita algún campo adicional más allá de los que mencionamos anteriormente. Si hay un campo superfluo, simplemente córtelo.
2. Use listas desplegables cuando sea 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 este último, es probable que se sienta frustrado si tiene que escribir mucha información.
Una de las formas en que puede facilitar la vida de su visitante móvil es simplificar las elecciones que deben hacer con respecto a los elementos de su sitio. Para darle una idea de lo que estamos hablando, construyamos nuestro ejemplo anterior de reserva de restaurante:
Para hacer una reserva, probablemente deba dejar un nombre, correo electrónico, teléfono e indicar una hora, así como cuántas personas asistirán. Hay dos formas de crear un campo de formulario para validar una hora de reserva:
- Configure un campo que solo acepte entradas numéricas.
- 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 necesitarán escribir números y simplemente podrán elegir lo que mejor les funcione de las opciones que usted incluye.
La idea de que eche un vistazo a sus formularios y vea si incluyen algún campo que pueda reemplazar con menús desplegables. Este no siempre será el caso, ya que no puede usar los menús desplegables para recopilar nombres o correos electrónicos, pero hay otras opciones en las que podrían funcionar.
Independientemente de cuál 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 para que nadie tenga que picotear para elegir la opción correcta.
Este consejo es bastante sencillo, pero vale la pena mencionarlo. Cada formulario que diseñe deberá incluir una forma para que los usuarios confirmen que desean enviar los datos que han ingresado. En la mayoría de los casos, esto significa crear un botón de envío:
Cuando está utilizando 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 presionar un botón es mucho más difícil de lo que debería ser.
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 que no funciona según lo previsto.
Para diseñar mejores botones de envío para dispositivos móviles, aquí hay tres consejos rápidos que debe tener en cuenta:
- Asegúrese de que sean lo suficientemente grandes para presionar con facilidad cuando use un dispositivo móvil.
- No coloque sus botones demasiado cerca de otros elementos, para que los usuarios no presionen el botón equivocado.
- Resalte sus botones de alguna manera, como usar colores contrastantes o tipografía creativa.
Aparte de todo esto, también querrá probar sus botones a fondo antes de que su sitio web se active. Profundizaremos más sobre cómo hacerlo en un minuto. Por ahora, hablemos del rendimiento.
4. Asegúrese de que sus formularios se carguen rápidamente
Hablamos mucho sobre el rendimiento del sitio web en varios de nuestros artículos, y no es porque necesitemos velocidad. El hecho es que a la mayoría de la gente no le gustan los sitios web lentos, lo cual tiene mucho sentido.
Con velocidades de Internet cada vez más rápidas, esperar demasiado tiempo para que se cargue un sitio web puede ser una tarea ardua. 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 esos usuarios, ya que no todos tendrán un acceso a Internet adecuado (es decir, rápido).
Este consejo en particular puede aplicarse a todo su sitio web en general, pero también es importante para las páginas móviles que muestran sus formularios. Si esas partes de su sitio tardan demasiado en cargarse, perderá clientes potenciales y oportunidades para establecer contacto con sus visitantes. Como regla general, un sitio web no debería tardar más de dos segundos en cargarse. Una vez que superas esa línea, las tasas de rebote tienden a aumentar drásticamente, lo cual es una terrible noticia para ti.
Dada la naturaleza de la navegación en dispositivos móviles, reducir este tiempo lo más posible es una gran ayuda. Con esto en mente, hay muchas maneras de mejorar el rendimiento general de su sitio. Por ejemplo, puede actualizar a un mejor plan de alojamiento , usar un tema receptivo optimizado para la velocidad y comprimir sus imágenes usando un complemento de optimización de imágenes . Por supuesto, esto ayudará a todos los usuarios, pero será de particular beneficio para aquellos que usan dispositivos más pequeños.
5. Pruebe sus formularios antes de publicarlos
Teniendo en cuenta que los formularios son un elemento clave para la mayoría de los sitios web, es lógico que pruebe los suyos a fondo antes de publicarlos. Con WordPress, este proceso es bastante simple. Puede continuar y diseñar páginas específicas para mostrar sus formularios y no publicarlos hasta que los haya probado por completo.
Por supuesto, el complemento o el tema que desea usar depende de usted (siempre que pueda ayudar a desarrollar sitios móviles). Sin embargo, en lo que respecta a la fase de prueba, le recomendamos que mantenga las cosas simples y use algo como Chrome Dev Tools para hacer el trabajo.
Repasemos un ejemplo rápido. Si está utilizando Chrome, continúe y obtenga una vista previa de la página que incluye el formulario que desea probar. A continuación, haga clic derecho en cualquier parte de esa página y elija la opción Inspeccionar . Chrome le 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 cómo se vería desde un dispositivo móvil:
En la parte superior de la pantalla, hay un menú que puede usar 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 cómo se ve y se comporta su formulario de contacto en múltiples dispositivos. Tome el ejemplo a continuación: el formulario funciona perfectamente, pero puede ver que no se escala tan bien como debería. Preste mucha atención al texto y los iconos en particular, que están demasiado cerca del borde de la pantalla:
Una forma de evitar este problema es mantener sus formularios simples, como lo describimos en el primer consejo. En el siguiente ejemplo, el formulario usa múltiples listas desplegables y solo requiere tres campos. Eso hace que sea fácil de usar y, lo que es más importante, el formulario es tan simple que debería adaptarse perfectamente a todos los dispositivos:
Si tiene problemas con cualquiera de sus formularios, obviamente debe solucionarlos de inmediato. De lo contrario, corre el riesgo de alienar a su audiencia móvil, ¡que es lo que estamos tratando de evitar en primer lugar!
Conclusión
Asegurarse de que su sitio web sea compatible con dispositivos móviles es fundamental 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 quiere perderse la oportunidad de recibir mensajes o recopilar valiosos clientes potenciales.
Cuando se trata de diseñar formularios compatibles con dispositivos móviles, aquí hay cinco consejos rápidos para facilitarle la vida:
- Elimina las secciones innecesarias.
- Utilice listas desplegables cuando sea posible.
- Asegúrese de que sus botones de envío sean fáciles de presionar.
- Asegúrese de que sus formularios se carguen rápido.
- Pruebe sus formularios antes de publicarlos.
¿Tiene alguna pregunta sobre cómo crear formularios compatibles con dispositivos móviles utilizando Divi ? ¡Pregunte en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Irina Adamovich / shutterstock.com.