it-swarm-es.com

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

Estoy tratando de diseñar una parte de una interfaz web que permita a los usuarios etiquetar elementos y ver todos los elementos con una etiqueta o un conjunto de etiquetas en ellos; piense en gmail, si gmail le permitió seleccionar fácilmente varias etiquetas para ver todos los mensajes con todos de esas etiquetas ¿Cuál es la mejor manera de mostrarle al usuario qué conjunto de etiquetas está viendo actualmente?

El resaltado simple funciona para una etiqueta, pero si la lista de etiquetas es más larga que la pantalla, no podrán verlas todas a la vez, lo que hace que no quede claro qué etiquetas ha seleccionado el usuario. Además de este problema, tengo una pequeña cantidad de espacio para trabajar: toda la etiqueta y la interfaz del elemento tienen aproximadamente 300x500 píxeles, por lo que no es una opción mostrar las etiquetas seleccionadas en una larga lista horizontal.

Estaba pensando en crear una lista secundaria en la parte superior de la lista de etiquetas con las etiquetas seleccionadas (algo así como esas listas desplegables que han enfatizado los EE. UU. Y otros países ), pero me pregunto si Hay una mejor alternativa.

13
sslepian

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

Amazon faceted navigation

(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).

7
Rahul

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.

5
onnodb

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.

enter image description here

3
Denzo

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:

MS Visual Studio scroll bar

  • 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.

0
Mike

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.

0
Babak Naffas

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.

0
Waleed Al-Balooshi