"Modernes" Design eines Dialoges der eine Mehrfachauswahl zur Verfügung stellt

[v2afrank]

Wir sind gerade bei uns über eine Anwendung am Diskutieren die gerade aktuell ist.
Dabei kam von einem Kollegen die spöttische Anmerkung der Dialog sieht aus wie in einer Windows 2000 Anwendung und eigentlich muss ich ihm Recht geben.
Gerade mit diesem Dialog bin ich sehr unzufrieden. Mir fällt allerdings jetzt nicht ein wie man es aufpeppen kann. Der Screenshot kommt zwar von einer C# Anwendung das spielt aber keine Rolle.
Der Kollege hat mich zum Beispiel darauf hingewiesen dass in "modernen" Dialogen Ok und Abbruch absolut nicht mehr üblich sind wie man ja mittlerweile an vielen Dialogen in Windows 10 sehen kann. Ich finde das zwar fürchterlich aber meine Meinung ist dabei egal.
Wie würdet Ihr denn einen solchen Dialog designen ?

[TigerLilly]

https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx
https://developer.microsoft.com/en-u...ws/apps/design
https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx
https://developer.apple.com/macos/hu...erview/themes/
https://developer.apple.com/library/...roduction.html

Man mag diese Design Guides für gut oder schlecht halten, aber die Lernkurve wird für User flacher, wenn sie vertrautes Design vorfinden.

HTH

[v2afrank]

Gebe ich Dir absolut Recht. Danke.
Ich werde mir das auch noch einmal ansehen, aber trotzdem:
Hat denn jemand hier schon mal so einen Dialog in Form dieses Design Guides gemacht ?

[TiGü]

Es wäre schon sehr viel gewonnen, wenn:

- durchgängig eine Schriftart, -Farbe und -Größe genommen wird (Segoe UI - vgl. Tabelle im oberen Drittel von https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx),
- die Buttons alle gleich hoch und breit sind und
- der Abstand der Button zum Rand des Elternelements gleich wäre (siehe Abstand von Alle zum Grid versus Abstand von OK zum unteren Rand).

In der Tabelle selbst könnte man die die Spalten nur so groß machen wie sie gebraucht werden.
Die Nummern könnten zentriert in der Zelle stehen anstatt linksbündig.
Was soll der verschenkte graue Rand rechts?
In der ersten Zeile ist ein Leerzeichen zuviel (zwischen "Gerät" und "gesäubert").
Die ersten drei Einträge sind mit Fragezeichen versehen, das vierte nicht...warum?

[Rollo62]

Ich mache gerne Dialoge die sehr simpel und kurz sind
In der Art: wollen sie dies ?

Und dann ein Infobutton für weitere Info.

Weil ich die Erfahrung habe das keiner mehr lange Sätze verstehen kann 😉

Rollo

[Hobbycoder]

Dialog mit eingebautem DBGrid finde ich eh nicht so schick.
Wenn die Anzahl der sichtbaren Zeilen dann erstmal nur 4 ist, die Table aber 200 beinhaltet, wäre das schon mühselig. Würde der Dialog dann maximiert sähe die Table auch eher unschön aus.

Wenn die erste Spalte "Nummer" nicht von großer Bedeutung ist, würde ich an der Stelle eine CheckListBox bevorzugen, oder sogar den Dialog mit Ckeckboxen dynamisch generieren,
und auch die Größe des Dialogs dynamisch an die Anzahl der Auswahlkriterien und die Bildschirmgröße anpassen.

[v2afrank]

Ok,
das kann ich ja auf jeden Fall machen.
Eben kurz zu Deinen Fragen. Das Grid ist ein DataGridView. Das ist per Default eben grau hat aber alClient gesetzt.
Die Fragen kann der User selber editieren und hier hat irgendjemand das Fragezeichen vergessen einzugeben.
Zur Erklärung. Der User kann sich selber Fragen überlegen die bei einer Sichtprüfung abgefragt werden. In diesem Dialog wählt er denn aus welche Sichtprüfung für den gerade ausgewählten Prüfling durchgeführt werden soll.
Die Buttons hatte ich absichtlich kleiner gemacht. Ich wollte das die sich etwas von Ok und Abbruch absetzen. Ich werde mal so machen wie Du es angemerkt hast

