UX: Layout Designer / GUI

manuelmeister · February 12, 2022, 5:54pm

Hallo zusammen

Für mich als Anfänger ist der Layout Designer nicht intuitiv verständlich. Wenn er zum ersten Mal geöffnet wird, sieht es aus, als ob das ganze GUI Layout soeben verloren gegangen ist. Standardmässig ist ja das Default Layout eingestellt, wird aber im Layout Designer nicht so dargestellt.

Am liebsten hätte ich, dass das Default Layout auch ein gespeichertes Layout wäre. Zusammengesetzt aus dynamischen Komponenten. Dann würde es einen Schalter geben, der vom dynamischen Layout zum absoluten Layout wechseln könnte.

So würde es neu ein Spaltenlayout (ColumnLayout) geben, dass Spalten mit beliebiger absoluten oder/und prozentuellen Breiten definieren kann. Die Höhen der Inhalte könnten auch so definiert werden. Das ColumnLayout hätte immer die volle Breite des Container. Elemente in einer Column wären immer die volle Breite und untereinander angeordnet. Standardmässig wäre es dann etwa so:

Grundsätzlich sind die GUI Optionen überall in verschiedenen Einstellungen und “Applikationen” verteilt, dass verwirrt mich jedes Mal erneut. Wenn man das GUI nicht während der Laufzeit verändern kann (was aus meiner Noob Sicht nicht so schlimm wäre) dann wäre es cool, dass der Layout Designer der Ort ist, an dem die GUI (Bedienelemente) konfiguriert werden. Das heisst, zB. dass Browser Anzeige Optionen im Layout Designer konfiguriert werden müssen.

Komischerweise sind die Elemente im Layout Designer interaktiv. Da bin ich nicht ganz sicher ob das nicht auch ein Modus geben könnte der ein/ausgeschaltet werden könnte.

Bei diversen Optionen/Einstellungen ist ausserdem nicht klar, was sie bewirken, da mAirList so mächtig ist. Da wäre entweder bessere Hilfetexte / Bilder oder dann gerade Live Änderungen hilfreich.

Grundsätzlich wäre es cool, wenn mehrere Fenster designed werden könnten und gewisse Standardelemente (Browser, Toolbar, …) mehr als einmal verwendet werden könnten.

Das wäre sicher viel Arbeit, würde aber die Bedienungsfreundlichkeit und Einstiegshürden senken.

Was denkt ihr?

ssnoopy · February 12, 2022, 7:21pm

Hallöchen,
Im grunde hast du schon recht.
Aber, und das dürfen wir nie vergessen, es handelt sich um eine Software zur Radioautomation.
Ich möchte nicht wissen, wie oft Torben schon innerlich geflucht hat, dass er überhaupt einmal damit angefangen hat, dass man das Design ändern kann.
Mir fällt auf Anhieb keine Software ein, die mir das so bieten kann.
Vergessen wir dabei eins nicht:
Mairlist eine 1-Mann Show (Sorry @UliNobbe) zumindest was das Programmieren angeht (es sei denn ich bin schlecht informiert).
Nicht auszudenken wo das Programm stehen würde, wenn die Zeit zum programmieren nicht in den Designer investiert worden wäre, sondern ins Programm selbst.
Gefühlt habe ich den Eindruck, daß mit der aktuellen Beta Version, mehr Bugs zum Designer und zum Layout gepostet werden, als zum Programm selbst.

Vielleicht findet sich eines Tages ein findiger Entwickler, der Bock und Zeit hat, einen Designer zu schreiben, der keine Wünsche übrig lässt.

In diesem Sinne, schönes (Design) Wochenende noch

manuelmeister · February 12, 2022, 8:36pm

Hallo ssnoopy
Danke für deine Antwort. Mir geht es nicht darum, Torben zu bashen, sondern konstruktiv Ideen zu überlegen wie man ein geniales Programm noch genialer und zugänglicher machen kann.

Ich möchte nicht wissen, wie oft Torben schon innerlich geflucht hat, dass er überhaupt einmal damit angefangen hat, dass man das Design ändern kann.
Mir fällt auf Anhieb keine Software ein, die mir das so bieten kann.

