zur Startseitezur Übersicht Texte
Aufmerksamkeit (5): AufmerksamkeitssprachenGedaechtnisspanne
Artikel 11 von 34

KommDesign.de — Texte — Aufmerksamkeit (6)

Fallstudien über das Textlayout

Woran man Wissenschaft erkennt? Sie ist schlecht zu Lesen
Visuelles Störfeuer: Hintergrundgrafiken
Die Arbeitspferde: Einzüge, Headlines und Listen
Ein Beispiel für griffiges Layout
Hervorhebung im Text

 
   

Aufmerksamkeitssteuerung ist nicht nur relevant, wenn es um Buttons, Icons, Farben, Bilder und Menüs geht. Das "Aufsetzen" sauberer, übersichtlicher Strukturen ist natürlich gerade auch bei der Formatierung von Text und der Abstimmung von Text, Tabellen und Bildern wichtig.

Dies liegt einerseits daran, dass roher, unbearbeiteter Text auf dem Bildschirm besonders schwer zu lesen ist. Als Faustregel kann man für den gleichen Text mit einer um 20-30% verlängerten Lesedauer am Monitor gegenüber einer Printvorlage ausgehen. Andererseits weiß man, dass Internet-Benutzer einen Text, für den sie sich nicht höllisch interessieren, ohnehin nicht lesen, sondern überfliegen ("scannen"). Sie erwarten also keine eintönigen Bleiwüsten, sondern ein visuell klar gegliedertes Layout, in welchem sie wichtige Schlüsselinformationen rasch finden, um Inhalte überblicken, bewerten und Leseentscheidungen treffen zu können.

 Woran man Wissenschaft erkennt? sie ist schlecht zu Lesen

Der folgende Text ist ein Beispiel, wie man es nicht machen sollte. Er ist ganz typisch für den Stil, in dem wissenschaftliche Abhandlungen im Web beerdigt werden.

Screenshot vom17.01.2002
Quelle: http://www.eecs.tufts.edu/~jacob/papers/barfield.html Link in neuem Fenster öffnen

Analysieren wir das Beispiel einmal etwas genauer. Der erste und wichtigste Punkt: Die Zeilen sind zu breit. Die durchschnittliche Zeichenzahl je Zeile ist größer als 150, also weit jenseits der 60-70 Zeichen, die nach den Standardregeln der Ergonomie noch als einigermaßen gut lesbar gelten. In der folgenden Grafik ist der Rand, der bei einer optimalen Formatierung eingehalten werden müßte, markiert:

 

 

 

 

 

 

 

 

 

= Link in neuem Fenster öffnen

 
zum Seitenanfang

Der Screenshot wurde bei einer Bildschirmauflösung von 1024 x 768 Pixeln aufgenommen, und die Überbreite ist natürlich eine Folge der Tatsache, dass der Text auf die gesamte Bildschirmbreite umgebrochen wird. Die Konsequenz hieraus ist klar:

Wer auch Lesern mit durchschnittlicher Lesemotivation erreichen möchte, sollte sich für feste Tabellenbreiten entscheiden und die Zeilenbreite für hohe Bildschirmauflösungen unter 100 Zeichen (als Maximalwert) halten.

Der Text, den Sie gerade lesen, ist in einer Tabellenspalte mit einer Breite von 550 Pixeln platziert und hat bei einer Bildschirmauflösung von 1024 x 768 Pixeln eine Breite von ca. 80 Zeichen.

Es gibt in dem oben gezeigten Layout auch keine Information, an der sich ein eiliger Leser orientieren könnte, alles erscheint gleich unwichtig. Kurzum: eine digitale Bleiwüste, die ironischerweise aus einem Text über Eye-Tracking stammt. Wenn man den Text mit einer Eye-Tracking Apparatur untersuchen würde, könnte man viele unnötige Blickbewegungen (Zwischenfixationen, Rücksprünge in den Textzeilen und Korrekturbewegungen beim Rücksprung vom Zeilenende zum Zeilenbeginn) beobachten. Die Leser eines solchen Textes erhalten keine Hilfe durch das Layout. Sie müssen ihre Aufmerksamkeit selbst steuern und dabei sehr sorgfältig und konzentriert vorgehen. Vor einem derart ermüdenden Layout sollte man sich hüten - selbst dann, wenn man etwas höllisch interessantes zu sagen hat

 
 
