() translation by (you can also view the original English article)
Hoy, examinaremos lo que es una validación de formulario y porque usted, Joe Webdiseñador, debería preocuparse al respecto. Acá está un adelanto: es una de las formas más fáciles de mejorar el uso de sus diseños y la mayoría de los diseñadores web se olvidan de ello, todo el tiempo. Además, mostraremos algunos ejemplos de magníficos diseños de validación de formularios. Lean pequeños saltamontes… el conocimiento los espera.
¿Qué es una Validación de Formulario?
En el contexto de una relación humana, la validación es cuando siente la necesidad de decir que está en lo correcto, en el contexto de un formulario web, la validación es cuando un formulario le dice que está equivocado. Para ser específicos, la validación de formulario es el proceso donde un formulario web verifica para ver si la información que ha sido introducida está correcta.
Por ejemplo:
- Si una casilla está marcada como “Dirección de correo”, el formulario podría verificar si el texto que ha sido introducido es una dirección de correo valida.
- Si la casilla está marcada como “Número Telefónico”, entonces el formulario podría verificar un formato específico (o cierto número de dígitos).
Ya tiene la idea… la validación solamente se asegura de que el usuario no ha hecho un error.
Aunque es parte de la naturaleza humana cometer errores y, por desgracia, su formulario web, posiblemente, no es la excepción de un error humano. Es aquí donde la validación juega su parte en un formulario de uso sencillo. Un simple gráfico le recuerda al usuario que algo no se completo adecuadamente y, esto, puede hacer la diferencia entre la alegría de un formulario completado con éxito y la intensa frustración de tener que adivinar que salió mal.
¿Por qué necesita diseñarlo?
El principio primordial de una buena validación de formulario es este: “Hable con los usuarios! Dígales cuando algo está mal!”.
La integración de validación es su diseño web no es difícil, pero para la mayoría de diseñadores nunca incluyen un diseño para ésto. ¿Por qué? Porque la validación a menudo es la preocupación que le queda a los desarrolladores en las etapas finales del proyecto.
Esto crea un escenario dónde usted, Joe Webdiseñador, está confiando uno de los aspectos más cruciales de la experiencia de usuario a un desarrollador que posiblemente no sabe o no le importa cómo debería estar diseñada la validación. Peor aún, en muchos casos, a los desarrolladores incluso no se molestan con nada más allá de la recuperación de datos que está en la mayoría de las validaciones de formularios… lo cual puede dejar a los usuarios frustrados.
Esto no es una crítica a los desarrolladores (hay muchos desarrolladores excelentes que manejan esto de forma brillante, pero supongamos que el desarrollador no está prestando atención, por el amor del argumento.
Examine el siguiente gráfico:
Algo parece estar mal en este formulario… pero el usuario está obligado a adivinar qué es.
¿Qué está mal en éste formulario? Claro, el formulario está “validando” al decirle al usuario que algo está mal…, pero el usuario tiene que adivinar qué salió mal.
El principio primordial de una buena validación de formulario es este: “Hable con los usuarios! Dígales cuando algo está mal!”.
Ahora, examinemos el siguiente gráfico:
¡Eureka!
¿Mucho mejor, cierto? Ahora le a dado a los usuarios la información que necesitan para arreglar el problema. Este es un ejemplo simplificado, pero observe cómo al integrar un sistema de respuesta básico, mejora la funcionalidad a grandes pasos.
Los 3 tipos de errores comunes de formularios
Ahora que entiende lo que es la validación, por suerte querrá aplicar esto a sus formularios web. Hay, por lo general, tres errores con los cuales los usuarios se podrían topar en su formulario.
Errores de Formatos
Éste es, posiblemente el problema más grande que los usuarios encuentran. ¿Alguna vez ha completado un formulario solamente para encontrar que puso un carácter ilegal en la casilla de; nombre de usuario, o ha usado un espacio en una dirección web? Es ahí dónde la validación de formato entra en juego.
La mayoría de los recuadros en un formulario web son solo alfanuméricos, sin embargo, si tiene un correo, una dirección web, un número telefónico o una casilla para la contraseña, entonces debe tener un formato específico para cada opción. Posiblemente pueda adivinar la sintaxis de cada casilla. De modo que la validación de formato es efectiva si tiene información específica en mente.
Casillas de Errores Requeridos.
Estos errores ocurren cuando un usuario olvida o hace caso omiso a completar una casilla que usted ha especificado como “necesario”.
Corregir Errores
Esto ocurre cuando necesita verificar si un valor es igual a otro. Esto es tan importante, especialmente en el acceso de formularios, porque usted no querrá permitir a los usuarios iniciar sesión si su contraseña no coincide con la correcta.
Se puede usar para hacer que los usuarios vuelvan a teclear su correo o su contraseña cuando es vital que no cometan un error.
El diseño solución.
A pesar de que pueda aplicar un estilo a su formulario en miles de formas diferentes, hay, por lo general, tres pasos básicos que ayudarán a sus usuarios a arreglar el problema de la validación:
- Informar al usuario que hay un error en alguna parte del formulario.
- Resaltar la casilla que está incorrecta.
- Mostrarles un ejemplo de lo que usted está esperando que hagan bien. (ejemplo, email@email.com).
El color es una de las mejores herramientas que puede usar cuando diseña la validación. Porque funciona en un nivel de instinto, añadiendo color rojo a los mensajes de error, o color verde a los mensajes con éxito es sumamente poderoso.
Proximidad es otra herramienta importante - conserve notificaciones especificaciones cerca de la casilla con el problema y conserve mensajes en todo el formulario fuera de cualquier casilla individual. Si puede crear una “piel” personalizada de soluciones que haga estás estrategias aún más obvias (como hacer que la notificación aparezca fijada a la casilla específica), lo haría, incluso, mejor.
Además, es una buena práctica decirle a los usuarios de antemano que podrían cometer errores. Muchos sitios web incluyen una caja al lado derecho con instrucciones de cómo debería ser completado el formulario. Otros tiene la sintaxis correcta descrita debajo de la etiqueta. Ya sea, cualquiera de los métodos que funcione, sólo que siempre esté ahí.
Así como mencionaré en la siguiente sección “cómo funciona la validación”, usted también querrá ejecutar una “validación al instante” cuando esto es posible.
Ejemplos de Excelentes Validaciones de Formularios
Ahora que hemos ido a través de la teoría de la validación de formularios… miremos algunos ejemplos de esto en acción.
Mientras vea estos, observe que la solución es siempre sencilla: una información, una notificación en caja, o un fragmento de un texto sencillo. Siempre que tengas las notificaciones cerca en proximidad con la casilla con el problema, puede diseñar, una piel, o dar estilo a estas en cualquier forma que quiera. Lo único que tiene que recordar es que realmente le de a los usuarios algunos consejos.
Empecemos a examinar a fondo:
ThemeForest
ThemeForest trae de inmediato un mensaje de error debajo de la casilla. Por otro lado, las entradas con éxito, obtienen un mensaje con la palabra “Éxito” en color verde.
Frexy
Frexy usa un simple, pero efectivo método: Colorea la casilla que está mal, y añade una notificación de texto brillante debajo. Edit: Así como Boba señaló en los comentarios, el color verde podría ser engañoso para algunos usuarios, pero usted tiene un equilibrio de marca y de funcionalidad para su propio gusto.
Twitter añade un mensaje de inmediato a la derecha de la casilla para indicar un error. Lo hace tan al instante… he incluso, agregan color al sistema de respuesta para destacar el mensaje.
Mint
Mint no sólo valida las casillas del formulario de inmediato, también dan un comentario tanto positivo como negativo… ¡es casi como si tuvieran una conversación con el formulario!
FancyForm
FancyForm es una herramienta de formulario que muestra cuán útil puede ser proveer, realmente, un comentario en linea en los iconos de formularios.
Virb
Virb añade un mensaje brillante cuando usted ha hecho algo malo. Puntos extras: ¡Virb, incluso no le deja teclear un carácter no permitido! Sólo inténtelo… ellos ya lo hicieron.
Wordpress
WordPress le dará un mensaje básico, pero lo especial es que el mismo formulario, de hecho, se sacudirá cuando introduzca información equivocada.
InvoiceMachine
InvoiceMachine usa el método más sencillo. En lugar de ayuda textual, colorean el fondo en rojo para representar el problema. Tenga en mente que un texto tooltip (es decir, herramienta de información, que normalmente aparece como un icono de un signo de interrogación junto al puntero) cuando el usuario pasa el puntero sobre el formulario aumentará esto mucho más.
WPCoder
WPCoder muestra que una simple ventana desplegable a través de JavaScript, también, puede funcionar muy bien.
Yahoo
Yahoo usa un método gracioso… más que de devolver un básico mensaje de erro, por ejemplo, cuando tu fecha de nacimiento está incorrecta, ellos le dan un poquito de actitud.
Cómo Funciona Realmente la Validación
Desde una perspectiva tecnológica, hay dos formas diferentes de integrar la validación en un formulario:
- Validación del lado del Servidor que es donde un usuario envía el formulario, y luego una secuencia se códigos analizará el el contenido del formulario y devolverá un error si los requisitos no coinciden.
- Validación del lado del Cliente el cual es el tipo de validación que hace JavaScript y que puede ver en algunos de los formularios en la actualidad. Aquí es donde un comentario instantáneo es generado casilla por casilla sin enviarse.
La validación del lado del cliente ofrece la alternativa más agradable para el usuario porque puede mostrarle una respuesta de inmediato, así el usuario puede, inmediatamente, rectificar sus errores. Sin embargo, la principal desventaja de la validación del lado del cliente es que, generalmente, depende de alguna especie de código de JavaScript Por lo tanto, si el usuario tiene apagado JavaScript, entonces no verá la validación en vivo. De modo que, asegúrese de que todavía tiene disponible la segunda opción; la validación del lado del servidor.
Puede leer más acerca del lado tecnológico de la validación en nuestra red, Nettuts!
Opiniones finales
Los mejores formularios son aquellos que anticipan el comportamiento del usuario. Es importante implantar un formulario y entender, antes de construirlo; cómo un usuario podría cometer errores. ¿Por qué? Porque si puede anticipar el lugar del problema, es fácil diseñar una solución para ayudar a los usuarios a superarlo. No obstante, dejar el diseño de la validación hasta el último minuto puede ser costoso arreglarlo una vez que el código está completo. Ocupe algo de tiempo extra para diseñar estrategias y estilos para su formulario y ahorre tiempo, dinero y la frustración a largo plazo.
