Share
Hoy examinaremos qué es la validación de formularios y por qué tú, Joe Webdesigner, debería preocuparse por ello. Aquí hay un teaser: es una de las maneras más fáciles de mejorar la usabilidad de sus diseños y la mayoría de los diseñadores web se olvidan de ello todo el tiempo.! También mostraremos algunos ejemplos de gran diseño de validación de formularios.. Leer en los saltamontes jóvenes ... el conocimiento espera.
En el contexto de una relación humana, la validación es cuando sientes la necesidad de que te digan que tienes razón; En el contexto de un formulario web, la validación es cuando el formulario le dice que está equivocado. Ser especifico, la validación de formulario es el proceso en el que un formulario web comprueba si la información que se ha ingresado es correcta.
Por ejemplo:
Obtienes la idea ... la validación solo se asegura de que el usuario no haya cometido un error.
Sin embargo, es natural cometer errores y, desafortunadamente, su formulario web probablemente no esté exento de errores humanos. Aquí es donde la validación juega su papel en una forma fácil de usar. Un simple recordatorio visual para el usuario de que algo no se ha rellenado correctamente puede marcar la diferencia entre la alegría de un formulario completado con éxito y la intensa frustración de tener que adivinar qué fue lo que salió mal..
El principio principal de la validación de una buena forma es este: "¡Hable con el usuario! ¡Dígales cuando algo está mal!"
Integrar la validación en sus diseños web no es difícil ... pero la gran mayoría de los diseñadores nunca incluyen diseños para ella. ¿Por qué? Debido a que la validación a menudo se deja para que los desarrolladores se preocupen en las últimas etapas de un proyecto.
Esto crea un escenario en el que usted, Joe Webdesigner, confía uno de los aspectos más cruciales de la experiencia del usuario a un desarrollador que probablemente no sepa o le importe cómo debe diseñarse la validación. Diablos, en muchos casos, los desarrolladores ni siquiera se molestarán en nada más allá de la validación de la forma más remediadora ... lo que puede dejar a los usuarios frustrados.
Esto no es un empuje para los desarrolladores ni nada (y hay muchos desarrolladores geniales que manejarán esto con mucho éxito), pero supongamos que el desarrollador no está prestando atención por el bien de la discusión..
Examina el siguiente gráfico:
¿Qué hay de malo con esta forma? Claro, el formulario se "valida" a sí mismo al decirle al usuario que algo está mal ... pero el usuario debe adivinar qué es..
El principio principal de la validación de una buena forma es este: "¡Hable con el usuario! ¡Dígales cuando algo está mal!"
Examinemos el siguiente gráfico:
Mucho mejor ¿verdad? Ahora el usuario recibe la información que necesita para solucionar el problema. Este es un ejemplo simplificado, pero observe cómo la integración de un sistema de respuesta básico mejora la facilidad de uso a pasos agigantados.
Ahora que comprende qué es la validación, es de esperar que desee aplicar esto a sus formularios web. En general, existen tres errores que los usuarios pueden encontrar en su formulario:
Este es probablemente el mayor problema que encontrarán los usuarios. ¿Alguna vez completó un formulario solo para descubrir que colocó un carácter ilegal en el campo de nombre de usuario, o utilizó un espacio en una dirección web? Ahí es donde entra en juego la validación de formato..
La mayoría de los campos en un formulario web son solo alfanuméricos, sin embargo, si tiene un correo electrónico, una dirección web, un número de teléfono o un campo de contraseña, es posible que tenga un formato específico requerido. Probablemente puedas adivinar la sintaxis de cada campo. Por lo tanto, la validación de formato es efectiva si tiene en mente información específica.
Estos errores ocurren cuando un usuario olvida / descuida llenar un campo que ha especificado como "requerido".
Esto sucede cuando necesita verificar si un valor es igual a otro. Esto es muy importante, especialmente en los formularios de inicio de sesión, porque no desea permitir que los usuarios inicien sesión si su contraseña no coincide con la correcta..
También se puede usar para hacer que los usuarios vuelvan a escribir su correo electrónico o contraseña cuando es vital que no cometan un error.
Si bien puede personalizar su formulario de mil maneras diferentes, generalmente hay tres pasos básicos para ayudar a su usuario a solucionar el problema de validación:
El color es una de las mejores herramientas. para utilizar en el diseño de validación. Porque funciona a nivel instintivo, añadiendo rojo a los mensajes de error, o verde a los mensajes de éxito es increíblemente poderoso.
Proximidad es otra herramienta importante: mantenga las notificaciones específicas cerca de los campos de problemas y mantenga los mensajes sobre todo el formulario lejos de los campos individuales. Si puede crear soluciones personalizadas que hagan que estas estrategias sean aún más obvias (como hacer que la notificación parezca que está vinculada físicamente a un campo específico), lo hará aún mejor..
También es una buena práctica decirle a sus usuarios con anticipación dónde podrían crear errores. Muchos sitios web incluyen una caja lateral con instrucciones sobre cómo se debe completar el formulario. Otros tienen la sintaxis correcta descrita en la etiqueta. Cualquiera de los dos métodos funciona, siempre y cuando esté ahí.
Como mencionaremos en la sección "cómo funciona la validación" a continuación, también querrá ejecutar la "validación instantánea" cuando sea posible.
Ahora que hemos pasado por la teoría de la validación de formas ... veamos algunos ejemplos de esto en acción!
Mientras observa esto, tenga en cuenta que la solución siempre es simple: una información sobre herramientas, un recuadro en la notificación o un fragmento de texto sin formato. Mientras mantengas las notificaciones cerca del campo del problema, puedes diseñarlas, personalizarlas o diseñarlas de la forma que desees. Lo único que debes recordar es que realmente le das un consejo al usuario.
Vamos a profundizar en:
ThemeForest inmediatamente muestra un mensaje de error debajo del campo. Las entradas exitosas incluso obtienen un verde "¡Éxito!" mensaje.
Frexy utiliza un enfoque simple, pero efectivo: colorea el campo que está mal y agrega el texto de notificación brillante a continuación. Editar: Como señaló Boba en los comentarios, el color verde puede ser engañoso para algunos usuarios, pero debes equilibrar la marca y la facilidad de uso a tu gusto..
Twitter agrega un mensaje a la derecha inmediata del campo para indicar un error. Lo hace instantáneamente ... e incluso agregan color al sistema de respuesta para enfatizar el mensaje.!
Mint no solo valida los campos del formulario inmediatamente, sino que también le da a ambos positivo y negativo retroalimentación ... es casi como si estuvieras conversando con el formulario!
FancyForm es una herramienta de formulario que muestra lo útil que puede ser proporcionar comentarios en línea en forma de iconos..
Virb agrega un mensaje brillante cuando has hecho algo mal.. Puntos extra: ¡Virb ni siquiera te deja escribir un personaje no permitido! Solo inténtalo ... se atreven ya.
WordPress le dará un mensaje básico ... pero lo especial es que la forma en sí misma sacudidas cuando ingresas la información incorrecta.
InvoiceMachine utiliza el enfoque más simple. En lugar de ayuda textual, colorea el fondo en rojo para indicar un problema. Tenga en cuenta que una información sobre herramientas de texto cuando el usuario se desplace sobre el formulario mejorará esto aún más.
WPCoder muestra que una simple ventana emergente de Javascript puede funcionar bien también.
Yahoo usa un enfoque humorístico ... en lugar de devolver un error básico cuando un cumpleaños es incorrecto, te dan un poco de actitud.
Desde un punto de vista tecnológico, hay dos formas diferentes de integrar la validación en una forma:
La validación del lado del cliente ofrece la alternativa más fácil de usar porque puede mostrar la retroalimentación en vivo e instantánea para que el usuario pueda corregir inmediatamente su error. Sin embargo, un inconveniente importante para la validación del lado del cliente es que generalmente se basa en algún tipo de JavaScript. Por lo tanto, si el usuario tiene JavaScript desactivado, no verá la validación en vivo. Por lo tanto, asegúrese de poder seguir utilizando la validación del lado del servidor.
Puede leer mucho más sobre el lado tecnológico de la validación en nuestro sitio de red, Nettuts!
Las mejores formas son aquellas que anticipan el comportamiento del usuario. Es importante planificar un formulario y entender cómo un usuario podría cometer errores antes de que se construya. ¿Por qué? Porque si puede anticipar un punto problemático, es fácil diseñar una solución para ayudar a los usuarios a superarlo. Sin embargo, dejar el diseño de validación hasta el último minuto puede ser costoso de arreglar una vez que se complete la codificación. Tomarse un tiempo adicional para diseñar estrategias y estilos para sus formularios le ahorrará tiempo, dinero y frustración a largo plazo.
Accentsconagua