5 Wie Design wirkt

• Machen Inhalte verständlicher

• Verbessern die Ästhetik

• Unterstützen die Struktur von Layouts

• Sprechen die viszerale Ebene an

• Können ein starkes „Ich-will-das-haben-Gefühl“ auslösen

• Lenken bei richtiger Nutzung die Aufmerksamkeit effektiv

• Können bei unzweckmäßigem Gebrauch ablenkend und überladen wirken

Durch ihre Verbindung mit spezifischen Emotionen und Bedeutungen.

• Diese Assoziationen können kulturell und individuell geprägt sein.

  • Beispiel: wird Schwarz in vielen Kulturen mit Trauer und Macht assoziiert, während Rot oft mit Leidenschaft und Wut verbunden wird.

• Kontextuelle Hinweise und aktuelle Trends können ebenfalls die Wirkung von Farben beeinflussen.

• Farben können in verschiedenen Kontexten verwendet werden, um bestimmte Emotionen oder Botschaften zu vermitteln, wie z.B. Gelb für Fröhlichkeit oder Blau für Ruhe.

Indem es aus den Sinneseindrücken Strukturen und Ordnungsprinzipien generiert, was durch die Gestaltgesetze der Gestaltpsychologie erklärt wird. Diese

Gesetze beschreiben, wie Menschen visuelle Informationen so organisieren, dass einzelne Elemente als zusammenhängende und bedeutungsvolle Muster interpretiert werden. Zu den wesentlichen Gestaltgesetzen gehören:

• Gesetz der Nähe:

• Gesetz der Ähnlichkeit:

• Gesetz der guten Gestalt (Einfachheit):

• Gesetz der guten Fortsetzung:

• Gesetz der Geschlossenheit:

• Gesetz des gemeinsamen Schicksals:

Das Gehirn nutzt diese Prinzipien, um komplexe Bilder aus vielen einzelnen Elementen so zu organisieren, dass sie als zusammenhängendes Ganzes wahrgenommen werden. Dies erleichtert die Erkennung und Interpretation visueller Informationen.

5.1

Bilder können von Elementen ablenken, die für Benutzer wichtig sind.

5.2

Farben können bei Menschen automatische Verhaltensreaktionen auslösen.

Die Erkenntnisse der Gestaltpsychologie können herangezogen werden, um Elemente auf Webseiten zu strukturieren.

Bilder können sinnvoll eingesetzt werden, indem sie gezielt die Aufmerksamkeit lenken, Informationen vermitteln und emotional ansprechen. Hier sind einige spezifische Aspekte für den sinnvollen Einsatz von Bildern:

1. Relevanz und Kontext:

   • Bilder sollten in direktem Zusammenhang mit dem dargestellten Inhalt stehen. z.B. werden Fotos von Mitarbeitern eines Unternehmens länger betrachtet, wenn sie inhaltlich passen, während generische Stockfotos kaum beachtet werden (Nielsen, 2010).

2. Gesichter und Menschen:

   • Menschen erkennen und interpretieren Gesichter besonders gut. Bilder von Gesichtern können die Aufmerksamkeit stark lenken,

   • sollten aber in Bezug zu den dargestellten Inhalten stehen, um einen positiven Effekt zu erzielen (Kroeber-Riel/Gröppel-Klein, 2019; Nielsen, 2010).

3. Produktfotos:

   • Auf Produktseiten helfen Fotos, die Produkte voneinander zu unterscheiden, was die User Experience verbessern kann.

   • Dabei ist die Relevanz des dargestellten Inhalts wichtig;

   • z.B. wurden Fotos von Bücherregalen intensiv betrachtet, während Fernseher mit irrelevanten Inhalten kaum Beachtung fanden

4. Große Bilder:

   • Große Bilder können eine viszerale Ansprache bewirken und zum Informationsgehalt einer Seite beitragen, müssen aber sorgfältig eingesetzt werden.

   • Sie dürfen nicht von wichtigen Informationen und Funktionalitäten ablenken, besonders auf Webseiten und Apps, wo Benutzer oft gezielt nach Informationen suchen

