2.2 : Selectores de dos paneles para un fácil acceso al contenido

Algunos patrones de diseño mejoran tu vida a diario. ¿Pero notas siquiera estos patrones? Los selectores de dos paneles se utilizan en casi todas las aplicaciones de correo electrónico y, por lo tanto, le resultarán muy familiares. Y su utilidad va mucho más allá del uso del correo electrónico. Es hora de dar un paso atrás y revisarlos con ojos de diseñador. Aquí, veremos cuándo y cómo implementarlos … y qué buscar cuando lo hagamos. Te prometemos esto: ¡nunca volverás a mirar tu bandeja de entrada de la misma manera!

El problema del diseño

Hay muchas ocasiones en las que el usuario necesita ver una lista de opciones, categorías, comandos u otros elementos relacionados, pero aún necesita la lista a la vista para hacer una selección. El usuario debe tener la posibilidad de revisar el contenido de uno de los elementos de la lista mientras tiene acceso a todos los demás elementos o, como mínimo, una descripción general de la estructura de la lista, como es el caso de las aplicaciones de correo electrónico en las que el usuario puede vea las carpetas de mensajes en el lado izquierdo de la pantalla. Los usuarios necesitan esto, ya que sus tareas requieren que cambien entre elementos generales y contenido específico varias veces mientras realizan una tarea.

La solución de diseño

Los selectores de dos paneles son comunes en el diseño web y de aplicaciones, ya que permiten a los usuarios ver el contenido de archivos individuales, correos electrónicos y otros elementos que transportan contenido en un panel y cambiar rápidamente entre ellos en otro . Por lo general, los encontramos en agentes de usuario de correo (MUA) como Outlook o programas de administración de archivos como el Explorador de Windows, y se utilizan con la frecuencia suficiente para que la mayoría de los usuarios estén familiarizados con el diseño y los medios de interacción. Como puede ver en la aplicación a continuación (Slack), los selectores de dos paneles se denominan así, ya que el usuario recibe una lista de opciones, archivos, comandos u otros elementos en los que se puede hacer clic en un panel y se muestra el contenido del elemento seleccionado. en un segundo panel.

Un ejemplo de selector de dos paneles es la aplicación de colaboración Slack. Muestra claramente una lista de los llamados canales (grupos de usuarios) y usuarios individuales en un panel y el contenido de las conversaciones dentro de un canal o con un usuario específico en el segundo panel.

¿Por qué elegir un patrón de diseño de selector de dos paneles?

Mantener los elementos individuales a la vista, mientras los usuarios profundizan en un elemento en particular de la lista, significa que pueden moverse sin problemas de un elemento a otro. Los usuarios pueden ver el contenido de cada elemento simplemente haciendo clic en la región de espacio ocupada en la lista, o haciendo clic en un punto específico, como el nombre del archivo u otro elemento correspondiente que permita la interacción. Colocar los dos paneles uno al lado del otro o de manera superior y trasera permite a los espectadores cambiar su atención del contenido de un elemento a otras posibles selecciones, sin tener que realizar pasos intermedios o interacciones, como es el caso del menú desplegable. menús y pestañas. Además, los usuarios no tienen que escanear grandes cantidades de espacio en la pantalla; tampoco necesitan saltar entre diferentes secciones del sitio o aplicación para acceder a la lista de opciones o contenidos individuales. Este alto nivel de cohesión entre la lista de opciones y sus contenidos correspondientes reduce la cantidad de ‘viajes’ físicos requeridos, tanto en términos de la cantidad de interacciones requeridas como de la distancia que los usuarios deben recorrer cuando cambian su atención de un panel a otro.

Los selectores de dos paneles tienen la ventaja de permitir al usuario pasar de un elemento a otro a la velocidad del rayo, sin tener que cambiar entre diferentes secciones de una aplicación. En este ejemplo, el usuario puede buscar fácilmente una imagen de fondo adecuada en diferentes carpetas.

Otro beneficio asociado con el uso de selectores de dos paneles es el gasto cognitivo mínimo requerido, ya que se usa el mismo marco visual para todos los objetos y se conserva la misma ubicación espacial independientemente de qué elemento de la lista se seleccione o cuántas selecciones haga el usuario. Los diseños de interfaz de usuario que implican el movimiento de una sección, ventana o página a otra a veces implican varios estilos, formatos o diseños visuales. Todos estos exigen más del usuario, ya que los usuarios deben orientarse cada vez que llegan a una nueva posición y encontrar la información relevante para su (s) tarea (s) actual (es).

