Hallo,
dies ist mein erstes Tutorial oder Tipp.
Die Idee gab Lightsource und auch vielen Dank an kevin89
für die Denkanstöße.

Das Design von Programmen ist, neben der Zweckmäßigkeit sehr wichtig.
Der Benutzer/Kunde muss sich in dem Programm wohlfühlen, er muss schon wissen,
ohne das Handbuch zu lesen, wie einzelne Sachen funktionieren und wie man das
Programm bedient. Dieser Effekt ist sehr gut zu finden, wenn ihr ein neues Strategiespiel habt.
Man weiß sofort wie die Steuerung funktioniert. Linksklick Einheit auswählen, Rechtsklick bewegen usw...
Das selbe bei Ego/Third Shootern. Würdet ihr ein Spiel besser finden, wo ihr die Steuerung neu lernen müsst
oder ein Spiel, wo ihr euch der Steuerung schon bewusst seid?
Als Entwickler des Programmes ist es sehr schwirig, auf dies zu achten, dar man ja weiß
wo man die einzelnen Funktionen ausführt usw.
Daher solltet ihr auf folgende Kriterien achten:

• Orrientiert euch an anderen verbreiteten Programmen und übernehmt diese Steuerung/Menu/Bedinung.
  Das Gehirn lernt nämlich auf der Basis von Erfahrungen und erworbenden Fähigkeiten und passt diese an.
  
  
• Makiert wichtige Funktionen mit Farben. Schwarz für unwichtig, Rot für wichtig, blau für normal, dar das
  Gehirn Farben aus Erfahrungen vergleicht. Dies nutzt zum Beispiel auch die Tierwelt Farben. Giftige Frösche/Schlangen
  mit Warnfarben usw. So ist auch ein USK 18 rot, ein USK 12 grün und ein USK 0 weiß, dar weiß nicht herausstechend ist,
  rot dagegen schon.
  
  
• Nicht alle Bedinungen/Funktionen in ein Menu packen, sondern auch dem Gehirn Abwechslung geben, zum Beispiel
  mit Shortcuts oder kleinen Buttons die diese Funktionen schneller ausführt.
  
  
• Benutzt Bilder, da das Gehirn nicht nur an Texten und Farben heranhangeln. Benutzt ein Icon, welches auch
  zu eurer Anwendung passt. Bilder für die Hilfefunktion oder Bilder für Funktionen. Dies sieht ihr auch bei Windows.
  Jeder Ordner hat ein gleiches Zeichen, damit der User weiß, dass jede Anwendung mit diesem Icon ein Ordner ist.
  Zum Kontrast hat Windows auch ein Standart Icon für andere Anwenungen.
  
  
• Bringt bei jeden Update nicht eine neue Bedinung. Das Gehirn will ein Ergebniss sehen und nicht bei jeden Update neu
  lernen müssen, dies macht das Gehirn müde und den Benutzer gefrustet.
  
  
• Wichtige Funktionen voranstellen und nicht hinten haben. So kann eine viel benutze Funktionen,
  durch Alphabetsortierung weit nach hinten rutschen und dadurch gesucht werden und dies macht
  auch das Gehirn müde. Der User ist faul (ja ist so) und daher werden Funktionen die man suchen muss,
  unbeliebt.
  
  
• Nartürlich muss auch ein Programm übersichtlich gestalltet sein. Ohne dies fällt es dem User sehr schwer, dass
  Programm/Spiel zu verstehen. Ein gut übersichtliches Programm ist immer schöner. Stellt euch mal Gimp/Photoshop vor,
  wenn alle Effekte und Funktionen in der Toolbox wäre, dadurch wär die Toolbox sehr unübersichtlich und der User würde
  das Programm löschen.
  
  
• Ihr solltet auch die Farben einheitlich wählen. Was bringt es eine Form dunkel und die andere hell zu gestallten. Ihr müsst
  nachdenken, welches Farbschema zu eurem Programm passt. Dunkle Fraben stehen für böse. Weiß hingegen spricht für
  gut und übersichtlichkeit. Aber ihr solltet es nicht mit der Farbgebung übertreiben, knalige Fraben und neon Faben nur bei
  Anwendungen, die auch verrückt sind
  
  
• Unbekannte Person:“Less is more”
  

Das war es erstmal. Kritik oder Verbesserungen sind erwünscht.

Lg
-org


Bitte veröffentlicht diesese Tips nicht in anderen Foren, ohne meine Zustimmung.

