2.3 Buscar elementos con listas de desplazamiento, listas de archivos o incrustaciones de listas

Incluso si no eres el maniático de las listas de tareas pendientes como algunos de nosotros, las listas son una excelente manera de entregar contenido a tus usuarios. Una lista les permite navegar rápidamente a la sección de contenido que es más relevante para ellos, mientras mantienen una descripción general de todo el cuerpo de información que es accesible. También les ayuda a comprender la lógica del contenido que está entregando, es decir, al mostrar las diferentes categorías y sus relaciones. Obtenga más información sobre los diferentes tipos de listas que puede utilizar para crear excelentes diseños y permítanos ayudarlo a comprender cuándo y cómo implementar cada tipo para obtener los mejores resultados.

El problema del diseño

Si tiene un gran conjunto de elementos u opciones, debe presentarlos a los usuarios de una manera que les permita cumplir con sus tareas. Estas tareas pueden implicar ver el contenido de diferentes elementos rápidamente o buscar y seleccionar un elemento en particular. Los usuarios estarán mejor atendidos con patrones de diseño que les impidan tener que saltar a diferentes ventanas o páginas cuando ven contenido. Además, debemos ayudar a los usuarios a buscar y seleccionar un artículo guiándolos a través de categorías más amplias hasta su destino. Esto es especialmente cierto cuando presentamos elementos cronológicamente. De cualquier manera, debe asegurarse de que los usuarios puedan realizar sus tareas con un esfuerzo mínimo y una visión general máxima, incluso cuando el conjunto de elementos u opciones involucrados es tan grande que amenaza con apoderarse de toda la interfaz de usuario.

La solución de diseño

La solución es el uso de listas. Pero existen diferentes tipos de listas que son útiles para diferentes casos.

Una incrustación de lista permite al usuario ver el contenido de todos los elementos de una lista, desde una pantalla, simplemente haciendo clic en el elemento. Normalmente, la lista muestra etiquetas claras o descripciones breves del contenido; luego, cuando el usuario hace clic en un elemento individual, se muestran detalles más detallados debajo de la etiqueta correspondiente. A continuación, se proporciona al usuario la utilidad para cerrar el elemento haciendo clic en la región general del espacio ocupada por el contenido del elemento, la breve descripción / etiqueta de la lista o algún botón / icono designado, como un símbolo más / menos.

Un ejemplo de un patrón de diseño de incrustaciones de listas: la aplicación para teléfonos inteligentes de la tienda en línea de Mango revela los elementos de la lista que pertenecen a una sola categoría (en este caso, la categoría de accesorios consiste en zapatos, bolsos, joyas, etc.) cuando la imagen o se hace clic en la etiqueta.

Las listas de archivo consolidan conjuntos de datos en categorías amplias, enumeradas por día, semana, mes o año en el que se cargaron o editaron los elementos de información. Como puede ver en la lista de archivo de ejemplo a continuación, para cada acción en una fecha determinada, se agrega el tipo de acción para permitir a los usuarios limitar su búsqueda según el día y el grupo al que pertenecería su elemento de destino.

Este ejemplo del panel web Sync Cloud Storage muestra una lista de archivos. Para cada acción en una fecha determinada, se agrega el tipo de acción para permitir a los usuarios limitar su búsqueda según el día y el grupo al que pertenecería su elemento objetivo.

Una lista de desplazamiento hace que todas las opciones estén disponibles en la página, ventana o panel, con elementos más abajo en la lista a los que se accede mediante el desplazamiento. Las listas de desplazamiento se utilizan a menudo en diseños de interfaz de usuario donde hay una serie de opciones que se abren en una sección separada del cuadro de diálogo, ventana, página o en otro panel. Normalmente, las listas de desplazamiento constan de una columna de opciones, dispuestas en orden alfabético o en alguna otra secuencia significativa. El usuario puede moverse hacia adelante y hacia atrás (arriba y abajo) a través de estas opciones haciendo clic en las flechas, presionando las teclas de dirección en el teclado de la computadora, deslizando una pantalla táctil o desplazando un mouse.

