Einflussfaktoren auf die wahrgenommene Ästhetik von Webseiten?

Bislang standen vor allem aus Sicht der Internetnutzer zwei Aspekte von Webseiten im Fokus: Inhalt und Usability. Neuere Untersuchungen zeigen aber, dass die Ästhetik vor allem in frühen Rezeptionsstufen eine wichtige Rolle spielt. Ästhetik ist ein sehr vielfältiger Begriff und wird häufig sehr unterschiedlich beschrieben und definiert. Ursprünglich stammt er aus dem Griechischen und bedeutet die sinnliche Wahrnehmung. Die Einflussfaktoren, die auf die ästhetische Wahrnehmung von Webseiten einen Einfluss haben können, werden in diesem Blogbeitrag fokussiert. Dies sind die Farbigkeit, die Einfachheit sowie die Symmetrie.

Farbigkeit

Webseiten nutzen oft Farben, um die Attraktivität einer Benutzungsschnittstelle zu erhöhen und ihre Wiedererkennbarkeit zu steigern und gleichzeitig auch um Wichtiges hervorzuheben sowie Zusammengehöriges erkennbar zu machen. Farben sind ein mächtiges Werkzeug für den Aufbau einer gelungenen Webseite. Die Farbumgebung eines Designs muss wohldefiniert werden, damit Inkonsistenzen und unharmonische Kombinationen nicht entstehen können. Bei Farben gilt das Prinzip less is more, weil wenig Farben, die konsistent eingesetzt werden, letztendlich zu einem besseren Endergebnis führen.

In der Praxis sollte eine Hintergrundfarbe, eine Basisfarbe, eine Textfarbe sowie eine Akzentfarbe für eine Webseite ausgewählt werden, welche niemals unabhängig voneinander sind. Die gewählten Farben müssen zusammen harmonieren, also nebeneinander gut aussehen. Einige Grundsätze sollten bei der Erstellung von Farbpaletten beachtet werden, um ein stimmiges Farbkonzept für ein ästhetisches Screendesign zu finden:

  • Eine kleine Auswahl an Farben definieren. In der Regel sind es drei bis vier Farben, die zusammenpassen und sich gut ergänzen.
  • Monochrome Varianten ergänzen, d.h. die Auswahl an Farben kann im Gestaltungsprozess bei Bedarf durch weitere Farbtöne oder Sättigungs- und Helligkeitsabstufungen ergänzt werden.
  • Nicht zu bunt machen. In der Regel neutrale Töne wie Weiß, Hell- oder Dunkelgrau auswählen.
  • Akzente mit den kräftigen Komplementärfarben setzen.
  • Ein gutes Kontrastverhältnis bei der Abstimmung von Text- und Hintergrundfarbe
  • Farbfehlsichtigkeit beachten, Vermeidung der Rot-Grün-Kombination
  • Nicht nur auf Farbe setzen. Ergänzung mit dem Effekt durch typografische Auszeichnungen wie Unterstreichung, Fettung etc.

Im Folgenden werden zwei Praxisbeispiele von Screendesigns und ihre Basis-Farbpalette dargestellt. In der Abbildung 1 werden die Basisfarbe, die Akzentfarbe sowie die Textfarbe mit Grau, Rosa und Schwarz dargestellt, damit sie sich von der Hintergrundfarbe Weiß unterscheiden. Die Akzentfarbe wird hier als Highlight eingesetzt und hat einen sehr großen Kontrast zur Hintergrundfarbe und der Basisfarbe, um die Webseite ästhetischer und aufmerksamer zu machen.

farbpalette-beispiel-1

Abbildung 1: Farbplatte-Beispiel 1, Quelle: https://www.webdesign-journal.de/farbpalette-entwerfen/

Abbildung 2 zeigt bei dem Ersteinblick eine schwarze Webseite mit einer orangenen Überschrift. Hier spielt die Basisfarbe eine große Rolle. Die Basisfarbe Schwarz bricht den Hintergrund auf und besitzt einen ausreichenden Kontrast zu der Hintergrundfarbe. Die Akzentfarbe Orange wird hier auch als Highlight-Farbe dieser Webseite festgelegt.

farbpalette-beispiel-2

Abbildung 2: Farbplatte-Beispiel 2, Quelle: https://www.webdesign-journal.de/farbpalette-entwerfen/

Einfachheit

Unser Bewusstsein kann sich immer nur auf eine von mehreren möglichen Wahrnehmungsalternativen einstellen. Deshalb können wir Sinneseindrücke nicht gleichzeitig in verschiedenen Bedeutungen sehen. Im Bewusstsein ist also nur Raum für eine einzelne Bedeutung, weswegen die Wahrnehmung so unflexibel erscheint. Dieses Limit ist so grundlegend, dass es selbst bei vergleichsweise einfachen Dingen wirkt. Das Gebot der Einfachheit lässt sich im Layout bzw. dem Gestaltungsraster von der Webseite besonders schön veranschaulichen. Das ästhetische Layout hat die Aufgabe, dass alles auf der Seite zusammen passt, gut zu erfassen ist, angenehm gegliedert, nicht gedrängt und einheitlich wirkt.

Aus dem Gesetz der Einfachheit ist eine wichtige Empfehlung für das Webseite-Design abzuleiten: Gestalte die Dinge möglichst einfach, übersichtlich und strukturiert. Dadurch erhält eine Webseite ein wahrnehmungsfreundliches und ästhetisches Design. Elemente sollten systematisch angeordnet sein. Eine klare visuelle Abgrenzung der Informationseinheiten ist sinnvoll. Außerdem sollte insgesamt eine nicht zu hohe Anzahl von Informationseinheiten präsentiert werden. Ein Layout, das diesen Kriterien entspricht, wird von den Nutzern als übersichtlich und auch als ästhetisch ansprechend beurteilt. Unausgewogene Designs können somit zu einer zusätzlichen kognitiven Belastung führen und den Benutzer rasch ablenken.

Die nachfolgenden Abbildungen 3 und 4 zeigen zwei beispielhafte Webseiten. Bei der ersten Webseite von Lingscar handelt es sich um ein buntes, visuell komplexes und unübersichtliches Design. Bei der zweiten Webseite von Sixt um ein einfaches und sauberes Design. Die Seite von Sixt wird symmetrisch, strukturiert und als wenig visuell komplex empfunden.

lingscars

Abbildung 3: Homepage von Lingscars.com

sixt

Abbildung 4: Homepage von sixt.de

Symmetrie

Zur Erreichung der Ästhetik ist es wichtig sich die Relation der Elemente anzusehen. Speziell der Symmetrie. Sie ist ein Bestandteil des gesamten Layouts und der optischen, meist unbewussten Wahrnehmung. Bei einer Symmetrie werden Elemente in gleicher Weise auf beiden Seiten einer Achse angeordnet. Die Ausrichtung kann horizontal, vertikal oder diagonal erfolgen. Für Webseiten wird eher die horizontale Ausrichtung genutzt. Ein völlig symmetrisch orientiertes Layout wird sehr selten angetroffen, aber immer wieder Teilbereiche mit symmetrischem Aufbau. Die Symmetrie zieht die Aufmerksamkeit der Benutzer auf sich und wird auch als eine klare Gliederung von Inhalten verwendet.

Die Abbildung 5 zeigt ein Beispiel einer Webseite mit symmetrischer Ausrichtung. Wie zu sehen ist, sind die Informationseinheiten bei airbnb.de symmetrisch angeordnet. Die vier unteren Blöcke haben die gleiche Größe. Dieser Aufbau erzeugt so eine optische Wirkung – strukturiert, angenehm, übersichtlich.

 

Symmetrie

Abbildung 5: Symmetrische Webseite airbnb.de

In der Abbildung 6 wird ein Beispiel einer Webseite mit asymmetrischer Ausrichtung angezeigt. Facebook.com hat eine höhere Anzahl an Informationseinheiten, die stark in der Größe variieren und weniger symmetrisch angeordnet sind. Dadurch wirkt das Layout unübersichtlicher als das von airbnb.de.

Asymmetrie

Abbildung 6: Asymmetrische Webseite facebook.com

Fazit

Die ästhetische Wahrnehmung ist subjektiv. Ästhetik hat folglich eine besondere Bedeutung für den Ersteindruck und kann womöglich als Alleinstellungsmerkmal dienen. Die ästhetische Wirkung einer Webseite setzt sich aus mehreren Variablen zusammen. Das Konstrukt ist wahrscheinlich als mehrdimensional zu betrachten. In diesem Blogbeitrag wurden nur die Farbigkeit, die Einfachheit und die Symmetrie als Einflussfaktoren betrachtet. Zusammengefasst ist die Beurteilung einer ästhetischen Benutzeroberfläche sehr subjektiv und es gibt keine exakten Normen, wie eine perfekte Webseite gestaltet werden sollte.

Autor: Qingyao Liu

Quellen

Moser, Christian. „User experience design.“ User Experience Design. Springer, Berlin, Heidelberg, 2013. 1-22.

Moshagen, Morten, and Meinald T. Thielsch. „Facets of visual aesthetics.“ International journal of human-computer studies 68.10 (2010): 689-709

Rohles, Björn. Grundkurs gutes Webdesign: Alles, was Sie über Gestaltung im Web wissen müssen. Rheinwerk Verlag, 2017.

Tipps für farblich konsistente User Interfaces

So entwirfst du ganz einfach eine Farbpalette für deine Webseite

Prägnanz, Einfachheit und „gute Gestalt“

Advertisements