Verbesserung des Layouts des Benutzermenü-Tabs

Da wir jetzt diese großartigen Menüs haben, haben wir überlegt, wie wir sie eventuell noch besser aussehen lassen könnten? Ich habe das Gefühl, dass viel Platz verschwendet wird (besonders auf mobilen Geräten), was die Klickziele auch deutlich kleiner macht.

Mobil

Desktop


Wie wäre es mit etwas wie diesem?

Das könnte die Ziele einfacher anklickbar und lesbar machen. Vielleicht könnten wir dies als mobilen Exklusivversuch starten, wegen des zusätzlichen Platzes?

Ein weiteres visuelles Beispiel von einer zufälligen Website zur Erklärung

Wenn auf dem Desktop nicht genug Platz für diese Variante ist, könnten wir vielleicht ein 3v3-Layout wie unten gezeigt verwenden?

17 „Gefällt mir“

Mir gefällt es definitiv für den ersten Tab. Vielleicht können wir dort anfangen zu experimentieren?

9 „Gefällt mir“

Für mich ist das Hauptproblem die Klickfläche auf dem Mobilgerät im ersten Tab. Ich frage mich, ob eine einfache Anpassung des Abstands dort uns bereits einen großen Teil des Weges bringt.

Interessiert, was @awesomerobot dazu denkt. Ich stimme zu, dass der riesige leere Weißraum etwas zu viel ist.

10 „Gefällt mir“

Bin nicht gegen größere Änderungen, aber die Umstellung auf zwei Spalten ist eine super einfache Verbesserung.

15 „Gefällt mir“

Ich denke, dass hier eine größere Änderung für Mobile erforderlich ist.

12 „Gefällt mir“

Ich würde gerne, dass es so aussieht. :slight_smile:

So viel zu meiner Meinung: Ich hatte auf dem ersten Tab keine Usability-Probleme. Nicht, dass ich diesen Tab oft nutze, aber ich erinnere mich nicht daran, jemals etwas falsch angeklickt zu haben, als ich ihn benutzt habe.

Ich finde das schön, aber es könnte gut sein, den Abmelden-Button vom Rest zu isolieren. Meines Wissens kann man über dieses Menü Optionen hinzufügen, und es könnte verwirrend sein, wenn der Abmelden-Button plötzlich von der linken auf die rechte Seite wechselt oder umgekehrt (auch wenn er sich nicht oft ändert).


Für mich ist das größte Problem der erhebliche leere vertikale Abstand auf Mobilgeräten in allen Tabs, wie @rishabh ursprünglich erwähnt hat.

7 „Gefällt mir“

