6-mistakes-in-website-form-design-you-should-never-make

6 errores en forma de página de diseño que nunca se debe hacer

UI (interfaz de usuario) y UX (experiencia del usuario) tienen un papel importante en la conversión de diseño web amigable. Interfaz de usuario hace que su sitio web bello y UX se concentra en la usabilidad y facilidad de la página web. Si cualquiera de estos dos se encuentra o no está equilibrada, el resultado está rebotando clientes. formulario de la página de diseño es que parte del diseño web que garantiza la generación de plomo sin problemas y recopilación de información con la satisfacción del usuario en un sitio web adecuado. En este blog nos centraremos principalmente en UX como interfaz de usuario es algo que es muy subjetiva y que se define por las directrices de marca de su empresa o su elección de colores, banderas y fuentes.

Wikipedia dice:

La experiencia del usuario de diseño (UX, UXD, UED o XD) es el proceso de aumentar la satisfacción del usuario con un producto mediante la mejora de la facilidad de uso, la accesibilidad, y el placer proporcionado en la interacción con el producto .”

Utilizamos diferentes formas en nuestros sitios web en casi todas las partes. De formas de retroalimentación a la Página del pago todo tiene su fin, y si no se diseñan de acuerdo a lo que se ha diseñado, van a dejar de servir a su propósito.

En este post, voy a explicar 6 de tales errores en un diseño de formularios web que nunca se debe cometer si se quiere evitar devoluciones de mensajes, y peores experiencias de los usuarios en su sitio web.

1. Solicitud de un exceso de información por parte del usuario

40% de la gente abandona un sitio web que tiene más de 3 segundos en cargar. ”- KISSmetrics. Esto es cuando el sitio web de frenado por 1 segundo, imagínese lo que sería la reacción si sus residuos de sitios web mucho más tiempo de lo que con sólo pedir detalles innecesarios para rellenar los formularios.

Por lo tanto, no pierda su tiempo y su conversión al pedir información ‘no es tan importante’.Tenga en cuenta que hay una diferencia entre la información ‘innecesario’ y la información ‘no es tan importante’.

La información como la ‘etnicidad’ o ‘Lugar de nacimiento’ de la persona puede ser considerada innecesaria para un sitio web de comercio electrónico, pero podría ser importante para el sitio web de un partido político. Así que esto también es discutible y subjetivo, pero creo que tienes la idea.

campos ” no es tan importante pueden ser:

  • Adicional ID de correo electrónico
  • Número de teléfono adicionales
  • Fecha de nacimiento
  • Número de fax
  • pregunta y respuesta de seguridad
  • Número de seguro social, etc.

Incluso si usted necesita estos detalles no es necesario pedir en una sola vez, siempre se puede dar una opción al usuario que actualice su / su perfil. Piense como Linkedin o Facebook no preguntan todo de una vez, sino que se adquiere por primera vez se inscribió con un mínimo de 3-5 campos y luego le dan una opción para actualizar su perfil más tarde.

Todo es cuestión de presentación, por lo que sólo se debe preguntar a los detalles más importantes que usted necesita como: Si está utilizando la forma de retroalimentación, a continuación, preguntar acerca de sus puntos de vista y comentarios antes de pedir su nombre o correo electrónico de identificación. Del mismo modo, si se trata de una forma de pago, y ya tiene cierta información sobre el usuario, entonces no pida a los de nuevo, en lugar de ellos tienen pre-llenados en el formulario. Por ejemplo, se puede rellenar previamente la información de la dirección de facturación de auto-llenar el formulario de dirección de entrega si ambas direcciones son iguales.

el envío de factura-información
Información previa a la población de una forma a otra puede ahorrar tiempo y esfuerzo de los usuarios

2. positioning- etiqueta Ambiguous o no responde

Las etiquetas se utilizan en los formularios del sitio web para hacer más fácil para el usuario para llenar la información requerida. Así que aseguran que las etiquetas se colocan en una posición correcta que no confunda al usuario sobre lo que llenar en ella. Una alineación de la etiqueta correcta se requiere esencialmente cuando se está diseñando un formulario de respuesta que sirve para diferentes tamaños de pantalla. Asegúrese de que las etiquetas permanecen alineados correctamente en todos los tamaños de la pantalla se abre el formulario.

Formulario de contacto móvil
Formulario de contacto móvil
screen-tamaños-opción recomendada
La mayoría de los formularios de sitios web utilizan las mismas ubicaciones de etiquetas en todos los tamaños de pantalla que no es una opción recomendada

Los usuarios en el uso del zoom móvil para ver claramente las etiquetas de las formas para que llenen la información correcta. Sin embargo, como se muestra en la imagen de arriba si se mantiene la misma alineación tanto en el escritorio y las versiones móviles de la forma, se ocultará todas las etiquetas mientras hace clic en el formulario en modo de zoom. Que obligará al usuario a alejar el formulario cada vez que se mueve a la siguiente entrada.

Una mejor opción para la manija esto sería usar dos alineaciones diferentes en el escritorio y la versión móvil de la forma. Hacer las etiquetas de la parte superior alineados en las versiones móviles y mantenerlo alineado a la derecha en el escritorio.

