Neue Header-Dropdown- / Benachrichtigungsmenü-Stile

Meine blauen ungelesenen Punkte scheinen etwas zickzackförmig zu sein und führen dazu, dass die Beschreibungen recht früh abgeschnitten werden.

Vielleicht brauchen wir die Punkte gar nicht mehr, da ungelesene Benachrichtigungen jetzt „grau“ sind?

6 „Gefällt mir“

Der Abbruch erfolgt am „Wortumbruch“, was meiner Meinung nach besser für die Lesbarkeit ist.

Die unregelmäßigen / zackigen Punkte sind das, was wir in Themenlisten und der Seitenleiste tun. Basierend auf dem Feedback bin ich diesen Weg gegangen, aber persönlich bevorzuge ich es, wenn sie alle in der am weitesten rechts liegenden Zone wären.

Hmm, das ist interessant.

Im Moment verschmelzen und imitieren wir zwei Muster in unserer Benutzeroberfläche.

In der Seitenleiste für Ungelesenes:
blauer Punkt

In der Themenliste für Ungelesenes:
blauer Punkt und Hauptfarbe für den Text

2 „Gefällt mir“

Ist der Punkt mit dem Benachrichtigungssymbol vielleicht ähnlich genug, dass wir keinen weiteren auf der rechten Seite benötigen? (Würde er mit der helleren tertiären Farbe übereinstimmen?)

Mir fehlt die zweite Zeile für den Titel, 3 Wörter sind so kurz!

4 „Gefällt mir“

Ja, ich sehe jetzt irgendwie, dass das Symbol mit farbigem Hintergrund irgendwie als „blauer“ Punkt-Hinweis fungiert.

Hm … da bin ich mir nicht sicher. Mit dem Symbol dort ist der Kontrast fraglich. Wir könnten aber auch jederzeit die Symbolfarbe ändern.

Ich denke, wir haben genug Feedback erhalten, dass die Leute mehr Wörter als Kürzungen bevorzugen. Ich nehme das heraus.

3 „Gefällt mir“

Könnten wir bitte eine Anzeige zurückbekommen, welche Benachrichtigungen bereits angesehen/abgelehnt wurden und welche neu sind? Ich sehe im Moment keinen Unterschied.

2 „Gefällt mir“

Sagen Sie, dass Sie das nicht sehen?

Oder ist der Unterschied hier nicht stark genug?

Ich frage mich, ob man das Styling der Gmail Mobile App emulieren sollte? Es ist so ein etabliertes Paradigma.

(Fett vs. dünn)

2 „Gefällt mir“

Das ist ein bisschen schöner.


Das Ziel ist es, die Themenliste zu imitieren, aber von Natur aus benötigen wir möglicherweise mehr Differenzierung aufgrund einer so kompakten und dichten Liste von Elementen hier. Ich glaube nicht, dass es schlecht wäre, leicht von der Norm der Seitenleiste/Themenliste abzuweichen.

1 „Gefällt mir“

Da ich nur neue Elemente in meinem Benachrichtigungs-Dropdown hatte und keine Markierungen sah, die anders aussahen, bemerkte ich die deprimierend-grauen Symbole bei den bereits gelesenen Elementen erst, als ich mir die vollständige Seite mit den Benachrichtigungen ansah.

Ich mochte das “Meer aus Blau”, als ich ungelesene Elemente hatte, und habe nie auch nur einmal gedacht: “Wow, das ist zu viel Farbe, die mich anstarrt.” Es war einfach zu erkennen, dass Dinge meine Aufmerksamkeit brauchten und/oder dass jemand tatsächlich mit mir sprechen wollte.

4 „Gefällt mir“

Das ist ein tolles Feedback. Bei einem Meer von Blau ist es ziemlich klar, dass “hey, ich muss das alles löschen”.

Wenn das entfernt ist, geht die Auffälligkeit definitiv verloren. Vielleicht ist es eine gute Sache, die Punkte allein für diesen Zweck wiederzubringen.

3 „Gefällt mir“

Für mich ist der Unterschied zwischen Blau und Grau sehr gering. Das liegt vielleicht auch daran, dass das Grau aufgrund der WCAG-Palette dunkler ist. Ich glaube, ich würde es bevorzugen, wenn die gelesene Benachrichtigung immer noch ein graues Symbol auf Weiß wäre; dann ist der Unterschied deutlicher.

Ich sehe natürlich den Farbunterschied, aber ich finde, wenn ich nur gelesene Benachrichtigungen habe, sehen die gelesenen wie ungelesene aus.

Auch auf \u003chttps://meta.discourse.org/my/notifications\u003e sehe ich jetzt schwarze Symbole auf Grau
image


Wenn ich auf den Umschlag klicke, um nur Benachrichtigungen im Zusammenhang mit PMs anzuzeigen, sehen alle Nachrichten ungelesen aus, obwohl sie alle gelesen sind.
image

4 „Gefällt mir“

Ich wollte heute Morgen kurz vorbeischauen und Ihnen allen mitteilen, dass dieses Feedback sehr geschätzt wird. Es war schön, die Iterationen in so kurzer Zeit gemeinsam durchzugehen, mit all den hier vorgestellten Ideen.

Es scheint, dass wir eine etwas stärkere Anzeige für ungelesene Nachrichten benötigen, daher tendiere ich wieder zum blauen Punkt.


