it-swarm.com.de

Moderner Ansatz für Optionsfelder

Ich arbeite daran, die Benutzeroberfläche/UX einer 20 Jahre alten Anwendung zu aktualisieren, und ich scheine an diesem speziellen Anwendungsfall festzuhalten.

Beim Klicken auf die Schaltfläche Neu fordert das System den Benutzer auf, eine von zwei Optionen auszuwählen

  1. Neuen Arbeitsauftrag erstellen
  2. Erstellen Sie eine neue Aufgabe/Unteraufgabe für einen bereits vorhandenen Arbeitsauftrag

Beachten Sie, dass das System weitere Informationen anfordert. Dies ist nicht nur das und basiert auf der Architektur der Anwendung. Es muss diese (und einige andere) Informationen kennen, bevor Sie fortfahren können.

Meine Frage ist, was wäre eine moderne Art, dem Benutzer die beiden Auswahlmöglichkeiten zu zeigen? Könnte es eine der Optionen sein, die im folgenden Screenshot erwähnt werden?

Der alte Anwendungsbildschirm

(enter image description here

Meine vorgeschlagenen Optionen:

(enter image description here

22

Kurze Antwort: Option 1

Ich sehe keinen Grund, dies komplexer zu gestalten als zwei normale Optionsfelder. Wir haben diese UI-Elemente aus einem bestimmten Grund so lange.

Die anderen von Ihnen vorgestellten Optionen sind für andere Fälle gedacht/besser geeignet.


Grundlegende Faustregel lautet:

Verwenden Sie die Optionsfelder für bis zu eine Handvoll (max. 5-7) sich gegenseitig ausschließender Auswahlmöglichkeiten und wenn alle Auswahlmöglichkeiten sichtbar sein sollen.
Verwenden Sie Dropdowns für eine Liste mit mehr als 5-7 Optionen, bei denen die Darstellung aller Optionen eine visuelle Überlastung darstellt.

Option 4 mit einem Schalter passt überhaupt nicht, da dies für Ein/Aus-Metaphern verwendet wird, nicht für die Wahl zwischen zwei gleichen Optionen.

Ich denke, Option 3 wäre auch möglich, aber es bringt keinen wirklichen Mehrwert gegenüber normalen Optionsfeldern, es könnte sogar einige Benutzer verwirren.


In dieser Antwort werden die Unterschiede erläutert:
https://ux.stackexchange.com/a/88135/67657

Oder dieser Artikel der NN Group:
Kontrollkästchen vs. Optionsfelder

Oder dieses:
7 Regeln für die Verwendung von Optionsfeldern im Vergleich zu Dropdown-Menüs

79
Big_Chair

Ich würde für die beiden Aufgaben völlig neue Bildschirme und Schaltflächen erstellen. Beschriften Sie sie mit "Arbeitsauftrag bearbeiten" und "Arbeitsauftrag erstellen". Bearbeiten dient zum Bearbeiten eines vorhandenen Arbeitsauftrags oder zum Hinzufügen von Unteraufgaben. Erstellen dient zum Erstellen eines neuen Arbeitsauftrags. Die Schaltfläche Bearbeiten befindet sich neben dem Arbeitsauftrag in einer Liste offener Arbeitsaufträge. Die Schaltfläche Erstellen befindet sich oben auf der Seite.

(work order UI

https://www.bootply.com/Ur1q177i95

Dies gilt für Ihre spezifische Situation. Für normale Optionsfelder, die Optionsfelder ausführen (Auswahl aus einer kurzen Liste von Optionen), würde ich sie nicht ändern.

15
Chloe

Das hängt vom Kontext ab.

  • Optionsfelder zeigen dem Benutzer alle möglichen Optionen an und heben deutlich hervor, was ausgewählt wurde
  • Ein Dropdown ist nützlich, wenn Sie nicht zu viel Speicherplatz haben/verwenden möchten
  • option 3 (Registerkarten?) Ist ein sehr interessanter Ansatz, wenn der Inhalt dynamisch ist, sodass der Benutzer sofort sieht, was sich bei jeder Auswahl ändert. Obwohl es, wie in den Kommentaren erwähnt, für Benutzer verwirrend aussehen kann. Registerkarten trennen Inhaltskategorien. Was passiert mit dem Inhalt der nicht ausgewählten Registerkarte?
  • Schaltflächen vom Typ Schalter sind für die Auswahl von Ein/Aus besser bekannt und die einzige Option, die sich nicht gut skalieren lässt, wenn Sie Ihrem Formular in Zukunft weitere Optionen hinzufügen möchten.
6
Luciano

Eine Sache, die ich noch nicht gesehen habe, ist, dass für Optionsfelder immer eine Standardoption ausgewählt sein sollte, was darauf hindeutet, dass der Workflow hier hauptsächlich zum Hinzufügen eines neuen Arbeitsauftrags und sekundär zum Hinzufügen einer Aufgabe dient - das heißt, wenn der Benutzer dies nicht tut. Wenn Sie dieses Steuerelement nicht berühren und den Rest des Formulars ausfüllen, erhalten Sie eine WO, keine Aufgabe.

Wenn diese Annahme richtig ist, können Sie sie einfach bitten, bei Bedarf eine übergeordnete WO mit einer Auswahl auszuwählen. Dies kann schwierig sein, je nachdem, ob Sie zu diesem Zeitpunkt eine Liste der Kandidatenaufgaben nachschlagen können und wie viele es möglicherweise gibt.

(optional select

Wenn Sie diese Informationen nicht erhalten können oder wenn es nicht praktisch ist, hier aus den Kandidaten auszuwählen, können Sie ein einfaches Kontrollkästchen "Als Unteraufgabe anhängen?" Aktivieren.

3
Beejamin

Sie können Schaltflächen verwenden.

Das Konzept besteht somit aus Drucktasten, die sich gegenseitig ausschließen: Wenn eine Taste gedrückt wird, geht die andere nach oben.

Wenn Sie ein altes "Druckknopf" -Design verwenden, stellen Sie sicher, dass klar ist, welcher Knopf gedrückt und welcher oben ist. Das Bild unten ist in dieser Hinsicht nicht so gut, sondern dient nur zur Veranschaulichung des Konzepts.

(toggle buttons example

Sie können auch ein zeitgemäßeres Design verwenden, bei dem die ausgewählte Auswahl mit einer anderen Farbe "hervorgehoben" wird.

Wenn Ihr Hauptziel darin besteht, die alte Benutzeroberfläche mit Touch-Geräten wie Smartphones kompatibel zu machen, besteht eine einfache Alternative darin, den sensiblen Bereich Ihrer Optionsfelder um die Beschriftungen zu erweitern. Es ist jedoch nicht offensichtlich, dass die Beschriftungen anklickbar sind, es sei denn, Sie zeichnen einen Rahmen, der das Optionsfeld und seine Beschriftung umgibt.

Für Desktop-Schnittstellen sind Optionsfelder immer noch eine gute Wahl, wenn die Anzahl der Optionen begrenzt ist.

3
OuzoPower

Sie können die ursprüngliche Schaltfläche "Neu" durch zwei Schaltflächen ersetzen, eine für "Neuer Arbeitsauftrag" und eine für "Neue Aufgabe".

Betrachten Sie den folgenden Screenshot aus einer Microsoft-Anwendung. Der Menüpunkt Datei -> Neu ist eigentlich ein Menü, das die verschiedenen Arten von neuen "Dingen" auflistet, die der Benutzer möglicherweise erstellen möchte.

(Visual Studio Example

In Ihrem Fall müssen Sie die Schaltflächen nicht in einem separaten Menü platzieren. Ersetzen Sie einfach die ursprüngliche Schaltfläche "Neu" durch die beiden Optionen.

1
Harrison Paine