Oberflächendesign
Das Oberflächendesign ist der Kommunikator für alle einer Anwendung zugrunde liegenden Konzepte und letztlich die sichtbare Form der gesamten Struktur. Es vermittelt unmittelbar durch seine Ästhetik ein erstes subjektives Empfinden (look and feel), das darüber entscheidet, ob die Website oder CD-Rom-Andwendung akzeptiert oder abgelehnt wird. Wird die Oberfläche vom Nutzer nicht angenommen, kann das gesamte Präsentationskonzept darunter leiden: Die einzelnen Konzepte werden dann nicht genügend oder sogar falsch vermittelt und können sich nicht entfalten.
Der erste Eindruck entsteht unabhängig von der Funktionalität und der objektiven Nutzerfreundlichkeit einer Anwendung. Clemens Schwender (2001) hat in einem Kapitel über ästhetische Darbietungen evolutionspsychologische Betrachtungen zur Beurteilung von ästhetischen Empfindungen dargelegt, die ich hier aufgreifen und für ein Produkterlebnis wie eine multimediale Präsentation anwenden möchte:
Das ästhetische Erlebnis ist affektiv, das heißt spontan, intuitiv und produziert ein Gefühl und eine Stimmung, die sehr tief sein können. Ein Bewusstsein darüber fehlt jedoch völlig. [1]
Akzeptanz erfolgt über Sympathie. Der Auslöser von Sympathiebekundungen ist ein Spontanerlebnis, das menschliche Schlüsselreize positiv bedient. Schlüsselreize werden über gesendete Signale angesprochen und können dann als Zeichen der Individualität einer Person oder eines Produktes erlebt werden.
Konzepte zu Informations- und Navigationsdesign sollten bereits in sich positive Auswirkungen auf Schlüsselreize berücksichtigen (z. B. Auswahl der Fotos, Textanordnung oder Stilelemente der Navigationshilfen), doch für die Gestaltung der Oberfläche ist es notwendig, diese Konzepte als Ganzheit zu präsentieren, damit ein positiver Gesamteindruck entstehen kann. Ein Produkt wird als Ganzheit wahrgenommen und ist nicht reduziert auf seine Einzelteile. Diese Erkenntnis greift zurück auf die Grundlagen der Gestaltpsychologie [2] : Demnach ist die Wahrnehmung der Welt nicht auf einzelne Elemente reduziert, sondern es wird immer eine Ganzheit wahrgenommen.
Bei einem Produkterlebnis, wie einer Website oder CD-Rom, werden Zeichen der Oberfläche wesentlich durch die Seitenaufteilung, durch Typografie, durch Farbgebung und evtl. durch Musik transportiert. Die Auszeichnung der einzelnen Elemente und ihrer Zustände wird über einen Styleguide definiert, der die Grundlage für eine durchgängige Gestaltung liefert.
Wenn es gelingt, dass alle Elemente als Ganzheit empfunden werden, kann ein Multimedia-Produkt eine kommunikative Nähe herstellen, das Interesse über Neugierde wecken und ein positives Spontanerlebnis ermöglichen.
Seitengestaltung
Merkmale der Seitengestaltung sind grundlegende Aspekte, die einzelne Objekte in ihrer Anordnung als Einheit – oder Ganzheit – erscheinen lassen können. Visuelle Elemente sind nach sachlogischen und gestalterischen Merkmalen auf der Oberfläche so zu positionieren, dass über ein visuelles Konzept die Struktur erkennbar wird.
Einheitlichkeit und Konsistenz sind die wesentlichsten Merkmale einer gelungenen Seitengestaltung. Sofern konzeptionell gewünscht wird das einheitliche Aussehen aller Seiten über ein konsequent verwendetes Gestaltungsraster sichergestellt. Dadurch wird gewährleistet, dass Haupt- und Untermenü, Bilder, überschriften und Textfelder einheitlich positioniert sind und auf Anwendungsfunktionen von identischen Bildschirmpositionen aus zugriffen werden kann.
Jede Konzeption für eine multimediale Anwendung gestaltet sich unterschiedlich. Designkonzepte müssen die Nutzergruppe ansprechen und manchmal ist es sinnvoll von einem systematischem Einsatz von Stilvorlagen abzusehen, da dadurch leider auch ein zu starres Design erzwungen wird und einer Abnutzung in der Ästhetik durch häufiges Wiederholen des gleichen Stilelementes vorgebeugt werden sollte. Es gilt vielmehr ein positives Produktgefühl zu vermitteln.
Sofern sich über eine Nutzeranalyse keine Präferenzen für ein spezifisches Design ableiten lassen, erscheint es mir sinnvoll, auf allgemeingültige Gestaltgesetze zurückzugreifen, um so eine größtmögliche Akzeptanz zu erzielen. Es entsteht eine Gestaltung durch reduziertes Design mit prägnanten, deutlich ausgezeichneten Formen. [3] Die Oberfläche sollte Wesentliches hervorheben und Raum für signifikante Elemente bieten. Dadurch kann eine einprägsame Ganzheit entstehen, die schließlich als ruhig und leicht erschließbar empfunden werden sollte.
Ein Konzept für die Darstellung von Ausgewogenheit bietet ein Layout, das sich am Goldenen Schnitt [4] orientiert. Der Goldene Schnitt entspricht einem geometrischen Aufbau, der den Proportionen der menschlichen Figur nachempfunden ist und daher besonders harmonisch wirkt. Inhaltlich zusammengehörende Elemente sollten mit einem geringen Abstand zueinander positioniert werden, dadurch werden sie gemeinsam und als zusammengehörig wahrgenommen. [5] Semantisch verbundene Sachverhalte sind nah beieinander angeordnet und können innerhalb eines Sachverhaltes zudem durch Abstufungen inhaltliche Akzente setzen.
Typografie
Die Typografie ist ein Gestaltungsmittel, das sich in das Gesamtbild der Anwendung einfügt. Ihre grafische Form lenkt die Orientierung und soll zum Lesen einladen. Stimmt der Lesefluss nicht, sinkt die Konzentration und der Leser verliert das Interesse am Text.
Das Format des Informationsträgers hat großen Einfluss auf die Wirkung der Typografie. Es ist darauf zu achten, dass die Schrifttype sich der Technik des jeweiligen Mediums anpasst, um so den Lesefluss zu unterstützen. Für längere Texte werden vorzugsweise serifenlose Grotesk-Schriften gewählt, die sich in Zeichenhöhe und Laufweite dem Pixelraster des Bildschirms anpassen. Da jedes Schriftzeichen über quadratische Pixel dargestellt wird, wirken Schriften am Monitor umso klarer, je einfacher ihre Form ist – und können dementsprechend deutlicher auf den Bildschirm übertragen werden. Serifen-Schriften wirken am Monitor oftmals verschwommen. Geräteschriftarten wie Verdana, Geneva, Arial und Helvetica weisen eine klare offene Form und einen einheitlichen Duktus auf.
Schriftgestaltungsmittel sind in Maßen einzusetzen, da zu viele Hervorhebungen einen Text unleserlich machen und die Übersichtlichkeit darunter leidet. Überschriften innerhalb verschiedener Ebenen können beispielsweise in ihrem Font variieren, um eine Unterscheidung in der Wertigkeit herzustellen.
Textblöcke im Allgemeinen werden zunächst als ein Element – als Bild oder Grafik – wahrgenommen. Je klarer die Struktur des Textes zum Ausdruck kommt, desto leichter fällt es dem Leser, sich auf das Textelement zu konzentrieren und den Inhalt besser zu erfassen. Die Zeilenlänge der Texte liegt bei maximal zwölf Wörtern. Diese anwenderfreundliche Zeilenlänge erlaubt dem Leser ein lückenloses Zeilen-Scanning.
Auch eine sichtbare und leicht verständliche Untergliederung des Textes soll bei der Orientierung helfen. Listen können daher durch Auszeichnungen gekennzeichnet und Absätze durch vertikalen Leerraum betont werden.
Farbgestaltung
Die Kommunikation durch Farben erfordert ein ausgearbeitetes Farbkonzept, welches Farbe und Zuordnung eindeutig bestimmt. Die Farbgestaltung basiert auf einem Farbkonzept, das über den Styleguide definiert wird. Durch ein Farbschema sollten wichtige Informationen markiert, Akzente gesetzt und die Suchzeit bei der Orientierung verringert werden.
Es müssen Farben für Hintergrund, Inhaltsfeld, Submenüs, Überschriften, Texte, Layoutelemente und Interaktionszustände bestimmt werden, die in einer harmonischen Wechselwirkung zueinander stehen. Ein als angenehm empfundenes Farbschema ist zu entwickeln, das sich auch der Technik des Mediums anpasst. Monitoreinstellung, Gamma, Grafikkarte, Betriebssystem und Plattform sind unbekannte Variablen, die die Farbästhetik beeinflussen können. Um eine möglichst konsistente Farbdarstellung zu erreichen, ist noch immer die Web-Palette [6] Standard.
Im Gegensatz zum Farbdruck auf Papier wird das Auge am Bildschirm umso mehr belastet, je mehr Farben gemischt werden und umso heller dadurch die Farbe wird. Die höchste Belastung entsteht durch weißes Licht am Monitor. Auch warmes Licht (Rot, Orange, Gelb) ermüdet das Auge eher als kaltes Licht (Grün, Blau, Violett). [7]
Sofern mehrere Hauptfarben verwendet werden sollten Inhalts- und Hintergrundfarbe überlegt bestimmt werden, damit der Inhalt in den Vordergrund treten und der Anwender deutlich zwischen einer Hauptfigur und dem Hintergrund unterscheiden kann. [8]
Warmen Farben wird eine hohe Aufmerksamkeit zugeschrieben, da sie durch ihre Rottöne eine Signalwirkung erzeugen. Der Effekt kann genutzt werden, um das Auge zu lenken und Wertigkeiten herauszustellen. Da das Gedächtnis nur wenige Farben gleichzeitig speichert, reichen einige wenige Farbcodes aus. Um wichtige Information zu markieren und um Akzente zu setzen, werden dann in einer Farbskala nur wenige Farbtöne benutzt. Es genügen wenige Farbinformationen, um die einzelnen Zugehörigkeiten und Zustände zu unterscheiden.
Damit der Nutzer Information leichter aufnehmen kann, kann darauf geachtet werden, dass Schrift- und Hintergrundfarbe harmonieren und den Inhalt angemessen wiedergeben. Je farbiger sich ein Text vom Hintergrund abheben würde, desto plakativer – und unwichtiger – scheint die Information zu wirken. Ein Text könnte dadurch schwerer erschlossen werden. Ein starker Kontrast sorgt für eine gute Lesbarkeit.
Musik
Die ästhetik einer multimedialen Oberfläche wird auch entscheidend von der Hintergrundmusik getragen: Musik erzeugt Emotionen und schafft Atmosphäre. Diese Wirkungsweise kann vorzugsweise bei offline-Produktionen genutzt werden, um in Verbindung mit visuellen Elementen eine Stimmung auszulösen, die den Anwender in seinem ersten Eindruck positiv bestätigt. Verschiedene Merkmale, wie Tongeschlecht oder Tempo sind Möglichkeiten, differenzierte Gefühle bei der Musikwahrnehmung zu erzeugen.
Bei Websites oder Multimedia-Anwendungen mit hohem Informationsgehalt bietet sich eine Hintergrundmusik sehr selten an: Der Anwender wäre verleitet, sich ablenken zu lassen und seine Konzentration auf den Sachverhalt würde durch die Komplexität des Musiktitels geschwächt werden. Sollte trotzdem Musik Verwendung finden, genügt zum Einleiten einer Atmosphäre oftmals eine sich wiederholende Musiksequenz, die auf Wunsch aus- bzw. eingeschaltet werden kann.
[1] Schwender, Clemens (2001): Medien und Emotionen: Evolutionspsychologische Bausteine einer Medientheorie. 1. Auflage. Wiesbaden: Deutscher Universitätsverlag. S.167.
[2] In der Berliner Schule begründete psychologische Richtung, die sich insbesondere mit dem Bereich der Wahrnehmung befasst: Wahrnehmung erfolgt durch das Erfassen von Gestalten. Wobei eine Gestalt eine Ganzheit darstellt, die andere Eigenschaften (Gestaltqualitäten) aufweist als ihre einzelnen Elemente.
[3] Begründet in der Gestaltpsychologie mit dem Gesetz der guten Gestalt: Die menschliche Wahrnehmung zeigt eine Tendenz zur guten, ausgezeichneten und deutlichen Gestalt. Diese Formen sind bekannt und werden durch ihre Symmetrie und Prägnanz als angenehm empfunden.
[4] Der Goldene Schnitt formuliert die Teilung eines Rechtecks in zwei Strecken in der Weise, dass sich die ganze Strecke zu ihrem größeren Abschnitt wie dieser zu ihrem kleineren Abschnitt verhält.
[5] Begründet in der Gestaltpsychologie mit dem Gesetz der Nähe.
[6] Anhand mathematischer Gesichtspunkte definiert die Web-Palette 216 Farben, die alle Browser auch dann richtig anzeigen, wenn der Bildschirm nur die 256 Farben der VGA-Auflösung darstellen kann.
[7] Während auf bedrucktem Papier Farben reflektiert werden, strahlen die Farben am Monitor direkt auf die Netzhaut des Auges. Im Druck werden die Farben durch Farbpigmente (subtraktive Farbmischung von Cyan, Magenta, Yellow, Black) erzeugt. Der Bildschirm stellt durch Licht die Primärfarben dar (additive Farbmischung von Rot, Grün, Blau). Je höher die Wellenlänge des Lichts ist (warme Farben), desto stärker muss der Augenmuskel scharf stellen.
[8] Begründet in der Gestaltpsychologie mit dem Gesetz von Figur und Grund : Die Besonderheit der Unterscheidung zwischen Figur und Grund ist eine entscheidende Voraussetzung für eine sichere Orientierung auf der Oberfläche.