Los errores son inevitables

Los errores ocurren por muy bien que este diseñado un sitio web, debemos tener claro que además los usuarios siempre cometerán errores , ya sea por lapsus accidentales o por no comprender la funcionalidad de la aplicación. Debemos pues seguir dos estrategias claras :

• Intentar prevenirlos y minizarlos.
• Corregir los errores y recuperarse de ellos.

Prevención y minificación

A nivel general podemos seguir estos consejos para preveenir y minificar los errores:

• Ofrecer una organización clara de la estructura del sitio y de
  la página.
• Mantener la consistencia en el sitio.
• Distinguir claramente enlaces (páginas visitadas /no
  visitadas).
• Escribir etiquetas descriptivas.
• Utilizar una lenguaje claro para nuestra audiencia.
• Utilizar botones intuitivos.
• Descripciones e instrucciones precisas.
• Seguir convenciones. Ej: Asterisco en los campos obligatorios.
• Ofrecer feedback de lo que está pasando.
• Ofrecer una salida clara:
  • Enlace a página de inicio
  • Funcionamiento correcto del botón “Atrás”.

Los formularios suelen ser el mayor input de errores , es por ello que debemos tratarlos de forma especial. A continuación os enumero unas cuantas tácticas a seguir:

Tácticas de prevención aplicadas a formularios

• Indicar campos obligatorios , para ello podemos utilizar un asterisco en los campos obligatorios o utilizar alguna de estas alternativas:
  • Situar el literal “opcional” junto a los campos no obligatorios.
  • Color destacado junto al control.
  • Utilizar las negritas en las etiquetas de los campos obligatorios.
• Ofrecer ayuda, pistas y modelos.
  

  Ejemplo de ayuda de introducción

• Ajustar el tamaño visual de las cajas de los formularios a las respuestas esperadas,como os comente en el articulo Usabilidad y diseño de formularios.
• Desactivación de botones de acción hasta que el usuario no haya cumplimentado los campos necesarios.
• Desactivación del botón de acción cuando el usuario haya hecho click en él para evitar la duplicidad de envio y los engorrosos registros duplicados mostrando la acción que se esta realizando (FeedBack).
  

  Desactivar al enviar , mostrando que acción se esta realizando.

  .

Recuperación de errores

Hemos intentando preveenir los errores , pero como ya he comentado esta tarea utopica , nos encontramos con que se ha producido un error. ¿Como debemos afrontarlo? En primer lugar nos vamos a centrar en como comunicamos al usuario que se ha producido un error.

Mensaje de error

Un mensaje de error debe:

• Comunicar que se ha producido un error.
• Informar de qué error se trata.
• Indicar dónde se ha producido.
• Proponer soluciones a los usuarios para resolver el problema.
• Integrar el mensaje de error en la página , pero que a su vez se muestre de forma clara.
  

  Ejemplo de un mal mensaje de error

  

  Buena práctica en mensaje de errores

Mensajes de error del servidor

No hemos de olvidar que una página web no deja de ser una aplicación y esta puede devolver errores del lado del servidor. Debemos tratar estos errores y no dejar que el control de errores de la aplicación o servidor de páginas web se encarge de ellos , devolviendo mensajes de error incomprensibles para el usuario. Al igual que con los errores de usuario debemos seguir unas “buenas prácticas”:

• Indicar claramente que se ha producido un error.
• Describir el problema de forma precisa.
• Proponer alternativas o soluciones a los usuarios para resolver el problema.
• Utilizar el lenguaje de los usuarios: no utilizar términos técnicos, códigos oscuros, estilo administrativo o interno de la entidad..

Ejemplo de mensaje incomprensible para el usuario

Buena práctica de mensaje de error del servidor

Ventajas de la usabilidad de cara al usuario

• Menos tiempo requerido para
  aprender a manejarse por el sistema.
• Mayor rapidez en la ejecución de las
  tareas.
• Experiencia de uso más satisfactoria.
• Más posibilidades de conseguir los
  objetivos marcados, es decir, mayor
  productividad.

Ventajas de la usabilidad de cara a la empresa

• Mayor rapidez en el diseño y producción (ayuda a determinar la
  buena dirección del diseño e identificar los problemas).
• Reducción del coste de trabajos de rediseño posterior, centrándose en
  los usuarios durante las fases iniciales de desarrollo.
• Aumento de la tasa de conversión,en el caso de los sitios de ecommerce,
  con el consiguienteaumento de las ventas.
