Layout von Datenbankanwendungs-Fenstern auf 16:10 Monitoren

[Codehunter]

Hallo,

ich möchte mal ein paar Gedanken zum Thema Oberflächendesign loswerden, die mich seit längerem umtreiben. Alles fing eigentlich gar nicht mit meinen eigenen Programmen an, sondern mit zugekauften Wawis etc.

Wir haben in unserer Firma vor mehreren Jahren ein anderes Wawi eingeführt. Seitdem beschweren sich die Nutzer über das umständliche Handling. Irgendwann hab ich mich einen Tag daneben gesetzt und zugeschaut, wie die das im Alltag handhaben. Dabei stellte sich heraus, dass die Mauspfade und Klickfolgen sehr lang sind, um auch nur einen Beleg zu erstellen.

Dann habe ich mir die Oberflächen angeschaut. Mir fiel recht schnell auf, dass die Eingabemasken mit sehr vielen Pagecontrols arbeiten und darüber die einzelnen "Themenbereiche" wie z.B. Belegkopfdaten, Artikelpositionen usw. voneinander trennen.

Wenn man nun so eine Eingabemaske auf einem FullHD-Monitor maximiert, dann hat man regelmäßig den Effekt, dass sich im linken Drittel des Bildschirms sehr viele Controls befinden, während die rechten zwei Drittel leer bleiben oder "großzügigerweise" von einem Freitext-Memo ausgefüllt werden.

Irgendwann hatte ich mal einen Arbeitsplatz mit einem älteren 4:3-Monitor und 1280x1024 Auflösung. Dort ergab diese Anordnung plötzlich Sinn, der Platz wurde optimal ausgenutzt.

Hier eine typische Eingabemaske von einem aktuellen Wawi (nicht das was wir einsetzen, aber ein typischer Fall vom beschriebenen Problem):

Bild 1
Bild 2

Nur sind doch heutzutage Full-HD-Monitore mit 1920x1080 eigentlich der unterste Standard. Also nicht nur dass die Auflösung höher ist, auch das Seitenverhältnis ist ein anderes. Darum frage ich mich, ob man eigene Anwendungen nicht für Full HD optimieren und das ganze Eingabelayout umkrempeln sollte.

Am Beispiel einer Belegeingabemaske könnte man die Kopfdaten im linken Drittel erfassen, die Artikelpositionen im mittleren Drittel und die Fußoptionen wie Versandart, Lieferkonditionen etc. im rechten Drittel.

Noch eleganter wäre es, wenn man sich einen 16:10-Monitor um 90 Grad gedreht vorstellt (Pivot-Funktion). Dann könnte man die Eingabemaske strukturell schon so abbilden (abstrahiert), wie sie später auch auf einem Beleg ausgegeben werden.

Ich habe mal probeweise so eine "Portrait-Eingabemaske" als Dummy erstellt und einen unserer Vertriebler damit konfrontiert. Zuerst fand der das ziemlich bekloppt, den Monitor hochkant zu stellen. Doch nachdem ich ihn (gespielt) drei Belege im Akkord eingeben lassen habe, wollte der plötzlich gar nicht mehr aufhören. Am Ende beschwerte er sich sogar, dass das nur ein Dummy war und nicht auf unser zugekauftes Wawi übertragbar.

Was meint ihr: Wäre die Zeit reif, um Programme anzubieten, die sich komplett auf aktuelle Bildschirmauflösungen orientieren, statt (als Entwickler) immer noch gedanklich auf einen vermeintlichen, jedoch lange veralteten Mindeststandard von 1280x1024 zu orientieren? Könnte man gar Monitore mit Pivot-Funktion als Mindestanforderung für professionelle, an gewerbliche Anwender richtende Programme vorgeben?

Beim Praxistest ergab sich übrigens noch die Erfahrung, dass man die Pivot-Funktion nur mit IPS-Panels sinnvoll einsetzen kann. Bei TN-Panels jeglicher Couleur sind die Betrachtungswinkel im Hochformat nicht ausreichend. Man hat dann grässliche Farb- und Helligkeitsverläufe von oben nach unten.

Grüße
Cody

[mensch72]

Wir erstellen zufällig auch Software für den sagen wir "gehobenen/speziellen" Finanzsektor.
Da haben wir ganz oft mit verschiedensten (Multi)Bildschirmlayouts zu tun.

