Hamburger-Umschalter

UX
1

Hallo, ich bin neu bei Discourse und hoffe, dies ist eine hilfreiche Beobachtung – das Hamburger-Menü wechselt nie zu einer „Schließen“-Benutzeroberfläche, sodass ich immer wieder darauf klicke und denke, ich würde mehr Dinge enthüllen, aber es schließt sich unerwartet. Es war bereits geöffnet. Ich habe ein paar CSS-Zeilen, die ich als Thema in der Kategorie „Theme Component“ hinzufügen möchte, wenn ich mehr Zugriff habe. Glücklicherweise hat die Codebasis richtige Klassen, sodass wir uns an diese hängen können, je nachdem, ob die Seitenleiste angezeigt wird oder nicht.

discourse-hamburger-toggle

.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle  svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}
4 „Gefällt mir“
2

Vielen Dank dafür! Ich würde auch vorschlagen, den X-Schließen-Button in das Menü selbst, ganz oben, zu verschieben. (An dieser Position würde ich dem Button auch den Text „Menü schließen“ hinzufügen und vielleicht einen nach links zeigenden Pfeil anstelle des X verwenden.)

< Menü schließen oder << Menü schließen

4 „Gefällt mir“
3

Ich glaube, die meisten Leute benutzen Discourse mit der Seitenleiste, die immer aktiviert ist (ich wäre neugierig, Statistiken über verschiedene Foren zu sehen). Ein großes X, das sozusagen dazu ermutigt, einen Teil des Layouts zu schließen, der für viele Benutzer praktisch permanent ist, würde mir etwas seltsam vorkommen. :thinking:

3 „Gefällt mir“
4

Ich stimme zu, dass das wenig genutzte Hamburger-zu-Schließen-Symbol, das den wertvollsten oberen linken einfachen Zielbereich des Fensters einnimmt, nicht optimal ist.

Hier ist, was Cloudflare am unteren Rand ihrer Seitenleiste hat:

image
image265×257 8.42 KB

Es scheint, dass jemand, der etwas mehr über CSS (oder vielleicht das DOM?) weiß als ich, schnell eine Themenkomponente erstellen könnte, aber wahrscheinlich ist es ein PR, der die Vorlage behebt.

Es könnte sogar der oberste Punkt in der Seitenleiste sein. . .

3 „Gefällt mir“
5

Wie öffnet man es wieder, wenn sich der Button in der eingeklappten Seitenleiste befindet?

2 „Gefällt mir“
6

Hoppla!
Du hast einen sehr guten Punkt!
Ich habe nie behauptet, ein UX-Experte zu sein.
. . . hmm . . . OK
Sie lassen die Seitenleiste einklappen, so:

image
image149×904 13.1 KB

und das Ding unten klappt sie auf.
Vielleicht ist das Einklappen der Seitenleiste anstelle des Entfernens eine Lösung. Dann, wenn man die Symbole/Farben kennt, kann man sie nutzen, ohne dass sie aufgeklappt ist.
Fast jede Website platziert das Home/Icon oben links, und dort den Hamburger zu platzieren, scheint falsch.

3 „Gefällt mir“
7

Ich weiß, dass dies eine andere Sache ist, aber ich vermute, dass das Side-Burger-Symbol auf Mobilgeräten immer noch oben rechts ist, denn auf einem kleinen Touchscreen kann ich sehen, dass ein versehentliches Tippen auf das Logo eine häufige Sache wäre, wenn es oben links neben der Desktop-Ansicht wäre. Obwohl dasselbe auch über die Nähe zu Avatar- und Suchsymbolen gesagt werden könnte. :woman_shrugging:t2:

1 „Gefällt mir“
8

Ja, das ergibt Sinn. Ich glaube, Googlemail hat etwas Ähnliches, obwohl sie den Hamburger-Button oben links beibehalten:

Erweiterte Seitenleiste von Gmail
Erweiterte Seitenleiste von Gmail393×645 29.2 KB

Eingeklappte Seitenleiste von Gmail
Eingeklappte Seitenleiste von Gmail218×692 17.6 KB

2 „Gefällt mir“
9

Mit diesem Thema können Sie sehen, dass sich der Hamburger in einer Seitenleiste befindet, also nicht ganz oben links:

image
image210×391 34.3 KB

2 „Gefällt mir“
10

FWIW bevorzuge ich oben links für UX-Designs, Balance und Aussehen und habe keine Probleme mit der Open-Collapse-Funktionalität.

1 „Gefällt mir“
11

Ich habe noch nicht wirklich damit gespielt, aber es hat auch eine „Aufklappen beim Überfahren“ Funktion, die ziemlich gut ist.

Ich denke, sie haben einen ausgeprägteren Satz von Symbolen, was die Entschlüsselung im zusammengeklappten Zustand erleichtert, als ein erster Blick auf Metas eine vermuten lässt. Wenn man jedoch anfängt, Dinge wie mehrere Bezeichnungen hinzuzufügen, leidet es unter der gleichen Mehrdeutigkeit wie unsere Tags:

gamil sidebar label icons
gamil sidebar label icons166×195 2.56 KB

1 „Gefällt mir“
12

Keine Hover-Tags und Kategorienamen. Hovering ist auch für Touchscreen-Oberflächen nicht ideal. Die Verwendung des Desktop-Modus mit Hover-Elementen auf einem iPad funktioniert nicht wirklich gut.

1 „Gefällt mir“
13

Ich mag den Hover-Effekt, solange das Tippen auf den Bildschirm genauso funktioniert wie mit einer Maus.

Hier ist einer meiner Lieblingsstile auf einer stark angepassten Ghost CMS-Website, die ich für einen Kunden erstellt habe, bei der das Überfahren der Seitenleiste mit der Maus die vertikale Stapelung von Klick-/Tipp-Links öffnet, um kaskadierende Untermenüs anzuzeigen … es fühlt sich sehr reibungslos und einfach zu navigieren an. Sie können es hier ausprobieren:

14

Haben Sie das auf dem Handy überprüft? Sehr fehlerhaft

15

Hallo :wave: Danke fürs Teilen.

Ich verwende die Kombination aus Einzug und Auszug-Symbolen, um die Seitenleiste auf meiner Website umzuschalten.

Einzug (Seitenleiste anzeigen)
Einzug-solide

Auszug (Seitenleiste ausblenden)
Auszug-solide

2 „Gefällt mir“
16

Eine weitere Möglichkeit (für Desktops) wird auf Flarum demonstriert…

17

Ich frage mich, ob jemand anderes der Meinung ist, dass dies vom Core-Team angegangen werden muss.

Viele Top-Communities nutzen die vorherige Benutzeroberfläche (ohne Seitenleiste) auf Discourse, weil das so ist.

Ich fand die Seitenleiste super nützlich, um große Communities wie unsere zu organisieren, aber das aktuelle Verhalten auf Discourse ist das Gegenteil.

Es fühlt sich an, als ob technisch nicht versierte Leute unsere Foren wegen kleiner, aber bedeutender Details wie diesem einfach nicht zu benutzen wissen.

Es gibt immer Raum für Verbesserungen :slight_smile:

In der Zwischenzeit teste ich diese Theme-Komponente:

2 „Gefällt mir“
18

Ich habe die gleiche Frage auch