Zwei Optionen basierend auf @rishabhs Mock-ups. Ich tendiere zu 3 Spalten, aber das schränkt den Platz für Text ein („anonymen Modus aktivieren

10 „Gefällt mir“

“Anonymen Modus aktivieren” könnte als Text unten rechts wie “Abmelden” erscheinen.

Beim Design gefällt mir der kompakte Look des dritten Spaltenstils etwas besser.

Ich denke, das Problem liegt hier beim mobilen Bereich:

Ich vermute, große Buttons könnten hier funktionieren, aber dann würde ich „Abmelden

8 „Gefällt mir“

Desktop ist in Ordnung, ich denke, dies sollte eine Änderung nur für Mobilgeräte sein.

8 „Gefällt mir“

Neues Thema? Diese Diskussion scheint vom Thema abzuweichen. Der schnelle Zugriff wurde bereits abgeschlossen (was großartig ist) und wird von den neuesten Vorschlägen nicht beeinflusst.

Ich verstehe nicht, warum diese neuesten Änderungen erforderlich sind. Vielleicht habe ich aber auch eine Begründung übersehen, die an anderer Stelle dafür angeführt wurde, warum „hier für Mobile eine größere Änderung gerechtfertigt ist".

  • Ich mag es, wenn Desktop- und Mobilmenüs gleich sind. Ich verwende beides, und das belastet mein Gehirn weniger.

  • Mehrspaltige Layouts sind im Allgemeinen langsamer zu lesen. Symbole sind praktisch, aber weniger, wenn Buttons hinzugefügt oder entfernt werden.

  • Wenn der vertikale Platz für die Landung unzureichend ist – und dies bereits der seitlichen Breite des Dropdown-Menüs entspricht –, warum haben wir dann nicht für alle Menüs Symbolbuttons?

  • Ich vermute, dass das Füllen des leeren weißen Raums das Hauptziel ist. Ich würde mich eher mit anderen Funktionen zufriedengeben, bevor die vorgeschlagenen großen Buttons eingeführt werden:

    • größere Schriftgröße, um mit der Antwort-Schaltfläche unter jedem Beitrag übereinzustimmen
    • mehr Menüoptionen, z. B. Einladungen, Abzeichen
    • Gruppierungsoptionen mit einer Art Trennung: Benutzermenüoptionen zusammen in derselben Reihenfolge wie die Benutzerzusammenfassung; Entwürfe für sich; Abmelden allein am unteren Rand
    • Statistiken
8 „Gefällt mir“

Ja, ich tendiere zu mehr Konsistenz (ist auch einfacher zu warten), aber das Tippen auf Elemente ist eine andere Erfahrung als das Klicken darauf … daher sind manchmal unterschiedliche Layouts angebracht.

Das mache ich mir nicht allzu sehr Sorgen, da es nur sehr wenige Elemente gibt.

Vielleicht sollten wir das? Irgendwo muss man anfangen. Vielleicht könnte das Hamburger-Menü später auch in ein Icon umgewandelt werden.

Ich bin nicht dagegen, um mit den Tabs im Benutzermenü gleichzuziehen, aber ich vermute, dass Abzeichen/Einladungen in diesem Kontext nicht wirklich wichtig sind (Abzeichen sind bereits im Hamburger-Menü, die meisten nutzen Einladungen nicht), sodass sie eher störend als hilfreich sein könnten.

Das ergibt bei 6–7 Elementen wirklich keinen Sinn.

Vielleicht habe ich das falsch verstanden, aber sie sind bereits in derselben Reihenfolge (Entwürfe und anonyme Modi haben keine vollständigen Tabs auf der Benutzerseite, daher wird das dort etwas unterbrochen).

Das ist mir auch schon durch den Kopf gegangen, aber ich möchte vorerst darauf verzichten. Momentan bestehen alle diese Menüs ausschließlich aus Dingen, auf die man klicken kann, um irgendwohin zu gelangen oder etwas zu tun … Ich bin mir nicht sicher, ob sie der richtige Ort für rein informative Inhalte sind?

8 „Gefällt mir“

Das ist ein wenig knifflig, denn im Grunde hat dieses Menü höchstens 7–8 Elemente, und sie auf einem iPhone X unterzubringen, ist anders als auf einem älteren iPhone oder einem Android-Gerät. Ich denke, zweispaltige Boxen sind eine bessere Nutzung des Platzes, aber auf großen Smartphones bleibt immer noch Platz übrig.

Wir könnten es wirklich aufwendig gestalten und diese Boxen dynamisch basierend auf der Viewport-Höhe anpassen? Wenn unser Ziel darin besteht, Platz zu nutzen und extrem große Tippziele zu schaffen, könnten wir richtig loslegen. Das ist wahrscheinlich zu extrem, aber es zeigt, dass selbst bei sehr großen Elementen noch etwas Platz übrig bleibt.

Wenn Sie eine einhändige Bedienbarkeit anstreben, sollte sich dieses Menü idealerweise ganz unten befinden … (das Tab-Layout ergibt bei dieser Anordnung weniger Sinn, nur ein schnelles Beispiel). Dann wird es jedoch mit den Inhaltsrichtungen komplizierter (sollte die Liste von unten beginnen, wenn sich das Menü unten befindet? Das ist ein großes Thema).

Jedenfalls war das ein kleiner Abschweif … Ich denke, die zweispaltigen Icon-Boxen sind ein guter Ausgangspunkt. Damit werden die Ziele erreicht, den Platz etwas besser zu nutzen und die Elemente viel besser tippbar zu machen.

14 „Gefällt mir“

Anstatt den gesamten Platz auszufüllen, warum nicht das Menü nur so viel Platz einnehmen lassen, wie es benötigt, anstatt die volle Höhe zu nutzen? Auf dem Desktop ändert es die Höhe bereits dynamisch. Gibt es einen Grund, dies nicht auch auf Mobilgeräten zu tun?

Die volle Höhe folgt dem Muster der mobilen App mit „vollflächigen, wischbaren Menüs“. Wären sie nicht vollflächig, wäre es meiner Meinung nach nicht so klar, dass man sie wegwischen kann (zumindest dient der zusätzliche Weißraum als zusätzlicher Wischbereich).

9 „Gefällt mir“

Das wäre eine enorme Verbesserung, und ich begrüße ein solches Vorbild sehr (nicht, dass die aktuelle Situation schlecht wäre).

4 „Gefällt mir“

Ist es für Nutzer üblich genug, ihre Entwürfe zu prüfen, um sie im Menü in einen eigenen Tab zu verschieben (statt im Profil-Tab), genau wie Benachrichtigungen, Lesezeichen und Nachrichten? Ich gehe davon aus, dass es im Vergleich zu Benachrichtigungen relativ selten genutzt wird, aber ich frage mich, wie es im Vergleich zu Lesezeichen abschneiden würde. Ich wusste nicht einmal, dass man alle eigenen Entwürfe einsehen kann, bis die jüngste Menüänderung sie in den Profilbereich des Benutzermenüs verschoben hat. Daher frage ich mich, ob eine noch prominentere Platzierung noch besser wäre.

1 „Gefällt mir“

Lesezeichen werden in Kürze deutlich nützlicher.

10 „Gefällt mir“

Hallo Kris @awesomerobot, danke für deine ganze Arbeit am UX.

Das zweispaltige Design sieht toll aus.
Auch die von @seanblue vorgeschlagene, prominenter platzierte Position für Entwürfe klingt nach einer guten Idee. Ich habe sie komplett übersehen … sie ist nützlich und aktuell versteckt.
Ich bin mir nicht sicher, ob viele Nutzer überhaupt links neben dem Benutzermenü schauen, um zu sehen, ob es anklickbar ist, da die drei Reiter auf der rechten Seite meine ganze Aufmerksamkeit auf sich ziehen.

Ich habe mich gefragt, da du vielleicht in diesem Bereich programmierst … könntest du der Liste individuelle CSS-Klassen hinzufügen? Aktuell haben alle die Klasse = “read”. Ich würde gerne einige ausblenden können.
Ich baue ein seltsames, individuelles privates Kundenforum, in dem sich die Nutzer nicht sehen können. Ein bisschen wie @joebuhlig es in seinem Theme versucht.
Viele Grüße