Gutes GUI

Grafische Primitive, XbaseParts und Darstellungsfragen allgemein.

Moderator: Moderatoren

Benutzeravatar
Martin Altmann
Foren-Administrator
Foren-Administrator
Beiträge: 16586
Registriert: Fr, 23. Sep 2005 4:58
Wohnort: Berlin
Hat sich bedankt: 116 Mal
Danksagung erhalten: 48 Mal
Kontaktdaten:

Beitrag von Martin Altmann »

Hallo Olaf,
ich fasse mich kurz, damit wir hier nicht wieder vom Thema abschweifen :!:

<OT>
Bobby besitzt ein Taxiunternehmen in New York und hat dafür eine Anwendung, mit der alles rund um das Thema Taxi erschlagen werden kann (Lizenzen, Fahrer, Kosten, Touren,...)
Aber abgesehen davon hat er sehr viel grafisches (im Comicstil) "Schnickschnack" drumrum bauen lassen:
  • Der Hintergrund in seinem Hauptfenster ist die Skyline von NewYork. Die Sonne wandert (je nach Uhrzeit) von links nach rechts über den Bildschirm. Sobald sie untergegangen ist, scheinen die Sterne und der Mond wandert. In einzelnen Fenstern gehen Lichter an und/oder aus und die Straßenlaternen brennen.
  • Er hat ein Modul für Unfälle integriert, in dem im Baukastensverfahren alles nachgestellt werden kann (Silhouette, Straßenverlauf, Verkehrszeichen, div. Auto-/LKW-/Bus-/Motorrädermodelle)
  • und noch einiges mehr (wobei das nur die "Highlights" waren)
</OT>

Viele Grüße,
Martin
:grommit:
Webseite mit XB2.NET und ausschließlich statischem Content in Form von HTML-Dateien: https://www.altem.de/
Webseite mit XB2.NET und ausschließlich dynamischem Content in Form von in-memory-HTML: https://meldungen.altem.de/

Mitglied der XUG Osnabrück
Vorsitzender des Deutschsprachige Xbase-Entwickler e. V.
Benutzeravatar
Jan
Marvin
Marvin
Beiträge: 14662
Registriert: Fr, 23. Sep 2005 18:23
Wohnort: 49328 Melle
Hat sich bedankt: 21 Mal
Danksagung erhalten: 88 Mal
Kontaktdaten:

Beitrag von Jan »

Martin,

warum die dicken OT? genau darum geht es doch in diesem Thread: Ideen, wie man am besten eine gute GUI aufbaut. Wobei wir uns zuletzt sehr in den bereich Dialoggröße verrannt haben, dabei gibt es doch noch so viele andere interessante Punkte. Wie die gerade von Dir angesprochenen graphischen Gimmicks, auf die SO bestimmt niemand hier gekommen wäre.

Also ein durchaus zielgerichteter und themenbezogener Beitrag von Dir!

Jan
Benutzeravatar
Lewi
1000 working lines a day
1000 working lines a day
Beiträge: 830
Registriert: Di, 07. Feb 2006 14:10
Wohnort: Hamburg
Danksagung erhalten: 2 Mal

Beitrag von Lewi »

Hallo Martin,
vielen Dank für die Erläuterungen.

Gruß, Olaf
Benutzeravatar
Tom
Der Entwickler von "Deep Thought"
Der Entwickler von "Deep Thought"
Beiträge: 9394
Registriert: Do, 22. Sep 2005 23:11
Wohnort: Berlin
Hat sich bedankt: 105 Mal
Danksagung erhalten: 364 Mal
Kontaktdaten:

Beitrag von Tom »

Huhu.

Bobby Drakos' Applikation würde ich allerdings nicht wirklich als schön bezeichnen. Sie enthält jeden Schnickschnack, den Bobby irgendwo sieht. Das ganze ist herrlich verspielt und mit Gadgets fast schon überlastet. Als ich Bobby meine "Sticky Notes" (sowas wie Haftnotizen auf dem Hauptbildschirm) gezeigt habe, hat er Roger sofort beauftragt, sowas auch einzubauen. Und natürlich brauchte er auch sofort transparente Fenster. Dabei stellt sich nicht die Frage nach Sinn oder Effizienz. Jedenfalls nicht grundsätzlich.

