2.5 Bottom-up – Teil 2
2.5.1 Perzeptuelle Gliederung
Mit dem Begriff der “perzeptuellen Gliederung” ist die Unterscheidung von Figur und (Hinter-)Grund gemeint. Figuren haben eher Objekt-Charakter als der Grund. Die perzeptuelle Gliederung ist damit zwar ein Prozess, der eher der Mustererkennung als der zweiten Stufe der visuellen Wahrnehmung zuzuordnen ist. Sie bildet aber gleichzeitig die Basis für die Objekterkennung im dritten und letzten Schritt.
Eine Figur wird als vor dem Grund und in größerer Detailtiefe wahrgenommen als der Hintergrund. Dabei gibt es einige visuelle Aspekte, die die Figur-Bildung unterstützen. Alle diese Aspekte sind Tendenzen und nicht als absolut gültig aufzufassen:
So werden symmetrische oder von der Fläche her kleinere Objekte eher zur Figur. Auch eine eindeutig vertikale oder horizontale Ausrichtung oder eine vorab bestehende Bedeutung, die von der/dem Betrachtenden in den Seh-Akt gebracht wird, unterstützt die Figurbildung. Auch tendenziell nach außen gewölbte (konvexe) Formen, werden eher zur Figur als ihr konkaves Gegenstück.
Die dargestellten Beispiele illustrieren diese Punkte.
Herausheben möchte ich das Logo des BR (das inzwischen schon wieder anders gestaltet ist). In meiner Kindheit nahm ich das Logo als umgedrehtes E und umgedrehtes F wahr. Erst später wurde mir klar, dass es ich hier eigentlich um das B und R für den Bayerischen Rundfunk handelt. Ein klassischer Fall von fehlgeleiteter Figur-Grund-Differenzierung. Die geringere Größe und die scheinbare Bedeutung haben mir zur – fehlerhaften – Figur-Bildung ausgereicht. Eine kleine Umgestaltung (rechts neben dem ursprünglichen Logo) macht die Sache klarer: Jetzt setzen sich die konvexen, bedeutungshaltigen, kleineren weißen Formen durch und werden zu B und R.
2.5.2 C.R.A.P.
Für Einsteiger in den Bereich Design gibt es ein sehr empfehlenswertes Buch der Designerin Robin Williams. Es heißt “The Non-Designer’s Design Book” (Williams, 2015). Ganz abgesehen von den inhaltlichen Bezügen zu dem von uns behandelten Stoff möchte ich Ihnen dieses dünne und leicht zu lesende Buch empfehlen.
Für uns ist es aber vor allem durch seine inhaltliche Struktur interessant. Es ist in die vier Abschnitte Contrast, Repetition, Alignment, Proximity gegliedert. Williams kürzt das in dem Akronym C.R.A.P. ab.
Warum ist das für uns interessant? Weil wir inzwischen nachvollziehen könne, warum diese Aspekte der grafischen Gestaltung relevant sind.
Wenn wir gestalterisch etwas betonen oder den Unterschied zwischen zwei Dingen herausstellen möchten, sollten wir das durch Kontrasteffekte bewerkstelligen. Wie entstehen Kontraste? Das wissen wir: Durch unterschiedliche Ausprägungen visueller Merkmale. Das können unterschiedliche Größe, Farbe, Form usw. sein.
Dinge, die über ein Druckwek hinweg immer wieder dieselbe Bedeutung haben (Kapitelüberschriften, Randnotizen, Bildunterschriften, …) sollten gleich(artig) gestaltet sein. Diese Wiederholung macht zum einen das Erkennen entsprechend gestalteter Elemente immer effizienter und unterstützt top-down Suchprozesse (Stichwort Feature Level Tuning).
Werden visuelle Elemente (zum Beispiel auf einem Plakat) so platziert, dass sie mit anderen Elementen, die auch etwas entfernt sein können, eine gemeinsame – meist linke – Ausrichtung (engl. Alignment) teilen, wird dadurch ein visueller Bezug hergestellt. Wenn Textabschnitte diese gemeinsame Ausrichtung aufgeben (zum Beispiel durch Zentrieren), wird dieser Bezug aufgegeben. Das kann ganz bewusst geschehen, um auf diese Weise einen Kontrast (s. o.) herzustellen und die Passage herauszuheben.
In längeren Textpassagen ermöglicht es eine gemeinsame linke Ausrichtungskante, dass Blickbewegungen beim Zeilensprung leichter geplant werden könne, da das Auge weiß, wo es bei der nächsten Sakkade landen muss. Bei zentriertem Text ist das so nicht ohne Weiteres möglich, da die Länge der Zeilen und damit ihr Beginn variiert. Dieser ist daher auch schwerer zu lesen als linksbündiger Text.
Zu Proximity, also Nähe, müssen wir nichts mehr erklären. Damit ist das Gesetz der Nähe gemeint, das wir oben ausführlich besprochen haben. Natürlich werden auch bei gestalteten Texten, Visitenkarten, Internetseiten usw. Gruppierungen und Bezüge über Nähe hergestellt.
Versuchen wir, C.R.A.P. und möglicherweise weitere Gestaltgesetze in der APP WhatsApp zu identifizieren. Versuchen Sie es zuerst selbst. Wo finden Sie in den beiden dargestellten Screenshots Kontraste, Wiederholungen, gemeinsame Kanten, und Gruppierung durch Nähe?
Es gibt in diesen zwei Darstellungen sehr viel zu entdecken. Einige Beispiele:
- Die schwarze Kopfzeile und der dunkelgrüne Bereich darunter unterscheiden sich hinsichtlich ihrer Farbe – da sie ja auch unterschiedliche Bedeutungen haben. Genauso wie der Bereich mit weißem Hintergrund darunter. (Kontrast)
- Das Wort CHATS ist heller gesetzt als CALLS und CONTACTS daneben. Warum? Die drei sind die Überschriften von drei Unterbereichen, von denen CHATS aktiv ist. Es ist daher auch (quasi) unterstrichen. (Kontrast)
- Die Schriftart der drei Wörter ist aber dieselbe, da sie als Navigationselemente eine gleichartige Funktion haben. (Wiederholung)
- Der Kontakt “Stephan Serowy” befindet sich in einem anderen Zustand als die anderen dargestellten Kontakte: er schreibt. Das wird durch die hellgrüne Schrift des Wortes “typing” illustriert. Diese Schriftfarbe taucht ansonsten nicht auf. (Kontrast)
- Der rechte Screenshot zeigt die Unterhaltung mit Stephan. Wie wird der Unterschied zwischen Stephan und der Person, der das Smartphone gehört, dargestellt? Beispielsweise durch zwei unterschiedliche Farbtöne – weiß und hellgrün. Zudem durch unterschiedliche Ausrichtung: linksbündig für die eine, rechtsbündig für die andere Person. Alle Nachrichten einer Person haben dieselbe Farbe. (Kontrast, Wiederholung, Ähnlichkeit, Ausrichtung)
- Wenn eine Person mehrere Nachrichten hintereinander schreibt, ist deren Abstand voneinander kleiner als der Abstand zwischen weißen und grünen Nachrichten. (Nähe)
Auf den beiden folgenden Folien sollten Sie selbständig versuchen, C.R.A.P. und Gestaltgesetze zu erkennen:
2.5.3 Grafische Variable
Einen anderen, von der Anwendung her gedachten Zugang zu den oben besprochenen visuellen Merkmalen findet Jacques Bertin. Bertin war ein bekannter Kartograph, der in den 60er Jahren ein Standardwerk zur graphischen Theorie und Visualisierung verfasst hat; die deutsche Übersetzung erschien 1974 (Bertin, 1974).
Das zentrale Konzept Bertins war das der graphischen Variablen, die die Dimensionen beschreiben, entlang derer ein Kartenzeichen bedeutungsvoll gestaltet werden kann. Das hört sich erstmal sehr abstrakt an; meint aber konkret ganz einfach: Welche Gestaltungsmöglichkeiten stehen bei der Erstellung einer Karte allgemein zur Verfügung. Bertin identifiziert die folgenden: Die Position auf einer zweidimensionalen Fläche, Farbe, Größe, Form, Textur, Orientierung, Helligkeit.
Diese Liste kommt uns bekannt vor: Das sind im Großen und Ganzen die visuellen Merkmale, die wir schon kennen. Die Merkmale, die im ersten Schritt der visuellen Wahrnehmung im visuellen Kortex durch spezialisierte Areale automatisch verarbeitet werden. Bertin hat diese Merkmale über den Umweg von Versuch und Irrtum durch seine Expertise in der Kartographie festlegen können. Es ist in der Wissenschaft immer beruhigend, wenn unterschiedliche Ansätze zu einem vergleichbaren Ergebnis kommen.
Bertins Beitrag geht aber noch weiter. Er kombiniert die zentralen visuellen Attribute mit typischen, grundlegenden visuellen Aufgaben und nimmt Stellung dazu, wie gut sich ein visuelles Merkmal für diese Aufgabe eignet.
Diese visuellen Aufgaben sind tatsächlich sehr elementar. Man könnte sie im Bereich der zweiten Stufe des Wahrnehmungsprozesses ansiedeln. Bertin nennt sie
- Assoziation: Kann mittels eines visuellen Merkmals ein Bezug zwischen Objekten hergestellt werden?
- Selektion: Kann mittels eines visuellen Merkmals ein Objekt aus einer Menge von Objekten herausgegriffen werden?
- Reihenfolge: Können Objekte anhand eines visuellen Merkmals sortiert werden?
- Quantität: Kann die eine metrische Information durch ein visuelles Merkmal dargestellt werden?
In der Darstellung links bilden die Aufgaben die Überschriften der Matrix-Spalten; die Zeilen werden durch wichtige Merkmale gebildet.
Die wichtigste Beobachtung ist, dass nicht alle Merkmale für alle Aufgaben gleich gut geeignet sind. Wir müssen nun nicht jede Zelle der Matrix besprechen. Über einige könnten wir wohl auch diskutieren. Wählen wir stattdessen einige der wichtigsten aus.
Was kann Farbe – bzw. was kann sie eben nicht? Über Farbe können sehr gut Bezüge zwischen Objekten gleicher Merkmalsausprägung hergestellt werden. Die Aufgabe “Werfen Sie Ihren Blick auf die grünen Kreise” ist leicht zu erfüllen (Assoziation). Ebenso leicht ist es, aus einer Menge verschiedenfarbiger Kreise eine bestimmte Farbe herauszugreifen (Selektion). Was aber nicht klappt: Objekte anhand ihres Farbtons zu sortieren (Reihenfolge). Die Zelle der Matrix ist daher auch leer.
Vielleicht regt sich an dieser Stelle Ihr Widerspruch. “Aber Farben sind doch sortiert. Wenn wir an das Lichtspektrum denken, das Licht nach Wellenlänge anordnet – Sichwort Regenbogen. Erst Blau, dann Grün, dann dann Gelb, dann Rot. Das ist doch eine Reihenfolge!?” – Das stimmt schon. Wir haben hier eine natürliche Reihenfolge von Lichtreizen, die wir mit Farbeindrücken in Verbindung bringen. Aber wir haben für die Reihenfolge der Farbeindrpcke kein intuitives Verständnis. Wir können zwei Lichtreize nicht einfach so anhand ihrer Wellenlänge in eine Reihe bringen. Wessen Wellenlänge ist größer, die von Grün oder die von Gelb? Vielleicht wissen Sie das sogar – aber nur, wenn sie es irgendwann mal gelernt und nicht vergessen haben.
Bei der Größe von Objekten ist das anders. Dieses visuelle Merkmal können wir sehr leicht dazu verwenden, Objekte zu sortieren. Das schaffen auch kleine Kinder. Erst links das kleinste Objekt und dann nach Größe aufsteigend bis hin zum größten Objekt rechts.
Wenn wir Farbe schon nicht zur Darstellung von Reihenfolge verwenden könne, eignet sich dieses visuelle Attribut insbesondere nicht dazu, Quantität darzustellen. Das eine ist die notwendige Voraussetzung für das andere.
Plakativ formuliert: Blau ist nicht mehr als Rot oder Gelb.
Natürlich gibt es aber andere Farbattribute, die wir zur Sortierung verwenden können. Das kann beispielsweise die Farbintensität (intensiver – weniger intensiv) oder die Helligkeit von Farbreizen (heller – weniger hell, also dunkler) sein. Das sind aber andere Qualitäten als der Farbton.
Die rechte Hälfte der Folie geht genauer auf die Darstellung quantitativer Information ein. Die Grundlage dafür liefert eine Studie von Cleveland & McGill (1984). Die Autoren untersuchen, wie genau unterschiedliche Darstellungsformate für quantitative Informationen interpretiert werden können.
Die Ergebnisse:
- Die Codierung über Farbe oder Helligkeit klappt nicht bzw. nur sehr schlecht.
- Wenn quantitative Information über Volumina repräsentiert wird, tun wir uns immer noch sehr schwer bei der genauen Interpretation. Stellen wir uns vor, der kleine Würfel stünde für die Ausprägung 10. Wofür steht dann der große Würfel? 20? 30? 50? – Wichtig: Es geht hier nicht um das Lösen eines Rätsels, für das es eine korrekte Antwort gibt. Die Tatsache, dass wir uns bei der automatischen Einschätzung offenbar recht uneinig sind, ist ein ausreichender Grund, eine solche Visualisierung nicht zu verwenden.
- Für Flächen gilt das eben Gesagte – nur nicht ganz so ausgeprägt. Noch immer ist die Verlässlichkeit unserer intuitiven Einschätzung quantitativer Information nicht sehr hoch; aber deutlich besser als für Volumen-Darstellungen.
- Wenn Winkel oder Steigungen verwendet werden, um metrische Informationen darzustellen, schneiden wir etwas besser als für Flächen ab. Winkeldarstellungen werden beispielsweise in Kreisdiagrammen verwendet. Aber auch bei dieser Visualisierungsvariante ist unsere Genauigkeit noch immer nicht zufriedenstellend. Wir haben keine verlässliche intuitive Einschätzung, ob ein Winkel dreimal (oder doch viermal?) so groß wie ein anderer ist.
- An der Spitze der Tabelle stehen zwei Codierungsvarianten, die sehr gut funktionieren: Länge und Position. Länge wird beispielsweise in Balken- oder Säulendiagrammen verwendet. Hier haben wir eine verlässliche intuitive Einschätzung, ob ein Balken etwa drei oder viermal so lang wie ein anderer ist. Das gilt auch für die Codierung über die Positionierung von Marken entlang einer Skala, wie sie beispielsweise bei klassischen Fieberthermometern oder bei Geschwindigkeitsanzeigen im Auto verwendet wird.
Nochmal kurz zurück zu Jacques Bertin. Sie erinnern sich vielleicht noch aus einer Statistikvorlesung an die verschiedenen Skalenniveaus von Daten. Auch diese lassen sich mit den visuellen Attributen Bertins kombinieren. Das ist vor allem bei der Gestaltung von Diagrammen hilfreich.
Die Abbildung habe ich vor einiger Zeit auf den Seiten der FU Berlin entdeckt. Danach sind Farbe, Orientierung und Form nur zur qualitativen Einordnung auf nominalem Niveau geeignet. Textur/Muster und Helligkeit haben eine ordinale Struktur und können damit zur Bildung von Reihenfolgen verwendet werden. Auf metrischem Skalenniveau (also Intervall- oder Verhältnisskalenniveau) befindet sich danach nur die Codierung über die Größe. Die Positionscodierung wird hier nicht erwähnt. Sie eignet sich aber auch zur metrischen Repräsentation.