Validar un formulario de manera correcta Una de las maneras 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 programa o directamente se pasa por alto. Para abandonar 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 tema está marcado como dirección de email, el mismo debe estar escrito correctamente (con "@" y ".com") Si un tema está marcado como teléfono, el mismo debe contener sólo números El equivocar 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 manera "user friendly". ¿Dónde se realiza la validación del formulario? Desde el punto de vista tecnológico tienen lugar dos maneras de integrar validación a un formulario: Del lado del cliente: se hace a través de JavaScript, proporciona 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 significativo 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 yerros Existen 3 yerros globales con los que tu formulario se encontrará: Yerros 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 comprobar que el formato ingresado por el usuario sea el correcto. Campos requeridos: Estos yerros ocurren cuando el usuario olvida completar un tema que es indispensable para el proceso. Yerros de comparación: Estos yerros se dan cuando tenés que chequear que dos valores sean iguales, técnica utilizada cuando es vital comprobar que el usuario no haya cometido un yerro 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 próximo gráfico Se nos dice que algo está mal, pero poseemos 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 conocemos qué no hay que realizar. Falta ver qué podemos realizar para corregir vuestro formulario. Para eso podemos utilizar la próximo lista: Informar al usuario que hay un yerro con un texto Resaltar el tema que contiene el yerro Mostrarles un ejemplo de lo que se aguarda Utilizar colores (el rojo es un color instintivo de que algo salió mal) Utilizar imágenes Mantener las notificaciones cerca del espacio del error. No es indispensable añadir todas estas cosas, unicamente son una guía para que tengas en cuenta. La próximo imagen es un ejemplo de cómo se podría mejorar vuestro ejemplo anterior. Resumen Es significativo al momento de planificar un formulario, comprender cuáles son los yerros en los que puede incurrir un usuario. Con esto nos anticipamos al asunto y es más simple diseñar una solución para ayudar a los usuario a que pasen dicho asunto.