Ästhetische Bewertung von Websites

Inhaltsverzeichnis

Abbildungsverzeichnis

Tabellenverzeichnis

1 Motivation und Hintergrund

2 Website-Ästhetik – Begriffsdefinition und Abgrenzung
2.1 Ästhetik in der Philosophie und Psychologie
2.2 Ästhetik in der MMI
2.2.1 Definition und Abgrenzung
2.2.2 Die Gestaltungsmerkmale Inhalt, Usability und Ästhetik
2.2.3 Kulturelle Aspekte

3 Webdesign im Kontext der Ästhetik
3.1 Geschichtlicher Überblick und Trends im Webdesign
3.2 Gestalterische Grundlagen im Webdesign
3.2.1 Psychologische Effekte bei der Website-Wahrnehmung
3.2.2 Wahrnehmungsgesetze
3.2.3 Bilder und Grafiken
3.2.4 Layout
3.2.5 Symmetrie und Proportion
3.2.6 Typografie
3.2.7 Farbe und Kontrast
3.3 Responsive Webdesign
3.3.1 Abgrenzung zu mobilen Websites
3.3.2 Adaptive und Responsive Layouts/Websites

4 Aktueller Forschungsstand zur Website-Ästhetik
4.1 Einflussfaktor Website-Ästhetik
4.2 Erfassung visueller Ästhetik
4.2.1 Objektive Messverfahren
4.2.2 Subjektive Messverfahren

5 Untersuchung zur Website-Ästhetik auf unterschiedlichen Endgeräten
5.1 Nutzung von internetfähigen Endgeräten
5.2 Hypothesen
5.3 Variablen
5.4 Methodische Vorgehensweise
5.5 Grundgesamtheit und Probandenauswahl
5.6 Auswahl der zu bewertenden Websites
5.7 Aufbau des Fragebogens
5.8 Versuchsaufbau und Durchführung

6 Analyse der Untersuchungsergebnisse
6.1 Darstellung der Ergebnisse und Hypothesenprüfung
6.1.1 Demografische Daten
6.1.2 Überblick der erhobenen Bewertungen
6.1.3 Vergleich der Gesamtbewertung auf unterschiedlichen Endgeräten (H1)
6.1.4 Vergleich Erst- und Gesamteindruck auf unterschiedlichen Endgeräten (H2)
6.1.5 Vergleich der Ästhetikfacette „Einfachheit“ auf unterschiedlichen Endgeräten (H3)
6.1.6 Weitere statistische Erkenntnisse
6.1.7 Qualitative Auswertung ausgewählter Websites
6.2 Zusammenfassung und Interpretation

7 Fazit und Ausblick

Quellenangaben

Anhang

Abstract

- DE -

Neben Inhalt und Usability stellt die visuelle Ästhetik eine dritte wichtige Dimension bei der Wahrnehmung von Websites dar. Verschiedene Studien belegen, dass Website-Ästhetik v. a. dann zum entscheidenden Faktor wird, wenn in etablierten Märkten alle anderen Eigenschaften von Websites (z.B. Usability, Inhalt) gleichermaßen gut bzw. ähnlich ausgeprägt sind (Thielsch, 2008a, S. 36). War früher der Desktop-PC das primäre Endgerät, um Websites zu betrachten, so sind es heute zunehmend mobile Endgeräte wie z.B. Tablets oder Smartphones. Um Nutzern auf allen Endgeräten eine möglichst gute User Experience (UX) zu bieten, werden vermehrt Responsive Websites verwendet, deren Layout sich automatisch an die Größe des jeweiligen Displays anpasst. Hierbei stellt sich die Frage, inwiefern dabei der ästhetische Anspruch von Websites gewahrt werden kann. Durch eine experimentelle empirische Studie mit 60 Probanden wurde untersucht, ob und in welcher Ausprägung sich die ästhetische Anmutung von Responsive Websites auf den am meisten verbreiteten Endgeräten (Desktop-PC/Notebook, Tablet, Smartphone) hinsichtlich Ersteindruck sowie Gesamtbewertung unterscheidet. Mit Hilfe des VisAWI-Fragebogens von Moshagen & Thielsch wurden 20 Responsive Hochschulwebsites von insgesamt 60 Probanden (20 Probanden pro Endgerät) bewertet. Die Ergebnisse ergeben dabei signifikante Unterschiede zwischen den untersuchten Gruppen. Entgegen der Erwartung, dass größere Displays bessere Bewertungen erzielen, schnitt die Tablet-Version der untersuchten Websites tendenziell am schlechtesten ab. Am besten wurden die Websites auf dem Desktop-PC bewertet. Durch eine zusätzliche qualitative Untersuchung der am besten sowie am schlechtesten bewerteten Websites bzw. Website-Versionen konnten Kriterien bzw. Handlungsempfehlungen für ästhetisches Webdesign abgeleitet werden. Ein im Vergleich zum Bildanteil geringerer Textanteil sowie ausreichend Freiflächen und ein gemäßigter Einsatz von Farbe scheinen u. a. Indikatoren für eine positive Gesamtbewertung zu sein.

Stichworte: Ästhetik; Website-Ästhetik; User Experience; Responsive Design; User Interface Design

- EN -

Beside content and usability visual aesthetics represent an important factor of the perceptual organization of websites. Various studies show that website aesthetics turn out to be a decisive factor, if other characteristics of websites (e.g. usability, content) are similar or equal (Thielsch, 2008a, p. 36). Whereas in former times the desktop-PC was the primary device viewing a website, nowadays the variety of mobile devices like tablets or smartphones providing Internet access is growing. In order to provide a good user experience (UX) on all devices, website owners increased the use of so-called respsonsive websites, which adapt the layout automatically to the viewing environment. Therefore the question arises, how the aesthetic demand of a website can be preserved, when using responsive layouts. In an empirical study with 60 subjects it was examined whether and, if so, to what extent the aesthetic grace of responsive websites viewed on the most common devices (desktop-PC/notebook, tablet, smartphone) differs concerning the first impression and the overall evaluation. By using the VisAWI-questionnaire created and evaluated by Moshagen & Thielsch 20 responsive websites of German universities were evaluated by a total of 60 participants (20 participants per device). The results show significant distinctions between the studied groups. Against expectations that bigger displays imply higher ratings, tablet versions of websites tend to have lower overall evaluations. Responsive websites viewing on a desktop-PC show the best results. In order to determine reasons and recommendations for good web design an additional qualitative analysis investigated the best and the worst rated websites. It was found that a sufficiently high proportion of whitespace, a modest use of colour and a higher proportion of pictures and graphics compared to the proportion of text seem to have a positive impact to the overall evaluation of a website.

Keywords: Aesthetics; Web-Aesthetics; User Experience; Responsive Design; User Interface Design

Abbildungsverzeichnis

Abbildung 1: Einordnung des Ästhetik-Begriffs in die MMI nach Tractinsky und Lowengart (2007)

Abbildung 2: Zentrale Dimensionen bei der Website-Wahrnehmung

Abbildung 3: Ausprägungen der Website-Dimensionen bei einzelnen Rezeptionsstufen

Abbildung 4: Screenshot www.lenovo.de (19.11.15)

Abbildung 5: Screenshot www.lenovo.cn (30.10.15)

Abbildung 6: Screenshot Apple.com im Jahr 1997 und 2016

Abbildung 7: Screenshot BMW.de im Jahr 1996 und 2016

Abbildung 8: Unterschied Skeuomorphismus und Flat Design

Abbildung 9: Beispielhaftes Website-Layout auf unterschiedlichen Endgeräten

Abbildung 10: Website-Layout mit Hilfe der Drittel-Regel

Abbildung 11: Statische Website und Responsive Website der Uni Regensburg

Abbildung 12: Anteil von Desktop-PCs, Smartphones und Tablets

Abbildung 13: Ablaufdiagramm der Untersuchung

Abbildung 14: Anteil der Verwendung des Portrait- und Landscape-Modus

Abbildung 15: Geschlechterverteilung der Probanden

Abbildung 16: Boxplot-Darstellung der Wichtigkeit des Aussehens von Websites

Abbildung 17: Mittelwerte des Ersteindrucks und der Gesamtbewertung

Abbildung 18: Boxplot-Darstellung des Ersteindrucks und der Gesamtbewertung

Abbildung 19: Vergleich der Ausprägungen der vier Ästhetikfacetten auf den drei Endgeräten

Abbildung 20: Boxplot-Darstellung der Ästhetikfacette Einfachheit auf den drei Endgeräten

Abbildung 21: Gesamtbewertungen (Desktop-PC) in Abhängigkeit zur Wichtigkeit des Aussehens

Abbildung 22: Website 01: Duale Hochschule BW (Stuttgart) – Ø 5,31

Abbildung 23: Website 16: Universität Regensburg – Ø 5,15

Abbildung 24: Website 06: Hochschule Darmstadt – Ø 3,33

Abbildung 25: Website 09: Technische Universität Dortmund – Ø 2,70

Tabellenverzeichnis

Tabelle 1: Klassische und Expressive Ästhetik nach Lavie & Tractinsky 2004

Tabelle 2: Items des VisAWI nach Moshagen & Thielsch 2010

Tabelle 3: Übersicht Störvariablen

Tabelle 4: Für die Untersuchung herangezogenen Responsive Websites

Tabelle 5: Zusammenfassung der Bewertungen auf den drei Endgeräten (VisAWI-Items, Ersteindruck)

Tabelle 6: Zusammenfassung der Bewertungen auf den drei Endgeräten (Ästhetikfacetten)

Tabelle 7: Prüfung der Gesamtbewertungen auf Normalverteilung mit Kolmogorov-Smirnov-Test

Tabelle 8: Prüfung der Gesamtbewertungen auf Signifikanz mit Mann-Whitney-U-Test

Tabelle 9: Prüfung H2 durch lineare Regressionsanalysen

Tabelle 10: Mittelwerte und SD der Differenz zwischen Ersteindruck und Gesamtbewertung

Tabelle 11: Prüfung der Differenz zwischen Ersteindruck und Gesamtbewertung auf Signifikanz

Tabelle 12: Mittelwerte und Standardabweichung der Ästhetikfacette Einfachheit

Tabelle 13: Prüfung der Ästhetikfacette Einfachheit auf Signifikanz

Tabelle 14: Vergleich der drei Gruppen zur Wichtigkeit des Aussehens von Websites

Tabelle 15: Gesamtbewertung der Websites, abhängig ob Websites bereits bekannt war oder nicht

Tabelle 16: Qualitativ untersuchte Gestaltungsmerkmale und deren möglichen Ausprägungen

Tabelle 17: Zusammenfassung der Bewertungen der einzelnen Website-Versionen

Tabelle 18: Website 01: Duale Hochschule BW (Stuttgart) – Ø 5,31

Tabelle 19: Website 16: Universität Regensburg – Ø 5,15

Tabelle 20: Website 06: Hochschule Darmstadt – Ø 3,33

Tabelle 21: Website 09: Technische Universität Dortmund – Ø 2,70

1 Motivation und Hintergrund

„Es ist das Gesetz aller organischen und anorganischen, aller physischen und metaphysischen, aller menschlichen und übermenschlichen Dinge, aller echten Manifestationen des Kopfes, des Herzens und der Seele, dass das Leben in seinem