orgertot schrieb:

Makiert wichtige Funktionen mit Farben. Schwarz für unwichtig, Rot für wichtig, blau für normal, dar das
Gehirn Farben aus Erfahrungen vergleicht.

Sicher, dass das angenehm aussieht?

orgertot schrieb:

Dunkle Fraben stehen für böse. Weiß hingegen spricht für
gut und übersichtlichkeit. Habt ihr schon bemerkt, dass die meisten und übersichtlichen Programme alle hell gestaltet sind?

Klar. Steam, PS, After Effects, Mixx, Logic, Garageband, Virtual DJ ... haben ja kaum Nutzer und sind vor allem böse (sind jetzt die, die mir so als erstes einfallen).

Auch sonst kann ich nicht alle deine Punkte nachvollziehen. Ich würde eher Punkte wie klare und nicht überladene Struktur, sinnvolle Einteilungen, dezente Farbgebung etc. nennen. Manchmal ist weniger mehr.

kevin89 schrieb:

Zitat von »orgertot«


Makiert wichtige Funktionen mit Farben. Schwarz für unwichtig, Rot für wichtig, blau für normal, dar das
Gehirn Farben aus Erfahrungen vergleicht.
Sicher, dass das angenehm aussieht?

Nein ich meine nur, dass wichtige Funktionen auch als wichtig gekennzeichnet sind zb. Skype die Icons ob jemand online ist, Windows Media Player der Playbutton usw.

kevin89 schrieb:

Zitat von »orgertot«


Dunkle Fraben stehen für böse. Weiß hingegen spricht für
gut und übersichtlichkeit. Habt ihr schon bemerkt, dass die meisten und übersichtlichen Programme alle hell gestaltet sind?
Klar. Steam, PS, After Effects, Mixx, Logic, Garageband, Virtual DJ ... haben ja kaum Nutzer und sind vor allem böse (sind jetzt die, die mir so als erstes einfallen).

Da hast du recht aber, Windows(hell), Microsoft Office (hell),Firefox (hell), Internet Explorer (hell), Anno (hell), S4(hell), Windows Explorer (hell).....
Das dunkle bezog sich auf Spiele, die einen dunklen hintergrund haben: Drak Orbit, Battle Forge, Transformers, Risen , Avatar....

kevin89 schrieb:

Auch sonst kann ich nicht alle deine Punkte nachvollziehen. Ich würde eher Punkte wie klare und nicht überladene Struktur, sinnvolle Einteilungen, dezente Farbgebung etc. nennen. Manchmal ist weniger mehr.

Wie der Titel des Themas sagt, habe ich mich hier mit Design beschäftigt. Daher fällt nicht überladene Struktur und sinnvolle Einteilung weg. Klar diese gehören eigl. auch noch zum Design, daher habe ich sie noch hinzugefügt

dezente Farbgebung?

# Ihr solltet auch die Farben einheitlich wählen. Was bringt es eine Form dunkel und die andere hell zu gestallten. Ihr müsst
nachdenken, welches Farbschema zu eurem Programm passt.

naja.... ok habe ich auch noch hinzugefügt....


danke

Schön, dass du dich dieses Themas mal angenommen hast.
Ich denke, das ist ja auch ausbaubar. Geschmäcker sind ja
bekanntlich verschieden, deshalb wäre es mühselig sich
über Designfragen, die weniger mit Zweckmäßigkeit zu tun
hätten, zu streiten.
Farben und andere Symbolik sind ein wichtiges Thema, das
bisher in Programmen eher kurz gekommen ist.

Wer sich mal näher mit Farben und ihre Bedeutung beschäftigen
möchte sollte sich das Buch von Eva Heller anschauen:
Wie Farben wirken
Rowohlt Verlag
ISBN 3 498 02885 5
(Stört euch nicht an den negativen Kritiken bei amazon
bei einem Preis von 8€ für ein gebrauchtes Buch)

In Menüs kriegen die wichtigen Funktionen bei mir Icons, die unwichtigen nicht.
Genau so handhabe ich auch Shortcuts.
In der Menüführung noch ein Tastatur-Highlighter nutzen (&) => &Speichern, Speichern &unter -> Speichern, Speichern unter.

Meine Textfarbe ist und bleibt einheitlich, zumindest Farbton. (Sättigung/ Helligkeit kann variiert werden zu hervorhebung)