Die Hotel-Applikation, die wir in Manchester gesehen haben, hat m.E. viel beeindruckender gezeigt, wie eine schöne GUI aussehen sollte. Sie hatte ein durchgängiges, schlichtes, aber sehr elegantes Layout. Man hat sich viele Gedanken über Icons und Button-Captions gemacht, der Aufbau ist klar, übersichtlich und vor allem konsistent. Das ist bei Bobby nicht der Fall. Jedes Fenster, das sich dem überraschten Zuschauer zeigt, bietet irgendeine neue, bisher unbekannte Funktionalität, das ist wie geschenkeauspacken an Weihnachten. Spaßig, aber zuweilen auch etwas nervig. So sollte GUI m.E. nicht aussehen.

Das Problem ist, daß es einen Verkaufsaspekt und einen Anwendungsaspekt gibt. Bei Vorführungen wirken Gadgets und sinnlose, aber lustige Items möglicherweise, aber der tagtäglich mit der Anwendung konfrontierte Nutzer ist irgendwann genervt, wenn bei der Betätigung irgendeines Buttons Hahngekrähe ertönt oder man beim Aufruf der Applikation fünf Sekunden warten muß, weil alle Sonnenauf- und -untergangsbitmaps fürs Hauptmenü geladen werden müssen.

Ich halte folgende Aspekte für wichtig:

- Durchgängiges, konsistentes Layout. Am besten eine Designrichtlinie festlegen
- Eleganz und Schlichtheit widersprechen sich nicht
- Bei der Farbwahl beachten, daß knallige Farben oder Grundfarben nerven. Abgestimmte Töne benutzen. Dem Anwender nicht zu viel Auswahl lassen, lieber "Themes" festlegen, die zur Auswahl stehen
- Icons und Bitmaps nur dann als Captions nutzen, wenn sie wirklich eindeutig sind. Wenn der Benutzer den Tooltip abrufen muß, um hinter die Funktionsweise eines Buttons zu kommen, verliert er Arbeitszeit
- Dialoge nicht mit Funktionalität überfrachten. Menüs, Popup-Menüs oder auszublendende Toolbars benutzen
- Die Blickreihenfolge beachten. Bildschirme werden von oben links und dann im Uhrzeigersinn wahrgenommen
- Dem Anwender die Möglichkeit geben, nicht benötigte Funktionalitäten auszublenden, etwa über Voreinstellungen
- Niemals bei zwei ähnlichen Systematiken unterschiedliche Bedienungsstrukturen anbieten. Also nicht an einer Stelle einen Button, um einen Eintrag zu bearbeiten, und an anderer Stelle den Doppelklick
- Dialoge skalierbar machen, Skalierungen speichern!

t.b.c.
Herzlich,
Tom
Benutzeravatar
Lewi
1000 working lines a day
1000 working lines a day
Beiträge: 830
Registriert: Di, 07. Feb 2006 14:10
Wohnort: Hamburg
Danksagung erhalten: 2 Mal

Beitrag von Lewi »

Hallo Tom,
basieren die Haftzettel in Eurer Applikation auf xbase-Code oder habt ihr ein Tool herangezogen?

Gruß, Olaf
Benutzeravatar
Tom
Der Entwickler von "Deep Thought"
Der Entwickler von "Deep Thought"
Beiträge: 9394
Registriert: Do, 22. Sep 2005 23:11
Wohnort: Berlin
Hat sich bedankt: 105 Mal
Danksagung erhalten: 364 Mal
Kontaktdaten:

Beitrag von Tom »

Hallo, Olaf.

Plain Xbase. Die Haftnotizen bestehen schlicht aus Bitmaps, auf die transparente MLEs plaziert werden, ohne Scrollbalken. Der Benutzer kann sie über ein Kontextmenü (rechte Maustaste) plazieren, verschieben und Hintergrundfarben (vier Bitmaps stehen zur Auswahl) sowie die Schrift ändern. Größtenteils Fleißarbeit. 8)
Herzlich,
Tom
Benutzeravatar
Lewi
1000 working lines a day
1000 working lines a day
Beiträge: 830
Registriert: Di, 07. Feb 2006 14:10
Wohnort: Hamburg
Danksagung erhalten: 2 Mal

Beitrag von Lewi »

Tom, Danke für die Info. Ich finde das Konzept als solches sehr interessant. Wird Deinen Erfahrungen nach, das "Gimmick" auch von den Anwendern in der Praxis genutzt?

Gruß, Olaf
Benutzeravatar
Tom
Der Entwickler von "Deep Thought"
Der Entwickler von "Deep Thought"
Beiträge: 9394
Registriert: Do, 22. Sep 2005 23:11
Wohnort: Berlin
Hat sich bedankt: 105 Mal
Danksagung erhalten: 364 Mal
Kontaktdaten:

Beitrag von Tom »

Ja, das ist eine Funktionalität, die sehr stark genutzt wird (die "Haftnotizen" sind benutzerbezogen). Unsere Anwendung ist zwar MDI, aber die in Threads gestarteten Module werden nicht ins Hauptmenü eingebettet, sondern als neue Fenster geöffnet, mit Taskbar-Eintrag, denn jedes Modul kann beliebig oft geöffnet werden. Dadurch ist der mittlere Bereich des Hauptfensters immer für derlei frei. Die "Sticky Notes" werden für Notizen, Terminerinnerungen und vieles mehr genutzt. Daten, die über ein internes "Mailsystem" empfangen werden, können direkt als Haftnotiz abgespeichert werden.
Herzlich,
Tom
Benutzeravatar
Lewi
1000 working lines a day
1000 working lines a day
Beiträge: 830
Registriert: Di, 07. Feb 2006 14:10
Wohnort: Hamburg
Danksagung erhalten: 2 Mal

Beitrag von Lewi »

Hi Tom,
aus einer persönlichen Präferenz heraus, sind alle meine Appilkationen SDI-Anwednungen, wobei ich viel mit TAB-Pages arbeite.

Gleichwohl dessen werde ich mich mal an eine Haftzettel-Lösung ransetzen. Mit dem von Dir skizzierte Lösungsansatz scheint die Umsetzung gar nicht so kompliziert (aufwendig) zu sein.

Gruß, Olaf
Benutzeravatar
Jan
Marvin
Marvin
Beiträge: 14662
Registriert: Fr, 23. Sep 2005 18:23
Wohnort: 49328 Melle
Hat sich bedankt: 21 Mal
Danksagung erhalten: 88 Mal
Kontaktdaten:

Beitrag von Jan »

Hallo Tom,

Deine Auflistung kann ich nur unterstützen.

Dein Kommentak zu Bobby Drako allerdings war ebenfalls eindeutig. Nach Martins Kommentar dazu dachte ich: Tolle Idee abseits ausgetretener Pfade. Aber wenn das so ist wie Du das schilderst - na Prost Mahlzeit. Ein schickes, dezentes Hintergrundbild ist ja OK. Und das mit den Tageszeiten im Hintergrundbild finde ich (ohne das gesehen zu haben) echt stark. Warum nicht das Firmenlogo im Hauptdialog hinterlegen? Aber eben dezent und nicht vom Wesentlichen ablenkend oder unlesbar machend.

Ich habe mal ein Programm gesehen das wohl auf gleicher Grundlage geschrieben wurde: Was möglich ist wird gemacht. Sehr fein gemalte Bildchen und Farben wohin man gesehen hat. Den Mauspfeil so verändert da er zwar schick/interessant war und zum Sinn des Programmes passte, aber man nie genau wußte wo man denn nun eigentlich genau klickte. Eine Menüstruktur, die den Namen nicht verdient hat. Und vor allem: Man wusste nie wirklich, wo man gerade war, da alle vorigen Fenster immer ausgeblenden wurden. Im Hintergrund waren vielleicht 5 oder 10 "Vorgängerdialoge" offen, man sah sie aber nicht. Da aber der aktuelle Dialog darauf aufbaute war man irgendwie hilflos verloren. Also im Prinzip alles das NICHT getan, was Du in Deiner Auflistung als notwendig erwähnt hast.