Ausdruck erkennbar ist, dass die Form immer der Funktion folgt. Das ist Gesetz“ ^[1]

Diese Aussage des US-amerikanischen Architekten Louis Sullivan aus dem Jahr 1896 gilt in seiner Kurzfassung „Form follows function“ als einer der bedeutendsten Designleitsätze unserer Zeit. Gemeint ist, dass sich die äußere Form eines Gegenstands ausschließlich aus seiner Funktion ableiten soll. Die Architektur des Bauhauses verstand in diesem Leitsatz die Abkehr von jeglicher Art an Ornamenten und Ausschmückungen, was nach Sullivans Aussage jedoch eine Fehlinterpretation darstellt. Als Funktion wird demnach nicht ausschließlich die praktische sondern auch die ästhetische Funktion zugeschrieben, was die Verwendung von Ornamenten nicht nur erlaubt sondern in einigen Fällen auch ausdrücklich voraussetzt. Diesen Leitsatz kann neben der Architektur oder dem Industriedesign auch auf digitale Produkte übertragen werden. Die Vermittlung von Inhalten an den Rezipienten zählt als eine der Hauptfunktionen einer Website. Eine bloße Aneinanderreihung von Textbausteinen würde im weitesten Sinne zwar diese Hauptfunktion erfüllen, jedoch liegt die Funktion einer Website auch darin, Inhalte möglichst schnell, einfach und intuitiv an den Nutzer heranzutragen. Disziplinen wie Usability und Webdesign spielen hierbei eine wichtige Rolle. Durch eine gute Gebrauchstauglichkeit finden sich Nutzer schnell zurecht und können komplexe Funktionen intuitiv bedienen. In Kombination mit ansprechendem Webdesign bzw. der ästhetischen Anmutung einer Website kann ein positives Nutzererlebnis (User Experience) erreicht werden. Websites sollen dabei nicht nur intuitiv sondern auch gerne benutzt werden. Der Aspekt der Emotion spielt hierbei eine zunehmend wichtige Rolle. Dieses positive Nutzererlebnis hat wiederrum Auswirkungen darauf, wie viele Besucher eine Website anzieht bzw. wie sie dort handeln, was sich bei gewinnorientierten Websites auch auf den finanziellen Erfolg auswirken kann. Das Designprinzip „Form follows function“ kann also auch auf digitale Produkte wie z.B. Websites angewendet werden, da besonders in der heutigen Zeit die Funktion einer Website durchaus weiter greift als die reine Inhaltsvermittlung.

Die Frage nach der Ästhetik einer Website hat somit also durchaus seine Daseinsberechtigung, was nicht zuletzt ein weiteres Designprinzip aus der antiken Architektur verdeutlicht. Der Architekturtheoretiker Vitruv postulierte bereits im 1. Jh. v. Chr. die drei Grundprinzipien für gute Architektur, welche sich auch auf andere Designbereiche übertragen lassen: Stabilität (Firmitas), Nützlichkeit (Utilitas) und Anmut (Venustas).^[2] Dabei sind Parallelen zwischen der Architektur von Gebäuden und dem Aufbau von Software deutlich erkennbar. Software hat den Anspruch, zuverlässig, stabil und robust zu funktionieren (Firmitas). Des Weiteren soll Software möglichst effizient und effektiv bedienbar sein, um eine hohe Gebrauchstauglichkeit zu gewährleisten (Utilitas). Diese Aspekte sind bei der Softwareentwicklung essenzielle und weitestgehend etablierte Prinzipien. Im Vergleich zu den ersten beiden Designprinzipien, scheint der dritte Punkt (Anmut bzw. Venustas) jedoch ein bisher relativ wenig untersuchter Gegenstand bei der Softwareentwicklung zu sein.^[3] Dem Aspekt der äußeren Form wurde bisher eine eher untergeordnete Rolle zugeteilt, wobei nach Vitruv allen drei Designprinzipien gleichermaßen Betrachtung geschenkt werden sollte. Erst im Laufe der letzten zehn Jahre wurde der Fokus bei der Softwareentwicklung mehr und mehr auf die äußere Form gelenkt. Zahlreiche Studien untersuchten zudem die Wichtigkeit einer ästhetischen Anmutung insbesondere von Websites und Benutzeroberflächen. Der israelische Wissenschaftler Noam Tractinsky begründet dabei u. a., dass Ästhetik menschliche Grundbedürfnisse befriedigt und ästhetische Objekte dabei – unabhängig von deren Funktion – einen inneren Wert besitzen. Bezugnehmend auf Website-Ästhetik begründet er des Weiteren, dass Ästhetik dann zum entscheidenden Faktor wird, wenn in etablierten bzw. vollen Märkten alle anderen Eigenschaften eines Produkts bzw. einer Website (z.B. Inhalt, Usability etc.) vergleichbar ausgeprägt sind.^[4]

Schönheit liegt jedoch bekanntlich im Auge des Betrachters – das besagt zumindest eine volkstümliche Redewendung. Die empirische Wissenschaft sieht diese Aussage aber etwas differenzierter und geht davon aus, dass Schönheit zwar von jedem individuell wahrgenommen wird, die Schönheitsurteile aber insgesamt zumeist für eine Gruppe von Personen weitgehend übereinstimmen.^[5]

Bei der Betrachtung einer Website durch einen Nutzer lässt sich die visuelle Wahrnehmung nach Thielsch und Jaron in drei unterschiedliche Dimensionen aufschlüsseln: Inhalt, Usability und Ästhetik.^[6] Jeder Dimension muss bei der Website-Entwicklung Rechnung getragen werden. Die visuelle Wahrnehmung des Nutzers wird jedoch durch sog. Kontext- und Technikvariablen in unterschiedlicher Ausprägung beeinflusst. Dazu zählen z.B. die Art des Browsers oder die Qualität und Größe des Bildschirms. Letzterem muss besonders in der heutigen Zeit größere Beachtung geschenkt werden, da es noch nie so viele unterschiedliche Arten von Endgeräten gab, wie heute. Waren bis vor zehn Jahren noch der Desktop-PC und das Notebook das primäre Endgerät, mit denen Nutzer eine Website betrachteten, sind es heute weitaus mehr Gerätetypen. Vom Aufkommen der ersten Smartphones über die Einführung des ersten massentauglichen Tablets bis hin zu sog. Wearables – noch nie gab es so viele unterschiedliche Endgeräte, mit denen man online gehen konnte wie heute. Für Website-Betreiber bedeutete dies zwangsläufig auch, auf die neuen Techniken zu reagieren und sich anzupassen. Um langfristig wettbewerbsfähig zu bleiben, genügt es nicht mehr, eine Website im Standard-Desktop-Layout zu erstellen. Damit Nutzer die Möglichkeit haben, auch von anderen Endgeräten mit teilweise deutlich kleineren Displays auf einer Website komfortabel und schnell zu interagieren, bedarf es angepasster Layouts und Designs. Um diesen Anforderungen gerecht zu werden, verwenden immer mehr Website-Betreiber sog. Responsive Designs. Darunter versteht man ein Website-Layout, welches sich automatisch an die Größe des jeweiligen Displays anpasst.^[7] Nutzer bekommen dadurch stets eine auf ihr Endgerät zugeschnittene Website angezeigt. Immer mehr Websites setzen heute auf Responsive Designs. Hier stellt sich die Frage, inwiefern bei Websites mit Responsive Design der ästhetische Anspruch gewahrt werden kann. Ziel eines jeden Webdesigners sollte es sein, auf allen Endgeräten dem Nutzer dieselbe User Experience und damit auch dieselbe Website-Ästhetik zu bieten. Die Frage, inwieweit dies in der Realität überhaupt effektiv umsetzbar ist, soll als Grundlage für diese Arbeit dienen.

In einem einleitenden Theorieteil soll zunächst der Begriff der Website-Ästhetik definiert und eingegrenzt werden. Daraufhin werden Grundlagen zum Webdesign im Kontext der Ästhetik vermittelt und aktuelle Forschungsergebnisse thematisiert. Anschließend soll erörtert werden, wie Website-Ästhetik messbar gemacht werden kann und welche unterschiedlichen Verfahren dabei angewendet werden können. In einer experimentellen empirischen Studie wird für einen, inhaltlich vergleichbaren Themenbereich untersucht, ob und in welcher Ausprägung sich die ästhetische Anmutung von Websites, insbesondere solche mit Responsive Design, auf unterschiedlichen Endgeräten unterscheidet. Dabei wird der Fokus auf die drei am weitesten verbreiteten Endgeräte Desktop-PC (inkl. Notebook), Tablet und Smartphone gelegt. Es soll zudem qualitativ untersucht werden, welche Kriterien für eine positive Bewertung ausschlaggebend sein könnten. Ziel dieser Arbeit ist es, Unterschiede bei der ästhetischen Bewertung von Websites auf unterschiedlichen Endgeräten zu quantifizieren und zu analysieren.

2 Website-Ästhetik – Begriffsdefinition und Abgrenzung

Der Begriff Ästhetik leitet sich in seinem Ursprung vom griechischen Wort aisthētik ḗ ab und versteht sich als „die Wissenschaft vom sinnlich Wahrnehmbaren“.^[8] Demnach fällt alles was sinnlich wahrnehmbar ist unter den Begriff des Ästhetischen: Schönheit, Hässlichkeit, Angenehmes sowie Unangenehmes. Der Brockhaus-Wahrig definiert Ästhetik als „die Lehre von den Gesetzen und Grundlagen des Schönen, besonders in der Natur und Kunst“^[9] und bildet damit überwiegend eine positive sinnliche Wahrnehmung ab. Diese Definition hat sich auch im allgemeinen Sprachgebrauch eingebürgert, weshalb Ästhetik oft synonym mit Schönheit verwendet wird.

Im Folgenden soll der Begriff „Ästhetik“ in die verschiedenen Disziplinen eingeordnet und im für diese Arbeit relevanten Kontext der Mensch-Maschine-Interaktion (MMI) eingegrenzt und näher untersucht werden.

2.1 Ästhetik in der Philosophie und Psychologie

Um den Begriff des Ästhetischen genauer zu verstehen und abzugrenzen, muss dieser zunächst in den jeweiligen Disziplinen, in denen er diskutiert wird, eingeordnet werden. Besonders in der Philosophie und Psychologie ist Ästhetik zentraler Gegenstand der Forschung und soll daher im Folgenden kurz erläutert werden.

Der Philosoph Alexander Gottlieb Baumgarten begründete mit seinem Werk „Aesthetica“ aus den Jahren 1750 bis 1758 Ästhetik als eigenständige philosophische Disziplin und definierte darin den Begriff als die „Wissenschaft von der sinnlichen Erkenntnis“. Zwar wird Baumgarten als Begründer der philosophischen Ästhetik bezeichnet, jedoch ist bekannt, dass bereits in der frühen Antike über den Begriff der Ästhetik nachgedacht wurde.^[10] Baumgarten unterscheidet in seinem Werk zwischen angeborener und erworbener Ästhetik, wobei sich das Angeborene wiederum in ein unteres (sinnliches) und oberes (logisches) Erkenntnisvermögen unterteilt. Als unteres Erkenntnisvermögen bezeichnet er u. a. Sinneswahrnehmungen, Phantasievermögen und die Veranlagung zum guten Geschmack wohingegen das obere Erkenntnisvermögen Verstand, Vernunft sowie Abstraktionsvermögen umfasst. Dabei bilde das obere stets das untere Erkenntnisvermögen aus. Des Weiteren behauptet Baumgarten, dass die ungeordneten Sinneseindrücke durch die Ästhetik zur Wahrheit werden würden und erst die Vervollkommnung der sinnlichen Erkenntnis Schönheit wäre. Bleibt die sinnliche Erkenntnis hingegen unvollkommen, so handle es sich um Hässlichkeit.^[11] Modernere Definitionen beschreiben (philosophische) Ästhetik weitaus allgemeiner: „Ästhetik ist die Theorie der ästhetischen Erfahrung, der ästhetischen Eigenschaften und der ästhetischen Gegenstände.“^[12]