Al iniciar la aplicación Photoshop, se utiliza un patrón de diseño de lista de desplazamiento para mostrar a los usuarios los archivos abiertos recientemente. Esto les ayuda a seleccionar un documento en el que probablemente deseen seguir trabajando. Sin usar una lista de desplazamiento, se podrían dar muy pocas opciones o los consejos de aprendizaje esenciales en la parte inferior de la página desaparecerían de la vista, haciendo que sea menos probable que se acceda a ellos.

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

“El diseño es el pensamiento hecho visible”.
—Saul Bass, diseñador gráfico estadounidense y cineasta ganador de un premio de la Academia

Desea proporcionar a los usuarios muchas opciones, archivos, correos electrónicos o algún otro grupo de elementos.

Una incrustación de lista es especialmente útil cuando los elementos consumirían una gran cantidad de espacio en la pantalla si se mostraran todos sus contenidos a la vez. Con una lista incrustada, el usuario normalmente puede ver una gran proporción de otros elementos de la lista incluso cuando se muestra el contenido de uno, lo que ofrece libertad de movimiento de una opción a otra.

Los usuarios están limitados por las limitaciones de la cognición humana; presentarles una gran cantidad de elementos de una sola vez aumenta el tiempo que les llevará identificar los elementos deseados. Las listas de archivo ayudan a guiar al usuario a orientar la información con el uso de categorías etiquetadas que mantienen el número de opciones en la pantalla en cualquier momento a un nivel aceptable o manejable. Al hacer clic en estas categorías, el usuario pasa a otra pantalla, en la que los contenidos de la categoría seleccionada se muestran en listas más estrechas o todos a la vez. Canalizar a los usuarios de esta manera les evita tener que escanear una gran cantidad de elementos para identificar la información deseada.

Las listas de desplazamiento permiten mostrar muchas opciones sin ocupar una gran parte de la interfaz de usuario. Además, permiten al usuario ver el contenido de una gran cantidad de elementos sin tener que moverse entre diferentes secciones de la interfaz de usuario.

La carpeta de fotos que se muestra aquí utiliza un patrón de diseño de lista de archivos para ayudar a los usuarios a navegar dentro de la gran cantidad de contenido. Al alejar el zoom a un nivel de año, puede seleccionar rápidamente el período de tiempo aproximado y luego acercarlo nuevamente para obtener más detalles.

Práctica recomendada: cómo implementar listas

1. Antes de hacer cualquier otra cosa, debe reunir todas las opciones , organizarlas en categorías más amplias si es necesario (por ejemplo, para las listas de archivos, estos serían días, semanas, meses o años) y asignar etiquetas lógicas a estas opciones.
2. Coloque las opciones en un orden lógico . Por ejemplo, la lista puede ordenarse de acuerdo con la fecha en que los archivos se modificaron por última vez, como es el caso de algunas aplicaciones de administración de archivos, o simplemente pueden estar ordenados alfabéticamente. Sea cual sea el método que adopte, asegúrese de que sea evidente al instante y sea el mejor orden para el trabajo . Por ejemplo, ordenar los correos electrónicos alfabéticamente no sería ideal para los usuarios, ya que normalmente necesitan distinguir los mensajes nuevos de los que ya han abierto.
3. Haga que los medios de desplazamiento sean claramente evidentes pero discretos cuando utilice un patrón de diseño de lista de desplazamiento. Permita que el usuario use el teclado para moverse por las opciones.
4. Proporcione al usuario accesos directos para saltar a las opciones seleccionadas con frecuencia, como escribir la primera letra del elemento o la colocación automática de estos elementos en la parte superior de la lista después de una serie de usos.
5. Muestre o abra el contenido lo más cerca posible de la lista y sin necesidad de ningún movimiento entre las diferentes regiones de la interfaz de usuario, como pestañas, ventanas o paneles distintos. Con la implementación de una lista incrustada, el contenido debe mostrarse directamente debajo del elemento seleccionado y el mismo gesto debe permitir al usuario cerrar el contenido, devolviendo la lista a su estado original. Algunos diseños permiten a los usuarios abrir elementos haciendo clic en la región general ocupada por la etiqueta de la opción, y luego pueden cerrar cada uno haciendo clic en la región general ocupada por los contenidos. Esto tiene la ventaja de reducir el nivel de precisión requerido para abrir, cerrar y cambiar entre elementos rápidamente .
6. Cuando se haya realizado una selección, asegúrese de que los contenidos se abran automáticamente y sean visibles instantáneamente para que el usuario no tenga que encontrarlos.
7. Proporcione comentarios informativos que confirmen la selección del usuario cambiando el color de la opción elegida.

