it-swarm-es.com

La mejor manera de seleccionar un subconjunto de elementos en una lista larga

Uno de nuestros clientes quiere que creemos una aplicación web para compartir información sobre las revistas que publica. Cada edición de una revista contiene una cantidad variable de anunciantes. Estos anunciantes provienen de un grupo central de anunciantes. Este grupo contiene (por el momento) alrededor de 150 anunciantes. Cada edición de una revista contiene un subconjunto (aproximadamente 70-80) de estos anunciantes.

Nuestro cliente quiere que encontremos una manera de agregar 70-80 anunciantes de esta lista de 150 a una edición de una revista. Debe ser lo más rápido posible, lo más fácil posible y lo más intuitivo posible.

¿Cuál sería una solución ideal aquí? Estaba pensando en algo en las líneas de la imagen de abajo.

  1. Lista de anunciantes disponibles.
  2. Lista de anunciantes seleccionados. Los anunciantes tienen un botón para eliminar.
  3. Cuadro de texto con sugerencia automática para anunciantes en la lista de la izquierda. <Intro> elimina al anunciante de la lista de la izquierda y lo agrega a la derecha. El cuadro de texto se borra y permanece enfocado.

Mis colegas sugirieron arrastrar y soltar o solo una lista con una casilla de verificación para cada anunciante, pero esos enfoques obligan al usuario a realizar muchas búsquedas y clics. Con mi enfoque, el usuario puede seguir escribiendo.

¿Alguna otra sugerencia para esta situación?

My idea to transfer items between lists

36
Kristof Claes

Su diseño Kristof ya es bastante bueno. Has clavado cosas muy importantes como detener esta acción de retroceso y cuarto del mouse y el teclado, eso arruinará la experiencia. Y estoy contigo arrastrando y soltando, ¡qué asco!

Acabo de refinar un poco tu idea:

alt text

  • Obviamente, los clics del mouse en los elementos de la izquierda los agregarán a la derecha.
  • Desearía que el filtro de texto sea Google Style, es decir. Multi-Word, coincidencia parcial. Como en la entrada de búsqueda, "rce bm" coincidiría con el tercer elemento que se muestra en el diagrama. Esto es fácil de hacer y le brinda al usuario una forma poderosa e intuitiva de buscar nombres. El filtrado de segunda categoría (como el inicio de la cadena) solo frustrará a los usuarios y les impedirá usarlo nuevamente. Dado que el filtrado es tan crítico para la interfaz, es mejor que funcione bien.
  • Otra forma de ahorrar tiempo para el usuario (como sugirió otra persona) sería tener una lista parcialmente completada en el lado de "anunciantes seleccionados". Si creía que había una buena posibilidad de que los "10 principales anunciantes más utilizados" tuvieran un éxito del 70% o más, entonces también podría volcarlos en la lista de la derecha en la carga, ¿verdad? En el peor de los casos, el usuario tiene que eliminar uno o dos (1 clic del mouse cada uno) de los 10 principales y los 7 elementos restantes que desea guardarlos en su búsqueda. Ajustar los números en esta idea para aliviar al usuario de más trabajo.

Recuerde: cuanto más trabajo sted pueda hacer por el usuario; para reducir su clic, mirar y buscar, más rápida, fácil y agradable será su interfaz.

34
cottsak

Trabajo para una empresa que publica revistas, así que estoy un poco familiarizado con su dominio.

Me imagino que la lista de anunciantes no cambia mucho de un tema a otro, por lo que tendría los anunciantes del número anterior seleccionados de forma predeterminada.

Como solo tiene 150 anunciantes y se seleccionará aproximadamente la mitad de ellos, no me molestaría en realizar una búsqueda. Comenzaría con una simple lista de casillas de verificación y vería qué tan bien funciona. Asegúrese de que los elementos seleccionados sean visualmente distintos (p. Ej., Introdúzcalos) para que sea fácil de escanear.

7
Patrick McElhaney

Mi primera publicación, así que por favor sé amable y haré lo mismo :-)

Si bien hay algunas buenas ideas aquí, no creo que ninguna cumpla con los requisitos del póster original:

"¡Nuestro cliente quiere que encontremos una forma de agregar 70-80 anunciantes de esta lista de 150" - Kristof Claes .

Ciertamente estoy de acuerdo con muchas de las ingeniosas ideas en las que los usuarios podrían filtrar los resultados y agregarlos a la lista Anunciantes seleccionados , todavía necesitamos una forma para agregar en masa aproximadamente ¡70 anunciantes a la selección. Si bien las ideas de filtrado son bastante buenas, simplemente conducirían a una aplicación muy similar a cualquier aplicación de correo electrónico en la que el usuario especifica los destinatarios en el campo "para". ¡Imagina tener que agregar 70 destinatarios a mano!