Neben der Philosophie spielt auch in der Psychologie Ästhetik eine zentrale Rolle. Sie ist neben der Psychophysik eines der ältesten Forschungsgebiete in der Psychologie. Gustav Theodor Fechner gilt als Begründer der psychologischen oder auch experimentellen Ästhetik und veröffentlichte im Jahr 1876 sein Werk „Vorschule der Ästhetik“.^[13] Hierbei beschäftigt sich Fechner weniger mit der Frage, wie sich Ästhetik in Begriffe fassen lässt, sondern viel mehr damit, warum etwas gefällt oder missfällt. Dabei beschreibt Fechner einen Ansatz von unten nach oben (induktiv) – sprich von experimentell erforschten Einzelphänomenen auf das Allgemeine schließend – und stellt damit einen Gegensatz zum philosophischen Ansatz dar, der nach Fechner von oben nach unten (deduktiv) verlaufe.^[14] Zwar gelang es ihm nicht, eine allgemeingültige Gesetzmäßigkeit zur Schönheit von Dingen ausfindig zu machen, jedoch postulierte er zahlreiche Prinzipien, welche Ursachen für Gefallen und Missfallen zu beschreiben versuchen. So tragen universelle „Grundform[en] der Schönheit“, wie z.B. der Goldene Schnitt zum positiven ästhetischen Empfinden bei.^[15]

In den späten 1960er Jahren belebte der englische Psychologe Daniel E. Berlyne das Feld der experimentellen Ästhetik neu und kritisierte die Annahme, dass Geschmack verschieden sei und die Schönheit im Auge des Betrachters liege. Demnach gibt es trotz unterschiedlicher Geschmäcker gemeinsame Faktoren und Prinzipien, die ein ästhetisches Urteil beeinflussen.^[16] Als Beispiel führte er u. a. den Aspekt der Komplexität auf. Eine mittlere Komplexität soll demnach stets ein positives ästhetisches Empfinden hervorrufen, wohingegen eine sehr geringe oder eine sehr hohe Komplexität das Gegenteilige bewirke. Auch die Vertrautheit von Dingen übe nach Berlyne maßgeblichen Einfluss auf die ästhetische Wirkung aus. Eine zunehmende Vertrautheit der Dinge führe demnach zu einem positiveren Empfinden.^[17]

In Hinblick auf die hier vorliegende Arbeit orientiert sich der Begriff der Ästhetik deutlich näher an der experimentellen bzw. psychologischen Ästhetik als etwa an der philosophischen Ästhetik. Im Kontext der Website-Ästhetik wird dabei meist der von Fechner vertretene induktive Ansatz zur Erforschung des Themenkomplexes herangezogen.

2.2 Ästhetik in der MMI

Die Definition und Verwendung des Begriffs „Ästhetik“ unterscheidet sich bei der Mensch-Maschine-Interaktion teils erheblich von denen in der Philosophie oder Psychologie. Da hier die Frage der Ästhetik im Hinblick auf die Wirkung von Websites auf den Nutzer näher betrachtet werden soll, wird im Folgenden der Begriff in die MMI eingeordnet und definiert. Außerdem werden die Gestaltungsmerkmale einer Website – Inhalt, Usability und Ästhetik – sowie kulturspezifische Aspekte genauer betrachtet.

2.2.1 Definition und Abgrenzung

Die Definition und der Gebrauch des Begriffs „Ästhetik“ im Rahmen der MMI ist grundsätzlich sehr ähnlich zum allgemeinen Sprachgebrauch. Wie eingangs erläutert, wird der Begriff hier synonym für schön bzw. Schönheit verwendet. Zwar können auch andere Sinneseindrücke, wie etwa Gerüche oder akustische Geräusche, als ästhetisch bezeichnet werden, jedoch bezieht sich Ästhetik im Kontext der MMI vorwiegend auf die visuell wahrnehmbare Ästhetik. Bei der Frage, ob sich die ästhetische Anmutung einer Website bzw. eines User Interfaces aus den objektiven Eigenschaften des Objekts ableitet oder, ob sich die Ästhetik aus der subjektiven Wahrnehmung der Betrachter ergibt, entscheiden sich Tractinsky und Lowengart für letztere Annahme. Dieses subjektive Empfinden wird wiederum durch affektive (gefühlsbetonte) und kognitive (wahrnehmbare) Prozesse bestimmt, die von verschiedenen Gestaltungseigenschaften, wie z.B. Farbe, Kontrast oder Proportion, ausgelöst werden können (vgl. Abbildung 1).^[18] Faktoren wie z.B. frühere Erfahrungen oder persönlicher Geschmack können das Urteil zudem beeinflussen.^[19]

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: Einordnung des Ästhetik-Begriffs in die MMI nach Tractinsky und Lowengart (2007)

Der Kognitionswissenschaftler Donald Norman stützt diese Annahme, indem er behauptet, dass attraktive Dinge besser funktionieren und ästhetische Urteile nicht dem Verstand folgen, sondern stets einer affektiven Reaktion unterliegen.^[20] Bezogen auf den vorliegenden Kontext der Ästhetik von Websites definiert Meinald T. Thielsch den Begriff als „das subjektiv empfundene Wohlgefallen an einer Website.“ Weiter schreibt er: „Die ästhetische Wahrnehmung einer Website zeichnet sich somit durch einen positiven emotionalen Eindruck sowie eine positive kognitive Bewertung aus. Die affektiven und kognitiven Prozesse werden durch einzelne Gestaltungsmerkmale einer Website ausgelöst.“^[21]

Im Rahmen dieser Arbeit wird die Begriffsdefinition aus der MMI verwendet und setzt damit Ästhetik und Schönheit als gleichbedeutend voraus.

2.2.2 Die Gestaltungsmerkmale Inhalt, Usability und Ästhetik

„Content is king“ – dieses Zitat stammt ursprünglich aus dem gleichnamigen Essay des Microsoft-Gründers Bill Gates aus dem Jahr 1996. Darin beschreibt Gates das Internet als zukünftigen Markplatz für Inhalte und verdeutlicht damit, wie wichtig der Inhalt für den Erfolg einer Website ist.^[22]

Dass Inhalt der maßgebliche Beweggrund ist, um eine Website zu besuchen ist nach wie vor unbestritten. Das World Wide Web (WWW) ist die wohl größte je von Menschen geschaffene Sammlung von Inhalten und umfasste im Jahr 2014 knapp eine Mrd. Websites weltweit.^[23] Um bei der Fülle an Inhalten den Überblick nicht zu verlieren und um relevante Informationen schnell und einfach zu finden und zu konsumieren, bedarf es einer zweiten wichtigen Dimension: Usability. Dabei definiert das Deutsche Institut für Normung (DIN) den Begriff als „das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen“.^[24] Ein hoher Grad an Usability zeichnet sich v. a. dadurch aus, dass die Bedienung nutzerorientiert und intuitiv verläuft. Das Ziel – also das Auffinden und Verarbeiten von Informationen – soll dabei möglichst wirkungsvoll (effektiv) und dabei gleichzeitig mit möglichst wenig Aufwand (effizient) verbunden sein. Besonders für gewinnorientierte Websites hat eine gute Usability direkte Auswirkungen auf den ROI (Return on Investment).^[25] Finden sich beispielsweise Nutzer eines Online-Shops gut zurecht und ist der Bestellprozess leicht und intuitiv gestaltet, kann dies unmittelbare Auswirkungen auf den Gesamtumsatz haben. Auch für Software-Hersteller ist ein hoher Grad an Usability unabdinglich, da sich die Support-Kosten durch eine einfache Bedienung deutlich senken lassen können.

Im Rahmen der User Experience von Websites – also dem Nutzererlebnis – reiht sich für die Gestaltung einer Website neben den beiden Dimensionen Inhalt und Usability eine weitere Dimension ein: Ästhetik. Eine Website mit hochwertigem und nützlichen Inhalt und einer intuitiven Bedienung setzt noch nicht voraus, dass diese auch gerne und oft benutzt wird. Erst wenn die beiden Dimensionen durch ein ansprechendes bzw. ästhetisches Design vervollständigt werden, kann dies zu einem positiven Gesamteindruck seitens der Nutzer führen. Tractinsky et al. erklären dieses Verhalten damit, dass schöne Dinge als nützlicher betrachtet werden: „What is beautiful is usable“.^[26] Dieses Phänomen lässt sich u. a. auf den sog. Halo-Effekt aus der Sozialpsychologie ableiten. Im Kontext der Website-Ästhetik beschreibt dieses Verhalten, dass Personen einer ästhetisch anmutenden Website automatisch eine tendenziell höhere Nützlichkeit und damit eine höhere Wertigkeit zuschreiben ohne dabei die Website genauer zu kennen. Verschiedene Publikationen machen den Halo-Effekt u. a. auch für den immensen Erfolg der Apple-Produkte in den letzten Jahren mitverantwortlich.^[27] Um einen nachhaltigen positiven Gesamteindruck zu erzeugen, sollten jedoch alle drei Dimensionen in hohem Maße ausgeprägt sein.

Thielsch fasst die Aspekte Inhalt, Usability und Ästhetik als die drei grundlegenden Dimensionen bei der visuellen Wahrnehmung von Websites zusammen. Zusätzlich beeinflussen sog. Kontext- und Technikvariablen (z.B. Displayqualität, Displaygröße, Art des Browsers, etc.) die Wahrnehmung.^[28] Abbildung 2 veranschaulicht die drei zentralen Dimensionen bei der Website-Wahrnehmung.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2: Zentrale Dimensionen bei der Website-Wahrnehmung (eigene Darstellung nach Thielsch & Jaron 2009, S.3)

Cober et al. bestätigten bereits im Jahr 2003 diese Einteilung mit Hilfe einer Studie über den Einfluss der einzelnen Dimensionen auf den Gesamteindruck von Unternehmens-Websites.^[29]