3. Sustitución de etiquetas con placeholders-

Con HTML 5, marcadores de posición en atributo de texto eran una adición valiosa. Se utilizan con eficacia para proporcionar una breve pista acerca de un valor esperado en el campo.

-pista acerca de lo esperado-valor en forma de campo
Los marcadores de posición proporcionan una corta pista acerca de los valores esperados en campo de formulario

Normalmente, un marcador de posición permanece visible hasta que el usuario hace clic en el campo. Tan pronto como el usuario hace clic en el campo para escribir algo, el marcador de posición se desvanece. El uso de marcadores de posición en el diseño de formularios web es altamente confunde con el de las etiquetas. Muchos diseñadores utilizan estos marcadores de posición en lugar de etiquetas para describir los campos de entrada con la esperanza de conseguir un diseño más limpio. Esto es un gran error que compromete con la experiencia del usuario.

Vamos a echar una situación cuando el usuario rellena un formulario muy largo, como una forma de pago. Después de rellenar el formulario, puede ser que desee revisar los detalles antes de que pueda enviar el formulario. Ahora, si no hay una etiqueta en forma, él simplemente se confunden acerca de los detalles que ha rellenado.

marcadores de posición
El uso de marcadores de posición en lugar de etiquetas confundirá a sus clientes sobre todo en las formas largas

Por lo tanto, siempre use una etiqueta. No utilizar etiquetas podría ser un ahorro de espacio, pero se sorprendería saber con qué facilidad la gente olvida lo que la etiqueta era una vez que se complete la información en el campo.

4. Uso insuficiente Espaciado y el diseño distorsionada

Otro gran error que hacemos en el diseño de formularios web es mediante la colocación de demasiados elementos en una sola página. Más son el número de elementos en una sola página más es la competencia entre ellos para llamar la atención.

La solución es dejar un poco de espacio para respirar entre los elementos manteniendo espacios en blanco. Un flujo adecuado para sus usuarios se hará efectiva sólo cuando se mantiene un amplio espacio alrededor de los campos y las diferentes secciones.

Esta forma de pago única página muestra cómo las diferentes secciones pueden ser segregados incluso si hay demasiados elementos en una sola página. El formulario utiliza etiquetas de sección para separar diferentes secciones como Opciones de conexión, dirección de facturación, Confirmar pedido, forma de envío y método de pago. Por otra parte, el diseño de tres columnas hace que la forma incluso más limpio.

segregando-prevenir-estorbar
La segregación de las diferentes secciones evitará estorbar entre las diferentes secciones

5. mensajes de error incierto y validaciones de entrada

Mientras que la cumplimentación de los formularios de sitios web, hay ciertas posibilidades de que los usuarios van a cometer algunos errores debido a que no estaría sometido formulario. Se pueden producir errores por falta de una entrada, o llenar una información incorrecta, etc. Para hacer frente a este sitio web, los diseñadores utilizan las validaciones de entrada que muestran el mensaje (s) error al enviar el formulario. Utilizan las validaciones del lado del servidor que espera generalmente para la respuesta del servidor para comprobar los errores en el formulario. Este es un error más grande que incluso puede frustrar al usuario cuando ven un mensaje de error después de enviar el formulario.

En su lugar, puede utilizar la validación del lado del usuario en línea que le dice sobre el terreno si el usuario está llenando una entrada incorrecta en un campo. Al hacer esto, los usuarios no se perderán si han entrado algo mal en un campo.

Inline-validación
la validación en línea para comprobar y demostrar los errores sobre el terreno impiden la forma posterior presentación frustración

Por otra parte, no use declaraciones confusas en los mensajes de validaciones. Sólo explicar por qué la entrada es incorrecto con la descripción de la forma en la entrada correcta se vería así.

6. El uso de Captcha que no están diseñados para los seres humanos

Captchas son utilizados por los sitios web para prevenir los ataques de spam, distinguiendo un bot de los seres humanos. Estos captchas se supone que presentar un reto que sería fácil para los seres humanos, mientras que los robots no pueden pasar a ellos. Para la prevención de spam, a veces, los diseñadores se vuelven tan desesperados que integran los captchas que son un reto incluso para los seres humanos.

Prevenir SPAM
Captcha que evitar el spam, pero frustrar a los usuarios humanos

Entiendo la prevención de spam es importante, pero código de imagen puede ser confuso y difícil para los usuarios para descifrar ellos. Se puede utilizar una solución alternativa del llamado Google re-Captcha, que es una versión más avanzada y simple. El nuevo Google re-Captcha simplemente pide al usuario que haga clic en una casilla de verificación y comprobación se realiza sin introducir un difícil ver el mensaje de texto.

Google re-Captcha
Google re-Captcha es comparativamente más fácil de usar a pesar de que es difícil para los robots

Por último ,

La experiencia del usuario mejora es un proceso continuo que sólo se puede lograr con actualizaciones regulares utilizando los mejores métodos disponibles. Espero que describe estos errores de diseño le ayudará a lograr esa mejora no cometiendo estos errores en cualquiera de las formas que utiliza en su sitio web.

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *