it-swarm.com.de

Gitter / Tisch mit vielen Knöpfen

In Anbetracht dessen, dass ich ein Raster mit einer Reihe von Schaltflächen für Aktionen habe, die der Benutzer ausführen kann. Es sieht aus wie das.

(Button grid

Ich habe eine Reihe ähnlicher Gitter im System. Ich frage mich, ob ich das tun soll.

  1. Lass es wie es ist
  2. Haben Sie eine Schaltfläche mit Dropdown-Liste der verschiedenen Optionen. Dies bedeutet, dass die Zeilenhöhe niedriger ist.
  3. Etwas anderes.

Dies ist ein Bildschirm, den die Benutzer nicht regelmäßig verwenden, möglicherweise nur einmal pro Tag im Durchschnitt. Geschwindigkeit (1 vs 2 Klicks) ist wahrscheinlich kein großes Problem.

23
Craig

Im Youtube Studio Video Editor gibt es eine ähnliche Situation, die Ihnen dabei helfen kann, Ideen, eine Mischung aus Symbolen, Dropdown-Optionsmenüs und Interaktivität zu erhalten.

  • Jede Zeile hat zwei Symbole: das Symbol select links und die Ansicht grünes Symbol mit Optionen
  • Ein Youtube-Symbol und das Drei-Punkte-Optionsmenü werden beim Schweben angezeigt die Reihe
  • Durch Klicken auf das Optionsmenü mit drei Punkten werden fünf Optionen angezeigt:
    • Bearbeiten
    • Link abrufen
    • Fördern
    • Herunterladen
    • Löschen

(enter image description here

30
Danielillo

Unter dem Gesichtspunkt der Barrierefreiheit empfehle ich dringend, nur ein interaktives Element pro Tabellenzelle zu haben. Es verbessert die Navigation in der Tabelle mit dem Screenreader erheblich. An meinem Arbeitsplatz hatten wir einen ähnlichen Tisch; Einige der Zellen würden vom Bildschirmleser aufgrund des unterschiedlichen Inhalts in der Zelle und in ihrem Tabellenkopf 10 bis 20 Sekunden lang vorgelesen.

Wie es ist: hässlich aber funktional. Ich denke, es würde besser mit der gleichen Reihe von Schaltflächen in jeder Zeile lesen, wobei die nutzlosen ausgegraut wären. Es ist nur einfacher, mit Tabellendaten umzugehen, wenn jede Zeile genau dieselbe Form hat. Ich würde sie auch kleiner stylen, aber wenn es Bootstrap ist, ist es ein bisschen mühsam, dies zu tun. (Warum, oh, warum haben sie btn-xs entfernt?)

Dropdown: Wenn der Auswahlvorgang die Aktion auslöst, tritt bei dieser Schnittstelle eine höhere Fehlerhäufigkeit auf, da das Bedienen eines Dropdowns physisch fehleranfälliger ist. Wenn eine Aktion ausgewählt und anschließend auf eine Schaltfläche geklickt wird, ist dies in Ordnung.

4
nigel222

Ohne weiteren Kontext ist es schwierig, Ihre Fragen zu beantworten. Wie verwenden Benutzer Ihre Tabelle? Wie oft interagieren sie damit? Ist den Benutzern klar, welche Aktionen in den verschiedenen Staaten möglich sind?

Hier sind einige Gedanken, ohne den Kontext zu kennen: Wie es ist, sieht es vielleicht nicht sehr hübsch aus, aber es hat einige Vorteile im Vergleich zu einem Dropdown. Es ist klar, dass nicht alle Aktionen in allen Staaten verfügbar sind. Alle möglichen Aktionen sind auf den ersten Blick sichtbar. Der Benutzer kann direkt auf die gewünschte Aktion klicken, ohne zuerst auf ein Dropdown zu klicken. Wenn Sie dies ändern, müssten Sie diese Vorteile berücksichtigen. Aber es gibt auch einige Nachteile. Die Benutzeroberfläche ist sehr überladen. Für den Benutzer gibt es viel zu verarbeiten.

Die Frage ist, was ist das Ziel dieser Tabelle. Sollte es dem Benutzer helfen, die Aufgabe sehr effizient auszuführen? Sollte es hilfreich sein, dem Benutzer einen schnellen Überblick über den Status zu geben, ist die Interaktion mit Elementen zweitrangig und nicht immer erforderlich.

Ich würde sagen, vielleicht können Sie eine Mischung aus Lösung 1 und 2 verwenden. Haben Sie die am häufigsten verwendete Aktion verfügbar und fügen Sie die nicht so häufig verwendeten Aktionen in ein Dropdown-Menü ein. Die Schwierigkeit könnte sein, dass die Hauptaktion je nach Status des Gegenstands nicht immer dieselbe ist.

Aber am Ende werden Ihre Benutzer am besten wissen. Ich würde dies also mit einem einfachen Prototyp testen und mit echten Benutzern testen. Sie müssen den Test nicht mit vielen Benutzern durchführen, um festzustellen, welche Lösung in Ihrem Kontext am besten funktioniert.

3
BrunoH

Sie können alle Optionen in ein Kontextmenü einfügen und diejenigen deaktivieren, die zu diesem Zeitpunkt aufgrund des Status des Elements nicht verwendet werden können. Auf diese Weise hat der Benutzer immer die gleiche Liste von Optionen (und Sie können möglicherweise erklären, warum eine Option deaktiviert ist).

Ist es auch nicht möglich, die Ansichtsoption nicht zu einer Schaltfläche, sondern nur zu einem Klick auf die Zeile selbst zu machen?

3
Annemiek

Wir können drei Arten von Aktionen für eine Bestellung unterscheiden. Teilen Sie diese und gruppieren Sie Aktionen innerhalb eines Typs.

Anzeigen

Zunächst würde ich den Button für die einzige Option geben, die die Bestellungen gemeinsam haben, nämlich sie anzuzeigen (ich gehe hier davon aus, dass Es gibt keine Einwände gegen das Anzeigen einer neuen Bestellung), eines eigenen, vorhersehbareren Standorts. Jetzt springt es überall hin, abhängig von den anderen verfügbaren Optionen.

Bearbeitung

Beim Bearbeiten einer Bestellung muss der Benutzer zuerst sehen, was sich dort befindet. Entfernen Sie hier die Schaltfläche Bearbeiten und machen Sie die Bearbeitungsoption über den Ansichtsbildschirm zugänglich.

Wird bearbeitet

Jetzt müssen wir nur noch senden, erneut senden, empfangen, stornieren und abbrechen. Sie können ein Dropdown-Menü verwenden, diese sind jedoch etwas kniffliger als normale Schaltflächen. Daher ist möglicherweise ein Raster mit fünf Schaltflächen am besten geeignet. Blenden Sie die nicht verfügbaren Optionen nicht aus, sondern deaktivieren Sie sie, damit sich jede Schaltfläche immer an derselben Stelle befindet.


Zuerst anzeigen, später Aktion

Oder machen Sie gemäß Annemieks ausgezeichneter Vorschlag die Anzeige verfügbar, indem Sie auf die Zeile klicken. Entfernen Sie alle Schaltflächen und verschieben Sie sie in den Ansichtsbildschirm , wenn ein zusätzlicher Klick pro Bestellung kein Problem darstellt . Das hängt ein bisschen von Ihren Benutzern ab. Es erstellt eine zusätzliche Prüfung, da ein Benutzer zuerst eine Bestellung anzeigen muss, bevor er darauf reagieren kann.

3
SQB

Ich habe eine Reihe ähnlicher Gitter im System

Der von Ihnen freigegebene Screenshot enthält in jeder Zeile unterschiedliche Aktionen. Alle diese Schaltflächen/Aktionen in jeder Zeile im Voraus verfügbar zu haben, ist keine gute Wahl in Bezug auf visuelle Unordnung, kognitive Belastung für den Benutzer und auch unter dem Gesichtspunkt der Barrierefreiheit wie Tobias erwähnt. Wenn in jeder Zeile eine Aktion vorhanden ist und der Benutzer diese Aktion häufig ausführt, können Sie diese Schaltfläche in der Zeile beibehalten und die restlichen sekundären Aktionen können in einem Kebab-Menü gruppiert werden (Symbol mit drei vertikalen Punkten).

2
Sooraj MV

Sie können für jede Zeile Hover-Aktionen ausführen. Sobald der Benutzer in einer Zeile schwebt, wird eine Dropdown-Option angezeigt, die eine Liste der Aktionen enthält.

Es erscheint verwirrend, für jedes Element in dieser Ansicht unterschiedliche Optionen zu haben. In der Regel erwartet der Benutzer in einem Raster oder einer Liste für jedes Element genau dieselbe Schnittstelle.

Sie können die Schaltfläche "Ansicht" beibehalten (möglicherweise in ein Symbol konvertieren, dies ist jedoch nicht wichtig), da diese Aktion für alle Elemente verfügbar ist, und die anderen Optionen in die UX-Elemente verschieben, die angezeigt werden, wenn der Benutzer das Element "anzeigt" .

Darüber hinaus ist das Anzeigen kein destruktiver Schritt, während die anderen Aktionen eine Arbeit ausführen, die möglicherweise nicht umkehrbar ist. Stellen Sie sich vor, der Benutzer versucht, ORD-123455 in einer Liste zwischen ORD-123545 und ORD-213455 abzubrechen. Durch Hinzufügen einer zusätzlichen Aktion zwischen dem Anzeigen eines Elements und dem Einwirken darauf können Sie eine geringe Reibung hinzufügen, aber dem Benutzer auch mehr Sicherheit geben, dass er das richtige Element ausgewählt hat.

0
Harrison Paine