Nadie quiere cometer un error, ni en la vida, ni cuando usa una aplicación o un sitio web. Cometer errores, si bien es una parte natural de la vida y, a menudo, una oportunidad para aprender, puede ser perjudicial, llevar a un trabajo extra tedioso y hacer que las personas se sientan nerviosas o avergonzadas por no saber exactamente cómo hacer algo.
Tiene sentido, entonces, que no una, sino dos de las 10 heurísticas de usabilidad de Jakob Nielsen estén dedicadas a los errores:
- Heurística #5 prevención de errores. Esta guía establece que debemos prevenir problemas eliminando las condiciones propensas a errores o brindando confirmación antes de que los usuarios tomen medidas con consecuencias graves.
- Heurística #9 ayudar a los usuarios a reconocer, diagnosticar y corregir errores. Los mensajes de error deben estar en un lenguaje sencillo, comunicar el problema y la solución, y usar un estilo visual que ayude a los usuarios a notarlos.
Al diseñar una experiencia digital, priorizar la prevención y recuperación de errores es una estrategia loable y valiosa. Pero algunos proyectos bien intencionados que intentan apegarse a esta heurística van demasiado lejos y exponen a los usuarios a patrones demasiado agresivos que son más frustrantes y molestos que útiles.
Puede evitar patrones demasiado agresivos para la prevención y recuperación de errores siguiendo estas dos pautas:
- Evite mensajes de error prematuros: Mostrar mensajes de error solo después de que se haya cometido un error.
- Reserve el estilo de error solo para errores: Limite el uso de procesamiento visual similar a un error (como texto en rojo, símbolos de advertencia y alerta) para los mensajes críticos de estado del sistema que se espera que interrumpan el flujo de trabajo de los usuarios.
Este artículo proporciona ejemplos y recomendaciones sobre cómo evitar estos errores.
Contenido del Articulo
#1: Evite los mensajes de error prematuros
Los mensajes de error prematuros son mensajes de error que el sistema emite demasiado pronto, antes de que el usuario haya llegado a un punto justo y razonable en el flujo de trabajo para cometer un error o no.
Considere a un usuario que completa un formulario, una tarea común en muchos sitios web y aplicaciones. Idealmente, si las restricciones técnicas lo permiten, es mejor informar a los usuarios de cualquier error de forma en tiempo real a medida que ocurren. Pero muchos activadores de validación de formularios son demasiado impulsivos y muestran mensajes de error antes de que el usuario haya terminado de completar el campo.
Uno de esos casos es cuando el sistema muestra un mensaje de error antes de que el usuario haya terminado de ingresar un valor en un campo de formulario en el formato correcto dado. El mensaje de error se muestra tan pronto como el usuario comienza a escribir, incluso si el usuario no se ha desviado del formato especificado. (En otras palabras, ingresar “2” en el campo del número de teléfono no debería generar un mensaje de error, mientras que mostrar un mensaje de error inmediatamente después de ingresar una letra en el campo del número de teléfono sería apropiado).
Por ejemplo, el proceso de validación de LG muestra un mensaje de error prematuro tan pronto como el usuario comienza a ingresar números en el campo del código postal y mantiene este mensaje de error hasta que la cantidad de caracteres alcanza el formato especificado. Aunque mostrar el mensaje de error en línea (junto al campo al que se refiere) es útil, el mensaje de error en sí mismo no es válido: no hubo error. (Agregado al ruido hay un segundo mensaje redundante, que también se activa y se muestra en la parte inferior del formulario).
Labcorp (una empresa de facturación médica) utiliza una plantilla similar en su portal de pago. Tan pronto como se ingresa un correo electrónico en el campo de dirección de correo electrónico, aparece inmediatamente el mensaje de error Dirección de correo electrónico no válida.
En otro ejemplo, al intentar ingresar la información de la fecha de nacimiento durante el proceso de pago, Sorel muestra un mensaje en línea Ingrese una fecha válida.
Como regla general, debe evitar mostrar un error hasta que el usuario termine con el campo y pase al siguiente campo. Mostrar mensajes de error durante la entrada del usuario parece una reprimenda irrazonable y puede ser molesto.
Una variante aún más frustrante de la validación integrada prematura es el mensaje de error que aparece antes de el usuario incluso comienza a escribir. Este tipo de mensaje de error se activa tan pronto como el usuario hace clic en el campo o, peor aún, aparece en el estado predeterminado del formulario antes de que ocurra cualquier interacción. En estos casos, el usuario ni siquiera tiene la oportunidad de comenzar a completar el campo antes de recibir una advertencia.
Al reservar un hotel Hilton’s Conrad New York, haga clic en el cuadro para Apellido hace que el cuadro se encierre en un círculo rojo y activa un mensaje de error en línea Por favor ingrese su apellido debajo del campo. Estos indicadores de error serían útiles si el usuario omitió este campo e intentó enviar el formulario, pero no deben activarse con un simple clic en el campo. (Peor aún, todos los campos contienen la palabra “opcional” antes de que el usuario interactúe con ellos, incluso Apellido campo que muestra un mensaje de error en línea).
En un enfoque aún más agresivo., El portal de pago de pacientes Xpress-pay a continuación muestra un mensaje de error Debe especificar la cantidad. incluso antes de que el usuario interactúe con el campo. Además, además del mensaje de error, hay 3 indicadores redundantes adicionales que indican que Cantidad campo obligatorio: un asterisco junto a la etiqueta del campo, un icono de signo de exclamación en el extremo derecho del campo y un contorno rojo en negrita alrededor del propio campo del formulario.
Por supuesto, en cualquier formulario, recomendamos especificar explícitamente qué campos son obligatorios, pero un asterisco suele ser suficiente. Proporcionar indicadores redundantes o adicionales de estilo agresivo de que se requiere un campo no es bueno y se ve agresivo. Mensaje de error incorporado Debe especificar la cantidad. sería útil si se mostrara después de que el usuario intentara enviar este formulario sin completar el campo obligatorio. Si se muestra prematuramente, es redundante en el mejor de los casos y molesto en el peor.
#2: Reserve el estilo de error solo para errores
Otro modelo agresivo es el uso de procesamiento visual similar al error en situaciones en las que no hubo errores.
Uno de esos casos es diseñar mensajes de estado del sistema no críticos con un procesamiento visual que se adapte mejor a las advertencias y errores.
Advertencias y mensajes de error críticos deber no tener fe. Cuando se muestran errores, lo más probable es que el usuario esté prestando atención a la tarea actual sin pensar en el error, por lo que el mensaje de error debería interrumpir la experiencia lo suficiente como para captar la atención del usuario. Por lo tanto, tiene sentido un estilo intrusivo para los errores (por ejemplo, texto en rojo o procesamiento visual, símbolos de advertencia, señales de advertencia).
Pero los mensajes regulares de estado del sistema que transmiten información no crítica no deberían interrumpir la operación. Deben ser notables, pero no intrusivos.
En la aplicación debajo del mensaje de recursos humanos No hay archivos adjuntos para mostrar enmarcado como una advertencia. La información parece ser más importante de lo que realmente es debido al procesamiento visual amarillo y al símbolo de advertencia. Los usuarios que encuentren este mensaje serán interrumpidos y se detendrán para revisar “Deber ¿hay un archivo adjunto? (Dado que la descarga del archivo adjunto es opcional en este caso, la respuesta es que no importa).
Los iconos amarillos y de advertencia (como un signo de exclamación dentro de un triángulo) se utilizan mejor para advertencias en situaciones en las que se ha producido o puede producirse una falla o un cambio significativo, pero ha habido o no habrá daños permanentes. Por ejemplo, la aplicación Amazon Glow utiliza correctamente el icono de advertencia amarillo para notificar al usuario que una llamada ha fallado.
En otro ejemplo, durante el pago en la librería en línea Thrift Books, si hace clic en cualquier campo de formulario debajo de Dirección de Envio comienza un mensaje Asegúrese de que su dirección sea correcta, no se puede cambiar después de que se haya enviado su pedido.. Si bien esta información es útil, el efecto visual rojo y el símbolo de advertencia hacen que parezca un mensaje de error. El usuario debe hacer una pausa y procesar el mensaje, verificando dos veces que no haya ocurrido ningún error hasta que no haya nada que corregir. Además, el mensaje introduce la pregunta: ¿Por qué no se puede cambiar la dirección? (Esto viola la heurística de recuperación de errores).
La información útil sin errores como esta se presenta mejor sin un procesamiento visual similar a un error. Por ejemplo, en la aplicación móvil de Paypal, se muestra información similar sin fuente roja ni color de fondo, y en lugar de un ícono de advertencia, se usa un ícono de información.
Conclusión
Estas estrategias agresivas de prevención y recuperación de errores son similares a pararse sobre el hombro del usuario y gritar: “¡LO HACE MAL!” durante el proceso de trabajo. Pueden ser percibidos como ofensivos y causar frustración.
línea de fondo: Ayudemos a los usuarios, no los amonestemos.
Siga estas pautas para respaldar de manera efectiva la prevención y recuperación de errores sin que los usuarios se sientan ofendidos o avergonzados:
- Espere a que el usuario navegue fuera del campo para mostrar un mensaje de error asociado con el formato adecuado (p. ej., código postal, dirección de correo electrónico).
- Proporcione cualquier restricción por adelantado; no espere a que el usuario comience a escribir o intente enviar un registro.
- Utilice un asterisco para marcar los campos obligatorios o anote los campos obligatorios con la palabra requerido. No sobrecargue al usuario con múltiples indicadores (como un asterisco tanto como caja con contorno rojo tanto como mensaje de validación incorporado). Mostrar elementos adicionales si y despues el usuario está intentando enviar un formulario o una página sin completar los campos obligatorios.
- Deje efectos visuales similares a errores (como texto rojo, precaución y símbolos de advertencia) para los mensajes críticos de estado del sistema que deberían interrumpir el flujo de trabajo de los usuarios.