zum Seitenanfang

Visuelles Störfeuer: Hintergrundgrafiken

Wie man auf den ersten Blick sieht, ist das folgende Beispiel ebenfalls misslungen.

Screenshot vom17.01.2002
Quelle: http://hotwired.lycos.com/i-agent/95/29/waynew/waynew.html
Link in neuem Fenster öffnen

Zu der unvorteilhaften Formatierung (im Vergleich zum ersten Beispiel ist hier eigentlich nichts hinzuzufügen) kommt hier ein cooles Hintergrundbild, das vor allem am Zeilenanfang wie ein lautes Rauschen mit der Textinformation konkurriert. Beachten Sie auch die unabhängig von der Textur verlaufenden Kontrastwechsel. Dem Auge des Lesers wird hier eine überaus anstrengende und ermüdende Aufgabe zugemutet. Es muss sich im Verlauf einer einzelnen Zeile Text mehrmals auf unterschiedliche Helligkeitsunterschiede zwischen Schrift und Hintergrund einstellen. Wenn man diesen Effekt in die akustische Welt übersetzt, wäre das so, als würde jemand ...

permanent
am Lautstärkeregler der
                          Stereoanlage herumspielen
.

Immerhin kann man sehr schön erkennen wie die blau eingefärbten Hyperlinks aus dem Rauschen des Hintergrundbildes und dem unformatierten Text herausstechen (Ein Effekt, der auf das Ausnahmegesetz zurückgeht). Gerade in einer derart lesefeindlichen Umwelt werden die Links für rasch scannende Leser einen hohen Aufforderungscharakter haben.

Und natürlich gilt auch hier: gibt es nichts, das man mit etwas gestalterischer Kreativität nicht noch schlechter machen könnte...

Screenshot vom17.01.2002
Quelle: http://www.gwdg.de/~fsbio/bioinfo/systematik_gestern.html
Link in neuem Fenster öffnen

Wenn man diesen Text zu lesen versucht, wird man mit einem Grundprinzip des Lesens konfrontiert, das man als das Fluchtliniengesetz bezeichnen könnte. Unsere Aufmerksamkeit tendiert im allgemeinen dazu, sich an prägnanten Linien entlang zu bewegen. (Das "Gesetz der guten Fortsetzung" der Gestaltpsychologie). In dem hier gezeigten Text treten allerdings zu den Hauptorientierungslinien, die also durch die Zeilen erzeugt werden, Störlinien, die sich aus der Anordnung der Fische in der Hintergrundgrafik ergeben. In der folgenden Grafik ist dies durch Pfeile angedeutet. Man kann sich diese als "Kräfte" vorstellen, welche die Blickbewegungen wie magnetische Feldlinien von der waagrechten Zeilenflucht ab- und ins typographische Nirwana lenken.

Dieses Beispiel ist natürlich fast schon übertrieben unvorteilhaft (was nichts daran ändert, dass ich es genau so im Web gefunden habe), aber es geht natürlich ums Prinzip. Und das gilt für alle ästhetischen Hintergründe, seien es perlende Wassertropfen, edler Marmor oder Wurzelholzimitat:

Alle Hintergrundgrafiken erzeugen ein visuelles Störfeuer für die anspruchsvollen Steuervorgänge, welche für die Blickbewegungen beim Lesen erforderlich sind.

Man muss sich vergegenwärtigen, dass eine Blickbewegung, die auf dem Monitor mehrere Zentimeter ausmacht, durch millimeterweise Bewegungen des Augapfels zustande kommen. Lesen ist motorische Präzisionsarbeit und ergonomisches Layout trägt dieser Tatsache Rechnung.

 
zum Seitenanfang

Die Arbeitspferde: Einzüge, Headlines und Listen

Nachdem wir erfahren haben, wie man es nicht machen sollte, möchte ich noch einen Blick auf gutes Layout werfen. Den Prototyp zeigt die folgende Abbildung.

Screenshot vom17.01.2002
Quelle: http://www.iud.fh-darmstadt.de/iud/wwwmeth/pubk/ausarb/mmk/ausarb2c.htm
Link in neuem Fenster öffnen