Idealmente, no querríamos el siguiente flujo de trabajo:

  1. Tipo de frase para buscar
  2. (Aparecen resultados)
  3. Use cualquiera de las pulsaciones Intro para el elemento completado automáticamente o seleccione uno o más elementos de la lista que aparece
  4. Repita los pasos 1 a 3 hasta que se hayan agregado aproximadamente 70 anunciantes.

Veo algunas buenas publicaciones aquí de muchas personas que realmente saben lo que hacen, pero creo que algunas han salido quizás de un tema y están algo enfocadas en tecnologías de implementación en lugar de la psicología del buen "diseño de interfaz de usuario".

Mi último pensamiento sobre este hilo es: quizás algún tipo de mecanismo para agregar "grupos" a la selección, ya que esto ciertamente reduciría la repetición del mismo flujo de trabajo 70 veces. Algunos programas que he visto elegirán a los anunciantes con un enfoque "round robin". Ciertamente, esto podría ayudar a algunos de la selección; Además, puede tener grupos predefinidos que siempre desee agregar, tal vez una lista de sus anunciantes que pagan más o anuncios de productos que son "nuevos".

Y ahora para algo un poco fuera de tema ...

Matty, veo que mencionaste Apple y en particular el iPhone -

... podemos aprender del iPhone ... la clave es hacer suposiciones razonables que sucedan en las decisiones tomadas por el usuario ...

No estoy seguro de a qué te refieres con eso después de nuestra conversación el otro día. No solo son dispositivos táctiles, quizás menos utilizables, sino que también Apple generalmente tiene un historial de creación de software que te hace preguntarte qué piensan realmente de su base de usuarios. Un excelente ejemplo: si deseas cambiar el nombre su dispositivo iPad, primero deberá conectarlo a una computadora que además tiene software iTunes. ¿Por qué demonios no puedo simplemente entrar en la configuración General del iPad es una incógnita.

Las mejores interfaces de usuario son del estilo: "diseño inductivo de interfaz de usuario", en oposición a "diseño deductivo de interfaz de usuario" o, en otras palabras, "prueba y error". Los dispositivos táctiles entran en la última categoría. Dejame explicar:

Si algo toca dispositivos hechos populares por Apple como en iTouch, iPhone, y ahora el iPad tiene algo arrojado usabilidad del software de vuelta a la Edad de Piedra de las "interfaces de usuario deductivas" Al igual que un glifo muy mal diseñado en un botón, dejando al usuario pensar - " ¡Dios mío, ¿qué significa eso?", mirando la pantalla de un dispositivo táctil, no es inmediatamente aparente que el uso de dos dedos permite al usuario acercar o alejar; o mi favorito: que mantener presionado el dedo y un icono durante dos segundos más o menos pone el dispositivo en "modo de eliminación".

De la misma manera que un icono mal diseñado cae en la categoría de "" No sé lo que eso significa, pero después de usarlo por primera vez, ¡generalmente recordaré lo que hace ", muchos dispositivos táctiles entran en la categoría de interfaces de usuario deductivas porque el usuario debe deducir lo que el programa realmente puede hacer" ¡jugando con él "reduciendo así su facilidad de uso inmediata.

¡Mantén el buen trabajo!

Pensamientos aleatorios de MickyD

6
MickyD

Toda la lista de anunciantes debería tener un filtro encima ( básicamente colocando su "3" encima de su "1" y que "3" afecte dinámicamente el contenido de "1" ):

  • Buscar (sobre la marcha reduce la lista)
  • Grupos ("Último uso", "Moda", "Electrónica", etc.)

Nota: si su búsqueda es lo suficientemente potente, puede usar un solo control, por lo tanto, la búsqueda de "moda" devolverá a todos los anunciantes que tengan "moda" en su nombre, o que hayan sido etiquetados como pertenecientes a la categoría "moda".
El "Último uso" puede ser una casilla de verificación.

Beneficio principal:
Reducir la lista sobre la marcha le permite seleccionar todos los elementos relevantes juntos y moverlos.

Ejemplo: escribe "electrónica", obtiene una lista de todos los anunciantes relacionados con la electrónica, los selecciona a todos (con el mouse, ctrl + A o cualquier otro método) y los mueve inmediatamente a la lista correcta.

4
Dan Barak

Tengo esta interfaz de usuario que podría ser relevante.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
Podría ser útil si los anunciantes estuvieran de alguna manera organizados en categorías, y el usuario supiera en qué categoría se encuentra cada uno.
Es una IU de solo mouse, que requiere un solo clic por anunciante.
Se puede operar con el teclado, pero el menú se cierra y debe ampliarse nuevamente para cada selección. Esto se puede solucionar al no cerrar el menú al entrar.

