Piense en un momento en el que estuvo en el tren, caminando al trabajo, sentado en el aeropuerto o simplemente recostado en el sofá, y tuvo que completar un formulario en línea de algún tipo (formulario de pedido, formulario de envío, encuesta) , etc.) en su teléfono inteligente o tableta. ¿Tuviste una experiencia positiva o negativa? ¿Funcionó correctamente el formulario móvil que completaste? ¿Fue fácil de leer y enviar en su pantalla móvil?

Debido a su comodidad, y al hecho de que la mayoría de nosotros estamos casi siempre llevando un dispositivo, los formularios móviles pueden ser algo que complete con frecuencia . Si el formulario en línea que está completando tiene un diseño apto para dispositivos móviles, este proceso realmente es conveniente. Sin embargo, si el formulario que está tratando de completar es no compatible con dispositivos móviles, puede frustrarse, enojarse o abandonar el sitio por completo.

En esta guía, revisaremos la más efectiva formas de diseñar el formulario móvil de su empresa para ayudarlo a aumentar las conversiones y crear una excelente experiencia de usuario. Hay una variedad de formas para lograr esto, incluyendo botones de acción obvios, campos de formulario claros, campos de formulario mínimos, acciones automatizadas, un diseño y diseño hermosos, y más.

 great-mobile-form-design

Source

Pero antes de profundizar en todos esos detalles, primero definimos diseño de formulario móvil para comprender mejor los conceptos y pautas que estamos por revisar.

Móvil Diseño de formularios de escritorio vs.

Hoy en día, los visitantes de su sitio web no solo están navegando por su sitio, viendo su contenido y completando sus formularios desde sus computadoras de escritorio, también están completando estas tareas desde sus dispositivos móviles. Eso significa que es absolutamente crítico que su formulario sea fácil de revisar, completar y enviar a través de un dispositivo móvil.

¿Por qué es importante el diseño de formulario móvil?

El gran diseño de formulario móvil permite una experiencia de usuario positiva que garantiza una feliz visitante del sitio web que es más probable que se convierta en cliente y se convierta en un usuario recurrente.

El diseño, diseño y funcionalidad de sus formularios móviles desempeñan un papel importante en la experiencia general del usuario de su sitio web debido a la cantidad de personas que navegan por los elementos Haga compras y compre a través de sus dispositivos móviles todos los días. Si sus formularios no son compatibles con dispositivos móviles, es posible que experimente menos conversiones, una pérdida en el tráfico del sitio móvil y un aumento de clientes descontentos y frustrados. ¿Y quién quiere eso?

¿Por qué debería diferir el diseño de formulario móvil del diseño de escritorio?

Piense acerca de la diferencia en la pantalla o el tamaño de la pantalla entre un dispositivo móvil, como un iPhone de Apple, que generalmente varía entre 4.7 "A 6.1" en tamaño, y una computadora de escritorio iMac, que generalmente varía entre 21 "a 27" en tamaño. Claramente, es seguro asumir que un formulario que se ajuste a la pantalla de un iPhone no se ajustaría perfectamente a la pantalla de una computadora de escritorio.

Si sus visitantes móviles no pueden leer, completar y enviar su formulario fácilmente, puede perder su negocio. Por lo tanto, crear una forma amigable para dispositivos móviles que se adapte a la pantalla de cualquier dispositivo móvil es crucial para crear una excelente experiencia de usuario para dejar una impresión duradera en sus visitantes y ayudarlo a aumentar las conversiones.

¿Qué es el diseño web sensible? [19659010] Si desea llevar el diseño de formularios móviles un paso más allá y garantizar que su sitio web completo sea funcional en todos los tipos de dispositivos, puede implementar un diseño de sitio web sensible.

El diseño web sensible tiene en cuenta el tamaño de la pantalla, la plataforma, la orientación y el entorno del usuario. Esta es una forma simple y efectiva de crear una excelente experiencia de usuario ya que muchas personas constantemente visitan y navegan por diferentes sitios web en una variedad de dispositivos.

Hay varias formas de asegurarte de que El sitio tiene un diseño responsivo. Por ejemplo, si eres usuario de WordPress, hay varios temas de WordPress sensibles que puedes instalar y usar para diseñar tu sitio. Además, si está construyendo o ha construido su sitio con un software como Squarespace su sitio puede venir automáticamente con diseño web sensible .

Hoy en día, el diseño web adaptable es una opción popular para las empresas debido a la gran cantidad de personas que visitan sitios web a través de una variedad de dispositivos móviles diferentes. Pero por ahora, volvamos a analizar el diseño de formularios móviles.

Diseño de formularios móviles: 10 Pautas de UX