Jedes (!) Fenster und die Anwendung bekommen ein eignees (!) Icon (= selbstgemacht, Meist Anwendungsicon = Hauptformularicon)

Krypton sucks
andere "Verschönerungen" auch; sie stören (mich) nur.

Hauptthema: CID -> Nicht jede Anwendung kriegt ein komplett neues Design, sondern vor allem Farben und Icons werden durchgehend Verwendet. Ebenso Shortcuts/ Menünamen.

also erstmal:

Bedinungen

"Bedienung" oder "Bedingung"?
Auch wenn ich es toll finde, wenn sich jemand die Mühe macht einen Ratschlagkatalog zu verfassen und deshalb ungerne meckere:
Aufgrund der Rechtschreibung, Grammatik und der Formatierung kommt der ganze Text derart unprofessionell rüber, dass ich ihn einfach nicht ernst nehmen kann. Hier unbedingt noch nachbessern!

Nartürlich muss auch ein Programm übersichtlich gestalltet sein.

Gilt eben auch für Text

ich hab mal erfahren das blaues licht auf den Körper wirkt so das man länger wach bleibt, also würde ich ein Programm an dem Lange Arbeitet leicht Blau färben.


mfg Ebrithil

Okay, erstmal vorab:

Das Design sollte schlicht und simple sein.
Am besten übersichtlich und überwiegend in einer Farbe.
Vermeiden sollte man, wenn ein Label z.b. als Hintegrund Grün ist und das überliegende Control Schwarz ist, gefällt einem das sofort nicht gut.
Ich persönlich steh' nicht so auf bunte programme. Die meisten anderen wahrscheinlich auch..
Denk doch mal nach, wie viele (professionelle) programme sind schon bunt? abgesehen von den wenigen.. naja.. Die von anderen Usern eben.
Ich nehme mal hier als Beispiel ein Screenshot hervor (siehe Anhang).

Sieht das wirklich -sooo- gut aus?
Sind da alle Farben vertreten oder soll ich's noch bunter machen?
Das sieht aus wie regenbogen...
Und vor allem, was daran findest du bitte toll?!

Ohne jemanden jetzt anzumeckern, Leute die Farben so direkt ändern sind einfach nur klein im Hirn.
Andere, schlaue (-wie ich?-) bemerken es und wissen was gut aussieht. Stadessen greifen diese z.b. zur Font-Änderung oder Bold, Italic etc.
Größere Schriftart (natürlich nicht übertreiben) etc.

Verstehst du in etwa was ich meine?

Ich würde eher Punkte wie klare und nicht überladene Struktur, sinnvolle Einteilungen, dezente Farbgebung etc. nennen. Manchmal ist weniger mehr.

Ich weiß gar nicht was alle immer an diesem Punkt auszusetzen haben. Guck dir mal Blender an, nur als Beispiel, oder Photoshop, Autodesk Maya, UltraEdit etc...
allesamt völlig "überladen", aber mit die besten in ihrer Klasse(Um an dieser Stelle auch dem TE zu widersprechen: Schon mal Maya 2011 ausprobiert? völlig dunkel das teil und total düster. Fidn mal was besseres als Maya..). Da pack Ich doch lieber ein paar Controls mehr auf die Forms als dass sich der User alles immer über Menüpunkte und extra-Fenster zusammensuchen muss. Und überhaupt, Ich finde es wahnsinnig spannend wenn ein Programm total unüberschaubar viele Funktionen bietet, das is immer wie ein kleines Abenteuer, gucken "was kann es noch alles", und irgendwo ganz hinten im Programm, umständlich über einige Menüpunkte und Fenster erreichbar versteckt ist vielleicht genau die Funktion dabei die man gesucht hat. Das ist doch phantastisch!!


%P%

%P% schrieb:

Und überhaupt, Ich finde es wahnsinnig spannend wenn ein Programm total unüberschaubar viele Funktionen bietet, das is immer wie ein kleines Abenteuer, gucken "was kann es noch alles", und irgendwo ganz hinten im Programm, umständlich über einige Menüpunkte und Fenster erreichbar versteckt ist vielleicht genau die Funktion dabei die man gesucht hat. Das ist doch phantastisch!!

Etwas blöder wirds dann halt, wenn man z.B. sich ein Programm ladet - man kennt sich noch nicht so gut im Programm aus - und als erstes kommt eine Form mit 100ten Steuerelementen zum Vorschein und du denkst "Hilfe". Super, jetzt heißts stundenlang in der Doku des Programms grübeln - wenns eine gibt.