• Aumento de la satisfacción de los
  usuarios
  Disminución de costes en la atención
  al cliente/ayuda.
• Ventaja competitiva apoyándose en la calidad, mayor número de
  retención de usuarios y lealtad de clientes.
• Refuerzo de imagen de marca.

Uno de los pilares de la usabilidad es el Diseño centrado en el usuario, el DCU es un enfoque metodológico de diseño que sitúa al usuario al que se dirige el producto dentro del proceso de desarrollo, incorporando su participación durante la toma de requisitos, el diseño, la evaluación y la construcción de la interficie de usuario.

Modelo DCU: iterativo dentro de cada fase

Ventajas del DCU

• Reduce los costes de uso.
• Incrementa la productividad del desarrollo.
• Aumenta las ventas y los ingresos.
• Reduce los tiempos de desarrollo y los costes de producción.
• Reduce el coste de soporte y de mantenimiento.
• Reduce el coste de formación y de documentación.
• Aumenta la eficiencia y productividad de los usuarios.
• Atrae a más usuarios y amplía la potencial audiencia, al reducir la “intimidación”.
• Aumenta la satisfacción de los usuarios y los ratios de retención.
• Incrementa la facilidad de uso y de aprendizaje.
• Incrementa la confianza en el producto.
• Incrementa la tasa de éxito y reduce el error en el usuario.

• Menor número de abandonos.
• Mayor número de registros obtenidos
• Calidad de los registros obtenidos.

Para conseguir esto debemos seguir una serie de normas:

• Una presentación visual clara.
• Un etiquetado descriptivo e intuitivo.
• Eligir los controles adecuados para cada tipo de información solicitada
• Mostrar al usuario de forma clara las acciones que va a relizar.

Presentación visual clara

Debemos crear el formulario con una presentación que inspire al usuario facilidad. Para ello debemos diseñar un formulario simple,limpio e ordenado.Con ello conseguiremos un formulario que:

• Facilita su lectura
• Dirige la atención a los aspectos esenciales
• Aumenta la efectividad, ya que favorece que cumplan sus objetivos.
• Mejora la eficacia al reducir el esfuerzo y los errores

Técnicas a seguir para lograr un formulario claro, ordernado y simple

• Reducir el número de elementos de la página a los necesarios
• Eliminar repeticiones innecesarias
• Minimizar el uso de cajas, bordes y líneas.
• Aumentar los espacios blancos, para favorecer el descanso de los ojos y facilitar la visualización.
• Reducir elementos de distracción
• Limitar las instrucciones al mínimo necesario.

Ejemplo de un formulario claro

Etiquetado descriptivo e intuitivo

Un correcto etiquetado nos permitira:

• Conseguir registros con la información adecuada.
• Menor número de errores y por lo tanto mejor número de abandonos.

Técnicas a seguir para lograr un correcto etiquetado

• Nombres de etiquetas decriptivas.
• Aportar información acerca del contenido.
• Mostrar que elementos son obligatorios.

Eligir los controles adecuados

A la hora de elegir el control más adecuado debemos tener en cuenta:

• ¿Es más natural para los usuarios teclear la respuesta
  que seleccionarla?
• ¿Es fácil escribir mal las respuestas?
• ¿Necesita el usuario ver antes las opciones para
  entender claramente la pregunta?
• ¿Cuántas opciones hay?
• ¿Puede el usuario seleccionar más de una opción?
• ¿Están las opciones visualmente destacadas?
• Permitir introducir datos en el formato en que están acostumbrados

Una vez elegido el control debemos seguir unas sencillas normas:

• Ajustar el tamaño del campo de texto al dato esperado.
• Ofrecer pistas, modelos o ejemplos en las preguntas

Ejemplo de formulario con controles usables

Acciones claras

A llegado la hora de la verdad , nuestro usuario ha rellenado todo el formulario ¿y ahora que?; eso mismo se esta preguntando nuestro usuario. Para resolver esta pregunta y conseguir mayor número de registros debemos:

• Mostrar al usuario en que punto del proceso se encuentra
• Mostrar claramente que tipo de acción se va a efectuar en el botón de envio, no vale un OK

Para lograr esto podemos usar las siguientes técnicas:

• Diferencia la acción principal de las secundarias
• Migas de pan que muestren al usuario en que paso se encuentra.
• Bloqueo del boton de envio despues de ser pulsado con texto descriptivo . Ej: “Enviando información…”

Ejemplo de buena práctica

• Diseño defensivo en formularios
• Microinteracciones en el diseño de formularios