Al crear un formulario compatible con dispositivos móviles, hay algunos pasos que debe seguir para brindar la mejor experiencia de usuario. posible para sus visitantes. Revisemos 10 de estas pautas de UX que puede comenzar a implementar en sus propios formularios hoy.

1. Minimice el número de campos de formulario

¿Alguna vez escuchó el dicho: “menos es más”? Bueno, eso es exactamente lo que debes pensar al crear tu formulario móvil.

Entre el tamaño de la pantalla de un dispositivo móvil, la cantidad de contenido que necesita colocar en su formulario y la cantidad de campos de formulario (los campos de formulario son las casillas en las que los visitantes agregan sus respuestas), es fácil de hacer Tu forma se siente desordenada. Recuerde eliminar todas las pelusas innecesarias y solo conservar los campos de formulario para la información que absolutamente necesita .

Además de reducir su número de campos de formulario solo a los necesarios, también querrá asegurarse de que sus campos de formulario estén claramente etiquetados con la menor cantidad de palabras posible. También debe marcar los campos de formulario opcionales como "opcionales" o incluir un asterisco junto a los campos de formulario requeridos para agilizar el proceso.

 mobile-form-form-fieldws

Fuente

2. Automatice acciones cuando sea posible

Si accidentalmente escribe mal su dirección y el formulario corrige la ortografía, el formulario corrige automáticamente su respuesta.

Si comienza a escribir su dirección de envío y aparece un cuadro mientras que el resto de su dirección le pregunta si desea "autocompletar" el resto de los campos del formulario con su dirección guardada, entonces su formulario es autocompletando su respuesta por usted.

 automatizar-acciones-en -mobile-forms "width =" 441 "style =" width: 441px; margin: 0px auto

Fuente

Al implementar las funciones de autocorrección y autocompletar en sus formularios móviles, Mejorará la experiencia del usuario a través de un proceso rápido, eficiente y directo.

3. Use un diseño de una sola columna

Cuando complete un formulario largo o de varios pasos enumere todo su contenido en un diseño de una sola columna.

 single-column-mobile-form-layout Source

Esto se aplica a los formularios tanto en el escritorio como en los dispositivos móviles por varias razones: los diseños de formulario de una sola columna son :

a. Más fácil de leer

Colocar todos los campos de formulario en un formato de una sola columna permite que sus visitantes se centren en un solo elemento a la vez, lo que hace que su formulario sea más fácil de leer.

b. Menos desalentador

Si observa un formulario, especialmente en un espacio reducido como lo haría en un dispositivo móvil, y ve una gran cantidad de contenido mezclados, puede sentirse abrumado. Es por eso que separar su contenido por filas y colocar sus campos de formulario en un formato de una sola columna hace que su contenido se vea y se sienta menos desalentador.

c. Más rápido de completar

Cuando coloca su formulario de varios pasos en una sola columna, los clientes potenciales pueden completarla más rápidamente de lo que lo haría con un formulario de múltiples columnas. Esto se debe a que el formato hace que la forma sea más fácil de leer y trabajar paso a paso.

4. Utilice restricciones de entrada para los campos de formulario

Si su formulario móvil incluye respuestas cortas o largas, debe habilitar las restricciones de entrada. Las restricciones de entrada ponen un límite en el número de palabras o caracteres que una persona puede escribir en el campo de formulario.

Escribir respuestas largas en un dispositivo móvil no siempre es fácil debido al tamaño del teclado y la pantalla. Y si un visitante no está seguro de la cantidad de detalles requeridos para una respuesta, es posible que se explique en exceso, lo que podría terminar en un proceso que requiere mucho tiempo para usted y su visitante.

Una restricción de entrada normalmente dirá algo así como "Has superado tu máximo de ___ caracteres".

Hay otros tipos de restricciones de entrada que limitan opciones de entrada, como fechas en sus formularios. Por ejemplo, si alguien intentaba hacer una reservación para una mesa en su restaurante y accidentalmente seleccionó una fecha en el pasado, su restricción evitaría que realmente pudieran seleccionar y confirmar esa fecha. Al establecer restricciones de entrada, ahorrará su tiempo de espera al completar los campos de su formulario y también evitará tener que revisar una respuesta larga o inválida.

5. Cree botones de acción claros

Después de tomarse el tiempo para completar un formulario móvil, es probable que un líder quiera asegurarse de que se envíe correctamente para asegurarse de que usted y su equipo puedan recibir y revisar su información.

Al usar botones grandes, en negrita y visibles etiquetados con acciones claras sobre ellos, como "Enviar", "Siguiente" o "Completo", su prospecto se sentirá seguro acerca de la forma en que se envía. Estos botones de acción lo ayudan a agilizar los procesos de llenado y envío de formularios para sus clientes potenciales para evitar confusiones o preocupaciones innecesarias.

 mobile-form-action-buttons

Source

6. Proporcionar escáneres para pagos

