Dejar en claro qué elementos de una larga lista están seleccionados

Utilice el Patrón de navegación facetada . Amazon.com hace un gran trabajo con él:

(captura de pantalla de estos resultados de búsqueda para Nintendo DS - tenga en cuenta que puede mantener el suyo más corto si tiene una restricción vertical)

Algunas cosas notables:

• Comunicación muy clara sobre cuál es el elemento seleccionado actualmente en cada faceta (en este caso, negrita negra frente a azul para enlaces)
• Gran legibilidad al no hacer que cada elemento sea un hipervínculo, aunque todos sean hipervínculos; en este caso, es más útil priorizar la legibilidad sobre el patrón de subrayado de hipervínculo
• Cada faceta muestra cuántos resultados están disponibles si hiciera clic en ellos. A veces es complicado implementarlo, dependiendo de su backend de búsqueda.
• Los controles correctos según el tipo de faceta con la que esté lidiando, así como una excelente redacción y la redacción correcta ("Últimos 30 días" para fechas, ya que no le interesan fechas específicas en este caso, etc.)
• La capacidad de subir un nivel con cada faceta, esencialmente "deshaciendo" su selección en esa faceta. Tenga en cuenta el uso de < en lugar de una cruz roja (x) como muchos otros sitios tienen.
• Combine esto con el patrón de navegación de migas de pan como Amazon lo ha hecho para una dimensión adicional de utilidad en caso de que las personas escaneen de arriba a abajo y no busquen en la columna izquierda/derecha

No se preocupe demasiado por no poder ver cada cosa seleccionada si se seleccionan muchas, es un obstáculo de navegación facetado común en el que caer. Los usuarios verán que hay más opciones seleccionadas más abajo en la página si han hecho muchas selecciones (imagínense seleccionar una de cada faceta en el ejemplo de Amazon). Para compensar un poco las cosas, puede agrupar las facetas seleccionadas en la parte superior como sugiere @onnodb, aunque no las escondería detrás de un clic (como en un control select).

Diría que tiene mucho sentido crear esta 'lista secundaria' de etiquetas seleccionadas en la parte superior de la lista, así: (gran idea, por cierto)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Dé a las etiquetas seleccionadas un color de fondo diferente, agregue un botón "(X)" para eliminarlas, y yo diría que tiene una interfaz de usuario muy útil para esto.

Dado que tiene una propiedad inmobiliaria limitada para trabajar, puede implementar lo siguiente. Coloque la lista de etiquetas en un menú desplegable y tenga un botón más que agrega otra fila con un menú desplegable de etiquetas. De esta forma, las únicas etiquetas que se muestran son las que el usuario ha seleccionado.

Sé que es una pregunta bastante antigua, pero en mi opinión sigue siendo válida para la aplicación actual.

Para la respuesta, me inspiré en la barra de desplazamiento vertical de Visual Studio:

• la altura del control deslizante corresponde al tamaño del área en pantalla en comparación con la longitud total del contenido
• delgada línea horizontal azul muestra dónde se encuentra actualmente el cursor
• barras amarillas oscuras marcan las líneas donde se encontró el término de búsqueda

Para la pregunta OP: si tiene una lista de elementos que excede la capacidad de la pantalla, debe usar el control deslizante. Puede usar el control deslizante para mostrar dónde están los elementos seleccionados en la lista.

Justo al lado de la parte superior de mi cabeza...

Opción 1: modifique el atributo 'título' para mostrar los elementos seleccionados al pasar el mouse por encima. Opción 2: use jquery para agregar un evento de desplazamiento para la lista que atraviesa el elemento y enumera los elementos seleccionados.

Bueno, hay algunas maneras de hacer esto:

1) Como mencionó, puede resaltar las etiquetas que están seleccionadas, manteniendo el orden en la lista. Para superar el problema de que los usuarios no se den cuenta de que las etiquetas seleccionadas no se muestran en la página, puede hacer algo para llamar su atención, algo como flechas parpadeantes en la parte inferior de la sección de etiquetas de la página para informarles que hay algo importante si se desplazan hacia abajo

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

La == marca las etiquetas resaltadas y el vv son las flechas parpadeantes

2) También puede hacer esa lista adicional en la parte superior, pero elimine las etiquetas del original, de modo que siempre tenga una altura consistente en la sección de etiquetas

3) Puede hacer que las etiquetas seleccionadas aparezcan como una lista vertical debajo del encabezado de los resultados de búsqueda.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Tenga en cuenta las pequeñas x al lado de cada nombre de etiqueta; esto permitirá al usuario eliminar rápidamente las etiquetas y los resultados deberían cambiar en consecuencia.

Preferiría las opciones 2 o 3. 3 Podría ser mejor, porque los usuarios pueden sorprenderse un poco de que la lista de etiquetas cambie de orden a medida que continúan seleccionándolas.