Etliche Pro-Software: Microsoft Office, Adobe Programme wie Photoshop, Audition oder Premiere, Blender

Gefühlt habe ich den Eindruck, daß mit der aktuellen Beta Version, mehr Bugs zum Designer und zum Layout gepostet werden, als zum Programm selbst.

Das hat wohl damit zu tun, dass diverse Verbesserungen am GUI gemacht worden sind und man für die Einstellungen das ganze Forum & Wikis durchforsten muss, was wohl nicht allen gelingt.

Vielleicht findet sich eines Tages ein findiger Entwickler, der Bock und Zeit hat, einen Designer zu schreiben, der keine Wünsche übrig lässt.

Bock hätte ich schon, aber ich habe weder Zugriff auf den Code, noch kenne ich die Delphi Umgebung. Ich bin Webentwickler. Ich hatte nur das Gefühl, dass mAirList eine coole Community hat und Torben wie auch Uli sehr engagiert sind und gerne Feedback einholen.

Darum verstehe ich nicht, wieso du mir auf einen Feature Request, eine Begründung lieferst warum das Programm im Moment nicht so ist, wie ich es mir wünschen würde. Sind meine Ideen nicht gut? Es sind ja keine Anforderungen.

Wenn kein Bedarf besteht, Feedback für die Benutzeroberfläche zu geben, dann kann ich meinen Beitrag auch wieder löschen. Ich habe einfach alles aufgeschrieben, was mir beim ersten Benutzen des Layout Designers in den Sinn gekommen ist und zum Teil auch noch Lösungsansätze dazu geliefert.

Design ist nicht immer allen wichtig, mir aber schon.

Lg und schönes Wochenende
Manuel

ssnoopy · February 12, 2022, 8:52pm

Das habe ich auch so nicht empfunden.
Ganz im Gegenteil.

Nunja, die haben ein paar Elemente, die ich dann wahlweise irgendwo andocken kann.
Mir ist jetzt auf Anhieb nicht bekannt das ich dort von den Elementen die Schriftgröße, Farbe etc einzeln verändern kann.

Ist dafür überhaupt nicht notwendig.
Wichtig ist nur, daß eben eine skin.ini heraus kommt.

Ich hatte mich hier Angesprochen gefühlt…

Um darüber zu diskutieren

Hab ich weder gedacht, noch eine solche Aussage ansatzweise geschrieben.

Viele Grüße

calypso60 · February 12, 2022, 9:30pm

Diesen Punkt möchte ich auf jeden Fall unterstützen. Wollte ich neulich auch schon mal zur Diskussion stellen:
Standard-Layout sollte auch als Vorlage im “jungfräulichen” Layout-Designer erscheinen.

UliNobbe · February 12, 2022, 9:32pm

Ja, da hat @ssnoopy recht: ich bin kein Programmierer; so gesehen ist mAirList immer noch eine One-Man-Show.
Aber ich bin (nicht nur) dazu da, dass Torben endlich mal wieder zum programmieren kommt.

Das mit dem Layout-Designer ist so eine Sache für sich.
Im Ergebnis kommt eine statische Datei mit festen Werten dabei heraus - die layout.ini, die nach einer frischen Installation erst dann geschrieben wird, wenn ich den Layout-Designer anwende und die Werte dort auch speichere:

[Browser]
Left=0
Top=0
Width=200
Height=100
ZOrder=0
Detached=off

[Cartwall]
Left=100
Top=100
Width=200
Height=100
ZOrder=5
Detached=off

[Player0_0]
Left=60
Top=60
Width=200
Height=100
ZOrder=3
Detached=off

[Player0_1]
Left=80
Top=80
Width=200
Height=100
ZOrder=4
Detached=off

(usw.)

Problem: Einmal festgeschrieben, bleiben sie so. Angepasst an die Bildschirmgröße / -auflösung. Und genau das ist die Crux an der Nummer: Die Werte sind nicht relativ.

Möchte ich alles zurücksetzen, klicke ich auf “Automatisches Layout”, das nichts anderes macht, als die layout.ini wieder zu löschen.

Automatisches Layout