¿Alguna vez ha intentado ingresar los detalles de su tarjeta de crédito en un formulario a través de su teléfono inteligente? Escribir un montón de números en una pantalla tan pequeña con un teclado pequeño puede ser un proceso tedioso.

Las aplicaciones de escaneo de tarjetas, como BlinkID y card.io se han vuelto cada vez más Popular por esa razón exacta. Al realizar una compra, sus visitantes pueden hacer clic en un botón que los lleva a una pantalla donde pueden usar la cámara de su dispositivo móvil para tomar una foto segura de la parte frontal y posterior de su tarjeta, ya sea su licencia o su tarjeta de crédito. [19659060] mobile-form-credit-card-scanner "width =" 364 "style =" width: 364px; margin: 0px auto “>

Fuente

Con solo un par de imágenes, Sus clientes potenciales terminarán con una de las partes que más tiempo consumen en el proceso de finalización de su formulario móvil. Estas aplicaciones de escaneo de tarjetas mantienen a sus visitantes eficientes, libres de frustración y sin errores.

7. Explique la necesidad de información específica

Al completar un registro de correo electrónico simple o un formulario de registro, ¿alguna vez le han pedido que proporcione información personal que no tenga nada que ver con el formulario de registro?

Este es un fenómeno común en todo tipo de formas (no solo en dispositivos móviles). Pedirle a alguien información personal u otra información confidencial sin explicar su necesidad puede ser un tanto incompleto.

Si está haciendo una pregunta que no responde t necesariamente relacionado directamente con la razón por la cual su visitante está llenando el formulario (ya sea que el campo sea obligatorio u opcional), entonces debe crear algún tipo de cuadro de resumen o notificación en el que puedan hacer clic para leer una breve descripción de la razón por la cual Estamos pidiendo esta información. De esta manera, su forma se sentirá profesional y reflexiva.

8. Proporcione el estado de éxito o finalización

Independientemente del tipo de formularios móviles que tenga en su sitio web, debe proporcionar a sus visitantes y prospectos su estado actual de progreso, éxito o finalización mientras trabajan en ellos.

Si tiene un formulario largo y de varios pasos, debe incluir una barra de progreso en la parte superior del formulario para que sus visitantes sepan cuánto tiempo más trabajarán en el formulario.

 progress-bars-in-mobile-forms

Fuente

Además, una vez que sus prospectos envíen sus formularios, debe dirigirlos a otra pantalla o página que diga algo como , “¡Éxito!” O “¡Gracias por enviar el formulario!” Para que sepan que su envío funcionó.

 mobile-form-complete-message

Source

9. Incluya mensajes de error

Al completar sus formularios móviles, sus visitantes están obligados a cometer un error aquí o allá. Sus formularios móviles deben marcar estos errores en tiempo real para que sus clientes potenciales puedan seguir siendo eficientes y precisos.

Por ejemplo, si alguien agrega el código postal incorrecto junto a su dirección, asegúrese de que su formulario móvil indique ese error para que no haya errores. se pierde tiempo y su empresa está segura de recibir información precisa.

 mobile-form-error-messages

Fuente

En su mensaje, indique su ventaja, fácil de usar -entienda información que muestre claramente la ubicación exacta del error, así como cómo pueden corregirlo.

10. Considere la apariencia del formulario

La apariencia y las primeras impresiones en los negocios siempre son importantes. Eso también se aplica a sus formularios móviles, porque nadie quiere completar un formulario oscuro, difícil de leer, desordenado y poco atractivo.

 diseño de formulario móvil "width =" 375 "style =" width: 375px; margin: 0px auto

Fuente

Desea que su forma móvil sea altamente funcional y estética. Puede crear una forma de aspecto profesional al marcarla con su logotipo y colores. La apariencia de su formulario móvil debe contribuir a su legibilidad y experiencia de usuario positiva.

Para lograr este aspecto, use:

  • Tipografía simple y fácil de leer
  • Campos de formulario mínimos
  • Botones de acción brillantes y audaces
  • Única -columna layout
  • Una paleta de colores que no se siente abrumadora

Back To You

No es ningún secreto que, hoy, los visitantes de su sitio web están completando y enviando sus formularios web a través de sus dispositivos móviles. Esto se debe a que es conveniente y eficiente, ya que la mayoría de las personas llevan consigo algún tipo de dispositivo móvil en todas partes, por lo que es crucial que sus formularios sean aptos para dispositivos móviles. De lo contrario, será difícil leer, completar y enviar sus formularios, lo que puede frustrar sus clientes potenciales o hacer que pierda su negocio por completo. Al considerar el diseño de su formulario móvil y la implementación de estas pautas, mejorará la experiencia del usuario del formulario móvil, establecerá relaciones positivas con sus clientes potenciales y sus conversiones.



Source link