Machen Sie deutlich, welche Elemente in einer langen Liste ausgewählt sind

Verwenden Sie das Facettiertes Navigationsmuster . Amazon.com macht einen tollen Job damit:

(Screenshot von diesen Suchergebnisse für Nintendo DS - Beachten Sie, dass Sie Ihre kürzer halten können, wenn Sie eine vertikale Einschränkung haben.)

Einige bemerkenswerte Dinge:

• Sehr klare Kommunikation darüber, was das aktuell ausgewählte Element in jeder Facette ist (in diesem Fall schwarz fett gegen blau für Links)
• Hervorragende Lesbarkeit, da nicht jedes Element zu einem Hyperlink gemacht wird, obwohl es sich um Hyperlinks handelt. In diesem Fall ist es sinnvoller, die Lesbarkeit vor dem Unterstreichungsmuster des Hyperlinks zu priorisieren
• Jede Facette zeigt an, wie viele Ergebnisse verfügbar sind, wenn Sie darauf klicken. Abhängig von Ihrem Such-Backend ist die Implementierung manchmal etwas kompliziert.
• Die richtigen Steuerelemente hängen davon ab, mit welcher Art von Facette Sie es zu tun haben, sowie großartiges Texten und die richtige Formulierung ("Letzte 30 Tage" für Daten, da Sie sich in diesem Fall nicht um bestimmte Daten kümmern usw.).
• Die Möglichkeit, mit jeder Facette eine Stufe höher zu gehen und Ihre Auswahl in dieser Facette im Wesentlichen "rückgängig zu machen". Beachten Sie die Verwendung von < im Gegensatz zu einem roten Kreuz (x) wie viele andere Websites.
• Kombinieren Sie dies mit dem Breadcrumb-Navigationsmuster, wie es Amazon für eine zusätzliche Dimension der Nützlichkeit getan hat, falls Personen von oben nach unten scannen und nicht in die linke/rechte Spalte schauen

Machen Sie sich nicht zu viele Sorgen, dass Sie nicht jedes einzelne ausgewählte Objekt sehen können, wenn viele ausgewählt sind - es ist eine häufige facettenreiche Navigationsfalle, in die Sie geraten können. Benutzer werden feststellen, dass es weiter unten auf der Seite mehr ausgewählte Optionen gibt, wenn sie viele Auswahlen getroffen haben (stellen Sie sich vor, Sie wählen im Amazon-Beispiel eine von jeder Facette aus). Um die Dinge ein wenig auszugleichen, können Sie ausgewählte Facetten oben gruppieren, wie @onnodb vorschlägt, obwohl ich sie nicht hinter einem Klick verbergen würde (wie in einem select -Steuerelement).

Ich würde sagen, dass es absolut sinnvoll ist, diese 'sekundäre Liste' ausgewählter Tags oben in der Liste zu erstellen, wie folgt: (großartige Idee, übrigens)

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

Geben Sie den ausgewählten Tags eine andere Hintergrundfarbe, fügen Sie eine "(X)" - Schaltfläche hinzu, um sie zu entfernen, und ich würde sagen, Sie haben eine sehr benutzerfreundliche Benutzeroberfläche dafür.

Da Sie nur über begrenzte Immobilien verfügen, können Sie Folgendes implementieren. Platzieren Sie die Tag-Liste in einer Dropdown-Liste und haben Sie eine Plus-Schaltfläche, die eine weitere Zeile mit einer Dropdown-Liste von Tags hinzufügt. Auf diese Weise werden nur die Tags angezeigt, die der Benutzer ausgewählt hat.

Ich weiß, dass es eine ziemlich alte Frage ist, aber meiner Meinung nach bleibt sie für die heutige Anwendung gültig.

Für die Antwort habe ich mich von der vertikalen Bildlaufleiste von Visual Studio inspirieren lassen:

(

• die Schiebereglerhöhe entspricht der Größe des Bildschirmbereichs im Vergleich zur Gesamtlänge des Inhalts
• die dünne horizontale blaue Linie zeigt an, wo sich der Cursor gerade befindet
• dunkelgelbe Balken markieren die Linien, in denen der Suchbegriff gefunden wurde

Für die OP-Frage: Wenn Sie eine Liste von Elementen haben, die die Bildschirmkapazität überschreitet, müssen Sie den Schieberegler verwenden. Mit dem Schieberegler können Sie anzeigen, wo sich die ausgewählten Elemente in der Liste befinden.

Ganz oben auf meinem Kopf ...

Option 1: Ändern Sie das Attribut 'title', um die ausgewählten Elemente beim Hover anzuzeigen. Option 2: Verwenden Sie jquery, um ein Hover-Ereignis für die Liste hinzuzufügen, die das Element durchläuft und die ausgewählten Elemente auflistet.

Nun, es gibt einige Möglichkeiten, dies zu tun:

1) Wie Sie bereits erwähnt haben, können Sie die ausgewählten Tags hervorheben, während die Reihenfolge in der Liste beibehalten wird. Um das Problem zu lösen, dass Benutzer nicht wissen, dass ausgewählte Tags nicht auf der Seite angezeigt werden, können Sie etwas tun, um sie darauf aufmerksam zu machen - beispielsweise blinkende Pfeile am unteren Rand des Tag-Abschnitts der Seite, um sie darüber zu informieren, dass etwas vorhanden ist wichtig, wenn sie nach unten scrollen

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

Die markierten Tags == markieren und das vv sind die blinkenden Pfeile

2) Sie können diese zusätzliche Liste auch oben erstellen, aber die Tags aus dem Original entfernen, sodass Sie immer eine konsistente Höhe zum Tag-Abschnitt haben

3) Sie können die ausgewählten Tags als vertikale Liste unter der Überschrift der Suchergebnisse anzeigen lassen.

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

Beachten Sie die kleinen xs neben jedem Tag-Namen. Dadurch kann der Benutzer Tags schnell entfernen, und die Ergebnisse sollten sich entsprechend ändern.

Ich würde die Optionen 2 oder 3 bevorzugen. 3 Könnte besser sein, da Benutzer möglicherweise ein wenig überrascht sind, dass die Liste der Tags die Reihenfolge ändert, wenn sie weiterhin Tags auswählen.