it-swarm.com.de

Bester Ansatz zur Darstellung von zusammenklappbaren / erweiterbaren Bedienfeldern mit Optionsfeldüberschriften

Dem Benutzer werden mehrere Optionen (als Optionsfelder) angezeigt, und er muss eine Option auswählen, bevor er mit dem nächsten Schritt fortfährt. Die einzelnen Abschnitte können erweitert/reduziert werden, damit der Benutzer den Inhalt in jedem Bereich sehen kann, bevor er eine Auswahl trifft.

Das Problem, das ich habe, ist, ob ich das Optionsfeld außen (linker Rand) platzieren und den Pfeil innen erweitern/reduzieren soll oder umgekehrt. Ich neige zu Option A, weil sie mit einem Optionsfeld interagieren und sich das Symbol normalerweise ganz links befindet. Das Pfeilsymbol kann sich im Inneren befinden, da das Optionsfeld nicht Teil des erweiterbaren/reduzierbaren Inhalts ist. Ich habe jedoch eine andere Idee von meinem Vorgesetzten erhalten (Option B) und frage mich, welcher Ansatz intuitiver ist.

Ich habe eine Suche durchgeführt und konnte keine Studien/Ergebnisse liefern. Ihr Feedback wird sehr geschätzt!

enter image description here

1
Vinson

Zunächst würde ich vorschlagen, die Reihenfolge Ihrer Benutzer zu betrachten. Muss er alle drei (oder mehr) Panels lesen, um eine Entscheidung zu treffen? Wenn ja, wäre es nicht praktischer, wenn es ständig erweitert würde? Ich kann mir vorstellen, dass es schmerzhaft sein kann, jedes Element zu erweitern und es sorgfältig durchzulesen.

Wenn nicht, würde ich sagen, schauen Sie sich den Fluss des Benutzers noch einmal an. Sein Ziel ist es, eine Liste auszuwählen. Dies geschieht (in Ihrem Fall) über ein Optionsfeld (das Sie meiner Meinung nach wirklich dafür verwenden möchten). Also würde ich dies zuerst präsentieren lassen (wie in Version A). Ich denke nicht, dass die Präsentation des zusammenbrechenden Dreiecks direkt danach die Lösung ist, nach der Sie suchen, da dies darauf hindeuten würde, dass das Optionsfeld nicht mit der Bezeichnung einer Auswahl verknüpft ist. Ich schlage vor, den Pfeil/das Dreieck auf die rechte Seite des Etiketts zu verschieben.

Auf diese Weise haben Sie ein Optionsfeld, das eindeutig dem Etikett entspricht, und ein zusammenklappbares Bedienfeld, das aus dem Etikett herausragt.

Was ich mir auch vorstellen kann, ist, das Optionsfeld ganz nach rechts zu bewegen und das Dreieck/den Pfeil auf der linken Seite der Liste zu haben.

1
JonSpr

Ich denke, Sie sollten Option A verwenden, da in diesem Fall das Optionsfeld eine höhere Hierarchie als das Dreieck hat. Lassen Sie zwischen dem Optionsfeld und dem Dreieck etwas Platz, damit das Dreieck und der Titel als ganzes Element gruppiert werden.

1
ErnestX

Einige Gedanken und Fragen an Sie.

  1. Muss der Benutzer dies nacheinander tun? Wenn ja, klingt es wie ein Zauberer. Sie können die Optionsfelder vollständig entfernen und die Abschnitte unter dem ersten deaktivieren, um sie schrittweise zu aktivieren.

  2. Welche Rolle spielt das Optionsfeld wirklich? In der Regel sind Optionsfelder paarweise angeordnet und repräsentieren entweder/oder den Status. Könnte der Benutzer nicht einfach auf den Kopfbereich klicken und die zugehörigen Daten erweitern, ohne das Optionsfeld zu benötigen, wodurch die Benutzeroberfläche vereinfacht wird? Ich bin nicht sicher, ob Sie ein Optionsfeld benötigen, um eine Auswahl zu treffen. Der Fokus und/oder das Klicken auf die Auswahl sollte ausreichen, um sie anzuzeigen.

  3. Wenn im Kopfbereich ein Status angezeigt werden muss und diese Rolle vom Optionsfeld gespielt wurde, können Sie den abgeschlossenen Abschnitten ein Symbol wie ein Häkchen hinzufügen. Aber ich habe diese Anforderung nicht gelesen, also zögern Sie nicht, sie zu ignorieren.

0
Leslie M

Wenn ich es richtig verstanden habe, haben Sie eine Liste mit Optionen bereitgestellt und möchten, dass Ihre Benutzer eine der Optionen auswählen (jeweils nur eine Auswahl), bevor Sie mit dem nächsten Abschnitt fortfahren. Auch wenn eine der Optionen ausgewählt ist, werden einige Inhalte (als Baum) darunter angezeigt.

Für die individuelle Auswahl haben Sie die Optionsfelder verwendet (um die Auswahl eindeutig zu halten), die auch den Knoten erweitern, um seinen Inhalt anzuzeigen.

Irgendwie kann das Mischen der Baumknotennotationen und der Optionsfelder dazu führen, dass der Benutzer innehält und eine Weile über das Ergebnis der Aktion nachdenkt (Auswahl der Option/Erweiterung des Knotens/beides). Ich würde vorschlagen, dass Sie eine einfache Baumstruktur verwenden, in der der ausgewählte Knoten hervorgehoben ist. Es wird jeweils nur ein Knoten erweitert (die anderen Knoten werden reduziert) und ausgewählt, sodass Sie das Optionsfeld entfernen können.

This is how I would prefer to do

Dies hält den Bildschirm sauber und die Benutzererfahrung besser, da für den Knoten nur eine einzige Option verfügbar ist. Hier klicken Sie einfach auf Knoten> (System hebt Knoten als ausgewählt hervor) Details anzeigen> Fahren Sie mit dem nächsten Abschnitt fort.

0
roni