Pensar acerca de un sitio web que ha visitado, que hace que no incluyen un formulario de ningún tipo. Estoy hablando de ningún formulario de registro, encuesta, de facturación o de envío del formulario, el cliente formulario de comentarios, o incluso la simple correo electrónico el formulario de inscripción.
Las empresas en la implementación de los formularios en sus sitios web para ofrecer a los visitantes una manera de firmar para arriba para una cuenta, comprar un producto, pagar por un artículo, y más. Es por eso que en línea de diseño de formulario importa tanto — sin un simple, fácil de usar, estéticamente agradable forma, ¿cómo se supone que vas a atraer a los visitantes a tomar el tiempo para proveer de usted con toda esa información personal?
Bueno, realmente no se puede — no sin gran diseño del formulario.
¿Qué es el formulario de diseño?
El diseño del formulario es el proceso de creación de un formulario web — donde los visitantes de su sitio pueden introducir y enviar su información al tiempo que se mantiene la forma del diseño, formato, UX, apariencia y otros factores en cuenta. Gran diseño de formulario mejora la experiencia de usuario y ayuda a impulsar las conversiones.
- ¿Por Qué El Diseño De La Forma De La Materia?
- Mejores Prácticas De Diseño De Formulario
- Formulario Web de interfaz de usuario
- Móvil De Diseño De Formulario
- CTA de Diseño de Formulario
¿Por Qué El Diseño De La Forma De La Materia?
Puesto simplemente, el gran diseño de formularios web le ayuda a aumentar las conversiones.
El diseño de su formulario de impactos de su sitio web en general la experiencia de usuario (UX), que a su vez afecta directamente a su número de visitantes felices y conversiones. Un bien diseñado formulario de muestra a los usuarios que su marca es servicial, atento, profesional, conocedores de la tecnología, y agradable para trabajar.
Un mal diseñada forma, por otro lado, puede llevar a la página y en el sitio web de abandono o de un usuario frustrado y, por tanto, una disminución en las conversiones y las ventas. Por ejemplo, Expedia enteraron de que iban perdiendo de 12 millones de dólares al año en ganancias debido a un extraño campo de formulario de casilla de solo!
Los formularios Web son críticos para la conversión de usuarios en clientes, por lo que usted desea hacer el tuyo fácil de usar, profesional y elegante. En esta guía, vamos a revisar 15 prácticas que puede utilizar para diseñar un gran estado de forma, incluyendo la importancia de la web de interfaz de usuario (UI) de diseño, móvil de diseño de formulario, y llamada a la acción (CTA) de diseño.
Diseño de la forma de Mejores Prácticas: 15 Consejos para mejorar las Conversiones y UX
Hemos creado la siguiente lista de 15 consejos y trucos para el diseño de un formulario con una gran experiencia de usuario. Dependiendo del tipo de formulario y la longitud, usted puede escoger y elegir qué consejos se adapte mejor a sus necesidades.
1. Ser simple y directo
Si un formulario pide demasiada información, corre el riesgo de perder las presentaciones y las conversiones. De hecho, Imagescape fue capaz de aumentar las tasas de conversión 120% por la reducción de su número de campos de formulario del 11 al cuatro. Al crear el formulario, incluya sólo los más cruciales de la información que usted necesita y abstenerse de añadir campos innecesarios y preguntas.
2. El uso de una columna
Se adhieren a una sola columna, web de diseño de formulario — especialmente un consejo importante a la hora de crear larga de pasos múltiples formas. Diseños de una sola columna son más fáciles de seguir, entender, completa y presentar a sus visitantes.
Un estudio realizado por CXL Instituto encontró que los participantes fueron capaces de completar una sola columna forma una media de 15.4 segundos más rápido que un multi-forma de columna. Tus visitantes no quieren perder su tiempo tratando de entender y completar el formulario. De hecho, usted podría perder su negocio si su forma es muy difícil de trabajar a través de.
3. Organizar los campos del formulario de más fácil a más difícil
Inicio su forma con la más sencilla de responder a las preguntas (como el nombre y correo electrónico) antes de pedir a sus visitantes los que consumen más tiempo de preguntas (como la información de facturación y envío). Una vez que tus visitantes se empiece a llenar el formulario y pensar, “Bien, me puede agregar mi nombre y correo electrónico”, son menos propensos a abandonar la página, puesto que ellos ya han cometido.
Si el primer campo de formulario es una molestia para ellos (“Dispara, yo no tengo mi tarjeta de crédito en la zona …”) pueden ser más propensos a abandonar la forma, ya que todavía no ha invertido tiempo en ella.
4. Uso en línea de validación de campo de formulario
En línea el formulario de validación es un proceso en el que un visitante de la información es revisada en tiempo real a medida que el trabajo de su camino a través de la forma. Si tus visitantes rellenar un campo con información incorrecta, como un inválido dirección de correo electrónico o número de tarjeta de crédito, aparecerá un mensaje de error por debajo o en el interior del campo de formulario de notificar a los visitantes de su error, por lo que rápidamente se puede corregir y pasar a la siguiente pregunta.
Fuente
5. Alinear texto a la izquierda
Alinear todo el texto (preguntas y etiquetas) en el lado izquierdo de la forma, así que es natural leer y completa para sus visitantes. Universidad de Basilea, los investigadores encontraron alinear el texto en el lado izquierdo, por encima del campo de formulario de casilla, reduce la cantidad de tiempo necesario para completar el formulario. Esta alineación natural disminuye la cantidad de un usuario ojos necesitan para saltar a través de la página y hace de la forma más legible.
6. Claramente el título de su formulario
Dar un título a tu formulario que ayuda a sus visitantes a entender exactamente lo que recibirá una vez que se envíe. Por ejemplo, un formulario sencillo en el título como “HubSpot del Blog de la Comercialización Formulario de inscripción” establece claramente que el visitante se han inscrito para HubSpot del Blog de la Comercialización una vez que envíe su información.
Fuente
7. No piden números de teléfono
A menos que la obtención de los visitantes números de teléfono es crítico para su negocio (por ejemplo una solicitud de cotización o la demostración de producto), no requieren en el formulario. ClickTale hizo una prueba y se encontró que ha perdido el 39% de usuario signo-ups cuando se requiere un número de teléfono. Pidiendo a sus visitantes los números de teléfono se puede sentir incompleto, a menos que ellos sepan que hay una razón legítima por la que se le está pidiendo a proporcionar esa información.
Cuando sea posible, pida un correo electrónico en lugar y de contacto de sus visitantes de esa manera (con permiso). O hacer que el campo número de teléfono en el formulario opcional para sus visitantes para completar.
8. El uso de auto-llenado de los navegadores
Completar los campos específicos del formulario es más rápido que nunca, ahora que los navegadores como Google Chrome y Firefox tienen autocompletar características que tire de la información del pasado entró en un visitante de un dispositivo (como su nombre y su apellido). Es la mejor práctica para el título de cada campo con un término, o atributo en común, que los navegadores reconocerá para ayudar a acelerar el formulario de finalización de proceso para el visitante.
9. Que sea posible atender a las preocupaciones de los usuarios con el resumen de los cuadros de
Normalmente es fácil adivinar que las preocupaciones son más propensos a disuadir a los potenciales clientes de llenar el formulario. Por ejemplo, pedir a un visitante a proporcionar su código postal si realmente no están pedir nada podría ser inquietante. Usted puede hacer frente a estas preocupaciones con el resumen de los cuadros de la explicación de su necesidad de cierta información, o con declaraciones que aclarar si es o no el campo de formulario es opcional.
Fuente
10. El diseño de las formas móviles de manera diferente
Hoy en día, no es ningún secreto que la gente se la navegación de su sitio, la compra de sus productos, y completar los formularios a través de sus dispositivos móviles, es por eso que es crucial para implementar móvil-amistoso diseño del formulario. De esta manera, los visitantes pueden ver fácilmente su sitio en cualquier dispositivo móvil, toda la información del formulario se ajusta a la pantalla que se está visualizando, y el formulario puede ser completado y enviado fácilmente mientras on-the-go.
11. El uso positivo de los mensajes de error
Al crear el formulario web de mensajes de error, que actúan como una forma eficaz de garantizar que sólo precisa de la información es presentada, asegúrese de sonido positivo. Usted debe nunca la culpa por el usuario en lugar de utilizar un lenguaje claro y conciso, y de incluir información que orienta al visitante para el error, por lo que ellos saben exactamente dónde se encuentra y cómo debe ser corregido.
12. Incluyen valores predeterminados inteligentes
La habilitación de valores predeterminados inteligentes es otra gran manera de acelerar el formulario de finalización de proceso y asegurar la exactitud. Smart valores predeterminados de utilizar la información como su ubicación actual del usuario para introducir automáticamente los detalles como el de la ciudad o de la ciudad para que los visitantes del sitio no tiene.
13. Agregar barras de progreso para formularios largos
¿Alguna vez has ido completando un largo formulario o encuesta y se preguntó, “¿cuántas más preguntas hay?”
Las barras de progreso para mostrar el número de preguntas que los visitantes tendrán que responder en su forma. Que dar a los visitantes una idea de cuánto más tiempo se necesitará para completar la misma. Estos son especialmente útiles en tiempo de pasos múltiples formas.
14. Uso reCAPTCHAs, no CAPTCHAs
Después de completar un formulario, alguna vez se le preguntó a mirar un bastante duro de leer la imagen con una serie de números y letras y que, a continuación, escriba los números y las letras en un campo de formulario para demostrar que “no es un robot”?
Fuente
Si es así, usted ha completado un CAPTCHA. Los CAPTCHAs existen para detectar el SPAM y bots. Sin embargo, pueden consumir mucho tiempo y ser frustrante para completar. Todavía hay uso para ellos, aunque, y es posible que desee esta medida de seguridad adicional incluida en los formularios. Si este es el caso, usted debe poner en práctica reCAPTCHAs en sus formularios en su lugar.
Fuente
reCAPTCHAs no sólo son más eficaces en la detección de cuentas falsas y bots, pero que también requieren simplemente el visitante de una casilla antes del envío del formulario.
15. Habilitar la capacidad de la ficha al siguiente campo del formulario
Con el número de métodos abreviados de teclado disponibles en estos días, no hay razón por la que el formulario no debe permitir que ellos. Permitir a los visitantes a utilizar la tecla tab en sus formularios para que puedan moverse al siguiente campo de formulario sin levantar sus manos fuera de sus teclados.
Captar nuestra guía para aprender a optimizar y dividir a prueba tus páginas de aterrizaje.
Formulario Web de interfaz de usuario
Formulario Web de interfaz de usuario, que también se conoce como interfaz de usuario, es la parte de un dispositivo de información (tales como un teléfono inteligente) que una persona (o usuario) que interactúa directamente con la (tales como la pantalla o el teclado).
Mejora de la interfaz de usuario es una forma de mejorar la experiencia de sus usuarios de su forma. Hay tres partes principales de un formulario de la interfaz de usuario que usted debe centrarse en la hora de crear sus formas: la estructura, el diseño y los patrones.
Estructura
Considere la posibilidad de su estructura de formulario en una estratégica forma — ¿cuál es la mejor manera de estructurar su forma para mejorar la experiencia de usuario? Pensar el orden en que los campos aparecen, la apariencia del formulario en su página web, y cómo sus campos y secciones de flujo de uno a otro.
Por ejemplo, echa un vistazo a Airbnb multi-paso el formulario para reservar un lugar para quedarse.
Fuente
Debido a que el formulario incluye varios pasos y muchos campos de formulario, el formulario está dividido en diferentes pasos y páginas para hacer el proceso menos intimidante para los visitantes. Un visitante entra en detalles acerca de su estancia (donde y cuando) en la primera página, a continuación, se les pedirá hacer una selección de donde quieren quedarse en la segunda página antes de introducir la información de pago en la página final. Los campos de formulario se agrupan de manera adecuada y organizada de una manera que tenga sentido.
Diseño
El diseño de los campos del formulario también importa cuando se trata de la interfaz de usuario. Asegurar que el diseño y el orden de tus preguntas se sienta natural. Por ejemplo, en lugar de poner el correo electrónico y el pago de los campos uno al lado del otro, separados de ellos por lo que están colocados en las secciones que tienen sentido en función del tipo de información que un visitante de la prestación.
También puede ser creativo con el diseño del formulario. Por ejemplo, en lugar de una normal, de columna única forma en la que sus visitantes se debe simplemente a añadir su información y haga clic en enviar, usted puede implementar un Mad Libs-diseño de estilo para que los visitantes puedan llenar el espacio en blanco y crear más de una historia con sus respuestas.
Fuente
Completar un formulario en la web no siempre es un trabajo apasionante, por lo que ayuda a completar el formulario de una divertida experiencia interactiva.
Los patrones de
Interfaz de usuario patrones repetitivos de soluciones comunes, recurrentes en el diseño de los problemas relacionados con sus visitantes de cara al completar los formularios. Estas soluciones funcionan una y otra vez para mejorar su forma de la interfaz de usuario y facilidad de uso. Hay docenas de patrones de diseño de interfaz de usuario que puede utilizar en sus propios formularios basados en sus necesidades.
Por ejemplo, ha sido usted firma para arriba para una cuenta nueva, y cuando se introduce una contraseña, un mensaje de error se acercó diciendo: tu contraseña de entrada no fue aceptada porque “no era lo suficientemente fuerte”?
Para hacer que la creación de contraseña más fácil para sus visitantes, añadir una contraseña medidor de intensidad de la que se le indica en tiempo real la fuerza de su contraseña, así que ellos saben mucho más creativo debe ser para mejorar su seguridad.
Fuente
Este patrón de interfaz de usuario mejora la experiencia de usuario, por lo que es fácil para los visitantes a crear una contraseña válida, así como entender cómo proteger su contraseña.
Móvil De Diseño De Formulario
Móvil de diseño de formulario es crucial para el éxito de sus formas y su sitio como un todo. En esta sección, vamos a cubrir algunos de los fundamentos de diseño, así como consejos prácticos que puedes implementar en sus formas propias para mejorar su experiencia de usuario.
¿Cuál es el móvil de diseño de formulario y ¿por qué importa?
Móvil de diseño de formulario es el proceso de creación de formularios web que son fáciles de usar y sensible a los dispositivos móviles, como un smartphone o tablet. Esto significa que el contenido escrito y visual, en un formulario que debe adaptarse a cada pantalla del dispositivo.
Es seguro decir que la mayoría de nosotros llevamos un dispositivo móvil de algún tipo con nosotros cada día. Las personas que visitan su sitio mientras se está yendo al trabajo, de viaje, o simplemente sentado en su sofá. Asegúrese de simplificar su futuro registrarse, el registro o la compra de los procesos mediante la aplicación de móvil-amistoso diseño del formulario.
Por garantizar el éxito de un diseño, que va a mejorar su experiencia de usuario y por lo tanto es probable que aumente las conversiones. Y ¿quién no quiere un mayor número de clientes y más negocio?
Cinco móvil de diseño de UX consejos
Cuando la construcción de su móvil fácil de formularios web, considere los siguientes consejos de diseño para ayudarle a crear la mejor experiencia de usuario posible.
1. Implementar un diseño de una sola columna
Pensar en el tamaño de la pantalla en un teléfono inteligente promedio. Aunque compañías como Apple seguir construyendo más grandes y más impresionantes pantallas, pantallas móviles son todavía significativamente más pequeños que los de las computadoras de escritorio. Para crear un formulario con varias columnas más probable que sea difícil de leer y trabajar a través de sus visitantes. Usted debe atenerse a una sola columna de diseño para que tus visitantes puedan revisar y completar un campo a la vez, simplemente desplácese hacia abajo en la página, ya que el trabajo a través de la forma.
2. Activar autocorrección y de autocompletar
No sólo es un dispositivo móvil con pantalla más pequeña que la de una computadora de escritorio, pero el teclado es demasiado. A menos que tenga los dedos pequeños o eres un excelente texter, escribir información detallada, tales como el transporte marítimo o detalles de pago, en un formulario móvil puede ser tedioso y consume mucho tiempo de la tarea para sus visitantes.
Es por eso que usted debe asegurarse de que su formulario ha de autocorrección (es decir, la forma corrige automáticamente los errores conocidos como la ortografía) y de autocompletar (es decir, la forma completa automáticamente los campos específicos, tales como la cumplimentación de su visitante del código postal en función de su ubicación). Esto facilita la forma de terminación del proceso, que asegura que sólo precisa de la información es presentada, y guarda sus visitantes de tener que escribir en cada pieza de información.
4. Hacer que su forma hermosa
El aspecto es importante, que incluye su móvil de formularios web forms. Algunas pantallas pueden ser muy pequeños a fin de mantener su forma de diseño minimalista, colores coordinados, y estéticamente agradable. Usted debe también a la marca de su formulario de un modo simplista — aunque la forma es en una pantalla pequeña, la marca hará que se vea profesional, así como recordar sus visitantes, que están haciendo negocios con.
5. Mantener minimalista
Normalmente, se puede aplicar el dicho de “menos es más” para todos los aspectos de su sitio web. Nadie quiere leer a través de un montón de pelusa o mirar a su alrededor un completo sitio para la información que necesitan. Esto es especialmente cierto en una compacta, móvil, dispositivo de pantalla. Mantenga su número de campos de formulario para el mínimo, en un lenguaje sencillo, y mantener todos los otros elementos de su diseño simple.
CTA de Diseño de Formulario
Casi todos los formularios web forms incluya una llamada a la acción (CTA) de algún tipo. El mayor número de clics en el botón CTA — que podría decir algo así como “Aprender Más”, “Conseguir Más Conversiones Ahora”, o “Descargar Ahora” — el mayor de su potencial para la adquisición de un nuevo cliente potencial o cliente. El diseño de la CTA es fundamental … de lo contrario, ¿por qué iba alguien a querer “aprender más” o “descargar” su producto, ni siquiera un aviso de la CTA en su página?
Antes de adentrarnos en los diferentes CTA diseño de la forma de los factores que usted querrá tener en cuenta a la hora de crear su propia CTA, vamos a revisar rápidamente lo que un CTA en realidad es.
¿Qué es una CTA?
HubSpot describe una CTA, o llamada a la acción, como “…un botón o enlace colocado en un sitio web para la unidad de los clientes potenciales para convertir a los clientes potenciales a través de una página de aterrizaje en la forma”.
Un CTA debe ser colocado en un fácil-a-spot ubicación en el formulario web. Además de un formulario web, un CTA podría ser colocado en una página web, un blog, o en un correo electrónico. Su CTA debe tener muy buen aspecto, agarrar la atención de su visitante, y emplean un diseño minimalista para que su visitante puede entender rápidamente lo que su oferta incluye.
Hacer las cosas más fáciles y apoderarse de estos 25+ gratis CTA plantillas de diseño.
Cinco CTA Factores de Diseño a Considerar
Ahora, vamos a repasar cinco diferentes aspectos de la CTA de diseño: el tamaño, el botón de acción, el tipo de letra, efectos especiales, y la colocación.
1. CTA tamaño
Si el CTA es demasiado pequeño, usted corre el riesgo de que alguien se pierda completamente. Si el CTA es demasiado grande, usted corre el riesgo de que viene como spam, profesional y agresivo.
Cuando se determina el tamaño de la CTA, mire la página web entera. Usted no quiere que se sienta lleno, pero usted también quiere asegurarse de que sus visitantes orgánicamente aviso de tu CTA mientras navega por la página o formulario.
Fuente
2. Botón de acción
Cada CTA cuenta con un botón de acción (de ahí el nombre de llamada a laacción). Que botón de acción es la cosa que sus visitantes realmente haga clic en “Descargar Ahora” o “Más información” — así, la forma en que se ve y lo que se dice importa bastante poco.
Su botón de acción debe destacarse. Usted no quiere que nadie se pregunto de si están o no haciendo clic en el botón correcto. Usted también debe usar conciso, directo, orientado a la acción, impactantes y de lenguaje, para que tus visitantes sepan que sin duda lo que están recibiendo de su CTA.
Fuente
3. Fuente
¿Alguna vez has estado buscando en el contenido del sitio web y se dio cuenta de cuánto había que colar sus ojos a la realidad leer el contenido? Si es el tamaño de la tipografía o el color, la fuente juega un papel importante en la experiencia del visitante.
Y con algo tan importante como la CTA, que los impactos de las conversiones y las ventas directamente, no tiene ningún margen de error, tales como la elección de la fuente es demasiado pequeño o difícil de leer. Implementar un fácil-a-lea la fuente que trabaja con el color, el estilo y el tamaño de la CTA.
Fuente
4. Los efectos especiales
Cuando digo “efectos especiales”, no me refiero a los efectos especiales en las películas o videos. Estoy hablando de efectos especiales que usted puede agregar fácilmente a su CTA para crear un diseño llamativo. Por ejemplo, los bordes biselados, las sombras, esquinas redondeadas, flechas, y los degradados de todas formas simples para crear una CTA que los visitantes hagan clic.
Fuente
5. Colocación
La colocación de la CTA es importante porque desea que los visitantes a ver orgánicamente mientras se trabaja a través de tu formulario. El punto de incluir una CTA en su página web o formulario es conseguir que sus visitantes de forma natural tropezar con él mientras está en su sitio o completar los campos del formulario — nadie nunca debe tener que buscar alrededor para un CTA. Que iría en contra de su propósito.
Fuente
Para aprender acerca de algunos grandes de la CTA ejemplos, echa un vistazo a este post en el blog.
Conclusión
No importa qué tipo de negocio que maneja o trabajo, más probable es que haya al menos un tipo de formulario en la web en su sitio. Mediante la aplicación de estas formulario de sugerencias de diseño que mejoran la experiencia de usuario, así como el diseño de interfaz de usuario, móvil de diseño de formulario, y de la CTA de diseño, podrá ofrecer a sus visitantes con un confiable y la experiencia positiva que ayuda a aumentar las conversiones. Por lo tanto, pensar acerca de los formularios que usted necesita incluir en su sitio y comenzar a poner en práctica consejos de diseño y comida para llevar que se aplican mejor a las necesidades de su negocio y objetivos.
Originalmente publicado Aug 2, 2018 6:00:00 AM, actualizado 08 de agosto de 2019
Temas:
Formas