Bei der Betrachtung der drei Gestaltungsmerkmale stellt sich die Frage, inwiefern und in welcher Ausprägung eine Dimension für den Erfolg einer Website ausschlaggebend ist. Laut einer direkten subjektiven Befragung von Internetnutzern nach der Wichtigkeit der einzelnen Dimensionen, wurde der Inhalt mit ca. 50% als wichtigste Dimension genannt, gefolgt von Usability mit 28% und Ästhetik mit 19%. Die restlichen 3% fielen unter die Kategorie Sonstiges.^[30] Eine weitere Studie von Nordlight-Research untersuchte die Relevanz der einzelnen Dimensionen anhand einer experimentellen Untersuchung.^[31] Dabei wurden 300 Probanden verschiedene Websites präsentiert, auf denen sie unterschiedliche Aufgaben zu lösen hatten und so zur Interaktion mit den Websites angeregt wurden. Mit Hilfe eines Fragebogens (NRL web scan)^[32], welcher z.T. auf Normierungen von ISO 9241-110 und 13407 beruht, wurden die Websites in verschiedenen Zeitintervallen nach den Dimensionen Inhalt, Usability und Ästhetik bewertet. Der Ablauf der Untersuchung gliederte sich dabei in mehrere Rezeptionsstufen: Erfassung des ersten Eindrucks nach kurzer Darbietung der Website (Stufe 1), Erfassung der Gesamtzufriedenheit nach Durchführung der Surf-Aufgabe (Stufe 2), Erfassung der Bereitschaft für einen erneuten Besuch der Website (Stufe 3a) und Erfassung der Weiterempfehlungsbereitschaft (Stufe 3b). Durch eine Korrelationsanalyse wird deutlich, in welchem Ausmaß die einzelnen Website-Dimensionen mit den Bewertungen der Probanden auf den verschiedenen Rezeptionsstufen zusammenhängen (vgl. Abbildung 3).

Bei der ersten Stufe (Ersteindruck) hat die Dimension Ästhetik den größten Einfluss auf die Nutzerurteile gefolgt von Usability und Inhalt. Bei der Gesamtzufriedenheit bleibt der Einfluss von Ästhetik auf einem hohen Niveau. Zugleich steigt aber der Einfluss der wahrgenommenen Usability und insbesondere dem des Inhalts. Alle drei Dimensionen liegen jedoch auf einem ähnlich hohen Niveau. Bei der Weiterempfehlungsbereitschaft ist der Einfluss der Ästhetik-Dimension etwas größer ausgeprägt als bei der Bereitschaft zum erneuten Besuch, jedoch insgesamt deutlich geringer als bei den ersten beiden Rezeptionsstufen. Zusammenfassend lässt sich sagen, dass der Ästhetik-Aspekt v. a. in frühen Rezeptionsstufen (Ersteindruck) eine entscheidende Rolle spielt. In späteren Rezeptionsstufen, bei denen interaktive und kognitive Prozesse seitens der Nutzer im Vordergrund stehen, hat v. a. die Qualität der Inhalte hohen Einfluss auf die Nutzerurteile.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3: Ausprägungen der Website-Dimensionen bei einzelnen Rezeptionsstufen (eigene Darstellung nach Thielsch & Jaron 2009, S. 7)

Die aufgezeigten Beispiele und Studien zeigen, dass die Dimensionen Inhalt, Usability und Ästhetik drei wichtige Faktoren bei der Wahrnehmung von Websites darstellen. Dies verdeutlicht einmal mehr, dass neben den klassischen Wahrnehmungsmerkmalen Inhalt und Usability auch das ästhetische Erscheinungsbild eine wichtige und nicht zu vernachlässigende Stellung bei der Website-Entwicklung einnimmt. Damit deckt sich auch die einleitende Aussage von Tractinsky, dass Ästhetik dann zum entscheidenden Faktor wird, wenn in vollen Märkten andere Eigenschaften einer Website (z.B. Usability und Inhalt) gleichermaßen ausgeprägt sind.^[33]

2.2.3 Kulturelle Aspekte

Bei Untersuchungen zur ästhetischen Wahrnehmung von Dingen ist die Betrachtung von kulturellen Unterschiedenen unabdinglich. Herkunft, Religion und Muttersprache sind nur einige Faktoren, welche die Wahrnehmung beeinflussen können. Websites, die in westlichen Kulturkreisen als ästhetisch betrachtet werden, können in anderen Teilen der Welt zu ganz anderen Ergebnissen im Rahmen der ästhetischen Wahrnehmung führen. Dass Farben in vielen Kulturen teils gegensätzliche Bedeutungen haben, scheint allgemein bekannt zu sein, dass jedoch auch Faktoren wie z.B. Bild-Text-Anteil, Anzahl der verwendeten Farben, Navigationsstruktur oder Seitenlayout kulturellen Gegebenheiten unterliegen, wurde erst in den letzten Jahren intensiver untersucht. Bei der Untersuchung kultureller Unterschiede stößt man in der Literatur zwangsläufig auf Geert Hofstedes fünf bzw. sechs Kulturdimensionen, die sich auf das Verhalten und die Interaktion von Menschen innerhalb verschiedener Kulturkreise beziehen.^[34] Dass sich diese Unterschiede in einem gewissen Grad auch auf das Design von Websites übertragen lassen, stellte Tsai (2009) fest.^[35] In der Studie wurden taiwanesische und US-amerikanische Websites hinsichtlich der fünf Kulturdimensionen von Hofstede untersucht. Bei der Dimension „Maskulinität vs. Femininität“, die sich damit beschäftigt, inwieweit eine Kultur an maskulinen Werten und einer traditionellen Rollenverteilung zwischen Mann und Frau festhält und, nach Hofstede, die USA einen höheren Maskulinitäts-Index aufweist als Taiwan, kam heraus, dass die untersuchten US-amerikanische Websites deutlich mehr Männer abbilden als es bei taiwanesischen Websites der Fall ist. In Taiwan ist der Anteil an Bildern mit Frauen dagegen deutlich höher. Auch andere objektive Unterschiede zwischen den beiden Ländern ließen sich feststellen. So verwendeten taiwanesische Websites deutlich mehr Strichzeichnungen (Cartoons) und eine größere Paletten an unterschiedlichen Farben im Vergleich zu US-Websites.^[36] Andere Studien, die Hofstedes Kulturdimensionen auf das Webdesign übertrugen, kommen auf ähnliche Ergebnisse.^[37] Abbildung 4 und Abbildung 5 zeigen den kulturellen Unterschied im Kontext des Webdesigns anhand der deutschen und chinesischen Website des in China ansässigen Elektronik-Unternehmens Lenovo. Deutlich erkennbar ist dabei, dass sich das Unternehmen an das westliche Designempfinden angepasst hat. Dagegen ist festzustellen, dass westliche Unternehmen, die auch im asiatischen Markt tätig sind, sich nur selten an die kulturellen Gegebenheiten anpassen. Websites von z.B. Apple, Google, BMW oder Bayer sind lediglich inhaltlich an den jeweiligen Kulturkreis angepasst – das Webdesign ist größtenteils identisch.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 4: Screenshot www.lenovo.de (19.11.15)

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 5: Screenshot www.lenovo.cn (30.10.15)

Der kulturelle Aspekt im Rahmen der ästhetischen Bewertung von Websites stellt ein breitgefächertes Themengebiet dar und kann deshalb im Rahmen dieser Arbeit nur kurz erörtert werden. Insgesamt ist aber zu sagen, dass bei der ästhetischen Wahrnehmung von Websites kulturelle Unterschiede eine entscheidende Rolle spielen. Im Kontext der hier zugrunde liegenden Untersuchung wird jedoch nur der deutsche bzw. westliche Kulturkreis betrachtet und lässt andere kulturelle Gegebenheiten außen vor.

3 Webdesign im Kontext der Ästhetik

Im folgenden Kapitel wird das Themenfeld des Webdesigns als Schnittpunkt zwischen klassischem Mediendesign und User-Interface-Design näher betrachtet. Dabei soll zuerst ein Überblick über die Entstehung und die Entwicklung des Webdesigns aufgezeigt werden. Daraufhin werden die wichtigsten gestalterischen Grundlagen im Webdesign-Prozess untersucht. In einem weiteren Punkt wird der Begriff des Responsive Webdesigns definiert und genauer erläutert.

3.1 Geschichtlicher Überblick und Trends im Webdesign

Die Entstehung und Entwicklung des Webdesigns ist unweigerlich eng mit dem Aufkommen des World Wide Webs verbunden. Der britischen Physiker und Informatiker Tim Bernes Lee stellte im Jahr 1989 ein erstes Hypertext-Konzept vor, welches später unter dem Namen World Wide Web (kurz: WWW) bekannt wurde.^[38] Dabei blieb das Grundprinzip seither unverändert: Hypertext-Dokumente (Websites) werden mit Hilfe von Hyperlinks verknüpft und über Internet-Protokolle übertragen. Bestanden Websites in den Anfängen ausschließlich aus unformatierten Textbausteinen, so sind daraus heute multimediale und dynamische Erlebniswelten geworden. Mit den technischen Entwicklungen von Webtechnologien wuchs auch der gestalterische Anspruch von Websites. Dabei zeichneten sich in den letzten 25 Jahren verschiedene Trends im Webdesign ab, welche sich einerseits technisch und andererseits gesellschaftlich bedingt entwickelten. In den Anfängen des WWW waren es v. a. die begrenzten technischen Möglichkeiten, die ein Web design im engeren Sinne erschwerten. Langsame Übertragungsraten, Monitore mit geringer Auflösung und geringer Farbtiefe sowie fehlende Webtechnologien ermöglichten lediglich einfache Websites, welche größtenteils aus Texten, Links und Tabellen bestanden.^[39] Dabei unterstützten erste Versionen der Web-Auszeichnungssprache HTML (Hypertext Markup Language) weder verschiedene Schriftarten, noch das Einbinden von Grafiken oder Bildern. Erst im Laufe der 90er Jahre entwickelten sich verschiedene Webtechnologien wie z.B. CSS ^[40], JavaScript oder Flash, welche den Gestaltungsfreiraum von Webdesignern immens steigerten. Fortan konnten nicht nur verschiedene Schriftarten definiert und formatiert werden, sondern auch Grafiken, Bilder, Töne und Animationen platziert werden. Da sich der Beruf des Webdesigners zur damaligen Zeit noch in der Findungsphase befand, hatten viele Websites – z.T. auch von großen Konzernen – eine sehr amateurhafte Anmutung. So wurden z.B. oftmals grundlegende Gestaltungsprinzipien, wie sie im Verlagswesen seit Jahrzehnten verwendet wurden, schlichtweg missachtet, obwohl diese technisch durch den Einsatz von CSS in gewissem Maße bereits umsetzbar gewesen wären. Dies lag vermutlich auch daran, dass viele „selbsternannte“ Webdesigner zu jener Zeit aus dem eher technischen Bereich der Programmierung kamen und nicht über das nötige gestalterische Knowhow verfügten.^[41] Abbildung 6 und Abbildung 7 zeigen beispielhaft die Veränderung des Webdesigns der offiziellen Unternehmens-Websites von Apple und BMW.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 6: Screenshot Apple.com im Jahr 1997 (links) und 2016 (rechts) – (www.archive.org am 04.01.2016)

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 7: Screenshot BMW.de im Jahr 1996 (links) und 2016 (rechts) – (www.archive.org am 04.01.2016)

Mit der zunehmenden Professionalisierung und Verbreitung des Internets sowie der besseren Ausbildung aller am Erstellungsprozess beteiligten Personen und der besseren Planung und Konzeption von Websites wurde auch das Design zunehmend professioneller und nutzerorientierter.^[42] Die Dimensionen Usability und Ästhetik rückten dabei immer weiter in den Vordergrund. Mit dem Aufkommen sozialer Netzwerke und dem sog. „Mitmach-Internet“ Anfang der 2000er Jahre etablierte sich eine neue Generation im Internet: das Web 2.0. Websites waren nun nicht länger rein statische Konstrukte aus Texten und Bildern, sondern interaktive Plattformen zum Austausch von Informationen jeglicher Art. Schnellere Internetverbindungen, leistungsfähigere Computer und bessere Monitore erlaubten nun dynamische und aufwendigere Webdesigns.

