Chiarire quali elementi in un lungo elenco sono selezionati

Utilizzare Modello di navigazione sfaccettato . Amazon.com fa un ottimo lavoro con esso:

(screenshot da questi risultati della ricerca per Nintendo DS - nota che puoi ridurre i tuoi se hai un vincolo verticale)

Alcune cose da notare:

• Comunicazione molto chiara su quale sia l'elemento attualmente selezionato in ogni aspetto (in questo caso, nero grassetto contro blu per i collegamenti)
• Ottima leggibilità non trasformando ogni elemento in un collegamento ipertestuale, anche se sono tutti collegamenti ipertestuali - in questo caso, è più utile dare priorità alla leggibilità rispetto al modello di sottolineatura del collegamento ipertestuale
• Ogni aspetto mostra quanti risultati sono disponibili se si fa clic su di essi. Un po 'complicato da implementare a volte, a seconda del back-end di ricerca.
• I giusti controlli a seconda del tipo di faccetta con cui hai a che fare, così come l'ottimo copywriting e la giusta formulazione ("Ultimi 30 giorni" per le date, poiché in questo caso non ti interessano date specifiche, ecc.)
• La possibilità di salire di livello con ogni aspetto, essenzialmente "annullando" la selezione in quell'aspetto. Nota l'uso di < al contrario di una croce rossa (x) come molti altri siti hanno.
• Combina questo con il modello di navigazione breadcrumb come ha fatto Amazon per una dimensione aggiuntiva di utilità nel caso in cui le persone eseguano la scansione dall'alto verso il basso e non guardino nella colonna sinistra/destra

Non preoccuparti troppo di non essere in grado di vedere ogni singola cosa selezionata se ne sono selezionate molte: è una trappola di navigazione sfaccettata comune in cui cadere. Gli utenti otterranno che ci sono più opzioni selezionate più in basso nella pagina se hanno fatto molte selezioni (immagina di selezionare una di ciascuna sfaccettatura nell'esempio di Amazon). Per compensare un po 'le cose puoi raggruppare le sfaccettature selezionate in alto come suggerisce @onnodb, anche se non le nasconderei dietro un clic (come in un controllo select).

Direi che ha perfettamente senso creare questo "elenco secondario" di tag selezionati in cima all'elenco, in questo modo: (ottima idea, a proposito)

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

Assegna ai tag selezionati un colore di sfondo diverso, aggiungi un pulsante "(X)" per rimuoverli e direi che hai un'interfaccia utente molto utilizzabile per questo.

Dal momento che hai un immobile limitato con cui lavorare, potresti implementare quanto segue. Inserire l'elenco dei tag in un menu a discesa e disporre di un pulsante più che aggiunge un'altra riga con un menu a discesa di tag. In questo modo gli unici tag visualizzati sono quelli che l'utente ha selezionato.

So che è una domanda piuttosto vecchia, ma rimane valida per l'applicazione al giorno d'oggi secondo me.

Per la risposta ho tratto ispirazione dalla barra di scorrimento verticale di Visual Studio:

• l'altezza del dispositivo di scorrimento corrisponde alla dimensione dell'area sullo schermo rispetto alla lunghezza totale del contenuto
• una sottile linea blu orizzontale mostra dove si trova attualmente il cursore
• barre gialle scure indicano le linee in cui è stato trovato il termine di ricerca

Per la domanda OP: se si dispone di un elenco di elementi che supera la capacità dello schermo, è necessario utilizzare il dispositivo di scorrimento. È possibile utilizzare il dispositivo di scorrimento per mostrare dove si trovano gli elementi selezionati nell'elenco.

Appena al di sopra della mia testa ...

Opzione 1: modifica l'attributo 'titolo' per mostrare gli elementi selezionati al passaggio del mouse. Opzione 2: utilizzare jquery per aggiungere un evento hover per l'elenco che attraversa l'elemento ed elenca gli elementi selezionati.

Bene, ci sono alcuni modi per farlo:

1) Come hai già detto, puoi evidenziare i tag selezionati, mantenendo comunque il loro ordine nell'elenco. Per ovviare al problema degli utenti che non sono consapevoli del fatto che i tag selezionati non vengono visualizzati nella pagina, puoi fare qualcosa per attirare la loro attenzione, qualcosa come battere le frecce nella parte inferiore della sezione dei tag della pagina per informarli che c'è qualcosa importante se scorrono verso il basso

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

I tag evidenziati == e il vv sono le frecce lampeggianti

2) Inoltre puoi creare quell'elenco aggiuntivo in alto, ma rimuovi i tag dall'originale, in modo da avere sempre un'altezza costante nella sezione dei tag

3) È possibile visualizzare i tag selezionati come elenco verticale sotto l'intestazione dei risultati della ricerca.

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

Nota le piccole x accanto al nome di ciascun Tag; questi consentiranno all'utente di rimuovere rapidamente i tag e i risultati dovrebbero cambiare di conseguenza.

Preferirei le opzioni 2 o 3. 3 Potrebbe essere migliore, perché gli utenti potrebbero essere un po 'sorpresi dal fatto che l'elenco dei tag stia cambiando ordine mentre continuano a selezionare i tag.