|
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
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
|
|
|
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
|
|
|
|
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
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
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.
|
|
|
|
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
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.
|
|
|
|
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/
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. |
|
|
|
|
|