La memoria espacial humana es limitada. ¿Sabía que se estima que somos capaces de mantener solo nueveelementos distintos en un estado activo? Quizás si pensamos en esto como tener que hacer malabares con nueve pelotas a la vez, no nos resistiremos tanto o no nos sentiremos tan inadecuados. Aun así, los diseños que involucran el movimiento de una región de la interfaz de usuario a otra interrumpen la experiencia de escanear opciones y verificar su contenido, lo que obliga al usuario a mantener información en la memoria a corto plazo. Los selectores de dos paneles alivian a los usuarios de la carga de tener que recordar dónde están las cosas, ya que nunca desaparecen por completo de la vista. De la misma manera, las barras de navegación global, mantenidas en todas las páginas de un sitio web o aplicación, sirven como un recordatorio de dónde se encuentra el usuario en el sistema; los selectores de dos paneles brindan a los usuarios un marco visual estable que les deja sin dudas dónde se encuentran son y cómo pueden lograr sus objetivos actuales.

Práctica recomendada: cómo implementar selectores de dos paneles

• Si los usuarios miran de izquierda a derecha y de arriba a abajo o al revés, tienden a cambiar según la dirección de visualización seguida durante la lectura en su país de origen. Por lo tanto, la forma en que coloque la lista en su diseño depende de su grupo de usuarios principal. Por ejemplo, cuando diseñe para usuarios de países occidentales, coloque la lista, que es el primer puerto de escala del usuario, ya sea arriba o a la izquierda del panel en el que el se muestran los contenidos del elemento seleccionado. Esto proporciona un marco visual lógico desde el cual el usuario puede cambiar de la lista amplia a contenidos específicos de la manera anticipada.

Para que la experiencia interactiva y visual sea lo más coherente posible, coloque el contenido de un elemento inmediatamente en el segundo panel , luego de la interacción con el elemento correspondiente en la lista del primer panel. Incluso los retrasos breves pueden afectar negativamente la experiencia del usuario, por lo que debe hacer todo lo posible para asegurarse de que el contenido aparezca lo más rápido posible. Si una lista de opciones es muy larga, permita a los usuarios desplazarse usando las teclas de dirección en su teclado; esto promoverá la usabilidad solo del teclado.

• La opción seleccionada en el primer panel también debe distinguirse del resto para proporcionar a los usuarios un medio para determinar instantáneamente qué contenido del elemento están viendo en ese momento. Puede lograr esto usando un fondo de color diferente para la opción seleccionada o usando un marcador claro e imperdible , como un punto negro o alguna otra forma llamativa. Los humanos son asombrosamente expertos en detectar diferencias; Siempre que el elemento seleccionado sea distinto de los no seleccionados de alguna manera y el método elegido no ocluya ni sacrifique la claridad del elemento de la lista, probablemente logre el efecto deseado.

Este ejemplo de Wunderlist muestra una forma de distinguir la opción seleccionada en el primer panel del resto, utilizando un fondo de color diferente para la opción seleccionada.

Posibles problemas con los selectores de dos paneles

La apariencia de la lista de opciones está limitada por la naturaleza del contenido y las tareas previstas. Esto significa que un enfoque de talla única o de diseño único para todos no funcionará en todas las ocasiones; por ejemplo, los clientes de correo electrónico que emplean un selector de dos paneles para mostrar breves descripciones de mensajes individuales, mientras que otras aplicaciones simplemente muestran etiquetas de categoría o secciones tituladas. Seguir la convención es una política razonablemente sólida; Si la aplicación o el sitio que está diseñando realiza o ofrece funciones similares a las de los sitios o aplicaciones existentes, utilice estas normas para evitar los errores y los malos diseños que se han ido filtrando gradualmente con el tiempo. No deje al azar que los usuarios se den cuenta de su elección estilística, es posible que no lo hagan.

“No se requiere que el universo esté en perfecta armonía con la ambición humana”.
—Carl Sagan, astrónomo, cosmólogo, astrofísico, astrobiólogo y divulgador científico estadounidense

Si, como diseñador, desea aprovechar los beneficios de los selectores de dos paneles a su máximo potencial, tenga cuidado de no entusiasmarse demasiado y crear tres o más paneles. Esto puede provocar una disminución de la usabilidad, como muestra el ejemplo siguiente. Debe tener esto en cuenta si necesita guiar a sus usuarios a través de múltiples capas de contenido.

La aplicación Macbook Finder lleva el patrón de diseño del selector de dos paneles al siguiente nivel, lo que permite un número aparentemente ilimitado de paneles uno al lado del otro. Aunque esto permite un movimiento fluido a través de múltiples capas de contenido, una consecuencia importante de esta elección de diseño es la barra de desplazamiento horizontal que se necesita para ver todos los paneles.