In dem Fall werden, wie beim ersten Start, bestimmte Elemente nach einer festen Vorgabe an den Bildschirm angepasst.
Nur: Das sieht auf meinem Laptop ganz anders aus als wenn ich den Laptop an meinen großen Bildschirm anschließe. Und spätestens da ist’s Essig mit meinen Absolutwerten aus der layout.ini.

Das kommt aus der Urzeit von mAirList, vielleicht sogar der v1.x oder eher der v2.x.
Sei’s drum, damals™ gab es noch gar keinen Layout-Designer.
Also haben wir uns im Grunde einen Zettel gemalt, wie unser Layout aussehen sollte, das mit den Pixeln ausgerechnet und die Werte dementsprechend händisch in die layout.ini eingetragen. Danach erfolgte der Realitätscheck.

Dass wir heute einen vergleichsweise komfortablen Layout-Designer haben, ist großartig.
Ob sich die Werte des automatischen Layouts auf ihn übertragen lassen: Unklar.
Welches die richtigen Startpositionen für die verschiedenen Bildschirmobjekte sein sollten (es können ja noch selbst definierte hinzukommen):
Nicht eindeutig für alle Anforderungen zu lösen.

Stefan_Hillen · February 12, 2022, 11:56pm

Jau, das verwirrt denke ich die meisten Nutzer beim ersten Öffnen des Layout-Designers… Ich habe ihn vor Schreck das erste Mal wieder neu gestartet weil ich dachte, dass was falsch gelaufen war.

WYSIWYG ist halt schwierig, wenn plötzlich alle Elemente als Stapel in einer Bildecke liegen und man keine echte Vorlage SIEHT, auf der man aufbauen/die man verändern kann…

shorty.xs · February 14, 2022, 10:23am

Ich fände es in der Tat auch ein sehrhilfreiches Feature, sehe aber die Komplexität in dieser Aufgabe, da wir ja je nach Bildschirm mit völlig unterschiedlichen statischen Positionswerten starten müseen.

Das würde ich auf gar keinen Fall automatisch beim ersten öffnen durchführen. Sicherlich könnte man einfach as vorhanden sein einer layout.ini abfragen und darauf reagieren aber was, wenn der Layoutdesigner gerade gar nicht im Vollbild Modus getartet ist oder auf einem “falschen” Monitor?

Es bräuchte also einen Button der sagt: Jetzt bitte das default Layout festschreiben. Der dann alle Werte einmal weg schreibt vom aktuellen Fenster in der aktuellen Position und größe bzw. dies verweigert wenn schon eine Layout.ini besteht. Denn ich sehe schon dir Supportrequests: “Ich habe auf den Knopf gedrückt und jetzt ist mein Layout weg, wie bkomme ich das zurück? ”

Stefan_Hillen · February 14, 2022, 1:55pm

Okay, aber wenn ich mAirlist das erste Mal nach der Installation starte, funktioniert das automatische Anordnen des Standard-Layouts ja auch irgendwie, egal ob im Vollbild oder kleinerem Fenster.

UliNobbe · February 14, 2022, 2:10pm

Na gut, nehmen wir an, Torben kann die Positionen aus dem automatischen Layout in die layout.ini übertragen (die ja auch erst unmittelbar vor dem Öffnen des Layout Designers erstellt und mit den Werten gefüttert werden muss - vorher gibt es sie gar nicht), dann kann ein Standard-Layout zu Beginn so aussehen:

Das ist jetzt eine 1920*1032 px-Auflösung… an was kleineres mag ich gar nicht denken.

shorty.xs · February 14, 2022, 2:35pm

Das funktioniert nicht nur beim ersten Start sondern es wird ständig neu angepasst, auch wenn man während mAirlist läuft, die Fenstergröße ändert.

Es gibt also keine absoluten Positionen, zu keinem Zeitpunkt. Alle Positionen werden immer dynamisch berechnet.

Ich habe sehr lange Zeit mAirlist auf 1280x1024 laufen lassen. Eine durchaus brauchbare Auflösung.
Aus meiner aktuellen Praxis sehe ich ausserdem, dass Full-HD immer noch nicht als minimum-Standard durchgesetzt ist.