Wenn Sie nun meinen, das sei nun aber nicht eben berauschend, gebe ich Ihnen recht. Tatsächlich wirkt die Sache sogar langweilig und ist für Fließtext auch nicht geeignet, aber ich möchte sie auch als Prototyp verstanden wissen. Und was immer man vom Look and Feel einer solchen Lösung halten mag: sie ist übersichtlich. Die Headlines, die verschiedenen Ebenen der Einrückung und die Listen sorgen für einen "aufgeräumten" Eindruck. Und man erkennt das Prinzip: Auch wenn man die dargestellten Inhalte nicht kennt, ist die hinter der Information stehende Logik oder Struktur visualisiert. Durch Platzierung, Abstände, Einrücken, Schriftgrößen und -stile werden

  •  Ebenen der Information,
  •  die Anzahl und Reihenfolge der Themen und
  •  deren Wichtigkeit

kodiert. Wenn diese Hinweise vorhanden sind, können Augenbewegungen einfach und effizient gesteuert werden - wenn nicht, wird die Leserin oder der Leser früher mit Lesen aufhören als uns lieb sein kann.

 
zum Seitenanfang
Ein Beispiel für "griffiges" Layout

Bevor ich dem Vorwurf des funktionsfixierten Banausen ausgesetzt werde, hier noch ein Beispiel, das - wie ich finde - nicht nur gelungen, sondern auch schön und nicht ganz alltäglich ist (wobei diese beiden zuerst genannten Aspekte natürlich meistens eng zusammenhängen).


Screenshot vom17.01.2002
Quelle: http://educorner.com/courses/ia/
Link in neuem Fenster öffnen

Das Interessante: Üblicherweise werden Subheadlines - Verzeihung, ich meine natürlich Zwischenüberschriften - in den Text hinein bzw. zwischen die Absätze platziert. Hier haben wir eine eigene Randspalte für die Zwischenüberschriften, der Text ist daneben angeordnet. Ein Leser kann also die Spalte der Überschriften rasch abscannen, um zu erfahren, was ihn in den seitlichen Absätzen erwartet. Die Information wird übersichtlich gruppiert und die Einfärbung der Zwischenüberschriften sorgt zusätzlich für Prägnanz.

 

Hervorhebung im Text

Abschließend noch einige Anmerkungen zur Steuerung der Aufmerksamkeit innerhalb von Fließtexten.

Aus Studien zum Leseverhalten im Web weiß man, dass Fließtexte vielfach nicht gelesen werden. Wer Aufmerksamkeit in einen Absatz hineinziehen möchte, muss deutlich sichtbare Marken für das Auge der Leser setzen. Hierfür ist Fettdruck die beste Möglichkeit (Intensitäts- und Größengesetz). Eine kursive Schrift eignet sich nicht gut als Hervorhebungstechnik, da sie sich nicht vom Hintergrund abhebt. Die geringe Auflösung des Bildschirms läßt Kursives zudem "zerfallen" - ein Effekt, der bei < face="Times New Roman, Times, serif">kleinen Serifenschriften< face="Arial, Helvetica, sans-serif"> besonders gravierend ist.
Natürlich kann man auch mit Farben arbeiten, allerdings gehen Farbinformationen beim Ausdruck oder beim Kopieren eines Dokuments verloren oder werden im Vergleich zu schwarzem Text blasser. Farben solltenunbedingt gesättigt sein, denn Pastellfarben wirken nicht als Blickfänger. Mit der Kombination farbig und fett ist man einigermaßen auf der sicheren Seite. Problematisch ist, wenn man eine Information für derart wichtig hält, dass man meint, alles hervorheben zu müssen. Es entsteht dann der paradoxe Effekt, dass - gemäß dem Ausnahmegesetz - die Information, die nicht hervorgehoben wird, den höchsten Zugeffekt für die Aufmerksamkeit des Lesers hat.

 

 
 
zum Seitenanfang
zur Startseitezur Übersicht Texte
Aufmerksamkeit (5): AufmerksamkeitssprachenGedaechtnisspanne

 
© Dr. Thomas Wirth Kommunikationsdesign - eMail: thomas.wirth@kommdesign.de
letzte Änderung dieser Seite am

URL dieser Seite: www.kommdesign.de/texte/aufmerk6.htm