[v2afrank]

Zitat:

Zitat von Hobbycoder (Beitrag 1395010)

Dialog mit eingebautem DBGrid finde ich eh nicht so schick.
Wenn die Anzahl der sichtbaren Zeilen dann erstmal nur 4 ist, die Table aber 200 beinhaltet, wäre das schon mühselig. Würde der Dialog dann maximiert sähe die Table auch eher unschön aus.

Ja das ist hier in der Tat so.
Ich habe das Fenster mit Absicht so klein gezogen. Die Fragen darunter waren noch schlimmer und die wollte ich hier nicht zeigen:oops:

[KodeZwerg]

Ich würde ein "Visible=False" Rohbau bestehend aus einem Panel auf dem eine Checkbox samt EditFeld und "X" Button zum entfernen des Panels erstellen.
Das in eine Scrollbox so oft generieren wie Einträge vorhanden sind (per ini oder Registry oder anders verwalten lassen)
Als letztes immer ein Leeres Panel mit einem "+" Knopf um ein neuen Rohbau hinzufügen.
Wie du das speichern einbindest Frag am besten die die es bereits benutzen,
vielleicht reicht ja eine auto-save funktion im OnClose Event oder auto-save nach edit?
Nachtrag: Oder im Rohbau auch einen [S] button zum selektiven speichern?
Vielleicht eine mini-Datenbank oder ini Datei mit Beispielen für neuen EditText anlegen und bei neuerstellung inhalt mit anbieten?
ps: es müssen ja keine buttons im herkömmlichen sinne sein, vieles kann auf "OnClick" reagieren, oder per bitbutton, lass deiner kreativität freien lauf, gleiches gilt für "CheckBox", kann ja auch eine Glühbirne sein die an und aus geht oder was den benutzern gefallen könnte.

nochmals ein Nachtrag:
den Rohbau erstelle ich in der IDE und gestalte ihn solange um bis er mir gefällt,
im nachhinein hol ich mir alles was ich brauche dazu aus der dfm und dem pas headern
um sie dann nurnoch per Panel(Create) usw im code bei laufzeit zu erstellen und verwalten, der Rohbau wird bei finalisierung entfernt oder bleibt Visible=False als Geist für spätere Umgestaltung bestehen.

[HeZa]

Zitat:

Zitat von v2afrank (Beitrag 1395014)

Zitat:

Zitat von Hobbycoder (Beitrag 1395010)

Dialog mit eingebautem DBGrid finde ich eh nicht so schick.
Wenn die Anzahl der sichtbaren Zeilen dann erstmal nur 4 ist, die Table aber 200 beinhaltet, wäre das schon mühselig. Würde der Dialog dann maximiert sähe die Table auch eher unschön aus.

Ja das ist hier in der Tat so.
Ich habe das Fenster mit Absicht so klein gezogen. Die Fragen darunter waren noch schlimmer und die wollte ich hier nicht zeigen:oops:

Wenn die Datenmenge groß ist, bin ich mir nicht sicher, ob ein Dialog die richtige Wahl ist. Dialoge die über 20 Punkte enthalten, über die ich entscheiden muss, finde ich ohne weitere Unterstützung immer ätzend. Und je häufiger ich diese Entscheidungen treffen muss, um so ätzender wird es.

In solchen Situationen würde ich mir folgende Unterstützung wünschen:
* Suchen
* Filtern nach Werten
* Filtern nach bereits selektiert/noch unselektiert
* Auswahl einer bestimmten Vorselektion (z.B. nach bestimmten fachlichen Aufgaben, sehr hilfreich für Neueinsteiger)
* Speicher der aktuellen Auswahl als Vorselektion

Dann kann so ein Dialog auch richtig Spaß machen.

Ciao Heinz

[Redeemer]