Richtig lustig wird es dann bei 2k oder 4k Displays mit DPI Scaling.

Stefan_Hillen · February 14, 2022, 9:15pm

mmmhja, wobei ich das erste Layout mit drei Cartwall-Buttons persönlich ausreichend fände. Die Playliste würde ich für den Betrieb als deutlich sinnhafter in ausreichender Höhe befinden…

Als ich kürzlich aus Platzgründen beim neuen Setup von einem 27-Zöller (2160 x 1440) und 24-Zöller nun auf zwei 22-Zöller mit nicht-HD ( 1680x1050) als Hauptmonitore umgestiegen bin, musste ich mit Erschrecken feststellen, dass es mich absolut nicht störte.

Im Gegenteil, für die Playliste, Datenbankfenster und zwei Player reicht es dicke, denn das PL-Fenster war einfach nur unnötig breit vorher…

Anderes Extrem: In einem Vereinsstudio stehen nun zwei 32-Zoll-Monitore nebeneinander, knapp 80 Zentimeter vom Moderator entfernt, weil auch ältere Moderatoren noch was erkennen können sollen. Da bewegt sich der Fortschrittsbalken so schnell, dass man das Gefühl hat, man stünde an der Autobahn…

UliNobbe · February 15, 2022, 8:35am

Schon sind wir beim ersten Haken des Konzepts: Sagen wir mal, ein durchschnittlicher Benutzer der Webstation oder eines Airlite möchte sich sein Layout gemäß der A/B-Tasten (zumindest teilweise) für die Cartwall gestalten, dann muss der sich seine Cw doch schon von Anfang an anders generieren.

Dann geht es nicht mehr um “fände ich ausreichend”, sondern um “mit welchen Ausmaßen und an welchem Platz soll die Cartwall analog zu meinem Pult im Layout erscheinen?”.

Es geht an der Stelle doch um die individuelle Praxis.

Stefan_Hillen · February 15, 2022, 10:38am

Worüber fahren denn die Leute ihre Sendung standardmäßig? Über die Cartwall oder die Playliste?

Bei Deinem Layoutvorschlag sehe ich aber genau wieviele Titel der Playliste?

Und wieviele User starten eigentlich gleich mit Webstation oder Airlite? Ihr habt da vielleicht genauere Zahlen durch die Lizenzen.

Dass im Anfangslayout dermaßen viele Cartwall-Buttons statt einem ausreichend langen Playlistfenster sein müssen bezweifle ich dann doch.

Und niemand spricht Usern ab, individuell zu sein. Dafür gibbet ja das Standardlayout, von dem man starten kann…,

calypso60 · February 15, 2022, 12:48pm

Genau so würde ich das (wäre ich neuer mAirList-Nutzer) erwarten. Nicht mehr und nicht weniger. Ich finde, es ist einfacher, wenn man darauf aufbauen kann - anstatt erstmal das Standard-Layout halbwegs nachzubasteln, bis man einigermaßen kapiert hat, wie das funktioniert. Und man hätte eine Rückfallebene, falls man sich verzettelt hat.

Stefan_Hillen · February 15, 2022, 12:54pm

Ich verstehe gerade nicht, warum nun ein neues Standard-Layout ins Spiel gebracht wird. Es GIBT ja ein Standard-Layout, und das sollte halt möglichst auch im Designer als Start zu sehen sein, um darauf aufbauen zu können.

War das nicht eigentlich der Tenor/Wunsch

des Threads?

calypso60 · February 15, 2022, 1:17pm

Genau das meine ich ja auch…

anon11950972 · February 15, 2022, 1:38pm

Heyho.

Ich weiß nicht ob das eine Relevanz hat. Ich habe von mAirlist die Home Studio Light auf meinem Laptop, der hat natürlich eine andere Bildschirmauflösung wie mein Computer. Es ist doch eigentlich so, dass wenn man mAirlist das erste Mal öffnet das Standart Layout angezeigt wird, kann es dann nicht möglich gemacht werden, dass dann einfach automatisch eine layout.ini mit den Werten die beim erstmaligen Öffnen von mAirlist geschrieben werden? Irgendwoher müssen die Werte von der 1. Öffnung ja kommen.

