Usabilidad y buenas prácticas en los asistentes por pasos (Steppers o Wizards)

Por Luis Alberto Fernández Arnanz, Senior UX/UI & Visual Designer en Idean Spain

Usabilidad y buenas prácticas en los asistentes por pasos (Steppers o Wizards)

En el mundo del desarrollo web y de aplicaciones móviles, los asistentes por pasos indican el progreso a través de una secuencia de pasos lógicos y numerados, pudiendo ser utilizados también como elemento de navegación.

Una típica encrucijada en el diseño de interfaz de usuario es conseguir consensuar entre todos los actores participantes en el desarrollo a quien se le asigna el “control”… ¿al usuario o a la aplicación?. Los usuarios, por lo general, se sienten más tranquilos cuando tienen el control, pero poseer demasiada libertad suele provocarles al final problemas y, a menudo, les ocasiona perder su preciado tiempo. Los asistentes por pasos permiten que la aplicación controle el flujo del diálogo, pero esta limitación en la libertad puede ser positiva en aquellos casos en los que los usuarios no se preocupen por sus elecciones o no tengan los suficientes conocimientos como para tomar una decisión.

Example Colorlib Wizard 11

Tipos de asistentes por pasos

• Asistente lineal. El usuario no puede navegar libremente entre los pasos y está forzado a seguir un orden lógico, teniendo que validar cada paso para poder acceder al siguiente. Muestran el progreso a través de una secuencia de pasos lógicos y numerados. También pueden usarse para la navegación.
• Asistente no lineal. El usuario puede navegar libremente entre los pasos. También puede utilizar los botones para la validación pero, si lo desea, podrá moverse arbitrariamente por los pasos; está permitido hacer clic en los títulos de los pasos en lugar de en los botones. Puede mostrar un mensaje de re-alimentación transitoria después de guardar un paso.

Pros

Los asistentes por pasos dividen en varios sub-procesos un proceso complejo, así que las páginas o secciones finales serán más simples, contendrán menos campos y, en su mayoría, menos información. La simplicidad en la página tiene varios beneficios importantes:

• Los usuarios se agobian menos. Un formulario largo es a menudo desalentador y los usuarios pueden sentirse impotentes por la cantidad de trabajo necesario para ser completado, desmotivándose antes de empezar.
• Se necesita menos esfuerzo cognitivo para completar el proceso. Gran parte de la información en un formulario puede llegar a ser trivial, sin embargo, los usuarios tendrán que utilizar parte de su atención para analizarla y, finalmente, filtrarla. Con un asistente, los campos que se muestran dependen de la entrada anterior de los usuarios y tienen mejores posibilidades de ser realmente importantes y no solo una distracción.
• Se cometen menos errores. Con un formulario demasiado complejo, los usuarios pueden ignorar partes sin quererlo y es más probable que generen errores en el envío. O bien, pueden obviar algo que para ellos es muy importante.
• En cada paso están disponibles más propiedades por pantalla. Cuando un proceso complejo se divide en pasos más simples y en cada paso se genera una página o sección independiente, hay más espacio para cada uno de los controles. Los campos del formulario pueden ser más grandes y menos apelmazados, la información puede caber en una sola pantalla (por lo que no será necesario desplazarse), y las explicaciones pueden aparecer junto a los campos.

Contras

Los asistentes por pasos no son adecuados para todas las situaciones. Aquí os comparto algunos problemas comunes que pueden tener:

• Pueden requerir un mayor costo de interacción (más clics) que otros patrones de entrada de datos. Especialmente si es necesario llamar a los steppers repetidamente, el fastidio de hacer clic en cada uno de los pasos puede tirar abajo la ventaja de dividir el proceso en pequeñas secciones.
• Es posible que no permitan que los usuarios transfieran o comparen fácilmente información entre los diferentes pasos. Cuando los usuarios ven solo un paso cada vez, puede ser difícil para ellos trasladar la información a través de los sub-procesos o hacer referencia a la información ingresada o presentada durante una tarea anterior. (Y, a veces, ver más pasos a la vez puede dar a los usuarios un contexto adicional para comprender mejor la información solicitada en cada paso).
• No son fáciles de interrumpir. Si los usuarios abandonan el proceso a mitad de camino, es posible que no solo pierdan su trabajo, sino que también necesiten hacer clic nuevamente en los pasos anteriores. Incluso cuando el asistente admite guardar el estado y reanudar el proceso en una momento posterior, puede ser difícil para los usuarios recordar lo que estaban haciendo y recuperar su contexto y el modelo mental del proceso.
• Pueden bloquear el acceso a otras partes de la aplicación necesarias para completar el proceso. Cuando el asistente se presenta en una ventana modal, puede obstruir información en segundo plano que puede ser relevante para el proceso actual. La mayoría de las veces, también evita que los usuarios interactúen con otras partes del sitio.
• Limitan el control y la creatividad de los usuarios.

