Patrón de diseño: Wizard (Asistente)

Hace tiempo estuve realizando un pequeño compendio para una clase de Diseño de Interfaces Digitales sobre distintos patrones utilizados durante la generación de las vistas (interfaces digitales) que se ocupan comúnmente en los sistemas. Uno de estos patrones es el patrón Wizard (Asistente). 

Las siguientes líneas describen de forma resumida qué hacer con el patrón, cuándo se usa, cómo se utiliza y pone el ejemplo de algunas páginas donde consideré que podría aplicarse este patrón de diseño.

¿Qué hacer?

El objetivo de este patrón es guiar al usuario paso a paso por medio de la interfaz gráfica para realizar tareas en un orden prescrito.

Un ejemplo claro sería la instalación básica de aplicaciones de Windows donde al usuario se le pide configurar valores de instalación por medio de pantalla establecidas en las cuales el usuario tiene la opción de verificar o cambiar ciertos valores sencillos con el objetivo de instalar un producto o aplicación en su sistema operativo.

¿Cuándo usar este patrón?

Se puede usar si está diseñando una interfaz de usuario (IU) para realizar tareas que son largas o complicadas, y que generalmente serán nuevas para los usuarios. No es recomendado utilizarlo cuando la actividad es muy frecuente o cuando el usuario requiere mucho control del proceso (como la instalación avanzada de un paquete de software). Se debe estar razonablemente seguro que el diseñador de la IU sabe más que el usuario acerca de la mejor forma de realizar la tarea que será llevada a cabo.

Las tareas que son buenas candidatas para esta aproximación generalmente tienen muchas alternativas o son largas y tediosas. Consisten en una serie de decisiones por parte del usuario que afectan las decisiones siguientes.

El punto clave consiste en que el usuario debe desear ceder parte del control de lo que está pasando. En muchos contextos esto funciona bien ya que tomar decisiones puede no ser bienvenido por personas con cierto tipo de pensamientos: “No me hagas pensar, sólo dime qué hacer después”. Piensa que te estás moviendo en un aeropuerto que no conoces, generalmente es más fácil seguir una serie de señalamientos que te dan una idea de la estructura general del aeropuerto que aprender mucho sobre cómo está diseñado el aeropuerto en sí mismo.

Sin embargo, en otros contextos esto puede ser contraproducente. Los usuarios expertos generalmente encuentran a los asistentes frustrantemente rígidos y limitados. Esto es especialmente cierto en software para procesos creativos tales como la escritura, el arte o la programación. También es cierto para usuarios que desean aprender a usar las aplicaciones de manera más profunda; Los asistentes generalmente no muestran a los usuarios las acciones que realmente se están llevando a cabo o qué partes de la aplicación cambian de acuerdo a las decisiones que el usuario ha realizado. Esto puede llegar a ser exasperante para algunos usuarios. ¡La clave de este patrón es conocer a tu usuario!

¿Por qué?

Divide y conquista. Separando la tarea en una secuencia de grupos pequeños de operaciones, cada una de los cuales puede ser manejado en un “espacio mental” discreto por el usuario se está simplificando la tarea efectivamente. Se tiene que colocar todo un camino planeado previamente que guíe al usuario a través de la tarea a realizar, para así ahorrarle al usuario el esfuerzo de entender toda la estructura de la tarea. Todo lo que necesita es dirigirse un paso a la vez confiando en que si sigue las instrucciones la tarea será realizada correctamente.

Sin embargo la propia necesidad de un asistente indica que la tarea puede ser muy complicada. Si puedes simplificar la tarea al punto donde una forma pequeña o unos cuantos clicks pueden hacer el trabajo, esa es una mejor solución. (También ten en mente que algunos asistentes se consideran un poco condescendientes en algunas culturas asiáticas, al parecer a los orientales no les gusta que se les lleve de la mano)

¿Cómo?

Tareas en trozos

Separa las operaciones que conforma a la tarea en una serie de trozos, o grupos de operaciones. Quizá sea necesario presentar estos grupos en una secuencia estricta, o no; alguna veces es valioso romper las tareas en los pasos 1, 2, 3 e incluso 4.

Una separación temática para una compra en línea puede incluir imágenes del producto seleccionado, información de la forma de pago, dirección de facturación y dirección de envío. El orden de la presentación no importa mucho porque las elecciones posteriores no dependen de las elecciones previas. Poner juntas las opciones relacionadas solo simplifica los pensamientos de las personas para el llenado de esas formas.

Puedes decidir separar las tareas en puntos de decisión de tal forma que las decisiones hachas por el usuario puedan cambiar los pasos siguientes dinámicamente. En un asistente de instalación de software, por ejemplo, el usuario puedo seleccionar instalar paquetes opcionales que requieren más decisiones, si el usuario decide no hacer una instalación personalizada, esos pasos son saltados. Las IU dinámicas son buenas presentando tareas con flujos alternos como estos, porque el usuario nunca tiene que ver nada que no sea relevante para las decisiones que realiza.