Ich unterscheide aktuell 4 Screen-Designs:
- 4:3/Quadratisch/3:4 (=> läuft bei mir alles unter "Quadrat-Design")
- 16:9/16:10"waagerecht" (=> läuft bei mir unter "Breitbild")
- 9:16/10:16"senkrecht" (wird aber eigentlich nur im "FreeUserMode" genutzt)
- für Extrembreitbild 20..21:9 unterstützen wir ein simuliertes/virtuelles DualScreen mit "fast quadratischem" zwei mal 10:9

=> bei klassischem 4:3 platzieren wir im "Quadrat-Design" Menü und Auswahl stets "oben"
=> bei "Breitbild" 16:9/16:10 platzieren wir Menü und Auswahl optional link oder rechts(wahlweise als reiner TreeView oder "segmentierter 2003er ExchangebarStyle" mit SubTree's)


"ResponsiveDesign's als Entwurfspattern" hin oder her, auch bei mobile definiere ich funktional lieber stets 3 oder 4 separate Oberflächen(quer, quadratisch, hoch, optional "mini" für Smartwatch).
Viele IDEs behaupten zwar man könne das z.B. per "MultiView" rein per variablem Design funktional auch mit einem Quellcode lösen...
nö: ich behaupte wenn man Daten&Funktion&Design eh sauber getrennt hat, kann man selbst fix frei wahlweise entscheiden ob man mit einem weiterem Design(View) auskommt, oder ob man eine zusätzliche Kombi mit/aus Funktion&Design realisiert... ich kann&mache je nach Bedarf beides.

[IBExpert]

Mal so als ergänzende Anregung (und wie wir das in unserer BRP Software machen):

Ein generelles Layout für alle Anwender ist immer ein Kompromiss, den der Programmierer vorgibt.
Alle Wünsche aller Anwender zu erfassen ist unmöglich, erst recht dann, wenn auch noch völlig unterschiedliche
Abteilungen oder ganz andere Firmen mit der Software arbeiten.

Wir haben in unserer Applikation einen simplen Designmodus eingebaut, bei dem der Anwender (jedenfalls
dann wenn er in der Software einen Account mit entsprechende Rechten benutzt) die Position aller
Controls selber bestimmen. Wenn er per Rechtsklick Popup Menü den Designmodus aktiviert, dann kann
er jedes Control anklicken und über das OnClick Event werden alle Selektieren Komponenten in eine
TList eingetragen und farblich verändert, so das man erkennt, was markiert ist. Durch erneutes anklicken
wird die Komponente wieder auf normale Farbe gestellt und aus der TList entfernt.

Über simple Tastenkombinationen Ctrl+Cursortasten bzw Alt+Cursortasten kann er nun alle selektierten Komponenten
frei auf dem Form damit pixelweise hin schieben wo er das haben möchte, weil die entsprechenden Events auf dem Form
in entsprechenden popup menu items per short cut hinterlegt sind, aber nur dann aktiv sind, wenn
Designmode aktiv ist.

Beim Beenden des Designmodes (wieder über popup) gehen wir einfach durch die Components im aktuellen form
und schreiben die relevaten Eigenschaften (top/left/height/width) zusammen mit dem Komopnenten Name
in eine TStringlist in so einem Format

edtNachname.left=123
edtNachname.top=10


usw.

Bei uns landet das dann in der Datenbank und kann global für alle User gelten. Optional kann aber auch
ein User sich die vorgegebenen Eigenschaften noch mal überschreiben, so das der mit zB seinem 4K Screen ein
ganz anderes layout hat als seine Kollegen mit zB FHD Screen.

Beim nächsten Laden des Formulars wird dann aus einer Tabellen zu jedem Form je nach o.a. Implementation
die Stringlist aus einem Blob geladen, wieder in eine Stringlist gepackt und im OnShow Event abgearbeitet.
Dabei gehen wir dann einfach wieder durch die automatisch erzeugten Components, holen deren Namen und suchen
in der TStringlist über Values nach der zugehörigen Eigenschaft. Wenn die gesetzt wurde, wird die automatische
Größe/Position verändert und erscheint mit der Anzeige da wo der Endanwender das bestimmt hat.

Das System kann man bis hin zu Schriften, Font Eigenschaften, Farben, Sichtbarkeit usw ergänzen, wenn man will.

Die Tabreihenfolge legen wie fest über die generelle Vertikale Position und wenn top identisch ist geht es innerhalb
der aufsteigenden Left werte weiter. Das ist einfach zu automatisieren.

Die fest einkompilierten Werte aus der Dfm Datei, die ja nur der Delphi Entwickler bestimmt, kann der mehr oder weniger
talentierte Enduser dann auf Wunsch auf diesem Weg selber anpassen. Alternativ kannst du für deine Software auch unterschiedliche
Layouts auf dem Wege gleich mitliefern.

Bei unserem wichtigsten Kunden für BRP macht ein Mitarbeiter des Kunden immer das komplette Formdesign, ohne jemals
einen Delphi oder Lazarus Compiler benutzt zu haben. Und ganz wichtig: Er überlegt sich auch oft später anhand neuer
Erkenntnisse andere Reihenfolgen innerhalb der Formulare. Da muss er uns nicht mal danach fragen ....

Auf deinen Beispielbildern sieht man ganz gut das bei vielen WAWIs viele Einstellungen möglich sind, die der
Durchschnittsanwender nicht kennt und auch nicht für irgendwas benutzen sollte, wofür es gar nicht gedacht ist.
Das dynamische Ausblenden von solchen Felder erleichtert den Anwendern das leben ganz erheblich und der Programmierer
muss sich nicht 100 Meinungen anhören, in welcher Reihenfolge das denn viel besser wäre. Du gibst nur den Default
vor und überlässt dem Endanwender/Kunden das Customizing. Automatisch angepasste Designs können da auch nur Kompromisse sein.

[Ghostwalker]

Eine UI auf eine bestimmte Auflösung zu optimieren macht imho keinen Sinn.

1. Man kann nie Sicherstellen, das (im laufe der Jahre), diese Auflösung gängig bleibt.

2. Wenn die Anwendung auch ggf. auf Mobil-Geräten laufen soll, hast du hier wieder ganz
andere Auflösungen. Auch in der Industrie werden z.B. Tablets gerne eingesetzt (z.B. Lagerhaltung).

3. Daran denken, nicht jeder Anwender arbeitet im Vollbild-Modus.


Deshalb würd ich auf folgende Punkte achten:

1. Basis-Design so "klein" wie möglich. Darauf achten, das die Anwendung dabei noch gut bedienbar ist.
2. Von Haus auf die Möglichkeit berücksichtigen, das man evtl. mehrere angepasste Designs verwendet.

Da ich die letzen Jahre vorwiegen Webanwendungen (nein..nicht Webseiten sondern richtige Anwednungen ) programmiert habe, hat mich dieser Ansatz recht weit gebracht.

[bepe]

Wenn du als Beispiel schon ein Programm zeigst, an dem ich vor vielen Jahren, viele Jahre lang mitentwickelt habe, dann muss ich auch eine mögliche Lösung anhand von Software aufzeigen, an der ich aktuell mitarbeite

Habe keine schönen Screenshots zur Hand aber auf Youtube haben wir angefangen Videos zu veröffentlichen.

Dort werden die einzelnen Reiter neben- bzw. untereinander angezeigt (per Einstellungen auch als klassische Reiter). Das ganze geschieht dynamisch, abhängig vom Seitenverhältnis des Fensters. Also wird der Platz immer ideal ausgenutzt. Auch hochkant passt (wenn du Tablets, Convertibles etc. drehst, passt sich die Oberfläche an).

Technisch eher eine riesen Maske durch die man scrollen kann. Und die Tabs sind Sprungmarken zum schnellen navigieren.

[TigerLilly]

Spannender Thread.

In Ergänzung zu den schon gesagten Dingen:
Früher, als die kleinen Auflösungen Standard waren, waren Anwendungen leichter zu bedienen, wenn sie im Fullscreen-Modus betrieben wurden. Gleichzeitig mit den höheren Auflösungen sind aber iPads, Tablets etc aufgekommen, die zwar hohe Auflösungen haben, aber geringe physische Maße. So mag ein Tablet die gleiche Auflösung wie ein 30 Zöller haben, aber die physischen Maße sind ganz andere.

So hat es wenig Sinn, eine Software auf den 30 Zöller im Vollbildmodus zu betrieben, während es auf dem Tablet die einzige Möglichkeit ist, damit sinnvoll zu arbeiten.

Wie so oft hängt eine Antwort von der Zielgruppe ab. Habe ich Finanzer, die jede Menge Diagramme und Tabellen in Echtzeit und gleichzeitig sehen wollen, muss ich anders designen, als wenn ich von Personen ausgehe, die Laptops benutzen und dann solche, die ev. schon in die Jahre gekommen sind.

Auf einem riesen Monitor kommen sehr große links/rechts Wege zusammen, da hat FullScreen keinen Sinn. Das wäre viel zu viel Info und der Überblick ginge völlig verloren.

In der Regel (= Achtung: Hinweis auf mögliche Ausnahmen!) genügt es, eine 1024x768 Auflösung bei 96 DPI beim Designen vor Augen zu haben. Das entspricht ca. einer DinA4 Seite + enthält die Menge an Daten, die man visuell noch sinnvoll erfassen kann. Monitor Hochformat/Querformat, individuelle Layouts etc sind cool + super Ideen, die grundsätzlich dargestellte Datenmenge sollte DinA4 nicht überschreiten. Stichwort Ergonomie von Software-UI.

Wir erleben durch Tablets und Mobiles einen ziemlichen Rückschritt, was UI anbelangt, weil die benutzbare Fläche wieder klein geworden ist. Wir haben zwar viel höhere Auflösungen, aber die Bildschirmdiagonale eines Tablets entspricht der eines Monitors aus 1990. Insoferne haben die Ergonomieüberlegungen von damals immer noch Gültigkeit.

[p80286]

Meiner Meinung nach, hat Codehunter das Problem richtig beschrieben, aber die falschen Schlüsse gezogen. Der Benutzer, der Daten zu bearbeiten hat, möchte dafür nur ein Bild (Formular) nutzen. Hin und her blättern unterbricht da nur den Arbeitsablauf. Und je nach Aufgabenstellung (des Arbeitsplatzes) sind die Anforderungen an die Oberfläche ganz andere. Bei der Erfassung von Adressen z.B. ist es manchmal angenehm verschiedene Adressarten gleichzeitig in der Anzeige zu haben (Versand-,Rechnungs-Adresse). Wer eine Rechnung erstellt, den interessiert die Versandadresse nicht unbedingt.
Diese Abbildung von Arbeitsabläufen ist meiner Meinung nach wichtiger als die optimale Ausnutzung von Bildschirmoberfläche.

Gruß
K-H

[jobo]

Zitat von p80286:

Diese Abbildung von Arbeitsabläufen ist meiner Meinung nach wichtiger als die optimale Ausnutzung von Bildschirmoberfläche.

Das scheint mir ein Kernpunkt zu sein. (Wobei hier der Punkt, neue Software = neue Möglichkeiten = neue-verbesserte- Abläufe dem Ganzen noch einen interessanten Dreh gibt).
Die optimale Ausnutzung der Bildschirnmoberfläche steht dabei vielleicht hinten an, aber nicht wirklich weit hinten. Dass dieses Thema mit aktuellen (und zukünftigen) Arbeitsmitteln eher komplexer als einfacher wird, dürfte auch klar sein. Auflösung, relative Auflösung, Seitenverhältnis sind da sehr wichtige Basics, Medienarten jenseits des Monitors als Standarddarstellungswerkzeug sind sicher eine große Herausforderung, vom Smartphonescreen bis zu AR Visualisierung oder auch Einbeziehung von TextToSpeech, usw..
ResponsiveDesign wurde bspw. genannt und ist ja an sich nicht neu. Schaut man auf alte Erfolgsmerkmale von Delphi, dann sähe ich hier eigentlich einen großen Spielraum im Komponentenbereich, mit leistungsfähigen, komplexen und smarten Komponenten neue Maßstäbe zu setzen, gerade im Hinblick auf das Threadthema.

[blondervolker]

Morgen,

was für "Faule"... ResizeKit... Dann klappt es auch...Siehe Abbildung...

[Daniel]

Zitat von blondervolker:

was für "Faule"... ResizeKit... Dann klappt es auch...Siehe Abbildung...

Kannst Du das weiter ausführen? Was genau macht diese Komponente? Welche Voraussetzungen müssen erfüllt sein, welche Möglichkeiten und Grenzen hat diese Komponente? So knapp formuliert hilft Dein Beitrag nur wenig weiter.