5. Heat Maps und Eyetracking:

   • Eyetracking-Studien zeigen, dass Bilder in verschiedenen Kontexten (z.B. Werbeanzeigen, Webseiten) besonders lange betrachtet werden.

   • Heat Maps visualisieren diese Bereiche und helfen, die Platzierung von Bildern zu optimieren (Kroeber-Riel/Gröppel-Klein, 2019

Basierend auf dem Text können Farben gezielt verwendet werden, um bestimmte Reaktionen und Assoziationen bei Menschen hervorzurufen. Hier sind einige Möglichkeiten:

1. Emotionale Wirkung: Farben können bestimmte Emotionen wie Freude, Trauer, Angst oder Entspannung hervorrufen.

   • Zum Beispiel wird Rot oft mit Leidenschaft und Energie assoziiert, während Blau mit Ruhe und Vertrauen in Verbindung gebracht wird.

2. Produktgestaltung: In der Produktgestaltung können Farben genutzt werden, um die Wahrnehmung von Größe, Qualität oder Relevanz zu beeinflussen.

   • Zum Beispiel können auffällige Farben dazu führen, dass ein Produkt größer oder wichtiger erscheint.

3. Markenidentität: Unternehmen können Farben gezielt einsetzen, um eine bestimmte Markenidentität zu kommunizieren.

   • Zum Beispiel wird Grün oft von Unternehmen verwendet, die Umweltbewusstsein und Nachhaltigkeit signalisieren möchten.

4. Webdesign: Im Webdesign können Farben verwendet werden, um eine visuelle Hierarchie zu schaffen und Benutzer zu führen.

   • Zum Beispiel können wichtige Elemente auf einer Webseite mit auffälligen Farben hervorgehoben werden, um die Aufmerksamkeit der Benutzer zu lenken.

5. Navigation: Farben können auch verwendet werden, um Benutzer auf einer Webseite zu orientieren, beispielsweise durch die unterschiedliche Darstellung von bereits besuchten Links.

Chromatische Farben

Diese bezeichnen bunte Farben (z. B. Rot, Blau, Gelb etc.).

• Das Gegenteil zu chromatischen Farben sind achromatische Farben. Diese sind Schwarz, Weiß und die dazwischen- liegenden Graustufen.

Salienz

Salient bedeutet in der Psychologie „auffallend“, „ins Auge springend“.

• Visuelle Salienz bezieht sich auf die Deutlichkeit von visuellen Reizen.

Farbschema

Ein Farbschema beschreibt eine Zusam- menstellung von Farben, die miteinander harmonieren.

• Farbschemata werden häufig im Grafik- bzw. Webdesign genutzt.

Langwellige Farben

Licht breitet sich wellenförmig aus —> Menschen können Farben mit bestimmten Wellenlängen wahrnehmen.

• Rot ist eine langwellige Farbe.

Kurzwelligen Farben

Zu den kurzwelligen Farben zählen Violett und Blau.

• Zwischen den kurzwelligen Farben und Rot, der Farbe mit der größten Wellenlänge, liegen Grün, Gelb und Orange

1. Gesetz der Nähe

   • Elemente, die nahe beieinander liegen, werden als zusammengehörig wahrgenommen.

   • Beispiel: Elemente auf einer Webseite, die dicht beieinander stehen, werden als eine Gruppe erkannt.

2. Gesetz der Ähnlichkeit

   • Objekte mit ähnlichen visuellen Eigenschaften (z.B. Farbe, Form) werden eher als zusammengehörig empfunden.

   • Beispiel: Gleichfarbige Icons auf einer Benutzeroberfläche werden als Teil derselben Funktion wahrgenommen.

3. Gesetz der guten Gestalt (Einfachheit/Prägnanz)

   • Menschen bevorzugen die Wahrnehmung einfacher und prägnanter Strukturen.

   • Beispiel: Ein Logo mit klaren, einfachen Formen wird besser erinnert und erkannt.

1. Gesetz der guten Fortsetzung (Kontinuität)

   • Elemente, die auf einer durchgehenden Linie oder Kurve liegen, werden als zusammengehörig wahrgenommen.

   • Beispiel: Liniengrafiken auf Diagrammen, die eine durchgehende Tendenz anzeigen, werden als Einheit interpretiert.

2. Gesetz der Geschlossenheit

   • Geschlossene Formen werden bevorzugt wahrgenommen gegenüber offenen Strukturen.

   • Beispiel: Ein unvollständiges Kreisdiagramm wird als vollständiger Kreis wahrgenommen.

3. Gesetz des gemeinsamen Schicksals (gemeinsame Bewegung)

   • Elemente, die sich in die gleiche Richtung bewegen, werden als zusammengehörig angesehen.

   • Beispiel: Animierte Elemente auf einer Webseite, die sich synchron bewegen, werden als zusammengehörig betrachtet.

1. Gesetz der gemeinsamen Region

   • Elemente in einem abgegrenzten Gebiet werden als zusammengehörig wahrgenommen.

   • Beispiel: Menüoptionen innerhalb eines farblich abgesetzten Bereichs auf einer Webseite.

2. Gesetz der Gleichzeitigkeit

   • Gleichzeitig verändernde Elemente werden als zusammengehörig wahrgenommen.

   • Beispiel: Zwei blinkende Icons im selben Rhythmus auf einem Dashboard.

3. Gesetz der verbundenen Elemente

   • Elemente, die durch Linien verbunden sind, werden als zusammengehörig wahrgenommen.

   • Beispiel: Verbundene Datenpunkte in einem Liniendiagramm.

Zusätzlich zu den Gestaltgesetzen wird die psychologische Wirkung von Formen im Designprozess berücksichtigt. Verschiedene Formen erzeugen unterschiedliche Assoziationen:

• Vertikale Linien: assoziiert mit emporstrebend

• Horizontale Linien: assoziiert mit fallend

• Diagonale Linien: je nach Ausrichtung, steigend oder fallend

• Konkave Formen: wirken bewegt, rotierend, empfangend

• Konvexe Formen: wirken schützend

• Eckige Formen: wirken richtungsweisend, statisch, maskulin

• Runde Formen: wirken feminin

Diese Formen werden in der Praxis gezielt eingesetzt, um gewünschte Assoziationen zu wecken, wie beispielsweise im Logo-Design von Unternehmen, wo rechteckige Formen Klarheit und Struktur vermitteln oder runde Formen Weiblichkeit betonen.

1. Webseiten- und App-Design: Die Anwendung der Gestaltgesetze hilft, klar definierte Gruppen und Hierarchien zu schaffen, was die Benutzerführung verbessert.

2. Logos: Unternehmen nutzen Gestaltgesetze und Formwirkungen gezielt, um bestimmte Assoziationen zu wecken und die Wiedererkennbarkeit zu erhöhen (z.B. IBM nutzt rechteckige Formen für Klarheit, Nike verwendet eine aufsteigende Linie für Dynamik).

3. Markengestaltung: Assoziationen, die durch Formen erzeugt werden, unterstützen die Markenbotschaft (z.B. feminine runde Formen für Produkte, die an eine weibliche Zielgruppe gerichtet sind).