- 13/03/2017 15:22
[ATTACH=CONFIG]222457[/ATTACH]
En un mundo ideal, los usuarios llenarán el formulario con la información necesaria y terminarán su trabajo con éxito. En el mundo real, los usuarios a menudo cometen errores. Aquí es donde la ayuda de la forma y la validacción entran en juego. El objetivo de estas acciones es explicar cómo llenar el formulario y asegurarse de que el usuario proporcionó la información necesaria y correctamente formateada necesaria para completar con éxito una operación.
En este artículo vamos a revisar la asistencia y la validacción y explorar diferentes técnicas de validacción y retroalimentación, métodos y enfoques.
Asistencia y ayuda.
Usted nunca debe explicar a los usuarios cómo llenar un formulario. Esto puede sonar bastante extraño, pero el punto principal aquí es muy obvio: su forma debe ser intuitiva. Si el formulario es demasiado complicado de llenar, entonces rediseñarlo es su única opción. Por lo tanto, los campos de entrada qué requieren ayuda deben mantenerse a un mínimo o evitar completamente, especialmente en móviles.
1. Texto para acompañar el formulario.
El texto de acompañamiento debe utilizarse sólo donde realmente se necesita. Como regla general, no exceda de 100 palabras de explicación.
Usted pregunta al usuario por los datos desconocidos (El usuario puede preguntar ¿Qué es esto? ) No es obvio donde los usuarios pueden encontrar un código de barras y texto de ayuda concisa junto a los campos de entrada puede ser muy útil.
Datos Específicos.
La gente podría preguntar por qué está pidiendo datos específicos (El usuario podría preguntarse ¿Por qué me está preguntando esto? ).
Preocupaciones sobre seguridad o privacidad.
Las personas pueden preocuparse por la seguridad o la privacidad de sus datos y es necesario asegurarles que los datos no se compartirán con fuentes de terceros.
Información útil en contexto.
A veces es necesario disponer de información relevante en contexto para ayudar a los usuarios a desplazarse fácilmente por el formulario. Por ejemplo, al programar fechas, los usuarios aprecian el contexto como un calendario mensual para identificar los días de la semana, eliminando la necesidad de dejar la aplicación para comprobar el calendario del teléfono. También reduce el riesgo de que el usuario se distraiga con otra tarea.
2. Ayuda dinámica.
Hay formularios que utilizan formatos únicos o tienen restricciones de entrada. En tales casos, la cantidad de texto de ayuda necesaria para cada campo de entrada podría abrumar rápidamente un formulario, haciendo que parezca bastante complejo. Para formularios como este, tiene sentido considerar el uso de ayuda contextual dinámica.
El comportamiento de las personas puede activar automáticamente el acceso a los sistemas de ayuda y mostrar el texto de ayuda sólo cuando los usuarios realmente necesitan asistencia. Una forma adecuada de integrar la ayuda es mostrarla junto al campo cuando el usuario se centra en ella para qué esté siempre en contexto.
Ayuda en línea automática.
La ayuda en línea automática se revela cuando un usuario hace clic o se conecta a un campo de entrada. Normalmente tiene una fuerte conexión visual entre los campos de entrada y la ayuda asociada. Un posible inconveniente de este tipo de ayuda dinámica es que es poco probable que las personas conozcan cualquier texto de ayuda disponible hasta qué empiecen a llenar el formulario.
El texto de ayuda se muestra automáticamente cuando los usuarios interactúan con los campos de entrada.
Exposición en línea activada por el usuario.
La ayuda en línea activada por el usuario permite a las personas accedan explícitamente al texto de ayuda cuando lo necesitan. Este método suele utilizar iconos de signo de interrogación para qué la gente sepa qué la ayuda está disponible. Una persona puede hacer clic o señalar a estos disparadores para revelar el texto de ayuda relevante.
Este enfoque tiene los siguientes beneficios:
- La ayuda está disponible para los usuarios, de forma consistente, cada vez que lo necesitan y en el momento en que lo necesitan, pero no a menos que lo necesiten.
- Proximidad de control en el formulario tiene un buen efecto en la experiencia de los usuarios. Una idea de la sección de ayuda dedicada o paneles para formularios complejos no estaría tan cerca de elementos de forma como podría ser el icono. Para encontrar esa área de ayuda, el ojo del usuario debe viajar a esa parte, aprender y luego regresar de nuevo a los elementos del formulario.
- Funciona bien para principiantes, así como para los usuarios experimentados.
Ruido visual.
El enfoque de ayuda dinámica tiene un inconveniente importante: agregar texto de ayuda a un formulario de esta manera puede provocar que el contenido que se encuentra debajo esté cubierto por el texto de ayuda superpuesto. Como se ve en el siguiente ejemplo, la tercera sección es completamente invisible para él usuario.
Validacción y comentarios.
Las validaciones de formularios tienen la intención de tener conversaciones con los usuarios y guiarlos a través de los tiempos difíciles de errores e incertidumbre. La salida de este proceso es emocional más que técnico. Una de las partes más importantes, y a menudo no amadas del diseño del formulario, es el manejo de errores. Es la naturaleza humana a cometer errores, sin embargo, y su forma probablemente no está exenta de error humano. Aquí es donde la validacción juega su parte en una forma fácil de usar. Cuando se hace correctamente, puede convertir una interacción ambigua en una clara.
El principio primario de validacción de buena forma es esto: Hable con el usuario. Cuéntales cuándo es lo que está mal. En general, hay cuatro elementos importantes que la validacción de buena forma consiste en:
- Momento adecuando de informar sobre errores (o éxito)
- Lugar adecuando para la salida de validacción
- Color correcto para él mensaje
- Borrar el idioma de su mensaje.
Y todos estos momentos tienen un objetivo principal: evitar la confusión. Tiempo correcto (validacción en línea).
A los usuarios no les gusta cuando pasan por el proceso de llenar un formulario sólo para averiguar en la presentación, que han cometido un error. El momento adecuando para informar sobre el éxito o fracaso de los datos proporcionados es justo después de que el usuario haya presentado la información. La validacción en línea en tiempo real informa inmediatamente a los usuarios sobre la exactitud de los datos proporcionados. Este enfoque permite a los usuarios corregir los errores que hacen más rápido sin tener que esperar hasta qué presionen el botón de envío para ver los errores.
Esta validacción no sólo debe decir a los usuarios lo que hicieron mal, sino también debe decirles lo que están haciendo bien. Esto proporciona a los usuarios más confianza para desplazarse por el formulario.
Sin embargo, evite validar en cada pulsacción de tecla porque en la mayoría de los casos simplemente no puede validar hasta qué alguien haya terminado de escribir su respuesta.
Espere hasta qué el usuario termine de escribir.
Por último, pero no menos importante, este tipo de validacción funciona especialmente bien para respuestas menos obvias, como escoger un nombre de usuario único o una contraseña segura. Twitter es un ejemplo obvio aquí. En la pantalla de abajo puedes ver que el formulario me informa qué este correo electrónico ya está en uso y me ofrece algunas opciones (ya sea para iniciar sesión o recuperar mi contraseña).
Lugar correcto (regla de oro).
La proximidad es otra herramienta importante. Cuando se esté preguntando qué lugar elegir para sus mensajes de validacción, siga esta regla general: coloco siempre el mensaje en el contexto de la acción. Si desea informar al usuario sobre un error que ocurre en un campo concreto, muéstrelo junto al campo. El formulario de Facebook es un gran ejemplo de mensaje de validacción bien colocado. Color correcto (diseño intuitivo).
El color es una de las mejores herramientas a utilizar al diseñar la validacción. Debido a qué funciona en un nivel instintivo, añadir rojo a los mensajes de error, amarillo a los mensajes de advertencia, y el verde a los mensajes de éxito es increíblemente potente. Pero asegúrese de que los colores de su interfaz digital sean accesibles para sus usuarios, es un aspecto realmente importante de un diseño visual bien ejecutado.
Habla el mismo idioma qué tus usuarios. Su mensaje de validacción debe indicar claramente:
- Lo que salió mal y posiblemente por qué.
- Cuál es el siguiente paso que el usuario debe tomar para corregir el error.
Y debe evitar usar jerga técnica. Los términos o frases desconocidos aumentarán la carga cognitiva para él usuario. Las reglas son simples, pero de alguna manera son muy fáciles de ignorar.
Un error típico podría indicar que el correo electrónico no es válido sin decirle al cliente por qué es inválido (¿Es un error tipográfico? ¿Está ocupado?) Instrucciones directas, o directrices, hacen toda la diferencia. No hay adivinanzas para él usuario que recibe este error, y tampoco hay confusión o frustración.
En el ejemplo a continuación puede ver un buen ejemplo de validacción en línea qué proporciona una solución para solucionar un problema potencial. Esta validacción ayuda a disminuir los rebotes.
Incluso antes de la validacción.
Reglas de contraseñas. Dígale a los usuarios cuáles son sus reglas de contraseña por adelantado, en lugar de hacer que adivinen y espere errores de validacción. No utilice formato de entrada fijo. La razón más común para forzar un formato fijo es la limitación del script de validacción. Lo que, en la mayoría de los casos, es un problema de implementación. En lugar de forzar el formato de algo como un número de teléfono durante la entrada del usuario, debe permitir transformar lo que el usuario introdujo en el formato que desea mostrar o almacenar.
Conclusión.
Asistencia de formulario y diseño de validacción es algo tan complicado. Son pequeños detalles que pueden ayudar al usuario a terminar el formulario tan rápido y tan fácil como sea posible. No importa lo aburrido que es para nosotros los diseñadores y desarrolladores - tenemos que seguir ciertas reglas para hacer la ayuda de formulario y la validacción de nuestra fuerza en lugar de una debilidad.
En un mundo ideal, los usuarios llenarán el formulario con la información necesaria y terminarán su trabajo con éxito. En el mundo real, los usuarios a menudo cometen errores. Aquí es donde la ayuda de la forma y la validacción entran en juego. El objetivo de estas acciones es explicar cómo llenar el formulario y asegurarse de que el usuario proporcionó la información necesaria y correctamente formateada necesaria para completar con éxito una operación.
En este artículo vamos a revisar la asistencia y la validacción y explorar diferentes técnicas de validacción y retroalimentación, métodos y enfoques.
Asistencia y ayuda.
Usted nunca debe explicar a los usuarios cómo llenar un formulario. Esto puede sonar bastante extraño, pero el punto principal aquí es muy obvio: su forma debe ser intuitiva. Si el formulario es demasiado complicado de llenar, entonces rediseñarlo es su única opción. Por lo tanto, los campos de entrada qué requieren ayuda deben mantenerse a un mínimo o evitar completamente, especialmente en móviles.
1. Texto para acompañar el formulario.
El texto de acompañamiento debe utilizarse sólo donde realmente se necesita. Como regla general, no exceda de 100 palabras de explicación.
Usted pregunta al usuario por los datos desconocidos (El usuario puede preguntar ¿Qué es esto? ) No es obvio donde los usuarios pueden encontrar un código de barras y texto de ayuda concisa junto a los campos de entrada puede ser muy útil.
Datos Específicos.
La gente podría preguntar por qué está pidiendo datos específicos (El usuario podría preguntarse ¿Por qué me está preguntando esto? ).
Preocupaciones sobre seguridad o privacidad.
Las personas pueden preocuparse por la seguridad o la privacidad de sus datos y es necesario asegurarles que los datos no se compartirán con fuentes de terceros.
Información útil en contexto.
A veces es necesario disponer de información relevante en contexto para ayudar a los usuarios a desplazarse fácilmente por el formulario. Por ejemplo, al programar fechas, los usuarios aprecian el contexto como un calendario mensual para identificar los días de la semana, eliminando la necesidad de dejar la aplicación para comprobar el calendario del teléfono. También reduce el riesgo de que el usuario se distraiga con otra tarea.
2. Ayuda dinámica.
Hay formularios que utilizan formatos únicos o tienen restricciones de entrada. En tales casos, la cantidad de texto de ayuda necesaria para cada campo de entrada podría abrumar rápidamente un formulario, haciendo que parezca bastante complejo. Para formularios como este, tiene sentido considerar el uso de ayuda contextual dinámica.
El comportamiento de las personas puede activar automáticamente el acceso a los sistemas de ayuda y mostrar el texto de ayuda sólo cuando los usuarios realmente necesitan asistencia. Una forma adecuada de integrar la ayuda es mostrarla junto al campo cuando el usuario se centra en ella para qué esté siempre en contexto.
Ayuda en línea automática.
La ayuda en línea automática se revela cuando un usuario hace clic o se conecta a un campo de entrada. Normalmente tiene una fuerte conexión visual entre los campos de entrada y la ayuda asociada. Un posible inconveniente de este tipo de ayuda dinámica es que es poco probable que las personas conozcan cualquier texto de ayuda disponible hasta qué empiecen a llenar el formulario.
El texto de ayuda se muestra automáticamente cuando los usuarios interactúan con los campos de entrada.
Exposición en línea activada por el usuario.
La ayuda en línea activada por el usuario permite a las personas accedan explícitamente al texto de ayuda cuando lo necesitan. Este método suele utilizar iconos de signo de interrogación para qué la gente sepa qué la ayuda está disponible. Una persona puede hacer clic o señalar a estos disparadores para revelar el texto de ayuda relevante.
Este enfoque tiene los siguientes beneficios:
- La ayuda está disponible para los usuarios, de forma consistente, cada vez que lo necesitan y en el momento en que lo necesitan, pero no a menos que lo necesiten.
- Proximidad de control en el formulario tiene un buen efecto en la experiencia de los usuarios. Una idea de la sección de ayuda dedicada o paneles para formularios complejos no estaría tan cerca de elementos de forma como podría ser el icono. Para encontrar esa área de ayuda, el ojo del usuario debe viajar a esa parte, aprender y luego regresar de nuevo a los elementos del formulario.
- Funciona bien para principiantes, así como para los usuarios experimentados.
Ruido visual.
El enfoque de ayuda dinámica tiene un inconveniente importante: agregar texto de ayuda a un formulario de esta manera puede provocar que el contenido que se encuentra debajo esté cubierto por el texto de ayuda superpuesto. Como se ve en el siguiente ejemplo, la tercera sección es completamente invisible para él usuario.
Validacción y comentarios.
Las validaciones de formularios tienen la intención de tener conversaciones con los usuarios y guiarlos a través de los tiempos difíciles de errores e incertidumbre. La salida de este proceso es emocional más que técnico. Una de las partes más importantes, y a menudo no amadas del diseño del formulario, es el manejo de errores. Es la naturaleza humana a cometer errores, sin embargo, y su forma probablemente no está exenta de error humano. Aquí es donde la validacción juega su parte en una forma fácil de usar. Cuando se hace correctamente, puede convertir una interacción ambigua en una clara.
El principio primario de validacción de buena forma es esto: Hable con el usuario. Cuéntales cuándo es lo que está mal. En general, hay cuatro elementos importantes que la validacción de buena forma consiste en:
- Momento adecuando de informar sobre errores (o éxito)
- Lugar adecuando para la salida de validacción
- Color correcto para él mensaje
- Borrar el idioma de su mensaje.
Y todos estos momentos tienen un objetivo principal: evitar la confusión. Tiempo correcto (validacción en línea).
A los usuarios no les gusta cuando pasan por el proceso de llenar un formulario sólo para averiguar en la presentación, que han cometido un error. El momento adecuando para informar sobre el éxito o fracaso de los datos proporcionados es justo después de que el usuario haya presentado la información. La validacción en línea en tiempo real informa inmediatamente a los usuarios sobre la exactitud de los datos proporcionados. Este enfoque permite a los usuarios corregir los errores que hacen más rápido sin tener que esperar hasta qué presionen el botón de envío para ver los errores.
Esta validacción no sólo debe decir a los usuarios lo que hicieron mal, sino también debe decirles lo que están haciendo bien. Esto proporciona a los usuarios más confianza para desplazarse por el formulario.
Sin embargo, evite validar en cada pulsacción de tecla porque en la mayoría de los casos simplemente no puede validar hasta qué alguien haya terminado de escribir su respuesta.
Espere hasta qué el usuario termine de escribir.
Por último, pero no menos importante, este tipo de validacción funciona especialmente bien para respuestas menos obvias, como escoger un nombre de usuario único o una contraseña segura. Twitter es un ejemplo obvio aquí. En la pantalla de abajo puedes ver que el formulario me informa qué este correo electrónico ya está en uso y me ofrece algunas opciones (ya sea para iniciar sesión o recuperar mi contraseña).
Lugar correcto (regla de oro).
La proximidad es otra herramienta importante. Cuando se esté preguntando qué lugar elegir para sus mensajes de validacción, siga esta regla general: coloco siempre el mensaje en el contexto de la acción. Si desea informar al usuario sobre un error que ocurre en un campo concreto, muéstrelo junto al campo. El formulario de Facebook es un gran ejemplo de mensaje de validacción bien colocado. Color correcto (diseño intuitivo).
El color es una de las mejores herramientas a utilizar al diseñar la validacción. Debido a qué funciona en un nivel instintivo, añadir rojo a los mensajes de error, amarillo a los mensajes de advertencia, y el verde a los mensajes de éxito es increíblemente potente. Pero asegúrese de que los colores de su interfaz digital sean accesibles para sus usuarios, es un aspecto realmente importante de un diseño visual bien ejecutado.
Habla el mismo idioma qué tus usuarios. Su mensaje de validacción debe indicar claramente:
- Lo que salió mal y posiblemente por qué.
- Cuál es el siguiente paso que el usuario debe tomar para corregir el error.
Y debe evitar usar jerga técnica. Los términos o frases desconocidos aumentarán la carga cognitiva para él usuario. Las reglas son simples, pero de alguna manera son muy fáciles de ignorar.
Un error típico podría indicar que el correo electrónico no es válido sin decirle al cliente por qué es inválido (¿Es un error tipográfico? ¿Está ocupado?) Instrucciones directas, o directrices, hacen toda la diferencia. No hay adivinanzas para él usuario que recibe este error, y tampoco hay confusión o frustración.
En el ejemplo a continuación puede ver un buen ejemplo de validacción en línea qué proporciona una solución para solucionar un problema potencial. Esta validacción ayuda a disminuir los rebotes.
Incluso antes de la validacción.
Reglas de contraseñas. Dígale a los usuarios cuáles son sus reglas de contraseña por adelantado, en lugar de hacer que adivinen y espere errores de validacción. No utilice formato de entrada fijo. La razón más común para forzar un formato fijo es la limitación del script de validacción. Lo que, en la mayoría de los casos, es un problema de implementación. En lugar de forzar el formato de algo como un número de teléfono durante la entrada del usuario, debe permitir transformar lo que el usuario introdujo en el formato que desea mostrar o almacenar.
Conclusión.
Asistencia de formulario y diseño de validacción es algo tan complicado. Son pequeños detalles que pueden ayudar al usuario a terminar el formulario tan rápido y tan fácil como sea posible. No importa lo aburrido que es para nosotros los diseñadores y desarrolladores - tenemos que seguir ciertas reglas para hacer la ayuda de formulario y la validacción de nuestra fuerza en lugar de una debilidad.