Gerade Dein Satz
Eleganz und Schlichtheit widersprechen sich nicht
halte ich aber für schwierig. Ich selber tue mich da jedenfalls schwer mit, einen guten Weg zwischen Trist und Öde einerseits und Knallbund und Kopfschmerzenverursachend anderseits zu finden. Ich frag nach vollzogenen Designstudien immer meine Frau, Frauen haben für sowas wohl das bessere Händchen. Allerdings fehlt mir oft die Phantasie, WIE man es denn nun besser machen könnte. Z. B. Flat Buttons, die hier schon mehrfach thematisiert wurden. Finde ich in Leistenform schick. Wäre ich aber alleine nicht wirklich drauf gekommen das einzusetzen. Ich muß mich halt immer von anderen Inspirieren lassen und hoffe, niemand hier kommt mir jetzt mit Plagiatsvorwürfen ;-(

Andererseits ist gerade das ja auch ein Diskussionspunkt. Manche finden etwa die neue MS-Office-Optik toll, andere stören sich daran. Das hat nichts mit geschickter Führung durch das Programm zu tun, sondern sehr stark mit persönlichen Vorlieben. Und da jedem das zu ihm passende anzubieten - da ist mir der Aufwand zu schade für. Dann verbessere ich in der Zeit lieber den Code.

Jan
Benutzeravatar
Martin Altmann
Foren-Administrator
Foren-Administrator
Beiträge: 16586
Registriert: Fr, 23. Sep 2005 4:58
Wohnort: Berlin
Hat sich bedankt: 116 Mal
Danksagung erhalten: 48 Mal
Kontaktdaten:

Beitrag von Martin Altmann »

Hallo Tom,
ich fand Bobby's Programm trotz allem lustig :tongue:
Außerdem hat er mit seiner Art und seinem Stil und seinen Witzchen wenigstens alle wieder munter bekommen :D
Aber ich stimme Dir zu, dass die Hotellösung sehr elegant gestaltet war (aber eben nicht lustig!).

Viele Grüße,
Martin
:grommit:
Webseite mit XB2.NET und ausschließlich statischem Content in Form von HTML-Dateien: https://www.altem.de/
Webseite mit XB2.NET und ausschließlich dynamischem Content in Form von in-memory-HTML: https://meldungen.altem.de/

Mitglied der XUG Osnabrück
Vorsitzender des Deutschsprachige Xbase-Entwickler e. V.
Gerd König
Rekursionen-Architekt
Rekursionen-Architekt
Beiträge: 193
Registriert: Fr, 09. Jun 2006 7:52
Wohnort: Nähe Sömmerda

Beitrag von Gerd König »

Hallo Jan,

in meinen GUIs verwende ich Dialoge mit fester Größe. Prinzipiell habe ich zwei Dialoggrößen. Eine für Büroarbeitsplätze mit 17"-Bildschirmen für eine Vielzahl von Aktivitäten. Die kleinere wird für spezielle Arbeitsplätze besonders in der Betriebsdatenerfassung verwendet. Die Monitore habe dort meist 15", z.T. auch weniger.

Bei der Farbgestaltung habe ich eigene Farben (zarte Pastelltöne) definiert. Die stechen nicht so ins Auge wie die Designer-Standardfarben.

Dabei weisen die Farben auf schon auf ganz bestimmte Funktionalitäten hin.

Beispiel Browser:
hellblauer Hintergrund - Nutzer hat keine Rechte Ändeungen zu veranlassen
hellgelber Hintergrund - Nutzer darf Inhalte verändern

Beispiel Buttons:
hellrot - Beenden, Abbrechen, "nein"
hellgelb - Ändern, Auswählen
hellgrün - Speichern, Bestätigen, "ja"
hellblau - Sonderaktionen

Beispiel SLE
weiß - Optional einzutragender Wert
hellgelb - Pflichtfeld

Ansonsten verwende ich kaum Bitmaps oder Icons in der Applikation selbst (vom Start-Logo mal abgesehen).

Desweiteren sind alle Arbeitstationen auf Windows Klassik eingestellt. Also nix mit XP-Spielereien...

Die Bedienung hinsichtlich der Funktionsauswahl erfolgt in der Regel über Buttons und Listboxen. Innerhalb von Treeviews und Browsern geht es dann mit Kontextmenüs weiter.

Durch die unaufdringliche Farbgebung in Verbindung mit einer Grundfunktionalität zur jeweiligen Farbe besteht eine sehr gute Akzeptanz bei unseren Usern.

Viele Grüße
Gerd
Benutzeravatar
Jan
Marvin
Marvin
Beiträge: 14662
Registriert: Fr, 23. Sep 2005 18:23
Wohnort: 49328 Melle
Hat sich bedankt: 21 Mal
Danksagung erhalten: 88 Mal
Kontaktdaten:

Beitrag von Jan »

Hallo Gerd,

der Gedanke mit den "sprechenden" Farben ist interessant. Da weiß man gleich, wo es langgeht.

Etwas ähnliches, aber nicht so weit durchgezogen, mache ich übrigens auch in einem meiner Projekte: Da gibt es bei jedem Dialog oben ein oder zwei Buttonleisten. Je Leiste 11 Buttons, belegt mit den Funktionstasten F2 - F12 bzw. Shift F2 - ShiftF12. Wenn möglich sind die gleichen Funktionstasten in jedem Dialog gleich belegt, etwa F2 = Zurück, F3 Nächstes Fenster öffnen, F5 = Löschen, F11 = Erster Datensatz im Browse, F12 Letzter Datensatz im Browse. Andere Tasten sind je nach Dialog individuell belegt. Wobei in unserem System die Schriftfarbe variiert, nicht die Buttonfarbe. Löschen z. B. rot. Die BG-Farbe des Buttons ist aber immer gleich, in den Systemfarben.

Farbige SLE und Dialog-BG sind aber eher gewöhnungsbedürftig, oder?

Jan
Benutzeravatar
Martin Altmann
Foren-Administrator
Foren-Administrator
Beiträge: 16586
Registriert: Fr, 23. Sep 2005 4:58
Wohnort: Berlin
Hat sich bedankt: 116 Mal
Danksagung erhalten: 48 Mal
Kontaktdaten:

Beitrag von Martin Altmann »

Nur ein kleiner Hinweis am Rande:
Die Rot/Grün-Blindheit ist weiter verbreitet, als man glauben mag! Man sollte sich also nicht nur auf die Farben als Unterscheidungskriterium festlegen...

Viele Grüße,
Martin
:grommit:
Webseite mit XB2.NET und ausschließlich statischem Content in Form von HTML-Dateien: https://www.altem.de/
Webseite mit XB2.NET und ausschließlich dynamischem Content in Form von in-memory-HTML: https://meldungen.altem.de/

Mitglied der XUG Osnabrück
Vorsitzender des Deutschsprachige Xbase-Entwickler e. V.
Benutzeravatar
Jan
Marvin
Marvin
Beiträge: 14662
Registriert: Fr, 23. Sep 2005 18:23
Wohnort: 49328 Melle
Hat sich bedankt: 21 Mal
Danksagung erhalten: 88 Mal
Kontaktdaten:

Beitrag von Jan »

Martin,

stimmt. Mein Kollege war auch rot-grün-blind. Das war manchmal lustig. Wo wir doch u. a. farbige Soffe verkaufen. Da kam er manchmal an und fragte mich, welches denn jetzt rot oder grün sei. Aber meistens hat er das am Grauton unterscheiden können.

Allerdings habe ich wegen ihm auch mal einige Farben geändert, denn er konnte auf dem Monitor in der Tat manchmal den Unterschied nicht sehen. Was nicht ganz so übel war, denn es ist ja nicht nur die Schriftfarbe, die die Buttons unterscheidet, sondern auch der Text. Und lesen konnte er schon :wink: Nur der Schnellüberblick war eben etwas gehemmt.

Aber Du hast recht, vielleicht ist es in wirklich wichtigen Fällen dann besser, den Button noch zusätzlich mit einem Piktogram zu versehen. Wie der grüne OK-oder Ja-Haken bzw. das rote Nein-Kreuz. Um auch für solche Leute etwas Gutes zu tun.

Jan
Benutzeravatar
Martin Altmann
Foren-Administrator
Foren-Administrator
Beiträge: 16586
Registriert: Fr, 23. Sep 2005 4:58
Wohnort: Berlin
Hat sich bedankt: 116 Mal
Danksagung erhalten: 48 Mal
Kontaktdaten:

Beitrag von Martin Altmann »

Hallo Jan,
Jan hat geschrieben:Wie der grüne OK-oder Ja-Haken bzw. das rote Nein-Kreuz. Um auch für solche Leute etwas Gutes zu tun.
genau - aber nicht auf der korrespondierenden Hintergrundfarbe :lol: - sonst sind wir wieder bei der Ostfriesischen Nationalflagge gelandet... :D

Viele Grüße,
Martin
:grommit:
Webseite mit XB2.NET und ausschließlich statischem Content in Form von HTML-Dateien: https://www.altem.de/
Webseite mit XB2.NET und ausschließlich dynamischem Content in Form von in-memory-HTML: https://meldungen.altem.de/

Mitglied der XUG Osnabrück
Vorsitzender des Deutschsprachige Xbase-Entwickler e. V.
Gerd König
Rekursionen-Architekt
Rekursionen-Architekt
Beiträge: 193
Registriert: Fr, 09. Jun 2006 7:52
Wohnort: Nähe Sömmerda

Beitrag von Gerd König »

Hallo Jan
Farbige SLE und Dialog-BG sind aber eher gewöhnungsbedürftig, oder?
Ja, bei SLEs darf man nicht übertreiben

Meistens habe ich den Hintergrund weiß, außer bei Pflichtfeldern (hellgelb) und bei solchen die ein Datum erwarten (bei diesen klappt ein Kalender bei Doppelklick oder <Enter> auf.

Herzliche Adventsgrüße
Gerd
Antworten