Buenas prácticas

Recomendado para usuarios novatos o procesos infrecuentes

Los asistentes pueden ayudar a los usuarios con poco conocimiento sobre un tema, simplificando los procesos y guiándolos. Sin embargo, pueden volverse rápidamente molestos y controladores si tienen que ser usados una y otra vez o si los usuarios tienen mucho conocimiento del tema y su modelo mental del proceso es diferente al modelo mental implementado por el diseñador de la aplicación.

En lineas generales, usa asistentes por pasos para situaciones en las que es probable que los usuarios no estén familiarizados con el proceso, ya sea porque no tienen mucha experiencia en el tema o porque pasan por ese proceso rara vez. Si esperas que algunos de tus usuarios lo realicen habitualmente, considera seriamente el poder ofrecerles otra alternativa más rápida para introducir sus datos.

Alcanza la ruta más corta para cada usuario

Para algunas personas, el camino a través del proceso puede ser rápido y simple, mientras que para otras puede ser complicado y tedioso. Si el proceso se bifurca en función de las entradas de los usuarios y la bifurcación es transparente para ellos, estos no tendrán la necesidad de pensar en la ruta que no se les ha aplicado a ellos en ningún momento . Por lo tanto, en un asistente bien diseñado, los usuarios solo verán los pasos y la información relevante para su situación.

Intenta cumplir un orden secuencial claro de los pasos

Da preferencia a los asistentes que sean lineales para que los usuarios no puedan elegir otro paso antes de completar los pasos que lo preceden.

Aunque lógicamente no puede haber ninguna diferencia si los usuarios comienzan con el último paso del proceso, tener un orden claro minimiza la toma de decisiones (y, a veces, la carga de la memoria también, si los pasos completados no están claramente marcados y los usuarios deben recordar los pasos que siguen y ya han visitado) y así simplificamos la interacción.

Comunica un modelo mental claro del proceso, mostrando la lista de los pasos involucrados y resaltando el paso actual

Debido a que el proceso se presenta paso a paso, existe el peligro de que los usuarios se pierdan el contexto, se puedan confundir o no se den cuenta de la duración de la progresión. Es mejor establecer las expectativas correctas y explicar cómo se ve el proceso y cuántos pasos están involucrados.

Sobre todo con procesos complicados, un etiquetado claro de cada uno de los pasos, así como un indicador resaltado del paso actual, pueden ayudar a mantener a los usuarios orientados.

Incluye botones para navegar a los pasos siguientes y anteriores y optimiza el etiquetado de los pasos de manera descriptiva

Las pautas generales para los nombres de los botones se deben aplicar también a los botones del asistente: las etiquetas genéricas como Siguiente y Anterior no ayudan a dar una buena información y no les transmiten nada a los usuarios sobre los pasos. Es mejor indicar en la etiqueta lo que el usuario tendrá que hacer a continuación.

Permite a los usuarios salir del asistente a mitad de camino y guarda el estado actual

Permite a tus usuarios reanudar el proceso por pasos en un momento posterior. Las interrupciones ocurren y los usuarios deberían poder guardar su trabajo y luego continuar el proceso desde donde se fueron. Aunque necesiten de un esfuerzo para recuperar el contexto y recordar sus metas, al menos no tendrán que volver a introducir otra vez la misma información.

Deben ser auto-suficientes

No tienen que necesitar de información que esté disponible en otra parte de la aplicación (o en un paso anterior). Asegúrate de que los usuarios puedan acceder fácilmente a toda la información que necesiten mientras utilizan el asistente por pasos.

Reutiliza si es posible las selecciones del usuario en el asistente como valores predeterminados para el siguiente uso que haga de él

Para muchas tareas, los usuarios se beneficiarán si la aplicación recuerda sus selecciones y los valores de entrada de un uso de un asistente al siguiente.

La ayuda y las explicaciones deben aparecer en ventanas modales y no deben cubrir el asistente

Cualquier descripción de los términos o los campos en el asistente debe ser visible a través de la interacción del usuario con algún icono colocado al lado del contenido susceptible de ampliación de información.

Conclusión

Los asistentes por pasos son unas poderosas herramientas de diseño y desarrollo que se pueden utilizar para simplificar procesos complejos realizados con poca frecuencia o por usuarios novatos. Al mostrar menos información en un solo vistazo, ayudan a los usuarios a enfocarse mejor en el contenido necesario de cada paso y disminuir la existencia de errores. Cuando se incluyen bifurcaciones basadas en la información aportada por usuario, los asistentes se deben asegurar de que las personas solo puedan ver los pasos aplicables a su situación. Algunas de las desventajas de los asistentes se pueden atenuar con un diseño elaborado y cuidadoso que garantice que los pasos del proceso muestren información clara al usuario y que sean independientes y auto-suficientes.

Si quieres saber más acerca de usabilidad o para cualquier otro tema relacionado con el mundo del diseño, ¡contacta con nosotros!