Die Kunst der Leserlichkeit

18. April 2018

Muss ein Nutzer beim Lesen eines Textes am Bildschirm die Augen zusammenkneifen, kann es zum einen an der Bildschirmhelligkeit liegen, oder daran, dass er den Text wegen des Hintergrundbildes nur schwer lesen kann. Letzteres lÀsst sich, wenn man die richtigen Farben und Kontraste wÀhlt, vermeiden.

Immer im Bilde

Bilder sind wie Magnete, die von Nutzern meist als erstes auf einer Seite betrachtet werden und ihre Aufmerksamkeit erregen. Geschickt platzierte Texte im oder auf dem Bild werden dadurch hÀufiger gelesen. Dies kann beim Design von Webseiten genutzt werden, um den Blick des Nutzers auf bestimmte Informationen bzw. Texte zu lenken, sofern sie auch inhaltlich zueinander passen. Oft werden Bilder deshalb als Hintergrund genutzt, auf dem der Text platziert wird.

Zeigen Bilder jedoch zu viel Inhalt oder Farbe und wirken somit „unruhig“, können sie vom Text ablenken. Wenn die Schriftfarbe wie in Abbildung 1 zu sehen ist, zu sehr dem Hintergrund Ă€hnelt, sodass der Text teilweise nicht mehr gelesen werden kann, wird vom Nutzer mehr Konzentration gefordert. Dies kann wiederum zum Abbruch des Lesens oder Verlassen der Seite fĂŒhren.


Abbildung 1: Bild mit nur schwachen Kontrasten zwischen Hintergrund und Text

Den Lesefluss nicht hemmen

Werden Texte in Bildern verwendet, sollte sowohl fĂŒr die Lesbarkeit als auch die Leserlichkeit gesorgt werden. Leserlich ist ein Text dann, wenn der Nutzer die einzelnen Zeichen erkennen und unterscheiden kann. Lesbar wird er dann, wenn der Lesefluss nicht unter der VerstĂ€ndlichkeit des Satzes leidet. Beides wird gewĂ€hrleistet, wenn Bild und Text scharf voneinander zu unterscheiden sind, beispielsweise durch dunkle Schrift auf hellem Hintergrund oder vice versa. Dies kann unter anderem auch durch eine Abdunkelung des Hintergrundbildes geschehen, was bei unruhigeren Bildern weniger Ablenkung schafft.

Besitzen Bilder wie beispielsweise in Abbildung 2 FlĂ€chen, die eine gleichmĂ€ĂŸige oder einfarbige Struktur aufweisen, macht es Sinn, den Text in diesen Bereich zu platzieren, um die Leserlichkeit zu steigern. Alternativ können die Stellen, auf die der Text platziert werden soll „entschĂ€rft“ werden, sodass die Konturen und Kontraste des Textes bzw. der Buchstaben besser zur Geltung kommen.


Abbildung 2: Der Text ist aufgrund der Platzierung auf einem gleichmĂ€ĂŸigen Hintergrund gut lesabr

Anstelle von unscharfen Bereichen bieten sich auch halbtransparente Textfelder an, die den Text vom Bild abheben, das Bild aber nicht komplett verdecken. Hierbei ist es allerdings wichtig, den Kontrast zwischen Bild und Textfeld nicht zu schwach zu gestalten, da dies die Lesbarkeit wiederum beeintrÀchtigt.

Gute Lesart fĂŒhrt zu schnellem VerstĂ€ndnis

Bilder sind Eyecatcher, die die Aufmerksamkeit der Nutzer erregen, weshalb es sich anbietet, hier wichtige Informationen zu platzieren. Dabei ist gute Leserlichkeit nicht nur wichtig, um auch Menschen mit beeintrĂ€chtigter SehfĂ€higkeit zu erreichen und somit Accessibility (im Sinne der DIN EN ISO 9241-171) zu gewĂ€hrleisten. Sie fördert zudem die SelbstbeschreibungsfĂ€higkeit gemĂ€ĂŸ DIN EN ISO 9241-110, denn gute Leserlichkeit durch klar erkennbare Worte fĂŒhrt zu gesteigerten Lesbarkeit und VerstĂ€ndnis der Information, sodass der Leser schnell erkennen kann, wovon der Text handelt.

Quelle: „Ensure High Contrast for Text Over Images“, https://www.nngroup.com/articles/text-over-images/

Diesen Beitrag bookmarken bei:
Bookmark bei: Yigg Bookmark bei: Webnews Bookmark bei: Technorati Bookmark bei: Mr. Wong Bookmark bei: Linkarena Bookmark bei: Del.icio.us Bookmark bei: Google Bookmark bei: Favoriten Bookmark bei: Facebook

Autor des Beitrags