Stimmt, da hast du auch wieder recht. Ich meinte halt als Beispiel ziemlich große umfangreiche komplexe Programme. Wer hat für seine Programme hier schon ein eigenes Wikibooks oder ne Dokumentation


link_275(%P%)

Man kann nur über die Nadel sprechen, denn der Haufen Heu wäre zu viel.

Was ich damit sagen will, ich
Wollte hier keine komplexe Beschreibung
Präsentieren, die 100 Seiten lang ist.

Es soll nur ein kleiner Leitfaden sein.

Bitte habt Verständnis.

Es sind hier doch aber etliche interessante Ideen aufgetaucht, die man
mit in so eine Liste einbauen könnte. Dann wird aus dem Heu vielleicht
doch noch etwas Handfestes.

orgertot schrieb:

Makiert wichtige Funktionen mit Farben. Schwarz für unwichtig, Rot für wichtig, blau für normal, dar das
Gehirn Farben aus Erfahrungen vergleicht. Dies nutzt zum Beispiel auch die Tierwelt Farben. Giftige Frösche/Schlangen
mit Warnfarben usw. So ist auch ein USK 18 rot, ein USK 12 grün und ein USK 0 weiß, dar weiß nicht herausstechend ist,
rot dagegen schon.

Ich schätze, da ist das Problem. Wenn du Verbesserungen wünschst, solltest du sie auch umsetzen.
Btw:

Rot -> Aggression, unangenehm -> NUR bei Fehlern verwenden!

Außerdem sollte man auch mal an den Kontrast denken.
Lies mal Ganzganz viel von diesem Text; auf wießem Hintergrund.
Demnach kommen HÖCHSTENS blau bzw. dunkelgrün in betracht (bei hellem Hintergrund).

Außerdem ist das einfärben von Text als blau z.B. missverständlich, da im allgemeinen Hyperlinks so gekennzeichnet sind.

Den Punkt solltest du also *als Verbesserung* rausnehmen.

@Tranceport:

Tranceport schrieb:

Aufgrund der Rechtschreibung, Grammatik und der Formatierung kommt der ganze Text derart unprofessionell rüber, dass ich ihn einfach nicht ernst nehmen kann.

Du hast da das klassische Arroganz-Problem: eingeschränkte Wahrnehmungsfähigkeit.

Mir gefällt der Thread - dabei ist mir wichtiger, dass viele Punkte angesprochen werden, als dass sie entschieden werden.
Ich zB. bin Verehrer strikten Funktional-Designs:
Also immer das nötige präsentieren, aber möglichst wenig überladen, und immer möglichst konventionell.
Auf so Abenteuer mit 200 Buttons kannichgut verzichten.
Klar gibt es hervorragende Programme, u.U. leider schlecht designed. Die können sich das leisten, weils nix anneres gibt, was ihre Funktionalität abdeckt - aber deswegen ist ihr Design immer noch kein Vorbild.

Und natürlich die Wissenschaft der Ergonomie beachten - Super-Beispiel mit dem Schrift-Kontrasten - . Übrigens, Untersuchungen zeigen: Schrift ist am besten lesbar dunkel auf hellem Hintergrund - ich sachja: dröge ist gutt .

Ein Punkt, der mir hier fehlt, ist Personalisierbarkeit: Bei einem wirklich cool gemachten Proggi bestimmt nicht der Entwickler die Farben, sondern der User selbst. Und andere Geschmacksachen auch. Vorbildlich etwa die VS-IDE, wo man sich die Fensterchen machen kann, wie man will, und Menüs, Optionen, was nicht alles.

Leider geht der Trend hin zu Klickibunti - ergonomische Gesichtspunkte werden in den Hintergrund getreten, auch bei ganz drögen Arbeit-Applicationen (Games sind natürlich was anneres - das muss ja klickibunt) - von Expression Blend zB. binnich recht entsetzt gewesen.

Ich hab Word2000 deinstalliert, letztlich weil diese bunte DauerAnimation mich von der Arbeit an den Texten ablenkt (Ergonomie: Bewegungen und Farbwechsel ziehen gradezu gewaltsam den Blick auf sich - wie kann man nur ein animiertes Anwendungs-Icon designen!)

Ergänzungen/Verbesserungen:
konigi.com/wiki/user-interface-style-guides
konigi.com/wiki/user-interface-guidelines