it-swarm.com.de

Was ist eine gute Designwahl für zwei zusammenklappbare Paneele auf der linken Seite?

Unsere Unternehmens-UI-Standards erzwingen das folgende Gesamtdesign:

  • Die linke Seite des Fensters enthält ein Menü (was sonst Navigationsregisterkarten gewesen wären)
  • Auf der rechten Seite befindet sich der Arbeitsbereich der App
  • Das Menü kann über ein Hamburger-Symbol in der oberen linken Ecke des App-Arbeitsbereichs erweitert/reduziert werden.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Das Problem ist, dass in meiner App der Arbeitsbereich selbst in zwei vertikale Hälften unterteilt ist:

  1. Der schmale Ordnerbaum auf der linken Seite
  2. Der Bereich zum Bearbeiten von Daten für einzelne Knoten dieses Baums auf der rechten Seite.

Sobald Sie einen Knoten im Baum ausgewählt haben, an dem gearbeitet werden soll, wird der Baum für den Workflow überflüssig. Daher möchte ich ihn auch unbedingt reduzieren .

Die Frage ist, was ist der geeignete Design-/UI-Ansatz dafür?

Einige Dinge, über die ich nachgedacht habe:

  • Ansatz 1 : Haben Sie ein Hamburger-Symbol wie für die Navigationsregisterkarten.

    Der Nachteil dabei ist, dass wir jetzt ZWEI Hamburger-Symbole haben, nicht sicher, was wir damit machen sollen, wenn beide zusammenklappbaren Bereiche geschlossen sind? Wenn nur der Baum geschlossen ist?

mockup

bmml Quelle herunterladen

  • Ansatz 2 : Haben Sie eine vertikale Trennlinie, die gezogen werden kann

    Nachteile:

    • Erstens macht der Baum keinen Sinn, wenn Sie nur die linke Hälfte davon zeigen - sieht schrecklich aus und ist nicht sehr nützlich. Ein verschiebbares Trennzeichen ist also schlechter als eine binäre "offene/geschlossene" Benutzeroberfläche.

    • Zweitens ist das vertikale Trennzeichen ein sehr schmales Element, daher ist es eine schwierige Aufgabe, es mit der Maus zu greifen und zu ziehen.

  • Ansatz 3 : Haben Sie eine vertikale Trennlinie mit einem nach links oder rechts gerichteten Dreiecksymbol in der Mitte. Durch Klicken auf das Symbol wird der Baumbereich erweitert/reduziert.

    Nachteile:

    • Erstens muss das Symbol etwas breit sein (10+ Pixel), damit es ohne großen Aufwand angeklickt werden kann. Und dazu muss auch die Trennlinie breit sein und das sieht UGGGGLY aus! (Dies ist das aktuelle App-Design, und ich hatte viele negative Benutzer-Rückmeldungen, denen ich einigermaßen zustimme).

    • Zweitens haben wir jetzt zwei sehr unterschiedliche Elemente der Benutzeroberfläche, die denselben Job ausführen. Nicht elegant und noch schlimmer, kann sehr verwirrend sein.

4
DVK

Ich würde das so angehen, indem ich alles ein wenig überdenke. Wenn ich es zum Beispiel entwerfen würde, bevor ein Knoten ausgewählt wurde, würde der Knotenselektor den gesamten Arbeitsbereich ausfüllen. Wenn dann ein Knoten ausgewählt wurde, wird der Knotenselektor eng und tritt wie in der Spotify-Webanwendung in den Hintergrund.

In diesem Beispiel bin ich auf einer Künstlerseite.An artist page

Wenn ich dann auf ein Album des Künstlers klicke, wird die Künstlerseite nach links verschoben und reduziertAn album page with collapsed artist page. BEARBEITEN : Wenn Sie an dieser Stelle auf die ausgeblendete Künstlerseite klicken würden, würde die Albumseite wieder verschwinden und die Künstlerseite würde im Mittelpunkt stehen.

Wenn ich dann die Suche aufrufe, deckt sie die ausgeblendete Künstlerseite ab.Search activated

Wenn Sie dies in Ihre App übersetzen, ist die Baumansicht die Künstlerseite, die reduziert wird, wenn sie nicht mehr benötigt wird, und wieder angezeigt wird, wenn sie benötigt wird. Wenn das linke Hamburger-Menü aktiviert ist, wird die Baumansicht vollständig abgedeckt. Es ist im Wesentlichen ein Stapel.

