1.5 : Cómo utilizar la habilitación receptiva para simplificar las tareas

¿Alguna vez se ha sentido abrumado al realizar una tarea como registrar una cuenta o completar una compra en línea? ¿Alguna vez se sintió desconcertado cuando no estaba claro qué pasos tomar? Casi todos los sitios web y aplicaciones admiten tareas que tienen diferentes etapas por las que pasar. Desde ajustar las preferencias del sistema MAC OS X hasta registrar una cuenta en línea, el sistema lo ayuda a realizar sus tareas con un mínimo esfuerzo. Aprenda a utilizar la habilitación receptiva para optimizar la experiencia del usuario de sus diseños.

El problema del diseño

En determinadas etapas de una tarea, los subcomponentes son necesarios o redundantes. Sin embargo, no desea llevar al usuario a una ubicación diferente para todos los diferentes elementos dentro de una tarea, ya que eso agrega tiempo adicional al proceso y el usuario se beneficiaría de ver todos los componentes de una tarea a la vez. Por el contrario, presentar todos los componentes de una tarea a la vez puede resultar confuso, especialmente si se habilitan elementos redundantes. Entonces, entre llevar a los usuarios de una pantalla a otra e inundarlos con opciones, necesita una tercera vía, una que sea más proporcional a sus necesidades en un momento dado.

Puede mejorar este formulario de registro de LinkedIn utilizando el patrón de diseño habilitador receptivo. En este caso, un estudiante no necesitaría que los campos de empresa y título estén habilitados.

La solución de diseño

El proceso gradual de permitir que los usuarios interactúen con ciertos elementos de la interfaz de usuario cuando los necesiten se denomina “habilitación receptiva”. Inicialmente, se muestra al usuario toda la información y los elementos de la interfaz de usuario, como casillas de verificación, botones de opción y campos de entrada, en un panel, ventana o página, pero solo se muestran los elementos necesarios para el primer subcomponente de la tarea. habilitado (es decir, activo o ‘interactuable’). A medida que el usuario realiza una selección, se habilitan más opciones, mientras que otras opciones redundantes se desactivan (pero siguen siendo visibles).

Al insertar una imagen en Microsoft Word, la habilitación receptiva permite al usuario solo seleccionar archivos de imagen de forma predeterminada. De esta forma, el sistema evita errores. Sin embargo, para proporcionar una flexibilidad total a los usuarios, es posible que el sistema muestre otros tipos de documentos. Como mínimo, les asegurará que no han perdido misteriosamente ninguno de sus archivos.

¿Por qué elegir un patrón de diseño habilitador receptivo?

A menudo hay ocasiones en las que se debe ayudar al usuario en una tarea, especialmente cuando hay varios componentes y subtareas diferentes involucrados. Si a los usuarios se les presentan todas las opciones a la vez, podría resultarles abrumador. Podrían perder rápidamente el enfoque, lo que probablemente haría que la tarea fuera más frustrante y consumiría más tiempo. La habilitación receptiva garantiza que los elementos componentes de una tarea solo estén activos en el punto en que el usuario los necesita, manteniendo el enfoque del usuario en los elementos necesarios dentro de la interfaz de usuario y restringiendo la posible confusión de mantener otros elementos, relacionados con diferentes componentes y subtareas. , a la vista.

La habilitación receptiva también evita errores al restringir las selecciones disponibles a través de los diferentes pasos de una tarea. Al principio, es posible que el usuario no se dé cuenta de que ciertos elementos son irrelevantes para sus intenciones actuales; en el mejor de los casos, lo que resulta en una pérdida de tiempo para filtrar mentalmente estas opciones y, en el peor de los casos, conduce a selecciones erróneas. Por lo tanto, al habilitar las opciones relevantes para cada etapa de una tarea, mientras que deshabilita todas las demás, restringe el potencial de error y la cantidad de opciones que el usuario debe considerar, un beneficio doble de usar la habilitación receptiva. Este beneficio también es enfatizado por Jennifer Tidwell, diseñadora de interacción y autora de Designing Interfaces: Patterns for Effective Interaction Design :

“… el usuario no puede hacer cosas que lo meterían en problemas, ya que la interfaz de usuario ha” bloqueado “esas acciones al deshabilitarlas. De esta manera se evitan mensajes de error innecesarios”.
—Jennifer Tidwell

En algunos contextos, como en el entorno de laboratorio que se muestra aquí, los errores pueden tener graves repercusiones. Si este es el caso de su diseño, le recomendamos que utilice todos los patrones de diseño que evitarán errores. La habilitación receptiva es definitivamente una a considerar.

El uso de la habilitación receptiva puede ser particularmente beneficioso al diseñar interfaces de usuario que serán utilizadas por aquellos que no estén familiarizados con ciertas tareas, como configurar las opciones de Internet o, como es el caso en la imagen de ejemplo a continuación, cambiar la configuración de formato predeterminada. A diferencia de otros diseños, como la divulgación progresiva, la habilitación receptiva no obstaculiza a los usuarios que realizan regularmente o están familiarizados con una tarea en particular , ya que todas las opciones se presentan a la vez. Poner todas las opciones a la vista permite a los usuarios habituales o familiarizados trazar sus movimientos con anticipación, lo que puede ayudar a reducir el tiempo que lleva completar la tarea general.