Ich hätte die Liste mit TListView gemacht und CheckBoxes aktiviert. Und dann ein bisschen Platz rechts und links daneben. Ich habe in meinen Programmen konsequent einen Abstand von 8 Pixeln (Delphi-Standard ist 7 Pixel) zwischen den Komponenten. Buttons sind alle 24 Pixel hoch und soweit möglich 72 Pixel breit.

[mensch72]

Bei uns schimpft sich das "GUI-MultiSelectPattern"

Anbei ein Screenshot der Standardvariante, welche bei uns "immer geht".
- die Position der Buttons für OK/Abbruch halten wir optional variabel... Ich bevorzuge platzsparend diesen Standard oder mit oben im Fenstertitel. (Windows "rechts", MAC&Linux "links")
- StyleGuide XY hin oder her, bisher hat "jeder" Anwender notfalls per Hints ohne weitere Rückfrage kapiert wie diese Dialoge "einheitlich" im gesamten Programm bei uns funktionieren:)
- anstatt einfacher Listen setzen wir wenn es um hierarchische Ordnung/Auswahl geht auch gerne TreeViews zur Visualisierung ein... am Grundkonzept ändert das aber nix
- selbst die Web&Touch-Fraktion nutzt dieses simple Grundkonzept, legt aber mehr Wert auf gute sinnvoll vordefinierte&hinterlegte Auswahlkriterien

[v2afrank]

So, hier mal die neue Version des Dialoges.
Es ist jetzt eine ChecklistBox geworden. Die Anzahl der Einträge wird meiner Meinung nach deutlich unter 20 bleiben. Wenn dann sind es doch sehr spezielle Kunde die auch wissen was Sie da ankreuzen müssen.
Zur Erklärung, es handelt sich um ein Prüfgerät für elektrische Prüfungen. Diese Prüfungen beginnen immer mit einer Sichtkontrolle. Normalerweise gibt es von der VDE zwei oder drei Fragen die beantwortet werden müssen. In der neuen Version kann der Kunde aber noch zusätzliche Prüfungen eingeben die man hier eben auswählen kann. Wenn die Prüfung startet muss der Anwender eben nach die hier gestellten Fragen beantworten

[TigerLilly]

Anregungen:
https://msdn.microsoft.com/en-us/lib.../dn439344.aspx
https://www.google.at/search?q=desig...w=1453&bih=984
https://uimovement.com/tag/multi-select/

Das Problem bei dieser Art der Checkboxen ist, dass man leicht in die falsche Zeile klickt. Hier würde ich jedenfalls mehr Platz schaffen + deutlicheres visuelles Feedback.
Das Wichtige (=die Zeilen) wird weniger wichtig dargestellt, als der Erklärungstext oben.
Das Alle/Keiner würde ich mit einer Checkbox oberhalb der Checkboxen lösen. dann fällt der leere Bereich rechts auch weg.

Ob ein Filter zulässig ist oder nicht, hängt von der möglichen Anzahl + dem Workflow ab. Selbiges gilt für Drag/Drop. Wenn der Dialog zB die Aufgabe einer Checkliste hat, darf Reihenfolge + Anzahl nicht geändert werden. Wenn es darum geht, aus Optionen beliebig welche auszusuchen, wäre das zulässig.

[v2afrank]

Wow, die sehen gut aus. Ich erkundige mich mal wie viel Energie ich da noch reinstecken darf / soll. Gerade das UI Movement finde ich beeindrucken

[Hobbycoder]

Also ich finde deine neue Version des Dialogs schon mal um einiges gelungener. Ich persönlich finde das Standard-Theme von Windows an schönsten und bin keine Freund von Programmen/Fenstern/Dialoge, welche ein gänzlich eigenes Designschema daher bringen. Aber das ist Geschmacksache.
Das es sich bei deinem Programm eher um ein Programm zur Wartung im gewerblichen Bereich handelt, würde ich auch nicht mit Farben experimentieren, sondern mich an den Standard halten.

Möglicherweise noch einen Filter, aber auch nur, wenn die Menge der Items das 1 1/2-fache der sichtbaren Items in der CheckListbox überschreiten kann. Bis dahin finde ich einen Scrollbalken sinnvoller.