2
Marks Polakovs

OK, dies ist meine erste Antwort bei UX, also nimm sie mit, aber mein Ansatz wäre folgender:

PROBLEM 1) Sie benötigen dieses Seitenleistenmenü. 2) Sie benötigen einen Bereich "Inhalt" oder "Leinwand", der in 2 unterteilt wird vertikale Hälften. 3) Sie möchten etwas Platz in dieser "Leinwand" haben

VORGESCHLAGENE LÖSUNG Vor diesem Hintergrund ist es meiner Meinung nach am besten, Elemente "on demand" auszublenden/anzuzeigen. Mit einer einfachen jQuery können Sie so etwas tun, wobei Ihre Schaltfläche "Umschalten" (wie gesagt erforderlich) das erste Menü anzeigt. Wenn Sie dann auf einen beliebigen Punkt in diesem Menü klicken, wird das zweite Menü (Geschwister) geöffnet und das übergeordnete Menü ausgeblendet Speisekarte.

Jetzt können Sie dieses zweite Menü mit einem höheren Z-Index öffnen und einfach eine Schaltfläche zum Schließen verwenden.

Eine elegantere Lösung wäre jedoch, das Elternteil zu verstecken, das Geschwister zu erweitern (mit einem schönen Übergang) und dann durch Klicken außerhalb des Geschwisters zurück zu wechseln und das Elternteil wieder zu bringen.

Siehe Bild, um zu verstehen, was ich meine:

enter image description here

Hinweis : Das rote Feld (Geschwister oder zweites Menü) würde die gesamte Höhe einnehmen, oder zumindest das meiste davon. Das Bild zeigt eine geringere Höhe, nur um die Seitenleiste darunter anzuzeigen

1
Devin

Eine Kombination der folgenden:

Ziehen Sie in Betracht, den Baum auf die rechte Seite des Bildschirms zu verschieben.

wenn der Benutzer den Baum häufig ein- und ausblendet, bewegt sich der Inhalt des Arbeitsbereichs immer. Wenn sich der Baum rechts befindet, deckt er nur die rechte Hälfte des Arbeitsbereichs ab, die "wichtigsten" Elemente des Inhaltsbereichs bleiben jedoch erhalten.

Machen Sie "Select Node" zu einem Menüpunkt

Einziger Nachteil: Um zum Baum zu gelangen, wären zwei statt eines Klopfens erforderlich.

Blendet den Baum automatisch aus, wenn ein Knoten ausgewählt wurde.

Ich gehe davon aus, dass Sie, während der Benutzer durch den Baum navigiert, den "Arbeitsbereich" als Vorschau für den Knoteninhalt verwenden möchten, damit Sie den Baum nicht ausblenden können, wenn ein Knoten ausgewählt ist.

Sie können den Baum jedoch automatisch ausblenden, wenn der Fokus auf den Arbeitsbereich verschoben wird (oder Eingaben im Arbeitsbereich erfolgen).

Wenn ich mich automatisch verstecke, würde ich dringend empfehlen, den Baum rechts zu haben.

Drücken Sie es in einen Hamburger

z.B. Klicken oder Tippen erweitert/reduziert den Baum, klicken oder halten Sie die rechte Maustaste, um das Navigationsmenü aufzurufen.

Sollte für erfahrene Benutzer gut genug funktionieren, aber Benutzer finden das Navigationsmenü möglicherweise nicht.

Lassen Sie den Hamburger sowohl den Baum als auch das Menü anzeigen

Dies opfert Arbeitsbereich, während der Benutzer einen Knoten auswählt.

Lassen Sie den Hamburger sowohl den Baum als auch das Menü anzeigen und das Menü ausblenden, wenn der Benutzer mit dem Baum interagiert.

Tippen Sie auf den Hamburger, um den Baum und das Menü anzuzeigen. Wenn der Benutzer einen anderen Baumknoten auswählt, blenden Sie das Menü aus.

wenn der Benutzer auf den Hambuger tippt, während der Baum sichtbar ist, das Menü jedoch ausgeblendet ist, zeigen Sie den Baum und das Menü erneut an.

1
peterchen