Vielleicht habe ich den Thread auch nicht richtig verstanden.

shorty.xs · February 16, 2022, 9:28am

Wie ich schon weiter oben zu erklären versuchte: Es gibt eben KEIN Standardlayout, Standardmässig gibt es ein dynamisches Layout, welches auf jeder Bildschirmauflösung andere Koordinaten je Element hat.

Torben · February 16, 2022, 10:15am

Also, um die Problematik noch einmal zu erklären und ein paar Einblicke in die innere Architektur zu geben:

Das Hauptfenster (MainForm) existiert im Programmcode in drei (jeweils von der gleichen Basisklasse abgeleiteten Ausprägungen:

Variante “AutoMain”, für das automatische Layout (keine layout.ini vorhanden). Hier gibt es tatsächlich ein System aus ineinander verschachtelten Panels (ähnlich wie von @manuelmeister im Ursprungspost skizziert), die teilweise feste Größen haben, teilweise so eingestellt sind, dass sie sich je nach Fenstergröße den übrigen verfügbaren Platz greifen (in Delphi das sog. “Alignment”); manche auch mit Splittern dazwischen. Diese Panels sind zum Teil schon fest im Quellcode über den Delphi-Form-Designer definiert, teilweise werden sie aber auch erst dynamisch beim Programmstart erzeugt, je nachdem, wie viele Player, Bildschirmobjekte etc. man konfiguriert hat, ob die Cartwall mit im Hauptfenster liegt oder nicht, und so weiter. Insgesamt ein sehr komplexes System, das über die Zeit gewachsen ist und noch erstaunlich zuverlässig funktioniert
Variante “LayoutMain”, beim Vorhandensein der layout.ini. Hier liegen alle GUI-Elemente “flach” auf dem Hauptfenster und werden ausschließlich über die Pixel-Koordinaten aus der layout.ini positioniert.
Variante “DesignerMain”, wenn mAirList mit -mode designer gestartet wurde; entspricht “LayoutMain”, nur das zusätzlich noch das Fenster mit den Objekteigenschaften sowie die Punkte zum Verschieben/Skalieren angezeigt werden.

Wichtig daran zu wissen: Welche Variante benutzt wird, also wohin das Programm “abbiegt”, entscheidet sich direkt beim Programmstart anhand des Vorhandenseins der layout.ini bzw. des Kommandozeilenparameters. Deswegen kann man auch nicht im laufenden Betrieb zwischen automatischem und festem Layout wechseln.

Zweite Erkenntnis: Es gibt nicht “das” Standard-Layout, sondern neben der Fenstergröße hängt das Standard-Layout von AutoMain sehr stark von der Konfiguration ab (Bildschirmobjekte, Anzahl-Player, weitere Konfigurationsoptionen, etc.).

Diese beiden Punkte sind die Gründe, warum der Layout-Designer beim erstmaligen Start nicht mit einem “Standard-Layout” starten kann: An das echte kommt er nicht heran (weil dazu das Programm in der Variante “AutoMain” hätte gestartet werden müssen), und andererseits ist es auch zu dynamisch bzw. konfigurationsabhängig, um als “Vorlage” irgendwo im Programmcode hinterlegt sein zu können.

Natürlich könnte man mit relativ einfachen Mitteln eine Funktion schaffen, die - während die Variante AutoMain läuft - einmal die aktuellen Pixel-Koordinaten aller beteiligten Objekte abliest und in eine neu erzeugte layout.ini schreibt. Wobei ich auf Anhieb nicht weiß, wo in der GUI/Menü man so eine Funktion sinnvollerweise unterbringen sollte. Wenn jemand eine schlaue Idee hat, immer her damit.

Was die ursprüngliche Anregung von @manuelmeister angeht: Ja, natürlich habe ich schon darüber nachgedacht, und zwar nicht nur einmal. Leider ist das alles sehr komplex und, mangels fertiger Delphi-Komponenten dafür, sehr aufwändig. Denn natürlich will niemand hinterher solche Layouts von Hand als JSON- oder XML-Dateien schreiben, sondern ihr möchtet vermutlich einen graphischen Editor dafür, richtig?