Wie kann der von Tags in der rechten Spalte von StackExchange-Sites verwendete Speicherplatz optimiert werden?
In diese Meta-Frage, wie die StackExchange-UI-Site aussehen soll arbeite ich an einem Design für die Site (lesen Sie: herumspielen). Ich verwende ein webbasiertes Tool, um das CSS der Seite zu bearbeiten. Dadurch habe ich viel Freiheit, Änderungen vorzunehmen, und bin gleichzeitig auf den vom Server gerenderten verfügbaren HTML-Code beschränkt.
Beim Ändern und Reorganisieren von Dingen (hauptsächlich Elemente wie Typografie und visuelles Gewicht) wurde mir klar, dass die rechte Spalte, wie sie auf fast jeder StackExchange-Website angezeigt wird, ziemlich ineffizient ist. So sieht es auf der Meta-Site aus:
Tags (und darunter Abzeichen) sind kleine Objekte, die horizontal länger sind als vertikal. Jeder hat mehrere Attribute:
- Name des Objekts
- Häufigkeit, mit der das Tag vergeben wurde oder dem das Abzeichen zugewiesen wurde
- Ein visuelles Element, um den Begriff des Objekts zu verstärken
- Eine ausgeprägte horizontale Breite in Abhängigkeit von der Länge des Namens
Die Art und Weise, wie die Dinge jetzt organisiert sind, fühlt sich sehr ineffizient an:
- Jedes Tag/Badge nimmt eine Zeile Platz ein, obwohl nicht die gesamte horizontale Breite benötigt wird.
- Die visuelle Darstellung von Tags und Abzeichen auf dieser Seite ist unzureichend. Während Tags und Abzeichen so gestaltet sind, dass sie von selbst angezeigt werden, z. B. ein Tag auf einer Frage oder ein Abzeichen auf dem Profil eines Mitglieds, werden sie in diesen Fällen von Metadaten begleitet: der Häufigkeit, mit der das Tag angewendet wurde, oder dem Mitglied Das Abzeichen wird vergeben an. Die visuelle Darstellung setzt jedoch weiterhin eine generische Anwendung voraus.
- Auf den meisten StackExchange-Sites haben diese Elemente starke Ränder, wodurch zwischen den einzelnen Elementen, die sich in einer Linie befinden, viel unangenehmer negativer Abstand entsteht.
In mein Redesign habe ich darauf geachtet, die Stärke der Tags zu verringern (habe noch keine Abzeichen in Angriff genommen), um dieses visuelle Rauschen zu reduzieren, aber ich habe keine gute Möglichkeit gefunden, Tags darzustellen in Kombination mit der Anzahl der noch angewendeten Male. Ich hatte einige Ideen, aber keine davon fühlt sich richtig an:
- Rendern Sie sie in einer Tag-Cloud. Dies würde mehr horizontalen und weniger vertikalen Raum benötigen. Tag-Clouds sind jedoch meistens scannbar und nicht lesbar. Ich bin mir nicht sicher, ob das ein Problem ist.
- Betrachten Sie eine neue visuelle Darstellung für die Kombination von Tags mit der Anzahl der Anwendungen. Vielleicht würde durch Einfügen der Nummer in das Tag: <Diskussion] x14 zu <Diskussion | 14]. Oder indem Sie die Höhe des Tag-Elements erhöhen und die "14" unter dem Namen platzieren. Das würde insgesamt mehr vertikalen Platz beanspruchen, aber mehrere Tags in jeder Zeile zulassen.
- Entfernen Sie den Verweis auf eine bestimmte Anzahl von Anwendungen und verwenden Sie stattdessen eine visuelle Metapher, um die Anzahl der angewendeten Anwendungen anzugeben. Vielleicht mit einer Thermometer-Palette: "heiße" Tags könnten roter und kalte blauer sein. Dies wäre jedoch für neue Benutzer nicht sofort ersichtlich.
- Entfernen Sie den Verweis auf eine bestimmte Anzahl von Anwendungen und verwenden Sie stattdessen die Breite, um die Schärfe anzuzeigen. Je breiter ein Tag (in der rechten Spalte) ist, desto beliebter ist es. Wie oben wäre dies jedoch zunächst etwas verwirrend.
Fragestunde: Was wäre ein effektiver Weg, um die Art und Weise, wie Tags und Abzeichen in der rechten Spalte angezeigt werden, neu zu gestalten, da ich nur das CSS ändern kann und nicht manipulieren kann das HTML?
Ein großes Lob für die Mühe - sehr schön!
Ich habe am Ende ein paar Kommentare zur Liste:
- Persönlich finde ich Tag Clouds nicht sehr nützlich.
Die Reihenfolge zwischen den Elementen ist nicht klar, es ist nicht immer leicht zu erkennen, welche größer ist, und Sie wissen nicht, nach welchen Tags sortiert sind. - Was Ihren zweiten Vorschlag betrifft, könnte ich eine kleine Verbesserung haben, aber es fühlt sich auch nicht richtig an - Verwenden Sie die Breite, aber machen Sie das Tag nicht einfach breiter - stapeln Sie sie!
Das heißt. Zeigen Sie einfach einen "Schatten" rechts von jedem Tag für jede Instanz an.![alt text]()
Natürlich wirst du eine Grenze setzen und alles über 10 oder so wird Ellipse haben (...)
Wenn Sie möchten, können Sie die Anzahl der Erscheinungen über den Stapel einfügen, dies kann jedoch zu Unordnung führen.
Ich denke, dass die entmutigende Liste von Tags auf dieser Site mich vermeiden lässt, da sie mich unbewusst erschreckt, weil ich so lang bin. Ich denke, eine Beschränkung auf die Top Ten mit der Option, alle zu sehen, würde den Benutzer dazu bringen, es schnell zu scannen und innerhalb von Sekunden zu sehen, was passiert.
Außerdem konnte ich nie verstehen, wie die Tags sortiert waren. Es scheint mir, dass sie eher nach den Zahlen auf der rechten Seite als nach der Aktualität sortiert sind. Daher denke ich, dass das Verschieben der Zahlen nach links und das Ausrichten (die Zahlen) nach rechts die Gewissheit schaffen würde, dass sie danach sortiert sind. Das Entfernen des sich wiederholenden "x" -Zeichens und der Grafik um jedes Tag würde die Liste überladen und die Scanbarkeit verbessern.
Wenn Tags wie Links aussehen, bedeutet dies außerdem, dass sie anklickbar sind und Sie zu einer anderen Seite gelangen.
Ein paar Ideen, mehr zu spark andere Out-of-the-Box-Ideen als alles andere:
- Ein Schieberegler (Felder mit Tags werden nacheinander ein- und ausgeblendet)
- Börsenticker von Tags
- Statisches Tag-Diagramm
- Interaktives Tag-Diagramm
- Ähnliches gilt für die Visualisierungen unter Digg Labs .