Validar un formulario de forma correcta

Una de las formas más simples de mejorar la experiencia de usuario es a través de la validación de formularios. Desgraciadamente, esta tarea queda relegada al final del proyecto o directamente se pasa por alto.
Para dejar las cosas claras, vamos a ir por pasos.

¿Qué es la validación de formularios?

La validación de formularios es el proceso por el cual se verifica que la información ingresada en el formulario sea correcta o no.
Por ejemplo:

• Si un campo está marcado como dirección de email, el mismo debe estar escrito correctamente (con "@" y ".com")
• Si un campo está marcado como teléfono, el mismo debe contener sólo números

El errar es humano, por lo que la validación asegura que el usuario no haya cometido un error. Aquí es donde la validación juega su papel, de una forma "user friendly".

¿Dónde se realiza la validación del formulario?

Desde el punto de vista tecnológico existen dos formas de integrar validación a un formulario:

• Del lado del cliente: se hace a través de JavaScript, ofrece un feedback instantáneo, no hace falta el envío de los datos
• Del lado del servidor: se hace al enviar los datos, se realiza con un lenguaje de servidor (PHP, C#, Java, etc.), no es instantáneo

Es importante recalcar que la validación debe hacerse en ambos lados, ya que a pesar de tener la validación del lado del cliente esta puede ser salteada (por ejemplo, desactivando JavaScript en el navegador).

Tipos más comunes de errores

Existen 3 errores generales con los que tu formulario se encontrará:

1. Errores de formato: La mayoría de los campos en un formulario son alfanuméricos, pero si poseés campos como un teléfono o un email, tenés que verificar que el formato ingresado por el usuario sea el correcto.
2. Campos requeridos: Estos errores ocurren cuando el usuario olvida completar un campo que es necesario para el proceso.
3. Errores de comparación: Estos errores se dan cuando tenés que chequear que dos valores sean iguales, técnica utilizada cuando es vital verificar que el usuario no haya cometido un error de tipeo. Por ejemplo, al ingresar dos veces la contraseña.

Hablar con el usuario

Esa es básicamente la función de la validación: Hablar con el usuario, decirle que algo no está correcto.
¿A quién pertenece la función de validar? ¿al programador o al diseñador?
En general, un programador no diseñará una validación amigable, lo cual puede ser frustrante para los usuarios. En el siguiente gráfico

Se nos dice que algo está mal, pero tenemos que buscar qué.
Dejar que el usuario tenga que adivinar qué es lo que está haciendo mal, es un mal diseño.

Diseñando una solución

Ya sabemos qué no hay que hacer. Falta ver qué podemos hacer para corregir nuestro formulario. Para eso podemos utilizar la siguiente lista:

• Informar al usuario que hay un error con un texto
• Resaltar el campo que contiene el error
• Mostrarles un ejemplo de lo que se espera
• Utilizar colores (el rojo es un color instintivo de que algo salió mal)
• Utilizar imágenes
• Mantener las notificaciones cerca del lugar del error.

No es necesario agregar todas estas cosas, solamente son una guía para que tengas en cuenta.
La siguiente imagen es un ejemplo de cómo se podría mejorar nuestro ejemplo anterior.

Resumen

Es importante al momento de planificar un formulario, entender cuáles son los errores en los que puede incurrir un usuario. Con esto nos anticipamos al problema y es más simple diseñar una solución para ayudar a los usuario a que pasen dicho problema.

Ref: http://www.nebaris.com/post/8/validar_un_formulario_de_forma_correcta