En general, debe asegurarse de que las etiquetas de categoría aparezcan en las que se pueda hacer clic para que el usuario sepa con qué elementos se puede interactuar y con qué no. Por ejemplo, el uso de una línea de puntos debajo de las categorías tituladas o una flecha orientada hacia el este puede dar la impresión de “interactividad”. Además, puede resultar útil cambiar el color del texto de la etiqueta de categoría cuando los usuarios hayan realizado correctamente su selección. Esto tiene dos ventajas principales: en primer lugar, el usuario sabe que su clic ha alcanzado el objetivo; en segundo lugar, gracias al cambio de color de las opciones previamente seleccionadas, el usuario conoce las categorías que ya ha marcado al buscar un artículo, ahorrando tiempo y esfuerzo.

Algunos elementos de una lista son más importantes para un usuario que otros. Reflejar estas diferencias personales en un diseño de interfaz de usuario rígido es difícil. Por lo tanto, en sitios web y aplicaciones donde los usuarios se beneficiarían de tener ciertas fechas más destacadas, debe brindarles la capacidad de personalizar la pantalla. Por ejemplo, permitir que los usuarios coloquen una estrella junto a una categoría específica o establezcan su propio tablero, que contenga fechas importantes, les permite hacer que el diseño funcione para ellos, en lugar de tener que trabajar en torno al diseño.

En la aplicación Wunderlist, los usuarios pueden personalizar las listas que hacen al destacar ciertos elementos. Incluso pueden resaltar más estos elementos, ordenando los elementos de la lista según la presencia de una estrella.

Problemas potenciales con las listas

Las listas, por su propia naturaleza, contienen muchos elementos diferentes, que por lo general contienen una gran cantidad de información. Por lo tanto, si hay más de un elemento de la lista abierto a la vez, la longitud de una lista puede ser interminable. Esto le presenta al usuario la tarea de desplazarse a través de cantidades significativas de información para encontrar el elemento deseado si se deja abierto más de un elemento a la vez. Un enfoque consiste en cerrar un elemento abierto automáticamente , en nombre del usuario, cuando se abre otro elemento, lo que garantiza que la lista tenga una longitud razonable y que el usuario no tenga que realizar más interacciones.

En general, si las etiquetas de categoría son ambiguas, inapropiadas o desconocidas para los usuarios, no estarán seguros de adónde se llevarán cuando seleccionen un artículo. Las etiquetas deficientes tampoco revelan el contenido de una categoría, lo que deja al usuario inseguro de dónde se encuentran los elementos específicos. Por lo tanto, las etiquetas de los artículos deben contener un lenguaje familiar para los usuarios previstos y comúnmente asociado con su propósito. Por ejemplo, si una categoría contiene imágenes personales, una etiqueta adecuada podría ser “Mis fotos”, directa y al grano. Sin embargo, una etiqueta inapropiada podría ser ‘Carpeta 123’, ya que no revela nada sobre el contenido.