Oh ja… das ist nicht ideal. Danke!

Interessant… ich werde es mir ansehen.

Das Layout der aktuellen Iteration gefällt mir sehr gut, es fasst alle relevanten Informationen in einem kompakten Element zusammen und der allgemeine Listenabstand wirkt immer noch großzügig :+1:

Was den Status angeht, habe ich keine starke Präferenz für die verschiedenen Optionen. Aber ich denke, es wäre großartig, wenn er in einer Design-Exploration allgemeiner behandelt werden könnte. Es gibt kein vollständig konsistentes System und anstatt nur nach der richtigen Lösung für das Benachrichtigungsmenü zu suchen, wäre es großartig, eine breitere Exploration zu haben, die den Status und den Kontext in der gesamten App abbildet und ihn dann mit Variablen anwendet.

Zum Beispiel ist der Status (gelesen/ungelesen) zwar analog zur Themenliste. Aber der Kontext ist anders, und in ähnlichen Kontexten (andere Menüfelder) zeigt ein dezenteres Grau normalerweise nicht diesen Status an. Jetzt sehen andere Menüpunkte eher so aus, als würden sie auch einen gedämpften Status anzeigen. Daher denke ich, dass dies wirklich von einer systematischeren Abbildung profitieren könnte.

5 „Gefällt mir“

Derzeit gibt es in Discourse nur zwei Teile, die einen „gelesen/ungelesen“-Stilzustand verwenden.

Der andere Teil in diesem Menü ist ein „ausgewählter“ Zustand. Dieser zeigt den aktuell ausgewählten Benachrichtigungs-Tab an. In dieser Iteration ahmen wir den ausgewählten Zustand für Seitenleistenelemente nach.

Hier ist eine grundlegende Übersicht über die Elemente, die wir im Menü betrachten. Gelesen, Ungelesen, Ausgewählt

Seitenleiste
Für die Seitenleiste zeigen wir „ungelesen“ nur mit einem Punkt an. „Gelesen“ wird standardmäßig angenommen, wenn kein blauer Punkt vorhanden ist.

Seitenleiste – aktiv
Hier ist das aktuell ausgewählte Seitenleistenelement, auch bekannt als aktiv.

Themenliste
Für Themenlisten zeigen wir derzeit einen blauen Punkt an und verwenden Farbe im Titel und in den Metadaten zur Unterscheidung. Eine Einschränkung ist, dass wir den blauen Punkt nicht bei Themen anzeigen, denen Sie nicht folgen/die Sie nicht beobachten. Ob der blaue Punkt erscheint oder nicht, ist für den Benutzer also nicht sofort ersichtlich.

Menüs
Wir verwenden ausgewählt als Zustand, um die aktive Auswahl anzuzeigen. Ich glaube nicht, dass dies auf Benachrichtigungen übertragbar ist, aber es ist auf den ausgewählten Zustand des aktuellen Tabs der Menübenachrichtigungen übertragbar.

Derzeit gibt es Inkonsistenzen bei der Farbe, die wir für „ausgewählt“ verwenden.

Für das Tracking verwenden wir Grau.

Für die aktuell ausgewählte Kategorie verwenden wir Blau.

Benutzerbenachrichtigungs-Seite
Diese Seite muss in der aktuellen Iteration noch überarbeitet werden.

2 „Gefällt mir“

Ich schätze Ihre Arbeit wie immer und es gefällt mir, dass Sie sich speziell damit befassen.

Darf ich die Motivation für den Abstand an den Ecken der Schaltflächen/Abschnitte erfahren?

Ich verstehe es ehrlich gesagt nicht, aber ich verpasse wahrscheinlich etwas.

Das sieht schön aus, ohne zusätzlichen Abstand an den abgerundeten Ecken :slight_smile:

1 „Gefällt mir“

Um die Seitenleiste genauer nachzuahmen.

1 „Gefällt mir“

Ich verstehe es, das letzte Update ohne zusätzlichen Abstand bei den Schaltflächen sieht für mich besser aus :ok_hand:

Was denkst du über diese subtile Verbesserung?

Es geht darum, den Hover-Effekt vom aktiven Schaltflächenbereich auf der rechten Seite zu entfernen und gleichzeitig einen subtilen Überblendeffekt auf den linken Bereich anzuwenden.

Dies würde helfen, die Bereiche von den Schaltflächen zu unterscheiden und zu verhindern, dass die Benutzeroberfläche übermäßig gesättigt oder „vollständig bemalt“ erscheint, wenn gleichzeitig aktive Benachrichtigungen und ein Bereich vorhanden sind.

Hier ist eine Iterationsidee, basierend auf weiterem Feedback, das wir hier erhalten haben.

3 „Gefällt mir“

Vielleicht liegt es daran, dass ich so an den weißen Hintergrund für Benachrichtigungen gewöhnt bin, die ich bereits gesehen habe, aber es sieht schon etwas seltsam aus, so große Flächen mit grauem Hintergrund in einem Theme zu haben, das diese sonst nicht verwendet.

2 „Gefällt mir“

Dieses Experiment ist hier auf Meta wieder live. Stellen Sie sicher, dass Sie der Experimente-Gruppe beitreten.

3 „Gefällt mir“