5 consejos para diseñar formularios compatibles con dispositivos móviles
Publicado: 2018-09-23Los formularios de contacto son un componente clave de muchos sitios web. Aunque generalmente son simples en funcionalidad, aún 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 escritorio, pero el uso de formularios puede resultar complicado si está en un dispositivo móvil.
En este artículo, hablaremos 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!
Por qué es importante que sus formularios sean compatibles con dispositivos móviles
Los formularios vienen en todas las formas y tamaños. Por lo general, tendrá que lidiar con formularios de contacto:
Los formularios de registro (o suscripciones) 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 utilizan 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 brindar una experiencia frustrante a 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, interactuar con los formularios a veces puede ser un problema debido a malas decisiones de diseño. Esto es algo que debe evitar en sus propios diseños. Después de todo, si los usuarios de dispositivos móviles no pueden interactuar con sus formularios, puede perder conversiones, clientes potenciales o simplemente molestar a los visitantes por completo.
También es esencial comprender que el tráfico móvil es ahora tan, 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 diseñar 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 fundamentos y probar los formularios a fondo antes de que se publiquen. ¡Hablemos de cómo hacerlo!
1. Elimine las secciones innecesarias
Cuantos más campos incluyan sus formularios, más difícil será su uso 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 las posibilidades de que los visitantes los completen.
Aquí hay un ejemplo rápido de un formulario de contacto con algunos campos adicionales sin los 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 utilizarlos. 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 campos adicionales a los que mencionamos anteriormente. Si hay un campo superfluo, simplemente córtelo.
2. Utilice 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 facilitarle la vida a sus visitantes móviles es simplificar las elecciones que deben tomar con respecto a los elementos de su sitio. Para darle una idea de lo que estamos hablando, vamos a basarnos en 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 la cantidad de personas que asistirán. Hay dos formas de crear un campo de formulario para validar un tiempo 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 pueden elegir lo que les funcione mejor entre las opciones que incluye.
La idea de que eches un vistazo a tus formularios y veas si incluyen algún campo que puedas 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 existen 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 como para que nadie tenga que buscar para elegir la opción correcta.
3.Asegúrate de que los botones de envío sean fáciles de tocar
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 ingresaron. En la mayoría de los casos, esto significa crear un botón de envío:
Cuando estás usando 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 como se esperaba.
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 utilice un dispositivo móvil.
- No coloque sus botones demasiado cerca de otros elementos, para que los usuarios no presionen el incorrecto.
- Resalte sus botones de alguna manera, como usando colores contrastantes o tipografía creativa.
Aparte de todo esto, también querrá probar sus botones a fondo antes de que su sitio web entre en funcionamiento. Profundizaremos más sobre cómo hacerlo en un minuto. Por ahora, hablemos de 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 tengamos necesidad de velocidad. El hecho es que a la mayoría de la gente no le gustan los sitios web lentos, lo que tiene mucho sentido.
Con las 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 habituales. 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 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 pasa esa línea, las tasas de rebote tienden a aumentar drásticamente, lo cual es una terrible noticia para usted.
Dada la naturaleza de la navegación en dispositivos móviles, reducir este tiempo lo más posible es una bendición. Teniendo esto en cuenta, hay muchas formas 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. Por supuesto, estos ayudarán a todos los usuarios, pero serán de particular beneficio para aquellos que utilizan 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 deba probar los suyos a fondo antes de publicarlos. Con WordPress, este proceso es bastante simple. 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, el complemento o tema que desea utilizar 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 las herramientas de desarrollo de Chrome 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 con el botón derecho en cualquier lugar 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 derecha e 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 los formularios simples, como describimos durante el primer consejo. En el siguiente ejemplo, el formulario utiliza varias 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 escalar perfectamente en todos los dispositivos:
Si tiene problemas con cualquiera de sus formularios, obviamente debería 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 desea perderse la recepción de mensajes o la recopilación de clientes potenciales valiosos.
Cuando se trata de diseñar formularios optimizados para dispositivos móviles, aquí hay cinco consejos rápidos que le facilitarán la vida:
- Elimina las secciones innecesarias.
- Utilice listas desplegables cuando sea posible.
- Asegúrese de que los botones de envío sean fáciles de presionar.
- Asegúrese de que sus formularios se carguen rápidamente.
- Pruebe sus formularios antes de publicarlos.
¿Tiene alguna pregunta sobre cómo crear formularios optimizados para dispositivos móviles con Divi? ¡Pregunte en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Irina Adamovich / shutterstock.com.