Auch Fortschritte in der digitalen Bildbearbeitung ebneten den Weg zu einem moderneren Webdesign. Prägend für das Webdesign der 2000er Jahre waren neben intensiven Farben und kräftigen Farbverläufe das sog. Glossy-Design. Grafiken, Logos und Icons wurden mit Hilfe eines Glanz-Effekts auf Hochglanz poliert, um so möglichst viel Räumlichkeit zu erzeugen.^[43] Schatteneffekte und Reflexionen verstärkten zudem das Gefühl eines haptischen Erlebnisses.^[44] Auch die typografische Ausarbeitung von Schriften rückte zunehmend in den Vordergrund, um einen besseren Lesefluss und eine einfachere Lesbarkeit zu erzielen. Mit der Einführung des iPhones im Jahr 2007 läutete Apple den Trend des sog. Skeuomorphismus ein. Bei dieser Stilrichtung wird die Benutzeroberfläche möglichst realistisch nachempfunden, um dem Nutzer Vertrautheit zu vermitteln und damit eine intuitive Bedienung zu erzielen. Buttons werden dabei möglichst dreidimensional dargestellt, um dem Nutzer zu suggerieren, dass diese gedrückt bzw. geklickt werden können. Oberflächen werden zudem meist mit realistisch anmutenden Texturen in Holz-, Leder- oder Metalloptik versehen. Insgesamt sollte auf diese Weise ein digitales Abbild von analogen Gegenständen erzeugt werden.