3
Juan Lanus

Tengo que estar de acuerdo con Micky Duncan : Creo que buscar/agrupar/filtrar no es en absoluto adecuado para esta tarea.

No desea buscar y seleccionar algunos elementos de una lista grande. Desea seleccionar aproximadamente la mitad de todos los elementos de la lista. Si el usuario tiene que seleccionar la mitad de los elementos, querrá asegurarse de haber seleccionado a todos los candidatos y no extrañar a nadie. Entonces, el flujo de trabajo es más similar al siguiente:

Imagine que tiene la Lista de 150 anunciantes en papel. Revisaría la lista de arriba a abajo y decidiría para cada uno "¿quiero este anunciante?" Y luego le daría una marca o una huelga -a través y al final está seguro de haberlos evaluado a todos.

Entonces el diseño debería ser así:

Selector mockup

El foco está en el elemento superior de la lista central y el usuario puede usar las teclas de flecha izquierda y derecha para descartar el elemento o colocarlo en la lista seleccionada. Por lo tanto, puede trabajar rápidamente en toda la lista presionando hacia la izquierda o hacia la derecha según el anunciante y está seguro de haber pensado en cada uno y no se ha perdido ninguno.

2
Falco

Parece que tu solución es bastante buena. Eliminaría la lista de la izquierda ya que en realidad no agrega ninguna información (es solo una lista larga, y será difícil decir que algo se evaporó después de presionar Enter) y solo ofrecer un campo de búsqueda con autocompletar ( aunque debería haber un menú desplegable de ese campo para que los usuarios aún puedan ver qué opciones están disponibles) y agregue un gran botón "Agregar anunciante a la lista" en caso de que sus usuarios no sepan presionar Enter.

Lleve esto a la etapa de prototipo de trabajo lo antes posible (utilizando datos simulados) y luego demuestre con su cliente y haga que lo revisen. Obtener sus comentarios lo antes posible es fundamental, ya que serán ellos los que lo usen con frecuencia y, por lo tanto, deben sentirse cómodos con él.

1
Rahul

Estoy de acuerdo con los puntos planteados por MickyD y Patrick . Todo depende de cómo se haga la selección de anunciantes. ¿El cliente usará la interfaz de usuario para seleccionar los anunciantes que deberían estar en un problema específico o el cliente ya tiene una lista con los anunciantes en el problema específico? No creo que el filtrado sea la mejor solución en ninguno de los casos.

Si el cliente usa la interfaz de usuario para seleccionar los anunciantes, debería funcionar mucho mejor simplemente presentar una lista con un estado marcado/no marcado. Como Patrick escribió, es una buena idea hacer que el estado seleccionado se destaque. También es posible hacer que el estado no seleccionado parezca más claro en lugar de simplemente poner en negrita el estado seleccionado. El cliente se mueve en la lista usando la tecla arriba/abajo y marcando/desmarcando usando el espacio (o una tecla similar).

Si el cliente tiene una lista con los anunciantes que aparecen en el tema específico, el primer enfoque debe ser verificar si esa lista podría recibirse en forma digital e importarse automáticamente. Si eso no es posible, tal vez la lista esté ordenada de alguna manera y luego la IU debería ordenar a los anunciantes de la misma manera.

La tercera opción es que el cliente revise el problema buscando anunciantes o que tenga una lista sin clasificar. En este caso, tiene sentido tener una función de filtro.

El punto es que sin conocer el objetivo y las circunstancias que rodean la tarea, puede ser realmente difícil proporcionar una buena solución.

0
Robert Höglund

Usaría dos listas y dos botones. El usuario puede marcar elementos individuales en la lista de la izquierda con un clic del mouse, doble clic moverá el elemento a la lista de la derecha.

Puede presionar Mayús y hacer clic, marcar un rango y, con el botón [>], transferir todos los elementos marcados a la derecha. Con Ctrl, un solo elemento se puede cambiar del estado marcado al no marcado y viceversa.

Ctrl-a marcaría todos los elementos. Todo se conoce desde otras interfaces de programa.

Los elementos ordenados alfabéticamente facilitarían la búsqueda de una entrada, el primer carácter podría usarse como una tecla de acceso rápido para navegar a esa entrada, si es necesario desplazarse.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a, d, e, f} foo ahora está marcado a la izquierda. Con [>] el usuario los mueve a la derecha.

Dichas interfaces son bastante rápidas, fáciles de usar y fáciles de entender. Tal vez pueda agregar texto de información sobre herramientas o nombrar los botones 'mover a la Lista de elementos seleccionados' y 'eliminar de la Lista de elementos seleccionados'.

Después de pasar a otra Lista, esta lista debe ser recurrida.

0
user unknown