Cambiar la configuración de formato predeterminada a través de la habilitación receptiva tiene la ventaja de que todas las opciones permanecen a la vista, por lo que los usuarios pueden anticipar su próxima acción. Esto puede ayudar a reducir el tiempo que lleva completar una tarea.

Práctica recomendada: cómo implementar la habilitación receptiva

1. Organice la información y los elementos de la interfaz de usuario necesarios para completar una tarea en un panel, ventana o página.
2. Decida qué elementos son necesarios para cada componente de una tarea o cada subtarea. Coloque la información y los elementos de la interfaz de usuario relevantes para una etapa particular en una tarea juntos.
3. Conecte elementos para que las selecciones resulten en la activación de información y elementos relevantes de la interfaz de usuario y la desactivación de información y elementos irrelevantes.
4. Distinga los elementos habilitados de las opciones deshabilitadas usando el color. Cuando llega el usuario, los elementos y la información necesarios para completar la primera etapa deben estar activos, mientras que todos los demás elementos deben estar deshabilitados. Si hay varias primeras etapas posibles, como elegir una de las opciones de ‘Formato’ o ingresar una ‘Hoja de estilo de usuario’ personalizada en el ejemplo anterior, permita que el usuario seleccione cualquiera de estas opciones desde el momento en que llegan. Una vez más, cuando se haya realizado una selección, deshabilite los elementos que ahora son redundantes.
5. Permita que el usuario reactive los elementos deshabilitados seleccionando otro elemento de la interfaz de usuario. Por ejemplo, cuando el usuario ha introducido una ‘hoja de estilo de usuario’ personalizada, en el panel ‘Accesibilidad’ de arriba, puede volver a las otras opciones de ‘formato’ haciendo clic en una de las casillas de verificación dispuestas verticalmente.
6. Asegúrese de que haya un flujo natural hacia los elementos activos e inactivos, a fin de persuadir al usuario para que realice las tareas de la manera más rápida y eficiente posible. Las pruebas de usuario son una excelente manera de lograr esto.

Problemas potenciales con la habilitación receptiva

Al decidir qué opciones están disponibles en cada punto de una tarea o subtarea, le quita el control al usuario. Por lo tanto, es esencial vincular elementos de acuerdo con la forma en que los usuarios normalmente abordarían un problema y la frecuenciacon qué tareas se llevan a cabo. Para determinar si su diseño actual es compatible con la naturaleza y la regularidad con la que se realizan ciertas tareas, es posible que desee considerar realizar una prueba de usabilidad a pequeña escala. Solo unos pocos usuarios pueden proporcionar la información necesaria para organizar y vincular elementos. Sin embargo, antes de reclutar una muestra de los usuarios previstos, hágase algunas preguntas: ¿Se deshabilita una acción por una buena razón? ¿Están todos los elementos que un usuario necesita para una tarea / subtarea en particular activos en la etapa correcta? ¿Puede el usuario devolver cada elemento a un estado activo? Si no es así, se produce el siguiente problema.

Cuando las opciones están deshabilitadas sin una indicación clara de por qué, surge un problema de usabilidad denominado ‘Elementos de menú misteriosamente atenuados’ (como lo acuñó Bruce Tognazzini). Para evitar este problema, cuando un usuario selecciona una opción, los cambios resultantes en los elementos activos y deshabilitados deben ser instantáneamente perceptibles y estar directamente vinculados a la selección. Por ejemplo, cuando el usuario hace clic en la casilla de verificación “Dar formato a documentos usando mi hoja de estilo”, en el panel que se muestra arriba, se activa el campo de entrada directamente debajo. Si la casilla de verificación y el campo de entrada correspondiente se colocaran más separados o en áreas separadas y delimitadas del panel, los usuarios podrían preguntarse por qué este último está deshabilitado cuando llegan allí. Para evitar el problema de los “elementos de menú misteriosamente atenuados”, puede incluir una nota en la ayuda y la documentación del sistema que informe al usuario por qué los controles están desactivados. Sin embargo, un método más inmediato y directo es mediante el uso de la proximidad en la interfaz de usuario. Cuanto más cerca estén los elementos entre sí, es más probable que el usuario los perciba agrupados. Puede utilizar este fenómeno perceptual Gestalt para ayudar al usuario a determinar por qué ciertos controles están habilitados y otros deshabilitados.

Este sitio web de una empresa de fitness holandesa utiliza el patrón de diseño de divulgación progresiva. Sin embargo, como usuario, puede ver que los precios están atenuados en este momento. Esto puede hacer que se pregunte qué pasará con los precios después de hacer la primera selección. Puede ser relevante mostrar un poco más de información en este punto, para evitar que los usuarios tengan la sensación de que están tratando con elementos de menú misteriosamente atenuados.