Die Stilrichtung des Skeuomorphismus wurde im Jahr 2012 mit der Veröffentlichung von Microsoft Windows 8 nach und nach durch das sog. Flat Design verdrängt. Im Vergleich zum Skeuomorphismus setzt die Stilrichtung des Flat Designs auf geradlinigen Minimalismus ohne unnötige Verzierungen. Dabei wird auf sämtliche Haptik- und Oberflächenstrukturen verzichtet, stattdessen werden kräftige Farbflächen, serifenlose schlanke Schriftarten, reduzierte Icons und flächige Bilder verwendet. Abbildung 8 zeigt beispielhaft den Unterschied zwischen Skeuomorphismus und Flat Design.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 8: Unterschied Skeuomorphismus (links) und Flat Design (rechts) am Beispiel der Kompass-App innerhalb von Apple iOS (Bild: http://arstechnica.com/apple/2013/09/death-to-textures-ios-6-and-ios-7-compared-in-pictures/ – letzter Zugriff: 04.01.16)

Matthias Meyer von der Kommunikationsagentur Manxdesign vergleicht die Entwicklung vom Skeuomorphismus zum Flat Design mit der architektonischen Bewegung vom Historismus hin zum Bauhaus.^[45] Verfechter des Flat Designs sind der Meinung, dass Nutzer nun keine realitätsnahe Anmutung von Benutzeroberflächen mehr benötigen, da sie inzwischen gelernt haben damit umzugehen. Dennoch können bei extremen Formen des Flat Designs Usability-Einbußen auftreten. So sind z.B. Buttons in manchen Fällen nicht mehr eindeutig als solche zu erkennen, was unter Umständen zu Missverständnissen seitens der Nutzer führen kann.^[46] Dennoch lässt sich ein flächendeckender Trend hin zum minimalistischen Flat Design beobachten, sei es im Webdesign, auf anderen Software-Benutzeroberflächen oder sogar im Print-Bereich.

Fast gleichzeitig mit dem Einzug des Flat Designs kam auch die technische Weiterentwicklung von statischen Webdesigns hin zum adaptiven Responsive Design.^[47] Das Konzept und die Funktionsweise des Responsive Designs wird in Kapitel 3.3 genauer erläutert.

Zusammenfassend lässt sich sagen, dass das Webdesign einen fortlaufenden Prozess darstellt, der durch neue technische Möglichkeiten ständig weiterentwickelt wird. Designtrends liegen dabei oft aktuellen Webtechnologien sowie dem allgemeinen Zeitgeist zu Grunde. Wie die Vergangenheit gezeigt hat, sind Trends im Webdesign oft relativ kurzlebig und überschneiden bzw. vermischen sich in gewissem Maße. Dabei kann es – wie auch in anderen Branchen (z.B. in der Automobil- oder Modeindustrie) – dazu kommen, dass sich Designtrends abwechseln und wiederholen. So lässt sich bei einigen Websites, darunter besonders in der Lebensmittelbranche, ein Trend hin zum Vintage- oder Retro-Look beobachten.

3.2 Gestalterische Grundlagen im Webdesign

Das Design einer Website setzt sich aus zahlreichen unterschiedlichen Komponenten zusammen. Um ein ästhetisches Erscheinungsbild zu erzeugen, bedarf es eines umfassenden Wissens über die menschliche Wahrnehmung von Farben und Formen. In diesem Kapitel soll ein Überblick über die gestalterischen Grundlagen im Webdesign aufgezeigt werden. Dabei verlaufen Aspekte aus der Usability-Forschung sowie der Gestaltungslehre meist Hand in Hand.

3.2.1 Psychologische Effekte bei der Website-Wahrnehmung

Wie in anderen Bereichen unserer Umwelt, unterliegt auch das Betrachten von Websites bestimmten psychologischen Verhaltensmustern. Bei der Suche nach bestimmten Inhalten im WWW ist die nächste Website auf Grund der großen Auswahl meist nur einen Klick weit entfernt. Umso wichtiger ist es daher, den Nutzer innerhalb weniger Millisekunden an die Website zu binden. Anders als z.B. beim Fernsehen, wo der Nutzer linear durch ein bestimmtes Programm geführt wird und dabei wenig Entscheidungsfreiheit hinsichtlich der Abfolge besitzt, können Web-Nutzer selbst entschieden, was und in welcher Reihenfolge betrachtet wird.

Der dänische Usability-Berater Jakob Nielsen hat dazu in der Vergangenheit zahlreiche Eye-Tracking-Studien^[48] veröffentlicht, bei denen er die visuelle Wahrnehmung von Websites untersuchte. Er stellte fest, dass Nutzer beim Erstbesuch einer Website v. a. auf aussagekräftige Bilder achten, erst danach auf Textinhalte. Bilder und Grafiken, die lediglich zum Ausschmücken einer Website verwendet werden, bleiben dabei aber meist ungeachtet.^[49] Nielsen fand außerdem heraus, dass Websites lediglich überflogen werden und Nutzer meist nur kurze und prägnante Informationshäppchen aufnehmen.^[50] Auch wurde eine bestimmte Abfolge bei der Wahrnehmung herausgefunden, wonach (westliche) Nutzer eine Website im sog. F-Pattern-Prinzip visuell wahrnehmen.^[51] Das heißt, die Leserichtung beginnt oben links und wandert von da aus horizontal zum rechten Seitenrand. Anschließend wandert der Blick am linken Seitenrand vertikal nach unten und daraufhin wieder horizontal nach rechts – der Blick folgt also einem F-Muster.

Insgesamt unterliegt jede visuelle Betrachtung der sog. Selektiven Wahrnehmung. Um von der Fülle an Informationen nicht erdrückt zu werden, suchen sich Nutzer intuitiv die für sie relevanten Informationen heraus. Unwichtige Informationen werden dabei automatisch ausgeblendet, da das menschliche Gehirn nur eine begrenzte Anzahl an Informationen in einer gewissen Zeit aufnehmen und verarbeiten kann.^[52] Umso wichtiger ist es deshalb, dass grundlegende Gestaltungsprinzipien und Anordnungen auf einer Website konsistent eingehalten werden, damit die selektive Wahrnehmung möglichst schnell von Statten gehen kann und der Nutzer dabei nicht demotiviert wird und die Website vorzeitig verlässt. Der Aufbau einer Website richtet sich aber auch immer nach dem jeweiligen Zweck, den die Website erfüllen will. Nachrichten-Websites haben beispielsweise das primäre Ziel, Nutzer in kurzer Zeit über aktuelle Nachrichten zu informieren, wohingegen Online-Shops zum Verweilen einladen sollen, um dadurch möglichst viel zu verkaufen.

3.2.2 Wahrnehmungsgesetze

Aufbauend auf den in Kapitel 3.2.1 beschriebenen psychologischen Effekten bei der Wahrnehmung von Websites, gelten beim Webdesign zudem allgemeine Wahrnehmungsgesetze, welche von Max Wertheimer, dem Begründer der Gestaltpsychologie, formuliert wurden und in vielen Bereichen unserer Umwelt Anwendung finden.^[53] Im Folgenden werden die im Kontext dieser Arbeit wichtigsten Regeln diskutiert. Dabei werden in der Praxis verschiedene Wahrnehmungsgesetze immer auch in Kombination eingesetzt.

Gesetz der Nähe

Nahe beieinander liegende Elemente werden als zusammengehörig und entfernt liegende Elemente als unabhängig voneinander wahrgenommen.^[54] Dabei ist der sog. Weißraum oder auch Whitespace ein wichtiges Gestaltungsmittel um Informationen auf einer Website zu ordnen und verständlich darzustellen. Besonders auf kleineren Displays, wie z.B. bei Smartphones, wo viele Informationen auf einer geringen Fläche platziert werden, ist die Einhaltung des Gesetzes der Nähe unabdinglich. Einer Studie aus dem Jahr 2008 zu Folge beträgt der optimale Anteil zwischen Inhalt und Whitespace ca. 50%. Ist der Anteil deutlich höher oder viel niedriger, leiden darunter Usability und die ästhetische Bewertung einer Website.^[55]

Gesetz der Geschlossenheit

Menschen neigen dazu, bekannte geometrische Formen, die unvollständig sind, gedanklich zu schließen. So wird z.B. ein Kreis auch dann als solcher wahrgenommen, wenn dieser durch viele Lücken unterbrochen ist. Im Rahmen der Website-Gestaltung findet dieses Gesetz v. a. bei der Anordnung von Inhalten Anwendung. Zusammengehörige Informationen werden beispielsweise durch einen Rahmen oder farbliche Hinterlegung gruppiert. In der Praxis wird das Gesetz der Geschlossenheit oft mit dem Gesetz der Nähe kombiniert.^[56] Insgesamt kann dadurch eine Reduzierung der Komplexität erzeugt werden.

Gesetz der Ähnlichkeit

Elemente, die hinsichtlich ihrer Farbe, Form oder Größe ähnlich sind, werden als zusammengehörig wahrgenommen. Im Kontext des Webdesigns spielt die Konsistenz von Designelementen eine wichtige Rolle. Buttons sollten beispielsweise innerhalb einer Website stets dasselbe Aussehen besitzen, damit diese vom Nutzer schnell als solche erkannt werden.^[57] Aber auch das komplette Design einer Website sollte auf allen Unterseiten sowie auf unterschiedlichen Endgeräten ähnlich sein, um eine möglichst hohe Wiedererkennbarkeit zu erzielen.

Gesetz der Erfahrung

Das Wahrnehmungsvermögen des Menschen greift ständig auf bekannte Erfahrungen zurück (Selektive Wahrnehmung). Dadurch prägen sich bestimmte Formen, Zeichen oder Strukturen ein und werden bei erneuter Betrachtung unmittelbar erkannt.^[58] So sind z.B. bestimmte Icons erlernt und den meisten Menschen bekannt: ein X steht für Fenster/Programm schließen, ein um 90° nach rechts gedrehtes gleichschenkliges Dreieck steht für Play, usw. Aber auch Anordnungen innerhalb einer Website haben sich im Laufe der Jahre etabliert. Das Logo wird meistens links oben platziert, die Navigation befindet sich i.d.R. oben horizontal oder links vertikal auf der Seite. Viele der bekannten Erfahrungen lassen sich jedoch nicht ohne weiteres auf kleinere Displays adaptieren. So ist z.B. auf dem Display eines Smartphones nicht genügend Platz um eine Website analog zu einem Desktop-PC anzuordnen. Hier bedarf es neuer Ansätze und Lösungen wie z.B. dem Gebrauch von Ausklapp-Menüs oder Ähnlichem.

Gesetz der Kontinuität / Gesetz der guten Fortsetzung

Elemente, die entlang einer gedachten Linie oder Kurve angeordnet sind, werden als zusammengehörend wahrgenommen.^[59] So sollte beispielsweise eine Auflistung von Menüpunkten oder Links stets einer Linie folgen, damit sie als zusammengehörig betrachtet wird.

3.2.3 Bilder und Grafiken

Bilder und Grafiken spielen im Webdesign eine bedeutende Rolle. Wie in Kapitel 3.2.1 beschrieben, werden Bilder bei einem Website-Besuch als Erstes wahrgenommen und sind dadurch für eine positive Bewertung der Website-Ästhetik sehr wichtig. Dabei erfüllen Bilder zahlreiche Eigenschaften, welche andere Designelemente wie z.B. Texte oder Formen nur bedingt besitzen. Martin Hahn geht dabei von mehreren Eigenschaften aus, die Bilder im Allgemeinen wie auch im Webdesign erfüllen:^[60] So ist die Kommunikationsgeschwindigkeit von Bildern äußerst hoch, was daran liegt, dass Menschen binnen Bruchteilen von Sekunden Bildinhalte erfassen und einordnen können. Die Wahrnehmung von Bildern erfolgt dabei parallel und nicht wie bei Texten sequentiell. Der Inhalt eines Bildes wird dadurch meist sofort erkannt, wohingegen Texte bzw. Sätze erst zu Ende gelesen werden müssen, um den Sinn dahinter zu verstehen. Darüberhinaus ist bekannt, dass Bilder eine sehr hohe Erinnerungsrate besitzen, was v. a. in der Werbebranche gezielt eingesetzt wird. Bilder können außerdem, im Gegensatz zu Texten, in kürzester Zeit Emotionen vermitteln und hervorrufen, die zugleich von langer Dauer sein können. Auch wenn Bilder in der heutigen Zeit relativ einfach manipuliert bzw. verfälscht werden können, besitzen sie dennoch eine höhere Glaubwürdigkeit als Texte. Eine weitere Eigenschaft besteht darin, dass Bilder unabhängig von Sprache und Kultur allgemein verstanden werden. Durch diese Vielzahl an Eigenschaften ist es umso wichtiger, Bilder und Grafiken richtig auszuwählen und zu platzieren. Dabei sind Bilder für den Grad an Ästhetik-Empfinden mitverantwortlich, was wiederum für die gesamte Website-Bewertung von zentraler Bedeutung ist. Wahrnehmungsgesetze gelten dabei für den Bildaufbau ebenso wie für das restliche Design der Website. Ist die Platzierung von Bildern und Grafiken auf Websites im Desktop-Format auf Grund des großen Platzangebots relativ einfach möglich, kann es bei Website-Versionen für Smartphones oder Tablets bedeutend schwieriger sein. So kann der Inhalt als auch die Wirkung von Bildern beim Herunterskalieren – also beim Verkleinern – verloren gehen.^[61] Jedoch kann ein kompletter Verzicht von Bildern bei der Smartphone- oder Tablet-Version einer Website zu einer Minderung des ästhetischen Empfindens seitens der Nutzer führen. Eine Kombination aus Reduktion und der richtigen Platzierung von Bildern und Grafiken könnte hierbei ein guter Lösungsansatz sein. Insgesamt stellt die Ästhetik von Bildern einen eigenen Themenbereich dar, der im Rahmen dieser Arbeit deshalb nur teilweise beleuchtet werden kann.

3.2.4 Layout

Jedes Webdesign besteht aus Farben, Formen und Typografie. Die Anordnung der einzelnen Elemente wird dabei als Layout bezeichnet. War es bis vor einigen Jahren noch üblich, statische und damit starre Layouts, wie es auch im Print-Bereich der Fall ist, für Websites zu verwenden, wird heute meistens mit flexiblen Layouts (Responsive Designs) gearbeitet, die sich an die Größe des jeweiligen Endgeräts anpassen. Dabei haben sich für das Layout im Webdesign einige Gemeinsamkeiten hinsichtlich der Anordnung der einzelnen Elemente entwickelt. Damit wird im Optimalfall gewährleistet, dass sich Nutzer schneller und besser auf einer Website zurecht finden können. So besteht eine Website meistens aus einem sog. Header-Bereich, der das Logo und die Hauptnavigation umfasst, dem darunterliegenden Inhaltsbereich sowie einer Fußleiste mit weiteren Informationen wie z.B. Impressum oder Kontaktdaten.^[62] Abbildung 9 veranschaulicht einen beispielhaften Aufbau einer Website mit Responsive Design – also einem bestimmten für das jeweilige Endgerät optimiertem Layout. Dabei ist es bei der Smartphone-Ansicht üblich, einzelne Inhaltsblöcke nicht wie auf der Desktop-Version nebeneinander sondern auf Grund des geringeren Platzangebots untereinander anzuordnen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 9: Beispielhaftes Website-Layout auf unterschiedlichen Endgeräten (eigene Darstellung)

Umgangssprachlich werden die Begriffe Layout und Design oft synonym verwendet, wobei sich das Layout eher als Anordnung und Design als Gestaltung definieren lässt. Dennoch sind beide Begriffe bei der Website-Gestaltung eng miteinander verbunden.

3.2.5 Symmetrie und Proportion

Ein weiteres wichtiges Stilmittel im Webdesign sind die Faktoren Symmetrie und Proportion. Menschen empfinden gewisse Proportionen und eine symmetrische Anordnung meist als ästhetisch, was sich daraus ableiten lässt, dass viele Objekte aus der Natur diese Eigenschaften besitzen.^[63] So verfügen beispielsweise Menschen und Tiere (Anordnung der Augen, Ohren etc.) sowie Pflanzen (Anordnung der Blüten) aber auch andere Objekte wie z.B. Schneeflocken über eine bestimmte symmetrische Anordnung. Symmetrische Formen sind meist einfacher und damit weniger komplex aufgebaut und sorgen somit für Harmonie und Balance. Auch bei der Website-Gestaltung spielt Symmetrie bzw. Asymmetrie eine wichtige Rolle. Eine Studie aus dem Jahr 2010 untersuchte das ästhetische Empfinden von symmetrischen und asymmetrischen Websites.^[64] Dabei stellte sich heraus, dass Websites mit einer vertikal verlaufenden Symmetrie tendenziell besser bewertet werden als Websites, die eher rechts- bzw. linkslastig angeordnet sind. Interessanterweise wurde zudem festgestellt, dass hauptsächlich männliche Probanden negativ auf Asymmetrien reagieren, bei Frauen hingegen ist die Reaktion geringer ausgeprägt.

Dennoch können gewisse asymmetrische Proportionen auch als ästhetisch empfunden werden, so z.B. der Goldene Schnitt. Beim Goldenen Schnitt wird eine Strecke im Verhältnis 1:1,618 also 38,2% zu 61,8% unterteilt. Dieses Verhältnis kommt in zahlreichen Formen in der Natur (z.B. Schneckenhaus, Blüten etc.) vor und wird auch in der Kunst (z.B. Mona Lisa) oder in der Architektur (z.B. Pantheon, Pyramiden von Gizeh etc.) verwendet. In der Praxis des Webdesigns findet man jedoch oftmals eine vereinfachte Form des Goldenen Schnitts, die sog. Drittel-Regel, wieder. Dabei wird das Layout einer Website mit jeweils zwei Linien horizontal sowie vertikal im selben Abstand in neun gleichgroße Flächen geteilt. Die Anordnung der Website erfolgt dabei im Idealfall entlang der Linien und wichtige Elemente werden an den Schnittpunkten der Linien platziert (vgl. Abbildung 10). Dadurch soll eine harmonische Aufteilung erzielt werden.^[65]

Zusammenfassend lässt sich sagen, dass sich ein symmetrisches Design oder eine Anordnung im Sinne des Goldenen Schnitts bzw. mit Hilfe der Drittel-Regel nicht zwangsläufig positiv auf die ästhetische Bewertung einer Website auswirken muss. Dennoch sucht die menschliche Wahrnehmung intuitiv nach bekannten Mustern, wie sie auch in unserer Umwelt bzw. in der Natur vorkommen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 10: Website-Layout mit Hilfe der Drittel-Regel (Bild: www.smashingmagazine.com/2008/05/applying-divine-proportion-to-web-design/ – letzter Zugriff: 07.01.16)

3.2.6 Typografie

Mit dem Zitat „95 Prozent der Informationen im Web sind geschriebener Text“ ^[66] verdeutlicht Oliver Reichenstein von der Design-Agentur iA wie wichtig die Bedeutung und damit die Gestaltung von Text auf Websites ist. Dabei lag es v. a. an den begrenzten technischen Möglichkeiten, wieso (Web-)Typografie bis vor wenigen Jahren noch relativ wenig Aufmerksamkeit im Webdesign geschenkt wurde. So war es bis weit in die 2000er Jahre üblich, sog. Systemschriftarten zu verwenden.^[67] Diese Standard-Schriftarten wie z.B. Times New Roman oder Arial sind auf den meisten PCs vorinstalliert und können dadurch problemlos auf Websites angezeigt werden. Speziellere Schriftarten, wie z.B. eigens für Marken oder Unternehmen entworfene Hausschriften, konnten nicht ohne weiteres auf Websites eingebunden und angezeigt werden, was im Rahmen eines einheitlichen Corporate Designs von Nachteil war. Auch die Displayqualität und Auflösung von Röhrenmonitoren und frühen Flachbildschirmen ließen den Webdesignern wenig Spielraum für eine ansprechende Typografie. Erst durch die Verbreitung von hochauflösenden Displays, neuen Techniken wie z.B. Schriftenglättung sowie dem Einsatz von sog. Webfonts^[68] im Laufe der letzten Jahre, ist die Bedeutung von Typografie im Webdesign gewachsen. Zwar können im Webdesign noch nicht alle Techniken und Einstellungsmöglichkeiten, wie sie in der klassischen Print-Typografie verwendet werden, umgesetzt werden, jedoch ist der Handlungsspielraum, verglichen mit den Anfängen im WWW, immens gestiegen.

Das Hauptziel der Typografie im Web ist es, eine möglichst gute Lesbarkeit der Texte zu erzeugen.^[69] Dabei kann geschriebener Text als Teil des gesamten User Interface betrachtet werden. Typografie umfasst hierbei weitaus mehr Aspekte als die bloße Auswahl der richtigen Schriftart. Faktoren wie z.B. Schriftgröße, -farbe, -abstand, Zeilenlänge sowie die Strukturierung von Texten in Überschriften oder Absätzen sind nur einige Beispiele.^[70] Dabei hängt die richtige Gestaltung von Texten im Web auch immer vom jeweiligen Zweck ab. So können beispielsweise kurze Werbetexte durchaus in knalligen großen Buchstaben mit auffälliger Schriftart gestaltet sein, bei einem Nachrichtenartikel wäre diese Art der Gestaltung hingegen unpassend und nicht nutzerorientiert. Zwar ist die Anzeigequalität von Displays in den letzten Jahren deutlich besser geworden und hat inzwischen nahezu Druckqualität erreicht, dennoch ist bekannt, dass Menschen das Lesen von längeren Texten auf Displays als unangenehm empfinden.^[71] Wie in Kapitel 3.2.1 erwähnt, überfliegen die meisten Nutzer Texte im Web anstatt sie von oben bis unten durchzulesen. Deshalb sind eine gute Strukturierung sowie das Hervorheben von wichtigen Textpassagen durch typografische Mittel unerlässlich. Auch die Wahl der richtigen Schriftart im Web ist ein zentrales Thema in der Web-Typografie. Dabei lassen sich Schriftarten grob in zwei Kategorien einteilen: Serifen- und Serifenlose (Grotesk-) Schriftarten. Serifen sind kleine Endstriche eines Buchstabens und bilden in einer Textzeile eine imaginäre horizontale Linie, an der sich der Leser orientieren kann. Auf Grund der bis vor wenigen Jahren noch relativ niedrigen Auflösung von Displays wurden bei digitalen Texten v. a. serifenlose Schriftarten verwendet, da die feinen Details von Serifen-Lettern auf Monitoren schlechter dargestellt wurden als z.B. bei gedruckten Texten. Auch wenn moderne Displays heute durchaus in der Lage sind, Serifenschriften scharf und detailliert darzustellen, werden im Web serifenlose Schriftarten immer noch bevorzugt verwendet.^[72]

Zwar kann als Hauptziel von Typografie definitiv der Usability-Aspekt, also eine gute Lesbarkeit, angeführt werden, dennoch kann durch Typografie das ästhetische Erscheinungsbild einer Website positiv aber auch negativ beeinflusst werden. So kann ein Webdesign lediglich durch gut umgesetzte Typografie ohne Bilder oder andere Design-Elemente wirken und als ästhetisch betrachtet werden. Auch das Erscheinungsbild einer Schriftart in einem bestimmten inhaltlichen Kontext könnte Auswirkung auf die ästhetische Bewertung einer Website haben. Laut einer Studie aus dem Jahr 2009 wird beispielsweise die Serifenschrift Times New Roman als passend zu Websites mit politischem Inhalt bewertet, wohingegen die Grotesk-Schrift Candara im Bereich Mode und Lifestyle als passend empfunden wird.^[73] Dabei können diese Ergebnisse vor dem Hintergrund der persönlichen Erfahrung sowie der allgemeinen (historischen) Verwendung dieser Schriftarten in den jeweiligen Branchen verstanden werden. Auch die Überschneidung zwischen Usability- und Ästhetik-Urteilen muss dabei in Betracht bezogen werden. Eine Website mit schlecht lesbarem Text könnte beispielsweise automatisch als unästhetisch empfunden werden. So kam eine Studie mit 1400 Probanden aus dem Jahr 2008 dabei u. a. zum Schluss, dass Lesende dazu tendieren, Schriftarten als „gut lesbar“ zu empfinden, die sie „attraktiv“ finden bzw. umgekehrt.^[74]

Insgesamt lässt sich sagen, dass die Ästhetik von Typografie, ebenso wie die Ästhetik von Bildern oder Farben, ein eigenes Themenfeld darstellen. Im Rahmen dieser Arbeit ist v. a. die Wirkungsweise von Typografie zusammen mit anderen Design-Elementen, wie z.B. Bildern oder Farben, auf verschiedenen Endgeräten (Desktop-PC, Tablet, Smartphone) von zentraler Bedeutung.

3.2.7 Farbe und Kontrast

Informationen im Web werden überwiegend visuell wahrgenommen. Dabei werden Formen, Bilder, Texte etc. lediglich durch Farbunterschiede und Hell-Dunkel-Kontraste identifiziert.^[75] Farben können bestimmte Emotionen erzeugen, haben bestimmte Bedeutungen und besitzen einen gewissen Widererkennungswert. Im Kontext der Website-Ästhetik ist v. a. der farbpsychologische Aspekt – also die Farbwahrnehmung –von Bedeutung. Studien von Guilford & Smith (1959), Granger (1955) sowie Valdez & Mehrabian (1994), die die Wirkung von Farbe kontextunabhängig untersuchten, kamen dabei zu überwiegend konsistenten Ergebnissen hinsichtlich der Bevorzugung von Farbtönen.^[76] Dabei zeigte sich eine zunehmende Affinität der Nutzer zu kurzwelligen Farben. Blau, Grün und Violett wurden dabei besser bewertet als langwellige Farben wie Rot und Gelb. Aber auch Forschungsergebnisse bzgl. Farbe im Website-Kontext erzielten ähnliche Ergebnisse. Bonnardel et al. ließen dafür eine Website in verschiedenen Farbtönen subjektiv von Probanden bewerten.^[77] Dabei setzten sich die Probanden aus Webdesignern (Experten) sowie normalen Webnutzern zusammen. Insgesamt wurde Blau im Vergleich zu anderen Farben, wie Grün, Magenta, Orange oder Grau signifikant bevorzugt. Webdesigner bewerteten zudem Grau besser als es bei Webnutzern der Fall war. Insgesamt muss aber beachtet werden, dass Websites i.d.R. selten aus einer einzigen Farbe bestehen. Meistens werden Farben in Kombinationen bzw. im Kontrast mit anderen Farbtönen eingesetzt, was bei der Betrachtung der Ergebnisse der hier aufgeführten Studien miteinbezogen werden muss. Welche Farben zusammen passen hängt auch immer vom kulturellen Hintergrund sowie von individuellen Präferenzen ab. Üblicherweise leitet sich das Farbschema einer Website zudem vom allgemeinen Corporate Design bzw. Logo einer Organisation ab.

Jede Farbe löst bei der Wahrnehmung gewisse Assoziationen aus, welche oft auf allgemeinen Erfahrungen oder Trends beruhen. Dabei besitzen viele Farben oftmals positive als auch negative Assoziationen. Blau kann beispielsweise zum einen als entspannend, vertrauensvoll oder verlässlich aber ebenso als kalt, unpersönlich oder langweilig bewertet werden.^[78] Schwarz kann seriös und elegant oder düster und traurig wirken. Der richtige Farbeinsatz hängt also auch immer vom Kontext sowie vom Grad der Verwendung ab.

Ebenso wie bei der Typografie und anderen Designelementen einer Website, hängt die ästhetische Bewertung von Farbe stark mit Usability-Aspekten zusammen.^[79] Wahrnehmungsgesetze sollten hier ebenso wie gute Lesbarkeit und das Beachten von Farbsehschwächen (Rot-Grün-Sehschwäche) berücksichtigt werden. Unangenehme Farbkombinationen oder unlesbarer Text können hinsichtlich der Website-Ästhetik zu negativen Bewertungen führen.

3.3 Responsive Webdesign

„Design is not just what it looks and feels like. Design is how it works.“ ^[80] Mit diesem Satz verdeutlichte Steve Jobs die Wichtigkeit einer guten User Experience. Was nützt z.B. eine nutzerfreundliche und ästhetische Website wenn sie auf dem Smartphone derart klein dargestellt wird, dass der Nutzer nur durch ständiges hinein- und herauszoomen durch die Website navigieren kann? Mit der steigenden Anzahl an verschiedenen Endgeräten und der damit einhergehenden Varietät an unterschiedlichen Bildschirmgrößen, bedarf es neuer Herangehensweisen bei der Erstellung von Websites. Um auf allen Endgeräten eine möglichst gute User Experience zu erzeugen, schlug Ethan Marcotte im Jahr 2010 die Idee und Umsetzung von Responsive Webdesign vor.^[81] Basierend auf diesem Konzept sowie der Einführung von neuen technischen Möglichkeiten innerhalb von CSS, war es nun möglich, Designs zu erstellen, die sich automatisch an die jeweilige Bildschirmgröße eines Endgeräts anpassen. Abbildung 11 verdeutlicht den Unterschied zwischen statischem und responsivem Webdesign am Beispiel der Website der Universität Regensburg aus den Jahren 2008 und 2016.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 11: Statische Website der Uni Regensburg aus dem Jahr 2008 (oben) und Responsive Website aus dem Jahr 2016 (unten) – nicht maßstabsgetreu; eigene Darstellung mit Material aus www.archive.org.

Betrachtete man die Website früher auf einem größeren Monitor (z.B. Monitor mit 21,5“ oder 27“ Bildschirmdiagonale), wirkte die Website verloren, wohingegen sie auf dem Smartphone deutlich zu klein erschien. Texte und Links konnte nicht ohne weiteres erkannt oder geklickt werden. Angepasst durch ein Responsive Design passt sich die Website automatisch an das jeweilige Endgerät an. Auf einem großen Monitor wird der reichlich vorhandene Platz optimal genutzt, auf einem Tablet oder Smartphone sind Texte und Links gut lesbar und ein Zoomen seitens des Nutzers entfällt. Die User Experience ist also auf allen Endgeräten bzgl. der Lesbar- und Bedienbarkeit gegeben. Neben einer besseren Bedienbarkeit und der Umsetzung von maßgeschneiderten Webdesigns, muss seit Mitte 2015 auch der Aspekt der Suchmaschinenoptimierung im Rahmen von Responsive Design betrachtet werden. Google hat zum 21. April 2015 den hauseigenen Suchalgorithmus dahingehend angepasst, dass mobil-optimierte Websites in der Suchergebnisliste bevorzugt werden.^[82] Außerdem werden optimierte Websites als solche gekennzeichnet. Google begründet diesen Schritt mit der wachsenden Anzahl an mobilen Internetnutzern.

3.3.1 Abgrenzung zu mobilen Websites

Mit der Einführung des iPhones im Jahr 2007 und dem darauffolgenden Trend hin zum mobilen Internet, sahen sich Website-Betreiber gezwungen, ihre Websites auch für mobile Endgeräte anzupassen.^[83] Dabei war neben einer besseren User Experience der Aspekt der damals noch relativ langsamen mobilen Internetgeschwindigkeit ausschlaggebend für die Entwicklung von sog. mobilen Websites.^[84] Aber auch die geringere Leistung von frühen Smartphones war mitunter ein Grund für die Erstellung von schlankeren und damit schnelleren mobilen Website-Versionen. Bei einer mobilen Website handelt es sich um eine separate Website, welche speziell auf die Displaygröße eines Smartphones angepasst ist und zugleich eine geringere (Datei-)Größe besitzt, um kürzere Ladezeiten zu ermöglichen. Dazu werden meist zwei unterschiedliche Layouts bzw. Templates einer Website benötigt.^[85] Ruft ein Smartphone-Nutzer eine Website auf, wird dieser entweder automatisch auf die mobile Website umgeleitet oder durch eine Interaktionsaufforderung vorher gefragt. Für Website-Betreiber ist v. a. der meist doppelte Arbeitsaufwand bei mobilen Websites nachteilig, da zwei Layouts erstellt und gepflegt werden müssen. Zudem deckt eine mobile Website meist nur eine bestimmte Displaygröße bzw. Gerätetyp ab. Das Aufkommen von neuen mobilen Endgeräten wie z.B. Tablets, Phablets^[86], Smart-Watches oder auch der Trend zum internetfähigen Fernseher, machte den Einsatz von separaten Website-Versionen zudem schwierig. Die immer leistungsfähiger werdende Endgeräte sowie der flächendeckende Ausbau von mobilem Hochgeschwindigkeitsinternet machten den Einsatz von mobilen Websites nicht mehr zwingend erforderlich. Dennoch setzen weiterhin v. a. komplexere Websites (noch) auf den Einsatz von mobilen Websites und/oder auf native Apps.

3.3.2 Adaptive und Responsive Layouts/Websites

Müssen bei mobilen Websites meist mehrere Layouts bzw. Templates verwendet werden, benötigen Responsive Websites lediglich ein einziges Layout in dem alle Anordnungen für diverse Endgeräte enthalten sind. Je nach Größe und Auflösung des Endgeräts werden die entsprechenden Layout-Angaben aus diesem einen Template geladen. Dabei wird die Bezeichnung „Responsive Webdesign“ meist allgemein für den Einsatz von flexiblen Websites verwendet. Detailliert betrachtet muss jedoch zwischen responsiven (reaktionsfähigen) und adaptiven (anpassungsfähigen) Layouts unterschieden werden.^[87] Responsive Layouts passen sich an alle Auflösungen bzw. Displaygrößen stufenlos an. Um diese stufenlose Anpassung zu erreichen, müssen alle Größenverhältnisse (z.B. Breite von einzelnen Spalten, Größe von Bildern etc.) in Prozentangaben (relativen Größenangaben) implementiert werden. Diese Art von Umsetzung wird auch Liquides Layout genannt.^[88] Die Anordnung der Inhalte bleibt dabei stets gleich, jedoch können, je nach Bedarf, bestimmte Inhalte ein- oder ausgeblendet werden.

Bei adaptiven Layouts richtet sich die Anordnung der Inhalte an das jeweilige Endgerät bzw. an die Displaygröße (auch Viewport genannt). Webdesigner beschränken sich dabei meist auf diverse gängige Endgeräte wie z.B. iPhone, iPad und Desktop-PC. Innerhalb dieser definierten Displaygrößen bleibt das Layout stabil. Wird eine bestimmte Schwelle (Breakpoint) erreicht, springt das Layout auf die jeweilige Anordnung für größere oder kleinere Endgeräte. Eine durchgängige Anpassung an alle Auflösungen wird hier nicht erreicht – das Layout passt sich also nicht stufenlos an.^[89]

Neben den einzelnen Layout-Typen wird in der Literatur zudem zwischen verschiedenen Website-Techniken differenziert. Dabei unterschiedet man zwischen einer Responsive Website und Adaptive Website.^[90] Erstere reagiert durch ein Responsive Layout auf die Positionierung sowie das Ein- und Ausblenden von Inhalten. Dabei erfolgt diese Anpassung stets Client-seitig beim Nutzer. Alle Inhalte und Funktionen einer Website werden, unabhängig davon ob sie dem Nutzer angezeigt werden oder nicht, geladen. Eine Adaptive Website bedient sich dagegen neben einem Adaptiven Layout einer sog. Server-seitigen Anpassung. Hierbei werden nur die Funktionen und Inhalte geladen, welche der Nutzer auf dem jeweiligen Endgerät benötigt. Dies ermöglicht eine bessere Performance der Website sowie kürzere Ladezeiten.

In der Praxis gibt es die hier aufgezeigte „harte“ Unterteilung der einzelnen Techniken relativ selten. Stattdessen werden meist mehrere Techniken und Layout-Stile miteinander kombiniert.^[91] So bedienen sich viele Websites z.B. einer Kombination aus adaptiven und responsiven Layouts, gepaart mit Techniken einer Responsive Website. Alle Techniken haben jedoch gemein, dass sie eine möglichst gute User Experience auf möglichst vielen Endgeräten erzeugen wollen. Wie eingangs erwähnt, hat sich im allgemeinen Sprachgebrauch für alle hier aufgezeigten Techniken der Begriff des Responsive (Web-)Designs eingebürgert (auch RWD). Wird in dieser Arbeit von Responsive Design gesprochen, ist also die Umsetzung von flexiblen Websites als Gegensatz zu mobilen Websites gemeint.

4 Aktueller Forschungsstand zur Website-Ästhetik

In den letzten Jahren nahm das Forschungsinteresse zu Ästhetik im Rahmen der MMI stetig zu. Ein zentrales Forschungsthema stellt dabei der Einfluss von Website-Ästhetik auf andere Dimensionen wie z.B. Erst- und Gesamteindruck, Glaubwürdigkeit oder Usability dar. Des Weiteren liegt ein gesteigertes Forschungsinteresse in der Erfassung bzw. Messung von Ästhetik, wobei hier zwischen objektiven und subjektiven Messverfahren unterschieden werden kann. Im Folgenden soll ein Überblick über den aktuellen Forschungsstand im Rahmen der Website-Ästhetik bzgl. der in dieser Arbeit zugrunde liegenden Thematik verschafft werden.

[...]

---

^[1] Vgl. Paul (1963), S. 148.

^[2] Vgl. Fischer (2014), S. 56.

^[3] Vgl. Tractinsky & Hassenzahl (2005), S. 1.

^[4] Vgl. Thielsch (2008a), S. 36.

^[5] Vgl. Thielsch & Hassenzahl (2008), S. 27.

^[6] Vgl. Thielsch & Jaron (2009), S. 24.

^[7] Vgl. Marcotte (2010).

^[8] Vgl. Duden.de (2015).

^[9] Vgl. Wahrig-Burfeind (2004), S. 87.

^[10] Vgl. Sachs et al. (2009), S. 141.

^[11] Vgl. Schweizer et al. (1988), S. 2 ff. (§1 – §46).

^[12] Reicher (2005), S. 17.

^[13] Vgl. Fechner (2013).

^[14] Vgl. Kockerbeck (1997), S. 26.

^[15] Vgl. Fechner (2013), S. 184.

^[16] Vgl. Oehme (2013), S. 46.

^[17] Vgl. Bruhn et al. (2009), S. 304.

^[18] Vgl. Tractinsky & Lowengart (2007), S. 2.

^[19] Vgl. Hassenzahl (2008), S. 290.

^[20] Vgl. Norman (2002), S. 36–42.

^[21] Thielsch (2008a), S. 256.

^[22] Vgl. Gates (1996).

^[23] Vgl. Internet Live Stats (2015).

^[24] Vgl. DIN (2010), S. 7.

^[25] Vgl. Marcus (2002), S. 1.

^[26] Vgl. Tractinsky et al. (2000), S. 1.

^[27] Vgl. Rosenzweig (2014), S. 192.

^[28] Vgl. Thielsch & Jaron (2009), S. 3.

^[29] Vgl. Cober et al. (2003), S. 158.

^[30] Vgl. Thielsch & Jaron (2009), S. 4.

^[31] Vgl. ebd., S. 5 ff.

^[32] Vgl. Nordlight Research (2015).

^[33] Vgl. Thielsch (2008a), S. 36.

^[34] Vgl. Aaron & Gould (2000), S. 37.

^[35] Vgl. Tsai (2009), S. 85 ff.

^[36] Vgl. ebd., S. 67.

^[37] Vgl. Swerdlow (2015), S. 97.

^[38] Vgl. Wilde (1999), S. 13.

^[39] Vgl. W3.org (1992).

^[40] CSS (Cascading Style Sheets) ist eine Auszeichnungssprache zur Formatierung und Anpassung des Layouts für Web-Dokumente.

^[41] Vgl. InterfaceDesignTrends.de (2016).

^[42] Vgl. Hahn (2015), S. 674.

^[43] Vgl. InterfaceDesignTrends.de (2016).

^[44] Vgl. Hahn (2015), S. 675.

^[45] Vgl. Meyer (2013).

^[46] Vgl. Feige (2014).

^[47] Vgl. Marcotte (2010).

^[48] Verfahren zur Messung des Blickverhaltens durch Aufzeichnung und Auswertung der Augenbewegung.

^[49] Vgl. Nielsen (2010).

^[50] Vgl. Nielsen (1997).

^[51] Vgl. Nielsen (2006).

^[52] Vgl. Hahn (2015), S. 212.

^[53] Vgl. Niegemann (2008), S. 281.

^[54] Vgl. Heinecke (2012), S. 64.

^[55] Vgl. Coursaris & Kripintris (2012), S. 44 ff.

^[56] Vgl. Hahn (2015), S. 229.

^[57] Vgl. ebd., S. 246.

^[58] Vgl. ebd., S. 248.

^[59] Vgl. Heinecke (2012), S. 67.

^[60] Vgl. Hahn (2015), S. 532 f.

^[61] Vgl. Koprek (2014).

^[62] Vgl. Hahn (2015), S. 297 f.

^[63] Vgl. Hahn (2015), S. 230.

^[64] Vgl. Tuch et al. (2010), S. 1831 ff.

^[65] Vgl. Friedman (2008).

^[66] Reichenstein (2016).

^[67] Vgl. Typografie.info (2012).

^[68] Webfonts sind Schriftarten/Schriftsätze, die unabhängig von Browser oder Betriebssystem von externer Quelle (z.B. Web-Server) in Echtzeit in eine Website eingebunden werden. Dabei muss die jeweilige Schriftart nicht auf dem jeweiligen Endgerät installiert sein.

^[69] Vgl. Liebig (2009).

^[70] Vgl. Hahn (2015), S. 453.

^[71] Vgl. Holzinger & Sturmer (2010), S. 110.

^[72] Vgl. Martin (2009).

^[73] Vgl. Liebig (2009), S. 3.

^[74] Vgl. Liebig (2008), S. 5.

^[75] Vgl. Hahn (2015), S. 363.

^[76] Vgl. Strebe (2015), S. 63 f.

^[77] Vgl. Bonnardel et al. (2011), S. 69 ff.

^[78] Vgl. Hahn (2015), S. 400 ff.

^[79] Vgl. Bonnardel et al. (2011), S. 76.

^[80] Vgl. McKay (2013), S. 132.

^[81] Vgl. Marcotte (2010).

^[82] Vgl. Makino et al. (2015).

^[83] Vgl. Hahn (2015), S. 142.

^[84] Vgl. Kadlec (2013), S. 108.

^[85] Vgl. ebd., S. 9 ff.

^[86] Phablet: Hybridgerät aus Smartphone und Tablet.

^[87] Vgl. Zillgens (2013), S. 14.

^[88] Vgl. Kadlec (2013), S. 27.

^[89] Vgl. Hahn (2015), S. 140 f.

^[90] Vgl. Schäfer (2014).

^[91] Vgl. Jonas (2015).