En tales cosas la parte más difícil de diseñar este tipo de IU es obtener un balance entre el tamaño de los trozos y el número de ellos. No es muy útil tener un asistente de 2 pasos y un asistente de 15 pasos es tedioso. Por otra parte cada trozo no debe ser exageradamente largo o perderás alguno de los beneficios de este patrón.

Estructura física

Los asistente que presentan cada paso en una página separada, usualmente navegables con un botón de Siguiente y Atrás son las más obvias y bien conocidas implementaciones de este patrón. Estas no siempre son las mejores elecciones debido a que cada paso son espacios de la IU aislados que no muestran ningún contexto. Los usuarios no pueden ver que es lo que pasó antes o qué es lo que viene después. Esta no siempre es la elección correcta ya que cada paso es un espacio aislado dentro de la IU que no muestra ningún contexto, los usuarios no pueden ver que es lo que pasó antes o que es lo que viene después. Sin embargo una ventaja de tales asistentes es que se puede dedicar una página completa en cada paso que puede incluir ilustraciones y explicaciones amplias.

Si se elige hacer esto, debes permitir al usuario moverse hacia atrás y adelante a través de la secuencia completa de pasos. Ofrece un medio mediante el cual el usuario pueda regresar o reconsiderar una de sus elecciones anteriores. Adicionalmente muchas IU muestran un mapa seleccionable o una vista general de todos los pasos utilizando algunos de los beneficios de Two-Panel Selector. (En contraste con este patrón, un asistente implica un orden prescrito -aunque, en principio, sólo sea un orden sugerido- mientras que Two-Panel Selector implica acceso completamente aleatorio.)

Si por el contrario se elige mantener todos los pasos de una tarea en una sola página puedes utilizar alguno de los patrones del Capítulo 4:

• Titled Section, con números grandes en los títulos. Este es el más útil para tareas que no tienen muchos flujos alternos y que todos los pasos pueden ser visibles al mismo tiempo.
• Responsive Enabling, en el cual todos los pasos están presentes en la página, pero donde estos permanecen deshabilitados hasta que el usuario ha finalizado los pasos previos.
• Responsive Disclosure, en el cual se espera para mostrar un paso en la IU hasta que el usuario ha finalizados el paso previo. Personalmente creo que esta es la forma más elegante para implementar un asistente pequeño. Es dinámico, compacto y fácil de usar.

Las buenas opciones por default son útiles sin importar la forma en que acomodes los pasos. Si el usuario está dispuesto a dejar el control del proceso en tus manos, hay muchas posibilidades que está dispuesto a que elijas opciones razonables por default de las que no está dispuesto a poner mucho cuidado tales como el directorio donde será instalado un software.

Ejemplos que hacen uso de este patrón

My Yahoo! ilustra muchas de las buenas características de un asistente actual. Usa la técnica de “lightbox” para centrar la atención en los diálogos; muestra de manera clara un Mapa de Secuencia (Capítulo 3) de los pasos que muestran al usuario que es lo que ha sucedido y los pasos que siguen, además cuenta con un botón de Cancelar en la parte superior derecha y con la tecla Escape se sale por completo del asistente. En resumen es fácil de usar, visualmente interesante.

Asistente utilizado en My Yahoo

El asistente para realizar pagos de Amazon

Podemos observar que en la parte superior existe un Mapa de Secuencia donde se indica al usuario en qué punto de la tarea se encuentra y cuáles son los pasos siguientes.

Asistente utilizado en Amazon

Ejemplo donde se podría utilizar este patrón

En las páginas de compra en línea como Gandhi o Mercado Libre existen asistentes para el proceso de compra pero no existen asistentes que muestren el funcionamiento del sistema a usuarios inexpertos que no hayan hecho uso de un servicio de compra en línea. Podría usarse un asistente para mostrar como navegar entre productos y cómo hacer todo un proceso de compra sin que el usuario tenga que comprar algo de verdad; es decir un asistente que indice claramente que el proceso es sólo para mostrar cómo funciona el sitio y que se indique que el usuario no comprará nada de verdad.

Página principal de Gandhi donde se podría implementar un asiste para realizar una compra

Página principal de Mercado Libre donde también se podría implementar un asistente

Para más información de este y más patrones pueden consultar el libro "Designing Interfaces" de Jenifer Tidwell.

Y bueno, como siempre la principal recomendación es practicar este patrón, hacer ensayo y error para ver cómo se comporta la interfaz que diseñamos. Finalmente cualquier duda o comentario son bienvenidos al blog.

Saludos y felices trazos.